From 4ec5ba3a09f202c39a9fc782fbe0d5eff6928cef Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Mon, 20 Nov 2017 09:15:03 +1300 Subject: [PATCH] Progress, implementing color picker --- README.md | 24 ------------------------ main.js | 2 +- sources/index.html | 3 ++- sources/links/main.css | 2 +- sources/scripts/core/commander.js | 8 -------- sources/scripts/core/cursor.js | 6 ++++-- sources/scripts/core/docs.js | 12 ------------ sources/scripts/core/hint.js | 4 +++- sources/scripts/core/module.js | 9 ++------- sources/scripts/core/query.js | 8 +------- sources/scripts/layers/guide.js | 9 ++++++++- sources/scripts/modules/brush.js | 18 +++++------------- sources/scripts/modules/frame.js | 2 +- sources/scripts/modules/magnet.js | 13 +++++++------ sources/scripts/modules/path.js | 18 +++++++++--------- sources/scripts/modules/type.js | 2 -- 16 files changed, 44 insertions(+), 96 deletions(-) diff --git a/README.md b/README.md index dc0c1b0..fabe2b1 100644 --- a/README.md +++ b/README.md @@ -17,10 +17,6 @@ Missing documentation. - `remove:` Remove last pointer - `pick:x,y` Set brush color to a position's pixel. -### Settings -- `size`, default 4 -- `color`, default #000 - ## frame Manager for the canvas size @@ -33,8 +29,6 @@ Manager for the canvas size - `fill:#f00` Fill entire canvas with color - `inspect:` View canvas details -### Settings - ## io File import/export tools. @@ -45,8 +39,6 @@ File import/export tools. - `draw:X,Y|WxH` Draw the loaded image pixels. - `save:jpg/png` Export canvas. -### Settings - ## path Trace lines and draw shapes. @@ -56,11 +48,6 @@ Trace lines and draw shapes. - `fill:x,y&` - `svg:M0,0 L100,100` -### Settings -- `thickness`, default 4 -- `color`, default red -- `cap`, default square - ## magnet Cursor magnetisation settings, changes are reflected on the grid layer. @@ -69,10 +56,6 @@ Cursor magnetisation settings, changes are reflected on the grid layer. - `lock:10` Magnetize cursor - `unlock:` Release cursor -### Settings -- `size`, default 0 -- `step`, default 4 - ## filter Pixel filter @@ -81,8 +64,6 @@ Pixel filter - `balance:#ff0033` Filter color balance. - `saturation:0.5,0.5` Filter color saturation. -### Settings - ## type Missing documentation. @@ -90,11 +71,6 @@ Missing documentation. ### Methods - `write:text&x,y|WxH` Draw text -### Settings -- `color`, default #000000 -- `font`, default Gotham Light -- `anchor`, default center - ## License See the [LICENSE](LICENSE.md) file for license rights and limitations (CC). diff --git a/main.js b/main.js index 1883ce5..30cae61 100644 --- a/main.js +++ b/main.js @@ -56,7 +56,7 @@ app.on('ready', () => is_shown = true; }) // Open the DevTools. - // win.webContents.openDevTools() + win.webContents.openDevTools() }) app.on('window-all-closed', () => diff --git a/sources/index.html b/sources/index.html index 5f42bc7..b7b191b 100644 --- a/sources/index.html +++ b/sources/index.html @@ -1,5 +1,6 @@ - + + diff --git a/sources/links/main.css b/sources/links/main.css index d87a9b4..1f1cf51 100644 --- a/sources/links/main.css +++ b/sources/links/main.css @@ -20,4 +20,4 @@ yu { display:block; } #hint i { font-style: italic; } #hint .autocomplete { background:white; color:black; } -#cursor_hint { position: absolute;top: 0px;right: 20px;color: white; } \ No newline at end of file +#cursor_hint { position: absolute;top: 0px;right: 20px;color: white; font-family: courier; padding: 0px 10px; } \ No newline at end of file diff --git a/sources/scripts/core/commander.js b/sources/scripts/core/commander.js index 4ab40ea..91b8ec9 100644 --- a/sources/scripts/core/commander.js +++ b/sources/scripts/core/commander.js @@ -18,14 +18,6 @@ function Commander() if(q.raw.indexOf("$") > -1){ console.log("Variables present"); return; } if(q.raw.indexOf(";") > -1){ this.validate_multi(q); return; } - // Update settings - for(setting_id in q.settings){ - var setting_value = q.settings[setting_id]; - if(!ronin.modules[q.module].settings[setting_id]){ console.log("Missing setting",setting_id); return; } - ronin.modules[q.module].settings[setting_id] = setting_value; - } - ronin.modules[q.module].routes = q.routes; - // Run methods for(method_id in q.methods){ var method_param = q.methods[method_id]; diff --git a/sources/scripts/core/cursor.js b/sources/scripts/core/cursor.js index 8f05f90..3fee7aa 100644 --- a/sources/scripts/core/cursor.js +++ b/sources/scripts/core/cursor.js @@ -8,12 +8,15 @@ function Cursor(rune) this.query = null; this.mode = "vertex"; + this.color = "#f0f" + this.size = 4; + this.draw_cursor = function(pos,touch = false) { this.clear(); var ctx = this.context(); - var radius = ronin.brush.settings.size; + var radius = ronin.cursor.size; ctx.beginPath(); ctx.arc(pos.x * 2, pos.y * 2, radius, 0, 2 * Math.PI, false); @@ -110,7 +113,6 @@ function Cursor(rune) return {x:a.x-b.x,y:a.y-b.y}; } - this.inject_query = function() { if(ronin.cursor.query && ronin.cursor.query.indexOf("$") < 0){ return; } diff --git a/sources/scripts/core/docs.js b/sources/scripts/core/docs.js index 30cd4ca..97fc770 100644 --- a/sources/scripts/core/docs.js +++ b/sources/scripts/core/docs.js @@ -37,7 +37,6 @@ function Docs() html += "## "+module_name+"\n\n"; html += module.docs+"\n\n"; html += this.print_methods(module.methods)+"\n"; - html += this.print_settings(module.settings)+"\n"; } return html+"\n"; } @@ -53,17 +52,6 @@ function Docs() return html; } - this.print_settings = function(settings) - { - var html = "### Settings\n"; - - for(setting_name in settings){ - var setting_val = settings[setting_name]; - html += "- `"+setting_name+"`, default "+setting_val+"\n"; - } - return html; - } - this.print_license = function() { html = "## License\n"; diff --git a/sources/scripts/core/hint.js b/sources/scripts/core/hint.js index b0e4df0..e88a53d 100644 --- a/sources/scripts/core/hint.js +++ b/sources/scripts/core/hint.js @@ -9,7 +9,9 @@ function Hint() { ronin.commander.el.appendChild(this.el); ronin.commander.el.appendChild(this.cursor_hint_el); - this.cursor_hint_el.innerHTML = ""; + this.cursor_hint_el.innerHTML = "●"; + this.cursor_hint_el.title = ronin.cursor.color; + this.cursor_hint_el.style.color = ronin.cursor.color; } this.find_autocomplete = function(collection,append = "") diff --git a/sources/scripts/core/module.js b/sources/scripts/core/module.js index 3a351ee..7d4af52 100644 --- a/sources/scripts/core/module.js +++ b/sources/scripts/core/module.js @@ -2,7 +2,7 @@ function Module(name,docs = "Missing documentation.") { this.name = name; this.methods = {}; - this.settings = {}; + this.routes = {}; this.ports = {}; this.docs = docs; @@ -15,12 +15,7 @@ function Module(name,docs = "Missing documentation.") var v = this.methods[id]; html += v.hint(); } - - for(setting_id in this.settings){ - var setting_value = this.settings[setting_id]; - html += setting_id+"="+setting_value+" "; - } - + for(route_id in this.routes){ var route_val = this.routes[route_id]; html += route_id+"->"+route_val+" "; diff --git a/sources/scripts/core/query.js b/sources/scripts/core/query.js index 36d141e..274e92c 100644 --- a/sources/scripts/core/query.js +++ b/sources/scripts/core/query.js @@ -8,9 +8,9 @@ function Query(query_str = "") var parts = query_str.split(" ").splice(1); this.raw = parts.join(" "); this.methods = {}; - this.settings = {}; this.routes = {}; this.last = query_str.indexOf(" ") > -1 ? query_str.split(" ")[query_str.split(" ").length-1] : query_str; + this.last_char = query_str.trim().substr(query_str.trim().length-1,1); for(part_id in parts){ var part = parts[part_id]; @@ -20,12 +20,6 @@ function Query(query_str = "") var value = part.indexOf(":") > -1 ? part.split(":")[1] : part; this.methods[key] = parse_parameters(value); } - // Setting - else if(part.indexOf("=") > -1){ - var key = part.indexOf("=") > -1 ? part.split("=")[0] : "any"; - var value = part.indexOf("=") > -1 ? part.split("=")[1] : part; - this.settings[key] = parse_parameters(value); - } // Port else if(part.indexOf("->") > -1){ var key = part.indexOf("->") > -1 ? part.split("->")[0] : "any"; diff --git a/sources/scripts/layers/guide.js b/sources/scripts/layers/guide.js index 16ee43b..0bb3419 100644 --- a/sources/scripts/layers/guide.js +++ b/sources/scripts/layers/guide.js @@ -20,6 +20,9 @@ function Guide() this.draw_inspector(); } + // Color picker + this.toggle_color_picker(ronin.commander.query().last_char == "#") + // Brush mirrors for(id in ronin.brush.pointers){ var pointer = ronin.brush.pointers[id]; @@ -34,6 +37,11 @@ function Guide() } } + this.toggle_color_picker = function(show) + { + console.log("Picker",show) + } + this.draw = function(u = null) { if(u && u.x1 != null && u.y1 != null && u.x2 != null && u.y2 != null){ @@ -123,7 +131,6 @@ function Guide() this.find_units = function(q = ronin.commander.query()) { var a = []; - if(q.settings.anchor){ return q.settings.anchor; } for(method_id in q.methods){ var params = q.methods[method_id]; diff --git a/sources/scripts/modules/brush.js b/sources/scripts/modules/brush.js index 93e1f96..6cb50e1 100644 --- a/sources/scripts/modules/brush.js +++ b/sources/scripts/modules/brush.js @@ -2,18 +2,10 @@ function Brush() { Module.call(this,"brush"); - this.settings = {size:4,color:"#000"}; - this.pointers = [ new Pointer({offset:{x:0,y:0}}) ]; - this.ports.speed = new Port(this,"speed",false,true,0,50,"The cursor speed"); - this.ports.distance = new Port(this,"distance",false,true,0,9999,"The cursor distance"); - this.ports.red = new Port(this,"red",true,true,0,255,"The brush color value(red)"); - this.ports.green = new Port(this,"green",true,true,0,255,"The brush color value(green)"); - this.ports.blue = new Port(this,"blue",true,true,0,255,"The brush color value(blue)"); - this.methods.add = new Method("add","x,y&mirror_x,mirror_y","Add a new pointer to the brush",function(q){ var offset = q.length ? q[0] : q; var mirror = q.length ? q[1] : null; @@ -28,14 +20,14 @@ function Brush() var pixel = ronin.render.context().getImageData(q.x*2, q.y*2, 1, 1).data; var c = new Color().rgb_to_hex(pixel); var color = new Color(c); - ronin.brush.settings.color = color.hex; + ronin.cursor.color = color.hex; }) this.absolute_thickness = 0; this.thickness = function(line) { - var t = this.settings.size * this.ports.speed; + var t = ronin.cursor.size * this.ports.speed; this.absolute_thickness = t > this.absolute_thickness ? this.absolute_thickness+0.5 : this.absolute_thickness-0.5; return this.absolute_thickness * 3; } @@ -75,7 +67,7 @@ function Brush() this.mod_size = function(mod) { - this.settings.size = clamp(this.settings.size+mod,1,100); + ronin.cursor.size = clamp(ronin.cursor.size+mod,1,100); } function clamp(v, min, max) @@ -100,7 +92,7 @@ function Pointer(options) this.color = function(line) { - return ronin.brush.settings.color; + return ronin.cursor.color; } this.stroke = function(line) @@ -118,7 +110,7 @@ function Pointer(options) ctx.lineTo((line.to.x * 2) + this.options.offset.x,(line.to.y * 2) + this.options.offset.y); ctx.lineCap="round"; ctx.lineWidth = this.thickness(line); - ctx.strokeStyle = ronin.brush.settings.color; + ctx.strokeStyle = ronin.cursor.color; ctx.stroke(); ctx.closePath(); } diff --git a/sources/scripts/modules/frame.js b/sources/scripts/modules/frame.js index f4be960..2a3c4c1 100644 --- a/sources/scripts/modules/frame.js +++ b/sources/scripts/modules/frame.js @@ -30,7 +30,7 @@ function Frame() }); this.methods.fill = new Method("fill","#f00","Fill entire canvas with color",function(q){ - ronin.render.fill(q ? q : ronin.brush.settings.color); + ronin.render.fill(q ? q : ronin.cursor.color); }); this.methods.inspect = new Method("inspect","","View canvas details",function(q){ diff --git a/sources/scripts/modules/magnet.js b/sources/scripts/modules/magnet.js index 6bb42a7..edd16fd 100644 --- a/sources/scripts/modules/magnet.js +++ b/sources/scripts/modules/magnet.js @@ -2,27 +2,28 @@ function Magnet() { Module.call(this,"magnet","Cursor magnetisation settings, changes are reflected on the grid layer."); - this.settings = {size:0,step:4}; + this.size = 0; + this.step = 4; this.methods.lock = new Method("lock","10","Magnetize cursor",function(q){ var size = parseInt(q); if(size < 5){ this.unlock(); return; } - ronin.magnet.settings.size = size; - ronin.grid.draw(size,ronin.magnet.settings.step); + ronin.magnet.size = size; + ronin.grid.draw(size,ronin.magnet.step); }) this.methods.unlock = new Method("unlock","","Release cursor",function(q){ - ronin.magnet.settings.size = 0; + ronin.magnet.size = 0; ronin.grid.clear(); }) this.filter = function(pos) { - if(this.settings.size < 5){ + if(this.size < 5){ return pos; } - var s = this.settings.size; + var s = this.size; return {x:parseInt(pos.x/s)*s,y:parseInt(pos.y/s)*s}; } } \ No newline at end of file diff --git a/sources/scripts/modules/path.js b/sources/scripts/modules/path.js index 318063b..99adff8 100644 --- a/sources/scripts/modules/path.js +++ b/sources/scripts/modules/path.js @@ -2,7 +2,7 @@ function Path() { Module.call(this,"path","Trace lines and draw shapes."); - this.settings = {thickness:4,color:"red",cap:"square"}; + this.settings = {cap:"square"}; this.methods.stroke = new Method("stroke","x,y&","",function(q){ ronin.preview.clear(); @@ -13,8 +13,8 @@ function Path() ctx.beginPath(); ctx.lineCap = ronin.path.settings.cap; - ctx.lineWidth = ronin.path.settings.thickness; - ctx.strokeStyle = ronin.path.settings.color; + ctx.lineWidth = ronin.cursor.size; + ctx.strokeStyle = ronin.cursor.color; ctx.stroke(new Path2D(path)); ctx.closePath(); }); @@ -28,8 +28,8 @@ function Path() ctx.beginPath(); ctx.lineCap = ronin.path.settings.cap; - ctx.lineWidth = ronin.path.settings.thickness; - ctx.fillStyle = ronin.path.settings.color; + ctx.lineWidth = ronin.cursor.size; + ctx.fillStyle = ronin.cursor.color; ctx.fill(new Path2D(path)); ctx.closePath(); }); @@ -39,8 +39,8 @@ function Path() var ctx = ronin.render.context(); ctx.beginPath(); ctx.lineCap = ronin.path.settings.cap; - ctx.lineWidth = ronin.path.settings.thickness; - ctx.strokeStyle = ronin.path.settings.color; + ctx.lineWidth = ronin.cursor.size; + ctx.strokeStyle = ronin.cursor.color; ctx.stroke(new Path2D(path)); ctx.closePath(); }); @@ -55,8 +55,8 @@ function Path() var ctx = ronin.preview.context(); ctx.beginPath(); ctx.lineCap = q.settings.cap ? q.settings.cap : ronin.path.settings.cap; - ctx.lineWidth = q.settings.thickness ? q.settings.thickness : ronin.path.settings.thickness; - ctx.strokeStyle = q.settings.color ? q.settings.color : ronin.path.settings.color; + ctx.lineWidth = ronin.cursor.size; + ctx.strokeStyle = ronin.cursor.color; ctx.stroke(new Path2D(path)); ctx.closePath(); } diff --git a/sources/scripts/modules/type.js b/sources/scripts/modules/type.js index e357a7a..c0799c9 100644 --- a/sources/scripts/modules/type.js +++ b/sources/scripts/modules/type.js @@ -10,8 +10,6 @@ function Type() var size = rect.height * 2 ronin.preview.clear(); - console.log(ronin.type.settings); - ronin.render.context().textAlign = ronin.type.settings.anchor; ronin.render.context().font = size+"px "+ronin.type.settings.font.replace("+"," "); ronin.render.context().fillText(q[0].replace("+"," "),rect.x * 2,(rect.y * 2)+size);