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

Improved UX for $drag

Browse Source
This commit is contained in:
Devine Lu Linvega 2019-07-27 13:03:13 +09:00
parent 43849b403c
commit 8189d51912
3 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -139,12 +139,12 @@ function Commander (ronin) {
this._input.value = this.cache.replace('$circle', `(circle ${circle.cx} ${circle.cy} ${circle.r})`) this._input.value = this.cache.replace('$circle', `(circle ${circle.cx} ${circle.cy} ${circle.r})`)
} else if (word.substr(0, 4) === 'drag' && shape.line) { } else if (word.substr(0, 4) === 'drag' && shape.line) {
const rect = shape.rect const rect = shape.rect
this._input.value = this.cache.replace('$drag', `(drag ${rect.w} ${rect.h})`) this._input.value = this.cache.replace('$drag', `(drag (rect ${rect.x} ${rect.y} ${rect.w} ${rect.h}) $line)`)
this.run()
} }
if (end === true) { if (end === true) {
this.cache = this._input.value this.cache = this._input.value
} }
this.run()
} }
// Display // Display

17
desktop/sources/scripts/library.js
View File

@ -54,7 +54,7 @@ function Library (ronin) {
// Shapes // Shapes
this.pos = (x, y) => { // Returns a position shape. this.pos = (x = 0, y = 0) => { // Returns a position shape.
return { x, y } return { x, y }
} }
@ -104,8 +104,8 @@ function Library (ronin) {
return ronin.surface.linearGradient(line.a.x, line.a.y, line.b.x, line.b.y, colors) return ronin.surface.linearGradient(line.a.x, line.a.y, line.b.x, line.b.y, colors)
} }
this.guide = (shape) => { // Draws a shape on the guide layer. this.guide = (shape, color) => { // Draws a shape on the guide layer.
ronin.surface.drawGuide(shape) ronin.surface.drawGuide(shape, color)
return shape return shape
} }
@ -155,10 +155,15 @@ function Library (ronin) {
return [a, b] return [a, b]
} }
this.drag = (x, y, rect = this.frame()) => { this.drag = (rect = this.frame(), line = this.line()) => {
this.guide({ a: { x: rect.x, y: rect.y }, b: { x: x + rect.x, y: y + rect.y } }) const pos = { x: line.b.x - line.a.x, y: line.b.y - line.a.y }
const crop = ronin.surface.getCrop(rect)
ronin.surface.clear(rect)
this.guide({ a: { x: rect.x, y: rect.y }, b: { x: pos.x + rect.x, y: pos.y + rect.y } })
this.guide(rect) this.guide(rect)
this.guide(this.offset(rect, { x, y })) this.guide(this.offset(rect, { x: pos.x, y: pos.y }))
ronin.surface.context.drawImage(crop, rect.x, rect.y)
} }
this.theme = (variable, el = document.documentElement) => { this.theme = (variable, el = document.documentElement) => {

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

@ -167,14 +167,14 @@ function Surface (ronin) {
context.clearRect(rect.x, rect.y, rect.w, rect.h) context.clearRect(rect.x, rect.y, rect.w, rect.h)
} }
this.drawGuide = function (shape, context = this.guide) { this.drawGuide = function (shape, color = 'white', context = this.guide) {
if (!shape) { return } if (!shape) { return }
this.stroke(shape.rect || shape, 3, 'black', context) this.stroke(shape.rect || shape, 3, 'black', context)
if (shape.line) { this.stroke(shape.line, 3, 'black', context) } if (shape.line) { this.stroke(shape.line, 3, 'black', context) }
if (shape.circle) { this.stroke(shape.circle, 3, 'black', context) } if (shape.circle) { this.stroke(shape.circle, 3, 'black', context) }
this.stroke(shape.rect || shape, 1.5, 'white', context) this.stroke(shape.rect || shape, 1.5, color, context)
if (shape.line) { this.stroke(shape.line, 1.5, 'white', context) } if (shape.line) { this.stroke(shape.line, 1.5, color, context) }
if (shape.circle) { this.stroke(shape.circle, 1.5, 'white', context) } if (shape.circle) { this.stroke(shape.circle, 1.5, color, context) }
} }
this.clone = function (a, b) { this.clone = function (a, b) {