diff --git a/src/main.js b/src/main.js index a018b3b..ccfbaf4 100644 --- a/src/main.js +++ b/src/main.js @@ -77,6 +77,7 @@ let context = { simplifyMode: "smooth", fillShape: true, dragging: false, + selection: [], } let config = { @@ -146,6 +147,13 @@ function selectCurve(context, mouse) { } } +function growBoundingBox(bboxa, bboxb) { + bboxa.x.min = Math.min(bboxa.x.min, bboxb.x.min) + bboxa.y.min = Math.min(bboxa.y.min, bboxb.y.min) + bboxa.x.max = Math.max(bboxa.x.max, bboxb.x.max) + bboxa.y.max = Math.max(bboxa.y.max, bboxb.y.max) +} + class Curve { constructor(startx, starty, cp1x, cp1y, cp2x, cp2y, x, y) { this.startx = startx @@ -203,15 +211,9 @@ class Shape { clear() { this.curves = [] } - growBoundingBox(bbox) { - this.boundingBox.x.min = Math.min(this.boundingBox.x.min, bbox.x.min) - this.boundingBox.y.min = Math.min(this.boundingBox.y.min, bbox.y.min) - this.boundingBox.x.max = Math.max(this.boundingBox.x.max, bbox.x.max) - this.boundingBox.y.max = Math.max(this.boundingBox.y.max, bbox.y.max) - } recalculateBoundingBox() { for (let curve of this.curves) { - this.growBoundingBox(curve.bbox()) + growBoundingBox(this.boundingBox, curve.bbox()) } } simplify(mode="corners") { @@ -270,6 +272,24 @@ class GraphicsObject { this.shapes = [] } + bbox() { + let bbox; + if (this.frames[this.currentFrame].shapes.length > 0) { + bbox = this.frames[this.currentFrame].shapes[0].boundingBox + for (let shape of this.frames[this.currentFrame].shapes) { + growBoundingBox(bbox, shape.boundingBox) + } + } + if (this.children.length > 0) { + if (!bbox) { + bbox = this.children[0].bbox() + } + for (let child of this.children) { + growBoundingBox(bbox, child.bbox()) + } + } + return bbox + } draw(context) { let ctx = context.ctx; ctx.translate(this.x, this.y) @@ -328,6 +348,18 @@ class GraphicsObject { ) ctx.stroke() } + if (this == context.activeObject) { + for (let item of context.selection) { + ctx.save() + ctx.strokeStyle = "#00ffff" + ctx.translate(item.x, item.y) + ctx.beginPath() + let bbox = item.bbox() + ctx.rect(bbox.x.min, bbox.y.min, bbox.x.max, bbox.y.max) + ctx.stroke() + ctx.restore() + } + } } addShape(shape) { this.frames[this.currentFrame].shapes.push(shape) @@ -408,7 +440,9 @@ function stage() { imageShape.addLine(width, height) imageShape.addLine(0, height) imageShape.addLine(0, 0) + imageShape.recalculateBoundingBox() imageObject.addShape(imageShape) + console.log(imageObject.bbox()) context.activeObject.addObject( imageObject, mouse.x-width/2 + (20*img.ix), @@ -442,7 +476,27 @@ function stage() { if (curve) { context.dragging = true console.log("gonna move this") + } else { + let selected = false + let child; + // Have to iterate in reverse order to grab the frontmost object when two overlap + for (let i=context.activeObject.children.length-1; i>=0; i--) { + child = context.activeObject.children[i] + let bbox = child.bbox() + if (mouse.x > bbox.x.min + child.x && + mouse.x < bbox.x.max + child.x && + mouse.y > bbox.y.min + child.y && + mouse.y < bbox.y.max + child.y) { + context.selection = [child] + selected = true + break + } + } + if (!selected) { + context.selection = [] + } } + console.log(context.selection) break; default: break;