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

Added guide layer and selection widget

Browse Source
This commit is contained in:
Devine Lu Linvega 2019-07-14 14:35:03 +09:00
parent fac74b21f8
commit 5f75d854f6
8 changed files with 61 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
desktop/icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

3
desktop/sources/links/main.css
View File

@ -9,4 +9,5 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_regular
#ronin #wrapper #commander div#status { color:#555; position: absolute; bottom: 0px; }
#ronin #wrapper #commander.hidden { margin-left:-331px; }
#ronin canvas#surface { position: absolute; right:0px; top:0px; -webkit-user-select: none;-webkit-app-region: no-drag; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><circle cx='10' cy='10' r='1' fill='%23555'></circle></svg>"); background-size: 10px 10px; background-position: -4px -4px; }
#ronin canvas#surface,#ronin canvas#guide { position: absolute; right:0px; top:0px; -webkit-user-select: none;-webkit-app-region: no-drag; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><circle cx='10' cy='10' r='1' fill='%23555'></circle></svg>"); background-size: 10px 10px; background-position: -4px -4px; }
#ronin canvas#guide { background:none; }

13
desktop/sources/scripts/commander.js
View File

@ -34,7 +34,7 @@ function Commander (ronin) {
}
this.setStatus = function (msg) {
this._status.textContent = `${msg}`
this._status.textContent = `${msg.substr(0, 40)}`
}
this.update = function () {
@ -60,6 +60,7 @@ function Commander (ronin) {
this.mouseRect.y = e.offsetY
this.mouseRect.a.x = e.offsetX
this.mouseRect.a.y = e.offsetY
this.mouseRect.t = 'pos'
this._status.textContent = `${this.mouseRect.x},${this.mouseRect.y} ${this.mouseRect.w},${this.mouseRect.h}`
this.capture()
this.show()
@ -82,9 +83,11 @@ function Commander (ronin) {
this.mouseRect.h = e.offsetY - this.mouseRect.y
this.mouseRect.b.x = e.offsetX
this.mouseRect.b.y = e.offsetY
this.mouseRect.t = ''
this._status.textContent = `${this.mouseRect.x},${this.mouseRect.y} ${this.mouseRect.w},${this.mouseRect.h}`
this.commit()
this._input.focus()
ronin.surface.clearGuide()
}
// Injection
@ -106,18 +109,26 @@ function Commander (ronin) {
return
}
ronin.surface.clearGuide()
const next = value.split('$')[1]
if (next.substr(0, 4) === 'pos)') {
value = value.replace('($pos)', `(pos ${this.mouseRect.x} ${this.mouseRect.y})`)
this.mouseRect.t = 'pos'
ronin.surface.stroke(this.mouseRect, 2, 'white', ronin.surface.guide)
}
if (next.substr(0, 5) === 'rect)') {
value = value.replace('($rect)', `(rect ${this.mouseRect.x} ${this.mouseRect.y} ${this.mouseRect.w} ${this.mouseRect.h})`)
this.mouseRect.t = 'rect'
ronin.surface.stroke(this.mouseRect, 2, 'white', ronin.surface.guide)
}
if (next.substr(0, 5) === 'line)') {
value = value.replace('($line)', `(line (pos ${this.mouseRect.a.x} ${this.mouseRect.a.y}) (pos ${this.mouseRect.b.x} ${this.mouseRect.b.y}))`)
this.mouseRect.t = 'line'
ronin.surface.stroke(this.mouseRect, 2, 'white', ronin.surface.guide)
}
this._input.value = value

2
desktop/sources/scripts/source.js
View File

@ -101,7 +101,7 @@ function Source (ronin) {
console.log('Source', 'Looking for changes..')
if (!this.path) {
console.log('Source', 'File is unsaved..')
if (ronin.commander._input.value.length() > 2) {
if (ronin.commander._input.value.length > 2) {
console.log('Source', `File is not empty.`)
return true
}

78
desktop/sources/scripts/surface.js
View File

@ -1,15 +1,19 @@
function Surface (ronin) {
this.el = document.createElement('canvas')
this.el.id = 'surface'
this._guide = document.createElement('canvas')
this._guide.id = 'guide'
this.ratio = window.devicePixelRatio
this.context = this.el.getContext('2d')
this.guide = this.el.getContext('2d')
this.install = function (host) {
host.appendChild(this.el)
host.appendChild(this._guide)
window.addEventListener('resize', (e) => { this.onResize() }, false)
this.el.addEventListener('mousedown', ronin.commander.onMouseDown, false)
this.el.addEventListener('mousemove', ronin.commander.onMouseMove, false)
this.el.addEventListener('mouseup', ronin.commander.onMouseUp, false)
this._guide.addEventListener('mousedown', ronin.commander.onMouseDown, false)
this._guide.addEventListener('mousemove', ronin.commander.onMouseMove, false)
this._guide.addEventListener('mouseup', ronin.commander.onMouseUp, false)
}
this.start = function () {
@ -32,54 +36,54 @@ function Surface (ronin) {
// Shape
this.stroke = (shape, width, color) => {
this.context.beginPath()
this.trace(shape)
this.context.lineWidth = width
this.context.strokeStyle = color
this.context.stroke()
this.context.closePath()
this.stroke = (shape, width, color, context = this.context) => {
context.beginPath()
this.trace(shape, context)
context.lineWidth = width
context.strokeStyle = color
context.stroke()
context.closePath()
}
// Fill
this.fill = (shape, color) => {
this.context.beginPath()
this.trace(shape)
this.context.fillStyle = color
this.context.fill()
this.context.closePath()
this.fill = (shape, color, context) => {
context.beginPath()
this.trace(shape, context)
context.fillStyle = color
context.fill()
context.closePath()
}
// Tracers
this.trace = function (shape) {
this.trace = function (shape, context) {
if (shape.t === 'rect') {
this.traceRect(shape)
this.traceRect(shape, context)
} else if (shape.t === 'line') {
this.traceLine(shape)
this.traceLine(shape, context)
} else if (shape.t === 'circle') {
this.traceCircle(shape)
this.traceCircle(shape, context)
} else {
console.warn('Unknown type')
}
}
this.traceRect = function (rect) {
this.context.moveTo(rect.x, rect.y)
this.context.lineTo(rect.x + rect.w, rect.y)
this.context.lineTo(rect.x + rect.w, rect.y + rect.h)
this.context.lineTo(rect.x, rect.y + rect.h)
this.context.lineTo(rect.x, rect.y)
this.traceRect = function (rect, context) {
context.moveTo(rect.x, rect.y)
context.lineTo(rect.x + rect.w, rect.y)
context.lineTo(rect.x + rect.w, rect.y + rect.h)
context.lineTo(rect.x, rect.y + rect.h)
context.lineTo(rect.x, rect.y)
}
this.traceLine = function (line) {
this.context.moveTo(line.a.x, line.a.y)
this.context.lineTo(line.b.x, line.b.y)
this.traceLine = function (line, context) {
context.moveTo(line.a.x, line.a.y)
context.lineTo(line.b.x, line.b.y)
}
this.traceCircle = function (circle) {
this.context.arc(circle.x, circle.y, circle.r, 0, 2 * Math.PI)
this.traceCircle = function (circle, context) {
context.arc(circle.x, circle.y, circle.r, 0, 2 * Math.PI)
}
// IO
@ -107,8 +111,12 @@ function Surface (ronin) {
}
}
this.clear = function (rect = this.getFrame()) {
this.context.clearRect(rect.x, rect.y, rect.w, rect.h)
this.clear = function (rect = this.getFrame(), context = this.context) {
context.clearRect(rect.x, rect.y, rect.w, rect.h)
}
this.clearGuide = function () {
this.clear(ronin.surface.getFrame(), ronin.surface.guide)
}
this.clone = function (a, b) {
@ -120,6 +128,10 @@ function Surface (ronin) {
this.el.height = size.h
this.el.style.width = size.w + 'px'
this.el.style.height = size.h + 'px'
this._guide.width = size.w
this._guide.height = size.h
this._guide.style.width = size.w + 'px'
this._guide.style.height = size.h + 'px'
}
this.maximize = function () {

11
examples/logic.lisp
View File

@ -1,11 +0,0 @@
(
(echo (lt 3 4))
(echo (and 1 2 true 4))
(echo (and 1 false 2))
(echo (or false false 2 false))
(if (gt 1 2) (echo "ok") (echo "not ok"))
)

5
examples/math.lisp
View File

@ -1,5 +0,0 @@
(
(echo (add 2 3))
(echo (sub 22 3 4 5))
(echo (mul 2 3 4 5))
)

2
examples/pixels.lisp
View File

@ -4,6 +4,6 @@
; Draw photo
(draw (path "/Users/VillaMoirai/Desktop/510.jpg"))
(draw (path "/Users/VillaMoirai/Desktop/clip.jpg"))
(print (select (rect 0 0 10 10)))
)