dakedres/ronin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Progress, implementing color picker

Browse Source
This commit is contained in:
Devine Lu Linvega 2017-11-20 09:15:03 +13:00
parent 282a15f23d
commit 4ec5ba3a09
16 changed files with 44 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
README.md
View File

@ -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).

2
main.js
View File

@ -56,7 +56,7 @@ app.on('ready', () =>
is_shown = true;
})
// Open the DevTools.
// win.webContents.openDevTools()
win.webContents.openDevTools()
})
app.on('window-all-closed', () =>

3
sources/index.html
View File

@ -1,5 +1,6 @@
<html>
<!DOCTYPE html>
<head>
<meta charset='UTF-8'>
<script type="text/javascript" src="scripts/units/color.js"></script>
<script type="text/javascript" src="scripts/core/module.js"></script>

2
sources/links/main.css
View File

@ -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; }
#cursor_hint { position: absolute;top: 0px;right: 20px;color: white; font-family: courier; padding: 0px 10px; }

8
sources/scripts/core/commander.js
View File

@ -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];

6
sources/scripts/core/cursor.js
View File

@ -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; }

12
sources/scripts/core/docs.js
View File

@ -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";

4
sources/scripts/core/hint.js
View File

@ -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 = "")

9
sources/scripts/core/module.js
View File

@ -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+" ";

8
sources/scripts/core/query.js
View File

@ -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";

9
sources/scripts/layers/guide.js
View File

@ -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];

18
sources/scripts/modules/brush.js
View File

@ -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();
}

2
sources/scripts/modules/frame.js
View File

@ -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){

13
sources/scripts/modules/magnet.js
View File

@ -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};
}
}

18
sources/scripts/modules/path.js
View File

@ -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();
}

2
sources/scripts/modules/type.js
View File

@ -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);