Let's get this party started
This commit is contained in:
Devine Lu Linvega
@@ -1,230 +1,216 @@
|
||||
function Guide()
|
||||
{
|
||||
Layer.call(this);
|
||||
|
||||
this.el.id = "guide";
|
||||
this.inspect = true;
|
||||
function Guide () {
|
||||
Layer.call(this)
|
||||
|
||||
this.update = function()
|
||||
{
|
||||
this.clear();
|
||||
this.el.id = 'guide'
|
||||
this.inspect = true
|
||||
|
||||
var units = this.find_units();
|
||||
this.update = function () {
|
||||
this.clear()
|
||||
|
||||
if(this.inspect){
|
||||
this.draw_inspector();
|
||||
var units = this.find_units()
|
||||
|
||||
if (this.inspect) {
|
||||
this.draw_inspector()
|
||||
}
|
||||
|
||||
if(ronin.commander.input_el.value == "~"){
|
||||
this.toggle_color_picker(true);
|
||||
if (ronin.commander.input_el.value == '~') {
|
||||
this.toggle_color_picker(true)
|
||||
}
|
||||
|
||||
// Brush mirrors
|
||||
for(id in ronin.brush.pointers){
|
||||
var pointer = ronin.brush.pointers[id];
|
||||
if(!pointer.options.mirror){ continue; }
|
||||
units.push({x1:pointer.options.mirror.x,y1:0,x2:pointer.options.mirror.x,y2:ronin.frame.height})
|
||||
for (id in ronin.brush.pointers) {
|
||||
var pointer = ronin.brush.pointers[id]
|
||||
if (!pointer.options.mirror) { continue }
|
||||
units.push({ x1: pointer.options.mirror.x, y1: 0, x2: pointer.options.mirror.x, y2: ronin.frame.height })
|
||||
}
|
||||
|
||||
if(units.length == 0){ return; }
|
||||
|
||||
for(i in units){
|
||||
this.draw(units[i]);
|
||||
if (units.length == 0) { return }
|
||||
|
||||
for (i in units) {
|
||||
this.draw(units[i])
|
||||
}
|
||||
}
|
||||
|
||||
this.toggle = function()
|
||||
{
|
||||
this.toggle = function () {
|
||||
this.el.style.opacity = this.el.style.opacity == 0 ? 1 : 0
|
||||
}
|
||||
|
||||
this.toggle_color_picker = function(show)
|
||||
{
|
||||
if(!show){ return; }
|
||||
var originalData = ronin.cursor.target.context().getImageData(0, 0, ronin.frame.width*2, ronin.frame.height*2);
|
||||
var data = originalData.data;
|
||||
for(var i = 0; i < data.length; i += 4) {
|
||||
var x = i % (ronin.frame.width*8)
|
||||
var y = i / (ronin.frame.width*32)
|
||||
data[i] = x/32;
|
||||
data[i + 1] = 255 - (x/32);
|
||||
data[i + 2] = y;
|
||||
data[i + 3] = 255;
|
||||
this.toggle_color_picker = function (show) {
|
||||
if (!show) { return }
|
||||
var originalData = ronin.cursor.target.context().getImageData(0, 0, ronin.frame.width * 2, ronin.frame.height * 2)
|
||||
var data = originalData.data
|
||||
for (var i = 0; i < data.length; i += 4) {
|
||||
var x = i % (ronin.frame.width * 8)
|
||||
var y = i / (ronin.frame.width * 32)
|
||||
data[i] = x / 32
|
||||
data[i + 1] = 255 - (x / 32)
|
||||
data[i + 2] = y
|
||||
data[i + 3] = 255
|
||||
}
|
||||
ronin.layers.guide.context().putImageData(originalData, 0, 0);
|
||||
ronin.layers.guide.context().putImageData(originalData, 0, 0)
|
||||
}
|
||||
|
||||
this.draw = function(u = null)
|
||||
{
|
||||
if(u && u.x1 != null && u.y1 != null && u.x2 != null && u.y2 != null){
|
||||
this.draw_line({x:u.x1,y:u.y1},{x:u.x2,y:u.y2})
|
||||
this.draw = function (u = null) {
|
||||
if (u && u.x1 != null && u.y1 != null && u.x2 != null && u.y2 != null) {
|
||||
this.draw_line({ x: u.x1, y: u.y1 }, { x: u.x2, y: u.y2 })
|
||||
}
|
||||
|
||||
if(u && u.x && u.y){
|
||||
this.draw_pos(u);
|
||||
if (u && u.x && u.y) {
|
||||
this.draw_pos(u)
|
||||
}
|
||||
if(u && u.width && u.height){
|
||||
this.draw_rect(u);
|
||||
this.draw_pos({x:u.x + (u.width/2),y:u.y + (u.height/2)});
|
||||
if (u && u.width && u.height) {
|
||||
this.draw_rect(u)
|
||||
this.draw_pos({ x: u.x + (u.width / 2), y: u.y + (u.height / 2) })
|
||||
}
|
||||
}
|
||||
|
||||
this.draw_rect = function(u)
|
||||
{
|
||||
var ctx = this.context();
|
||||
this.draw_rect = function (u) {
|
||||
var ctx = this.context()
|
||||
|
||||
u.x = !u.x ? 0 : u.x;
|
||||
u.y = !u.y ? 0 : u.y;
|
||||
u.x = !u.x ? 0 : u.x
|
||||
u.y = !u.y ? 0 : u.y
|
||||
|
||||
var offset = {x:u.x * 2, y:u.y * 2};
|
||||
var rect = {width:u.width * 2,height:u.height * 2};
|
||||
var offset = { x: u.x * 2, y: u.y * 2 }
|
||||
var rect = { width: u.width * 2, height: u.height * 2 }
|
||||
|
||||
// Outline
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.globalCompositeOperation="source-over";
|
||||
ctx.moveTo(offset.x,offset.y);
|
||||
ctx.lineTo(offset.x + rect.width,offset.y);
|
||||
ctx.lineTo(offset.x + rect.width,offset.y + rect.height);
|
||||
ctx.lineTo(offset.x,offset.y + rect.height);
|
||||
ctx.lineTo(offset.x,offset.y);
|
||||
ctx.lineCap="round";
|
||||
ctx.lineWidth = 2;
|
||||
ctx.strokeStyle = "#000";
|
||||
ctx.stroke();
|
||||
ctx.closePath();
|
||||
ctx.beginPath()
|
||||
ctx.globalCompositeOperation = 'source-over'
|
||||
ctx.moveTo(offset.x, offset.y)
|
||||
ctx.lineTo(offset.x + rect.width, offset.y)
|
||||
ctx.lineTo(offset.x + rect.width, offset.y + rect.height)
|
||||
ctx.lineTo(offset.x, offset.y + rect.height)
|
||||
ctx.lineTo(offset.x, offset.y)
|
||||
ctx.lineCap = 'round'
|
||||
ctx.lineWidth = 2
|
||||
ctx.strokeStyle = '#000'
|
||||
ctx.stroke()
|
||||
ctx.closePath()
|
||||
}
|
||||
|
||||
this.draw_line = function (u1, u2, color = '#000') {
|
||||
var ctx = this.context()
|
||||
|
||||
this.draw_line = function(u1,u2, color = "#000")
|
||||
{
|
||||
var ctx = this.context();
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.globalCompositeOperation="source-over";
|
||||
ctx.moveTo(u1.x * 2,u1.y * 2);
|
||||
ctx.lineTo(u2.x * 2,u2.y * 2);
|
||||
ctx.lineCap="round";
|
||||
ctx.lineWidth = 0.5;
|
||||
ctx.strokeStyle = color;
|
||||
ctx.stroke();
|
||||
ctx.closePath();
|
||||
ctx.beginPath()
|
||||
ctx.globalCompositeOperation = 'source-over'
|
||||
ctx.moveTo(u1.x * 2, u1.y * 2)
|
||||
ctx.lineTo(u2.x * 2, u2.y * 2)
|
||||
ctx.lineCap = 'round'
|
||||
ctx.lineWidth = 0.5
|
||||
ctx.strokeStyle = color
|
||||
ctx.stroke()
|
||||
ctx.closePath()
|
||||
}
|
||||
|
||||
this.draw_pos = function(u)
|
||||
{
|
||||
var ctx = this.context();
|
||||
this.draw_pos = function (u) {
|
||||
var ctx = this.context()
|
||||
|
||||
var offset = 2;
|
||||
var radius = 5;
|
||||
var offset = 2
|
||||
var radius = 5
|
||||
|
||||
var pos = {x:u.x * 2, y:u.y * 2};
|
||||
var pos = { x: u.x * 2, y: u.y * 2 }
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.globalCompositeOperation="source-over";
|
||||
ctx.moveTo(pos.x+offset,pos.y);
|
||||
ctx.lineTo(pos.x+radius,pos.y);
|
||||
ctx.moveTo(pos.x,pos.y+offset);
|
||||
ctx.lineTo(pos.x,pos.y+radius);
|
||||
ctx.moveTo(pos.x-offset,pos.y);
|
||||
ctx.lineTo(pos.x-radius,pos.y);
|
||||
ctx.moveTo(pos.x,pos.y-offset);
|
||||
ctx.lineTo(pos.x,pos.y-radius);
|
||||
ctx.lineCap="round";
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeStyle = "#000";
|
||||
ctx.stroke();
|
||||
ctx.lineWidth = 2;
|
||||
ctx.strokeStyle = "#fff";
|
||||
ctx.stroke();
|
||||
ctx.closePath();
|
||||
ctx.beginPath()
|
||||
ctx.globalCompositeOperation = 'source-over'
|
||||
ctx.moveTo(pos.x + offset, pos.y)
|
||||
ctx.lineTo(pos.x + radius, pos.y)
|
||||
ctx.moveTo(pos.x, pos.y + offset)
|
||||
ctx.lineTo(pos.x, pos.y + radius)
|
||||
ctx.moveTo(pos.x - offset, pos.y)
|
||||
ctx.lineTo(pos.x - radius, pos.y)
|
||||
ctx.moveTo(pos.x, pos.y - offset)
|
||||
ctx.lineTo(pos.x, pos.y - radius)
|
||||
ctx.lineCap = 'round'
|
||||
ctx.lineWidth = 4
|
||||
ctx.strokeStyle = '#000'
|
||||
ctx.stroke()
|
||||
ctx.lineWidth = 2
|
||||
ctx.strokeStyle = '#fff'
|
||||
ctx.stroke()
|
||||
ctx.closePath()
|
||||
}
|
||||
|
||||
this.find_units = function(q = ronin.commander.query())
|
||||
{
|
||||
var a = [];
|
||||
this.find_units = function (q = ronin.commander.query()) {
|
||||
var a = []
|
||||
|
||||
for(method_id in q.methods){
|
||||
var params = q.methods[method_id];
|
||||
if(params.from && params.to){
|
||||
a = a.concat(params.from);
|
||||
a = a.concat(params.to);
|
||||
}
|
||||
else{
|
||||
a = a.concat(params);
|
||||
for (method_id in q.methods) {
|
||||
var params = q.methods[method_id]
|
||||
if (params.from && params.to) {
|
||||
a = a.concat(params.from)
|
||||
a = a.concat(params.to)
|
||||
} else {
|
||||
a = a.concat(params)
|
||||
}
|
||||
}
|
||||
return a;
|
||||
return a
|
||||
}
|
||||
|
||||
this.draw_inspector = function()
|
||||
{
|
||||
var color = "black"
|
||||
this.draw_inspector = function () {
|
||||
var color = 'black'
|
||||
|
||||
// Center
|
||||
this.draw_line({x:0,y:ronin.frame.height/2},{x:10,y:ronin.frame.height/2},color);
|
||||
this.draw_line({x:ronin.frame.width-10,y:ronin.frame.height/2},{x:ronin.frame.width,y:ronin.frame.height/2},color);
|
||||
this.draw_line({x:(ronin.frame.width/2)-10,y:ronin.frame.height/2},{x:(ronin.frame.width/2)+10,y:ronin.frame.height/2},color);
|
||||
this.draw_line({x:ronin.frame.width/2,y:0},{x:ronin.frame.width/2,y:10},color);
|
||||
this.draw_line({x:ronin.frame.width/2,y:ronin.frame.height-10},{x:ronin.frame.width/2,y:ronin.frame.height},color);
|
||||
this.draw_line({x:ronin.frame.width/2,y:(ronin.frame.height/2)-10},{x:ronin.frame.width/2,y:(ronin.frame.height/2)+10},color);
|
||||
this.draw_line({ x: 0, y: ronin.frame.height / 2 }, { x: 10, y: ronin.frame.height / 2 }, color)
|
||||
this.draw_line({ x: ronin.frame.width - 10, y: ronin.frame.height / 2 }, { x: ronin.frame.width, y: ronin.frame.height / 2 }, color)
|
||||
this.draw_line({ x: (ronin.frame.width / 2) - 10, y: ronin.frame.height / 2 }, { x: (ronin.frame.width / 2) + 10, y: ronin.frame.height / 2 }, color)
|
||||
this.draw_line({ x: ronin.frame.width / 2, y: 0 }, { x: ronin.frame.width / 2, y: 10 }, color)
|
||||
this.draw_line({ x: ronin.frame.width / 2, y: ronin.frame.height - 10 }, { x: ronin.frame.width / 2, y: ronin.frame.height }, color)
|
||||
this.draw_line({ x: ronin.frame.width / 2, y: (ronin.frame.height / 2) - 10 }, { x: ronin.frame.width / 2, y: (ronin.frame.height / 2) + 10 }, color)
|
||||
|
||||
var ctx = this.context();
|
||||
var ctx = this.context()
|
||||
|
||||
var w = ronin.frame.width * 2;
|
||||
var h = ronin.frame.height * 2;
|
||||
var angle = 45;
|
||||
|
||||
ctx.translate(w/2,h/2);
|
||||
var w = ronin.frame.width * 2
|
||||
var h = ronin.frame.height * 2
|
||||
var angle = 45
|
||||
|
||||
ctx.rotate(angle*Math.PI/180);
|
||||
ctx.translate(w / 2, h / 2)
|
||||
|
||||
this.line(ctx,-w,0,w,0,color);
|
||||
ctx.rotate(angle * Math.PI / 180)
|
||||
|
||||
this.line(ctx,w*0.4,-h,w*0.4,h,color);
|
||||
this.line(ctx,-w*0.4,-h,-w*0.4,h,color);
|
||||
this.line(ctx, -w, 0, w, 0, color)
|
||||
|
||||
this.line(ctx,-w,h*0.25,w,h*0.25,color);
|
||||
this.line(ctx,-w,-h*0.25,w,-h*0.25,color);
|
||||
this.line(ctx, w * 0.4, -h, w * 0.4, h, color)
|
||||
this.line(ctx, -w * 0.4, -h, -w * 0.4, h, color)
|
||||
|
||||
this.line(ctx,w*0.1,0,w*0.1,h,color);
|
||||
this.line(ctx,-w*0.1,0,-w*0.1,-h,color);
|
||||
this.line(ctx, -w, h * 0.25, w, h * 0.25, color)
|
||||
this.line(ctx, -w, -h * 0.25, w, -h * 0.25, color)
|
||||
|
||||
this.circle(ctx,w*0.4,-h*0.25,w*0.05,1,1.5,color);
|
||||
this.circle(ctx,-w*0.4,h*0.25,w*0.05,0,0.5,color);
|
||||
this.line(ctx, w * 0.1, 0, w * 0.1, h, color)
|
||||
this.line(ctx, -w * 0.1, 0, -w * 0.1, -h, color)
|
||||
|
||||
ctx.font = "5px Arial";
|
||||
ctx.fillStyle = color;
|
||||
ctx.fillText(angle+"'",(w*0.4)+10,10);
|
||||
this.circle(ctx, w * 0.4, -h * 0.25, w * 0.05, 1, 1.5, color)
|
||||
this.circle(ctx, -w * 0.4, h * 0.25, w * 0.05, 0, 0.5, color)
|
||||
|
||||
ctx.font = "5px Arial";
|
||||
ctx.fillStyle = color;
|
||||
ctx.fillText(angle+"'",(-w*0.4)-20,-10);
|
||||
ctx.font = '5px Arial'
|
||||
ctx.fillStyle = color
|
||||
ctx.fillText(angle + "'", (w * 0.4) + 10, 10)
|
||||
|
||||
ctx.rotate(-angle*Math.PI/180);
|
||||
ctx.translate(-w/2,-h/2);
|
||||
ctx.font = '5px Arial'
|
||||
ctx.fillStyle = color
|
||||
ctx.fillText(angle + "'", (-w * 0.4) - 20, -10)
|
||||
|
||||
ctx.rotate(-angle * Math.PI / 180)
|
||||
ctx.translate(-w / 2, -h / 2)
|
||||
}
|
||||
|
||||
this.line = function(context,x1,x2,y1,y2,color)
|
||||
{
|
||||
context.beginPath();
|
||||
context.moveTo(x1,x2);
|
||||
context.lineTo(y1,y2);
|
||||
context.lineCap="round";
|
||||
context.lineWidth = 0.5;
|
||||
context.strokeStyle = color;
|
||||
context.stroke();
|
||||
context.closePath();
|
||||
this.line = function (context, x1, x2, y1, y2, color) {
|
||||
context.beginPath()
|
||||
context.moveTo(x1, x2)
|
||||
context.lineTo(y1, y2)
|
||||
context.lineCap = 'round'
|
||||
context.lineWidth = 0.5
|
||||
context.strokeStyle = color
|
||||
context.stroke()
|
||||
context.closePath()
|
||||
}
|
||||
|
||||
this.circle = function(context,x,y,r,c1,c2,color)
|
||||
{
|
||||
context.beginPath();
|
||||
context.arc(x,y,r,c1*Math.PI,c2*Math.PI);
|
||||
context.lineCap="round";
|
||||
context.lineWidth = 0.5;
|
||||
context.strokeStyle = color;
|
||||
context.stroke();
|
||||
context.closePath();
|
||||
this.circle = function (context, x, y, r, c1, c2, color) {
|
||||
context.beginPath()
|
||||
context.arc(x, y, r, c1 * Math.PI, c2 * Math.PI)
|
||||
context.lineCap = 'round'
|
||||
context.lineWidth = 0.5
|
||||
context.strokeStyle = color
|
||||
context.stroke()
|
||||
context.closePath()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user