Starting from a better base.
This commit is contained in:
Devine Lu Linvega
@@ -3,9 +3,6 @@ function Keyboard()
|
|||||||
this.shift_held = false;
|
this.shift_held = false;
|
||||||
this.alt_held = false;
|
this.alt_held = false;
|
||||||
|
|
||||||
document.onkeyup = function myFunction(){ keyboard.listen_onkeyup(event); };
|
|
||||||
document.onkeydown = function myFunction(){ keyboard.listen_onkeydown(event); };
|
|
||||||
|
|
||||||
this.listen_onkeydown = function(event)
|
this.listen_onkeydown = function(event)
|
||||||
{
|
{
|
||||||
if(event.shiftKey == true){
|
if(event.shiftKey == true){
|
||||||
@@ -60,7 +60,7 @@ function Ronin()
|
|||||||
ronin.terminal.update();
|
ronin.terminal.update();
|
||||||
ronin.widget.update();
|
ronin.widget.update();
|
||||||
ronin.terminal.input.focus();
|
ronin.terminal.input.focus();
|
||||||
ronin.load(target_file);
|
// ronin.load(target_file);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.hint = function(method)
|
this.hint = function(method)
|
||||||
@@ -1,52 +1,12 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<script type="text/javascript" src="scripts/units/unit.js"></script>
|
<script type="text/javascript" src="scripts/io.js"></script>
|
||||||
<script type="text/javascript" src="scripts/units/rect.js"></script>
|
<script type="text/javascript" src="scripts/query.js"></script>
|
||||||
<script type="text/javascript" src="scripts/units/color.js"></script>
|
<script type="text/javascript" src="scripts/keyboard.js"></script>
|
||||||
<script type="text/javascript" src="scripts/units/position.js"></script>
|
<script type="text/javascript" src="scripts/cursor.js"></script>
|
||||||
<script type="text/javascript" src="scripts/units/bang.js"></script>
|
<script type="text/javascript" src="scripts/render.js"></script>
|
||||||
<script type="text/javascript" src="scripts/units/angle.js"></script>
|
<script type="text/javascript" src="scripts/commander.js"></script>
|
||||||
<script type="text/javascript" src="scripts/units/value.js"></script>
|
<script type="text/javascript" src="scripts/ronin.js"></script>
|
||||||
<script type="text/javascript" src="scripts/units/filepath.js"></script>
|
|
||||||
<script type="text/javascript" src="scripts/units/any.js"></script>
|
|
||||||
<script type="text/javascript" src="scripts/units/setting.js"></script>
|
|
||||||
<script type="text/javascript" src="scripts/units/range.js"></script>
|
|
||||||
<script type="text/javascript" src="scripts/units/option.js"></script>
|
|
||||||
|
|
||||||
<script type="text/javascript" src="scripts/units/method.js"></script>
|
|
||||||
<script type="text/javascript" src="scripts/units/setting.js"></script>
|
|
||||||
<script type="text/javascript" src="scripts/units/mode.js"></script>
|
|
||||||
|
|
||||||
<script type="text/javascript" src="scripts/modules/default.js"></script>
|
|
||||||
<script type="text/javascript" src="scripts/modules/cursor.js"></script>
|
|
||||||
<script type="text/javascript" src="scripts/modules/terminal.js"></script>
|
|
||||||
<script type="text/javascript" src="scripts/modules/module.js"></script>
|
|
||||||
<script type="text/javascript" src="scripts/modules/path.js"></script>
|
|
||||||
<script type="text/javascript" src="scripts/modules/overlay.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/source.js"></script>
|
|
||||||
<script type="text/javascript" src="scripts/modules/frame.js"></script>
|
|
||||||
<script type="text/javascript" src="scripts/modules/layer.js"></script>
|
|
||||||
<script type="text/javascript" src="scripts/modules/eye.js"></script>
|
|
||||||
<script type="text/javascript" src="scripts/modules/type.js"></script>
|
|
||||||
<script type="text/javascript" src="scripts/modules/render.js"></script>
|
|
||||||
<script type="text/javascript" src="scripts/modules/magnet.js"></script>
|
|
||||||
<script type="text/javascript" src="scripts/modules/terminal.widget.js"></script>
|
|
||||||
|
|
||||||
<script type="text/javascript" src="scripts/filters/filter.js"></script>
|
|
||||||
<script type="text/javascript" src="scripts/filters/stencil.js"></script>
|
|
||||||
<script type="text/javascript" src="scripts/filters/invert.js"></script>
|
|
||||||
<script type="text/javascript" src="scripts/filters/chromatic.js"></script>
|
|
||||||
<script type="text/javascript" src="scripts/filters/balance.js"></script>
|
|
||||||
<script type="text/javascript" src="scripts/filters/grey.js"></script>
|
|
||||||
<script type="text/javascript" src="scripts/filters/sharpen.js"></script>
|
|
||||||
<script type="text/javascript" src="scripts/filters/saturate.js"></script>
|
|
||||||
<script type="text/javascript" src="scripts/filters/contrast.js"></script>
|
|
||||||
|
|
||||||
<script type="text/javascript" src="scripts/core/keyboard.js"></script>
|
|
||||||
<script type="text/javascript" src="scripts/core/command.js"></script>
|
|
||||||
<script type="text/javascript" src="scripts/core/ronin.js"></script>
|
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="links/reset.css"/>
|
<link rel="stylesheet" type="text/css" href="links/reset.css"/>
|
||||||
<link rel="stylesheet" type="text/css" href="links/fonts.css"/>
|
<link rel="stylesheet" type="text/css" href="links/fonts.css"/>
|
||||||
@@ -54,16 +14,9 @@
|
|||||||
<title>Ronin</title>
|
<title>Ronin</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id='ronin'>
|
|
||||||
<div id='cursor'></div>
|
|
||||||
<div id='frame'></div>
|
|
||||||
<div id='terminal'></div>
|
|
||||||
</div>
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var ronin = new Ronin();
|
var ronin = new Ronin();
|
||||||
var keyboard = new Keyboard();
|
ronin.install();
|
||||||
ronin.install();
|
|
||||||
ronin.start(window.location.hash);
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1,42 +1,8 @@
|
|||||||
body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium",courier,monospace;}
|
body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium",courier,monospace;}
|
||||||
*:focus {outline: none; }
|
*:focus {outline: none; }
|
||||||
|
|
||||||
#ronin { background:#ddd; width:100%; height:100%; overflow:hidden; background-image:url(../media/graphics/grid.svg); background-position: 0px 0px;}
|
yu { display:block; }
|
||||||
#frame { width:50vw; height:50vh; overflow:hidden; position:fixed; left: calc(40vw + 15px); top:100px; background-image:url(../media/graphics/void.svg); background-position:0px 0px; }
|
|
||||||
#frame > .layer { position:absolute; top:0px; left:0px; width:100%; height:100%;}
|
|
||||||
|
|
||||||
@keyframes blink { 0% {opacity: 1;} 50% {opacity: 0;} 100% {opacity: 1;} }
|
#ronin { background:#444; height: 100vh; width:100vw; }
|
||||||
|
#commander { position: fixed; bottom:0px; left:0px; width:100vw; height:30px; line-height: 30px; -webkit-user-select: none;-webkit-app-region: drag; }
|
||||||
#frame > .layer.blink { animation: blink 0.1s; animation-iteration-count: infinite; }
|
#commander input { background: transparent;width: calc(100vw - 30px);padding: 0px 15px;display: block;line-height: 30px;font-size: 11px;color: white; margin-left:30px; }
|
||||||
#overlay { position:absolute; z-index:1000;}
|
|
||||||
#frame { cursor:none;}
|
|
||||||
|
|
||||||
#terminal { position: fixed;bottom: 0px;left: 0px;background: #111;width: 100vw;height: 60px;overflow: hidden; color:#999;}
|
|
||||||
|
|
||||||
#terminal #hint, #terminal #widget, #terminal input, #terminal #logs { display: block;position: fixed;bottom: 0px;line-height: 20px; width:calc(100vw - 40px); background:none; color:#777; font-size:11px; padding:5px 20px; white-space: pre; }
|
|
||||||
|
|
||||||
#terminal input { z-index: 9000; color:#999; font-family: 'input_mono_regular'}
|
|
||||||
#terminal input:focus { color:#fff; }
|
|
||||||
|
|
||||||
#terminal #logs { position:fixed; bottom:30px; border-bottom:1px solid #222; }
|
|
||||||
#terminal #logs .module { font-family: 'input_mono_regular'; color:#ccc; }
|
|
||||||
|
|
||||||
#terminal #widget { text-align: right; bottom:30px}
|
|
||||||
#terminal #widget .mouse { color:white; }
|
|
||||||
|
|
||||||
span.autocomplete { background:white; color:black; }
|
|
||||||
|
|
||||||
span.module { display: inline-block; color:#999; }
|
|
||||||
span.method { display: inline-block; color:#999; }
|
|
||||||
span.method .name { color:#fff; }
|
|
||||||
span.method .options { color:#555; }
|
|
||||||
span.params { display: inline-block; color:#999; }
|
|
||||||
span.setting { display: inline-block; color:#fff; }
|
|
||||||
span.setting .value { color:#999; }
|
|
||||||
span.mode { color:#999; }
|
|
||||||
span.mode .name { text-decoration: underline; color:white; }
|
|
||||||
|
|
||||||
#modal { position: fixed; bottom:80px; right:20px; height:100px; border-radius:3px; overflow:hidden; display: block}
|
|
||||||
#modal.text { display: block;background: #000;width: calc(100vw - 100px);height: calc(100vh - 160px);padding: 30px;font-size: 12px;white-space: pre;column-count: 3;line-height: 20px;color:white}
|
|
||||||
#modal.image img { display: block; max-height: 100%; width:inherit;}
|
|
||||||
#modal.hidden { display: none }
|
|
||||||
|
|||||||
20
sources/scripts/commander.js
Normal file
20
sources/scripts/commander.js
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
function Commander()
|
||||||
|
{
|
||||||
|
this.el = document.createElement('yu');
|
||||||
|
this.el.id = "commander";
|
||||||
|
this.input_el = document.createElement('input');
|
||||||
|
this.input_el.value = "rescale s:0.5 rect:300x300";
|
||||||
|
|
||||||
|
this.install = function()
|
||||||
|
{
|
||||||
|
this.el.appendChild(this.input_el);
|
||||||
|
ronin.el.appendChild(this.el);
|
||||||
|
this.input_el.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.validate = function(query_str = ronin.commander.input_el.value)
|
||||||
|
{
|
||||||
|
var q = new Query(query_str);
|
||||||
|
console.log(q);
|
||||||
|
}
|
||||||
|
}
|
||||||
37
sources/scripts/cursor.js
Normal file
37
sources/scripts/cursor.js
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
function Cursor(rune)
|
||||||
|
{
|
||||||
|
this.is_down = false;
|
||||||
|
|
||||||
|
this.mouse_down = function(e)
|
||||||
|
{
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
ronin.cursor.is_down = true;
|
||||||
|
|
||||||
|
var ctx = ronin.render.context();
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.rect(e.clientX * 2, e.clientY * 2, 5, 5);
|
||||||
|
ctx.fillStyle = "red";
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.mouse_move = function(e)
|
||||||
|
{
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
if(!ronin.cursor.is_down){ return; }
|
||||||
|
|
||||||
|
var ctx = ronin.render.context();
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.rect(e.clientX * 2, e.clientY * 2, 5, 5);
|
||||||
|
ctx.fillStyle = "red";
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.mouse_up = function(e)
|
||||||
|
{
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
ronin.cursor.is_down = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
34
sources/scripts/io.js
Normal file
34
sources/scripts/io.js
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
function IO()
|
||||||
|
{
|
||||||
|
this.drag_over = function(e)
|
||||||
|
{
|
||||||
|
e.stopPropagation();
|
||||||
|
e.preventDefault();
|
||||||
|
e.dataTransfer.dropEffect = 'copy';
|
||||||
|
}
|
||||||
|
|
||||||
|
this.drop = function(e)
|
||||||
|
{
|
||||||
|
e.stopPropagation();
|
||||||
|
e.preventDefault();
|
||||||
|
var files = e.dataTransfer.files;
|
||||||
|
var file = files[0];
|
||||||
|
|
||||||
|
if (!file.type.match(/image.*/)) { console.log("Not image"); return false; }
|
||||||
|
|
||||||
|
var reader = new FileReader();
|
||||||
|
|
||||||
|
reader.onload = function(event)
|
||||||
|
{
|
||||||
|
base_image = new Image();
|
||||||
|
base_image.src = event.target.result;
|
||||||
|
|
||||||
|
var width = base_image.naturalWidth;
|
||||||
|
var height = base_image.naturalHeight;
|
||||||
|
|
||||||
|
ronin.resize_to({width:width * 0.5,height:height * 0.5});
|
||||||
|
ronin.render.context().drawImage(base_image, 0,0,width,height);
|
||||||
|
}
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
}
|
||||||
|
}
|
||||||
14
sources/scripts/keyboard.js
Normal file
14
sources/scripts/keyboard.js
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
function Keyboard()
|
||||||
|
{
|
||||||
|
this.key_up = function()
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
this.key_down = function(e)
|
||||||
|
{
|
||||||
|
if(e.key == "Enter"){
|
||||||
|
ronin.commander.validate();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
12
sources/scripts/query.js
Normal file
12
sources/scripts/query.js
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
function Query(query_str)
|
||||||
|
{
|
||||||
|
this.method_name = query_str.split(" ")[0];
|
||||||
|
var parts = query_str.split(" ").splice(1);
|
||||||
|
this.parameters = {};
|
||||||
|
for(part_id in parts){
|
||||||
|
var part = parts[part_id];
|
||||||
|
var key = part.indexOf(":") > -1 ? part.split(":")[0] : "any";
|
||||||
|
var value = part.indexOf(":") > -1 ? part.split(":")[1] : part;
|
||||||
|
this.parameters[key] = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
30
sources/scripts/render.js
Normal file
30
sources/scripts/render.js
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
function Render()
|
||||||
|
{
|
||||||
|
this.el = document.createElement('canvas');
|
||||||
|
|
||||||
|
this.install = function()
|
||||||
|
{
|
||||||
|
ronin.el.appendChild(this.el);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.update = function()
|
||||||
|
{
|
||||||
|
this.el.width = window.innerWidth * 2;
|
||||||
|
this.el.height = window.innerHeight * 2;
|
||||||
|
this.el.style.width = (window.innerWidth)+"px";
|
||||||
|
this.el.style.height = (window.innerHeight)+"px";
|
||||||
|
}
|
||||||
|
|
||||||
|
this.context = function()
|
||||||
|
{
|
||||||
|
return this.el.getContext('2d');
|
||||||
|
}
|
||||||
|
|
||||||
|
this.resize_to = function(size)
|
||||||
|
{
|
||||||
|
this.el.width = size.width * 2;
|
||||||
|
this.el.height = size.height * 2;
|
||||||
|
this.el.style.width = size.width+"px";
|
||||||
|
this.el.style.height = size.height+"px";
|
||||||
|
}
|
||||||
|
}
|
||||||
43
sources/scripts/ronin.js
Normal file
43
sources/scripts/ronin.js
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
function Ronin()
|
||||||
|
{
|
||||||
|
this.el = document.createElement('yu');
|
||||||
|
this.el.id = "ronin";
|
||||||
|
|
||||||
|
this.io = new IO();
|
||||||
|
this.keyboard = new Keyboard();
|
||||||
|
this.commander = new Commander();
|
||||||
|
this.cursor = new Cursor();
|
||||||
|
this.render = new Render();
|
||||||
|
|
||||||
|
this.install = function()
|
||||||
|
{
|
||||||
|
document.body.appendChild(this.el);
|
||||||
|
|
||||||
|
this.render.install();
|
||||||
|
this.commander.install();
|
||||||
|
|
||||||
|
this.start();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.start = function()
|
||||||
|
{
|
||||||
|
window.addEventListener('dragover', ronin.io.drag_over);
|
||||||
|
window.addEventListener('drop', ronin.io.drop);
|
||||||
|
ronin.render.el.addEventListener('mousedown', ronin.cursor.mouse_down);
|
||||||
|
ronin.render.el.addEventListener('mousemove', ronin.cursor.mouse_move);
|
||||||
|
ronin.render.el.addEventListener('mouseup', ronin.cursor.mouse_up);
|
||||||
|
|
||||||
|
window.addEventListener('keydown', ronin.keyboard.key_down);
|
||||||
|
|
||||||
|
console.log("Ronin","Started");
|
||||||
|
this.render.update();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.resize_to = function(size)
|
||||||
|
{
|
||||||
|
const {dialog,app} = require('electron').remote;
|
||||||
|
var win = require('electron').remote.getCurrentWindow();
|
||||||
|
win.setSize(size.width,size.height);
|
||||||
|
this.render.resize_to(size);
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user