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

Improved layout and added widget.

Browse Source
This commit is contained in:
Devine Lu Linvega 2016-11-25 13:57:07 -06:00
parent ee67ec8da2
commit 173401554d
10 changed files with 78 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -18,7 +18,6 @@
<script type="text/javascript" src="scripts/modules/brush.js"></script> <script type="text/javascript" src="scripts/modules/brush.js"></script>
<script type="text/javascript" src="scripts/modules/brush.pointer.js"></script> <script type="text/javascript" src="scripts/modules/brush.pointer.js"></script>
<script type="text/javascript" src="scripts/modules/file.js"></script> <script type="text/javascript" src="scripts/modules/file.js"></script>
<script type="text/javascript" src="scripts/modules/hint.js"></script>
<script type="text/javascript" src="scripts/modules/filter.js"></script> <script type="text/javascript" src="scripts/modules/filter.js"></script>
<script type="text/javascript" src="scripts/modules/filter.saturation.js"></script> <script type="text/javascript" src="scripts/modules/filter.saturation.js"></script>
@ -31,14 +30,19 @@
<script type="text/javascript" src="scripts/command.js"></script> <script type="text/javascript" src="scripts/command.js"></script>
<script type="text/javascript" src="scripts/commander.js"></script> <script type="text/javascript" src="scripts/commander.js"></script>
<script type="text/javascript" src="scripts/ronin.js"></script> <script type="text/javascript" src="scripts/ronin.js"></script>
<script type="text/javascript" src="scripts/hint.js"></script>
<script type="text/javascript" src="scripts/widget.js"></script>
<link rel="stylesheet" type="text/css" href="links/main.css"/> <link rel="stylesheet" type="text/css" href="links/main.css"/>
<title>Ronin</title> <title>Ronin</title>
</head> </head>
<body> <body>
<div id='ronin'> <div id='ronin'>
<canvas id='overlay' width="1480" height="800"></canvas> <div id='surface' style='left:0px;top:0px'>
<canvas id="workspace" width="1480" height="800"></canvas> <canvas id='overlay' width="1480" height="800"></canvas>
<canvas id="workspace" width="1480" height="800"></canvas>
<div id='widget'>This is a test</div>
</div>
<div id ='commander'> <div id ='commander'>
<div id='commander_hint'></div> <div id='commander_hint'></div>
<input id='commander_input' placeholder='~'/> <input id='commander_input' placeholder='~'/>

9
links/main.css
View File

@ -1,12 +1,13 @@
body { margin:0px; padding:0px; overflow:hidden;} body { margin:0px; padding:0px; overflow:hidden; font-family:courier,monospace;}
*:focus {outline: none; } *:focus {outline: none; }
canvas:hover { cursor: crosshair;} canvas:hover { cursor: crosshair;}
#ronin { width:100vw; height:100vh; overflow:hidden; background:#000; background-image:url(../media/grid_20.png);} #ronin { width:100vw; height:100vh; overflow:hidden; background:#000; background-image:url(../media/grid_20.png);}
#surface { width:100vw; height:100vh; overflow:hidden; position:fixed; left:0px; top:0px;}
#overlay { position:fixed; z-index:1000;} #overlay { position:absolute; z-index:1000;}
#workspace { position:fixed; background:#efefef; border-radius:3px;} #workspace { position:absolute; background:#efefef; border-radius:3px;}
#widget { color:#efefef; position:absolute; font-size:11px; line-height:30px;}
#commander { display:none; z-index: 2000; position:fixed; } #commander { display:none; z-index: 2000; position:fixed; }
#commander.visible { display:block; } #commander.visible { display:block; }

0
scripts/modules/hint.js → scripts/hint.js
View File

8
scripts/init.js
View File

@ -2,6 +2,8 @@ var ronin = new Ronin();
ronin.canvas.element = document.getElementById('workspace'); ronin.canvas.element = document.getElementById('workspace');
ronin.overlay.element = document.getElementById('overlay'); ronin.overlay.element = document.getElementById('overlay');
ronin.hint.element = document.getElementById('commander_hint'); ronin.hint.element = document.getElementById('commander_hint');
ronin.surface = document.getElementById('surface');
ronin.widget.element = document.getElementById('widget');
var commander = new Commander(document.getElementById("commander"),document.getElementById("commander_input")); var commander = new Commander(document.getElementById("commander"),document.getElementById("commander_input"));
@ -9,15 +11,15 @@ var commander = new Commander(document.getElementById("commander"),document.getE
document.addEventListener('mousemove', function(e) { document.addEventListener('mousemove', function(e) {
if(e.which == 1){ ronin.brush.draw(e); } if(e.which == 1){ ronin.brush.draw(e); }
if(e.which == 2){ ronin.canvas.drag(e); ronin.overlay.drag(e); } if(e.which == 2){ ronin.drag(e); }
}, false); }, false);
document.addEventListener('mousedown', function(e) { document.addEventListener('mousedown', function(e) {
if(e.which == 1){ ronin.brush.draw_start(e); ronin.brush.draw(e); } if(e.which == 1){ ronin.brush.draw_start(e); ronin.brush.draw(e); }
if(e.which == 2){ ronin.canvas.drag_start(e); ronin.canvas.drag(e); ronin.overlay.drag_start(e); ronin.overlay.drag(e); } if(e.which == 2){ ronin.drag_start(e); ronin.drag(e); }
}, false); }, false);
document.addEventListener('mouseup', function(e) { document.addEventListener('mouseup', function(e) {
if(e.which == 1){ ronin.brush.draw_stop(e); } if(e.which == 1){ ronin.brush.draw_stop(e); }
if(e.which == 2){ ronin.canvas.drag_stop(e); ronin.overlay.drag_stop(e); } if(e.which == 2){ ronin.drag_stop(e) }
document.getElementById("commander_input").focus(); document.getElementById("commander_input").focus();
}, false); }, false);

5
scripts/module.js
View File

@ -16,4 +16,9 @@ function Module()
{ {
return "unknown"; return "unknown";
} }
this.widget = function()
{
return "";
}
} }

