Improved UX for $drag
This commit is contained in:
parent
43849b403c
commit
8189d51912
desktop/sources/scripts
@ -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
|
||||
|
@ -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) => {
|
||||
|
@ -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) {
|
||||
|
Loading…
x
Reference in New Issue
Block a user