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})`)
} else if (word.substr(0, 4) === 'drag' && shape.line) {
const rect = shape.rect
this._input.value = this.cache.replace('$drag', `(drag ${rect.w} ${rect.h})`)
this.run()
this._input.value = this.cache.replace('$drag', `(drag (rect ${rect.x} ${rect.y} ${rect.w} ${rect.h}) $line)`)
}
if (end === true) {
this.cache = this._input.value
}
this.run()
}
// Display

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

@ -54,7 +54,7 @@ function Library (ronin) {
// Shapes
this.pos = (x, y) => { // Returns a position shape.
this.pos = (x = 0, y = 0) => { // Returns a position shape.
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)
}
this.guide = (shape) => { // Draws a shape on the guide layer.
ronin.surface.drawGuide(shape)
this.guide = (shape, color) => { // Draws a shape on the guide layer.
ronin.surface.drawGuide(shape, color)
return shape
}
@ -155,10 +155,15 @@ function Library (ronin) {
return [a, b]
}
this.drag = (x, y, rect = this.frame()) => {
this.guide({ a: { x: rect.x, y: rect.y }, b: { x: x + rect.x, y: y + rect.y } })
this.drag = (rect = this.frame(), line = this.line()) => {
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(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) => {

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)
}
this.drawGuide = function (shape, context = this.guide) {
this.drawGuide = function (shape, color = 'white', context = this.guide) {
if (!shape) { return }
this.stroke(shape.rect || shape, 3, 'black', context)
if (shape.line) { this.stroke(shape.line, 3, 'black', context) }
if (shape.circle) { this.stroke(shape.circle, 3, 'black', context) }
this.stroke(shape.rect || shape, 1.5, 'white', context)
if (shape.line) { this.stroke(shape.line, 1.5, 'white', context) }
if (shape.circle) { this.stroke(shape.circle, 1.5, 'white', context) }
this.stroke(shape.rect || shape, 1.5, color, context)
if (shape.line) { this.stroke(shape.line, 1.5, color, context) }
if (shape.circle) { this.stroke(shape.circle, 1.5, color, context) }
}
this.clone = function (a, b) {