7
scripts/modules/brush.js
View File

@ -41,6 +41,7 @@ function Brush()
if(cmd.value()){ if(cmd.value()){
this.size = cmd.value().float; this.size = cmd.value().float;
} }
ronin.widget.update();
} }
this.passive = function(cmd) this.passive = function(cmd)
@ -67,7 +68,7 @@ function Brush()
{ {
if(this.is_drawing === false){return;} if(this.is_drawing === false){return;}
this.position = new Position(e.clientX - parseFloat(ronin.canvas.element.style.left),e.clientY- parseFloat(ronin.canvas.element.style.top)); this.position = new Position(e.clientX - parseFloat(ronin.surface.style.left) - parseFloat(ronin.canvas.element.style.left),e.clientY- parseFloat(ronin.surface.style.top) - parseFloat(ronin.canvas.element.style.top));
for (i = 0; i < this.pointers.length; i++) { for (i = 0; i < this.pointers.length; i++) {
this.pointers[i].draw(); this.pointers[i].draw();
@ -92,4 +93,8 @@ function Brush()
} }
} }
this.widget = function()
{
return "> "+this.size+" <span style='color:"+this.color.render()+"'>"+this.color.render()+"</span> ";
}
} }

29
scripts/modules/canvas.js
View File

@ -37,6 +37,11 @@ function Canvas(element)
this.element.setAttribute('height',rect.height+"px"); this.element.setAttribute('height',rect.height+"px");
this.element.style.left = (window.innerWidth/2)-(rect.width/2); this.element.style.left = (window.innerWidth/2)-(rect.width/2);
this.element.style.top = (window.innerHeight/2)-(rect.height/2); this.element.style.top = (window.innerHeight/2)-(rect.height/2);
ronin.widget.element.style.left = (window.innerWidth/2)-(rect.width/2);
ronin.widget.element.style.top = (window.innerHeight/2)+(rect.height/2);
ronin.widget.update();
} }
this.context = function() this.context = function()
@ -49,28 +54,8 @@ function Canvas(element)
this.context().clearRect(0, 0, this.element.width, this.element.height); this.context().clearRect(0, 0, this.element.width, this.element.height);
} }
// Drag this.widget = function()
this.drag_from = null;
this.drag_start = function(e)
{ {
this.drag_from = new Position(e.clientX,e.clientY); return "@ "+this.element.width+"x"+this.element.height+" ";
}
this.drag = function(e)
{
if(e.which != 2){ return; }
var offset_x = this.drag_from.x - e.clientX;
this.element.style.left = parseInt(this.element.style.left) - offset_x;
var offset_y = this.drag_from.y - e.clientY;
this.element.style.top = parseInt(this.element.style.top) - offset_y;
this.drag_from = new Position(e.clientX,e.clientY);
}
this.drag_stop = function(e)
{
this.drag_from = null;
} }
} }

25
scripts/modules/overlay.js
View File

@ -137,29 +137,4 @@ function Overlay(element)
{ {
this.context().clearRect(0, 0, ronin.canvas.element.width, ronin.canvas.element.height); this.context().clearRect(0, 0, ronin.canvas.element.width, ronin.canvas.element.height);
} }
// Drag
this.drag_from = null;
this.drag_start = function(e)
{
this.drag_from = new Position(e.clientX,e.clientY);
}
this.drag = function(e)
{
if(e.which != 2){ return; }
var offset_x = this.drag_from.x - e.clientX;
this.element.style.left = parseInt(this.element.style.left) - offset_x;
var offset_y = this.drag_from.y - e.clientY;
this.element.style.top = parseInt(this.element.style.top) - offset_y;
this.drag_from = new Position(e.clientX,e.clientY);
}
this.drag_stop = function(e)
{
this.drag_from = null;
}
} }

28
scripts/ronin.js
View File

@ -3,6 +3,9 @@ function Ronin()
this.modules = {}; this.modules = {};
this.hint = new Hint(); this.hint = new Hint();
this.widget = new Widget();
this.surface = null;
this.canvas = new Canvas(); this.canvas = new Canvas();
this.overlay = new Overlay(); this.overlay = new Overlay();
this.brush = new Brush(); this.brush = new Brush();
@ -18,4 +21,29 @@ function Ronin()
this.modules[":"] = this.filter; this.modules[":"] = this.filter;
this.modules["-"] = this.stroke; this.modules["-"] = this.stroke;
this.modules["+"] = this.vector; this.modules["+"] = this.vector;
// Drag
this.drag_from = null;
this.drag_start = function(e)
{
this.drag_from = new Position(e.clientX,e.clientY);
}
this.drag = function(e)
{
if(e.which != 2){ return; }
var offset_x = this.drag_from.x - e.clientX;
this.surface.style.left = this.surface.style.left ? parseInt(this.surface.style.left) - offset_x : offset_x;
var offset_y = this.drag_from.y - e.clientY;
this.surface.style.top = this.surface.style.top ? parseInt(this.surface.style.top) - offset_y : offset_y;
this.drag_from = new Position(e.clientX,e.clientY);
}
this.drag_stop = function(e)
{
this.drag_from = null;
}
} }

15
scripts/widget.js Normal file
View File

@ -0,0 +1,15 @@
function Widget()
{
this.element = null;
this.update = function()
{
var s = "";
for (var key in ronin.modules){
s += ronin.modules[key].widget();
}
this.element.innerHTML = s;
}
}