skyler
/
Lightningbeam
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

one region per shape

This commit is contained in:
Skyler Lehmkuhl 2024-12-05 00:23:36 -05:00
parent 3e1184b6b3
commit 7d3f414be9
1 changed files with 52 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/main.js
View File

@ -166,8 +166,10 @@ let actions = {
curve.points[3].x, curve.points[3].y curve.points[3].x, curve.points[3].y
).setColor(curve.color)) ).setColor(curve.color))
} }
shape.update() let shapes = shape.update()
object.addShape(shape) for (let newShape of shapes) {
object.addShape(newShape)
}
}, },
rollback: (action) => { rollback: (action) => {
let object = pointerList[action.parent] let object = pointerList[action.parent]
@ -225,24 +227,24 @@ let actions = {
shape.update() shape.update()
} }
}, },
colorRegion: { colorShape: {
create: (region, color) => { create: (shape, color) => {
redoStack.length = 0; // Clear redo stack redoStack.length = 0; // Clear redo stack
let action = { let action = {
region: region.idx, shape: shape.idx,
oldColor: region.fillStyle, oldColor: shape.fillStyle,
newColor: color newColor: color
} }
undoStack.push({name: "colorRegion", action: action}) undoStack.push({name: "colorShape", action: action})
actions.colorRegion.execute(action) actions.colorShape.execute(action)
}, },
execute: (action) => { execute: (action) => {
let region = pointerList[action.region] let shape = pointerList[action.shape]
region.fillStyle = action.newColor shape.fillStyle = action.newColor
}, },
rollback: (action) => { rollback: (action) => {
let region = pointerList[action.region] let shape = pointerList[action.shape]
region.fillStyle = action.oldColor shape.fillStyle = action.oldColor
} }
}, },
addImageObject: { addImageObject: {
@ -286,8 +288,8 @@ let actions = {
imageShape.addLine(0, img.height) imageShape.addLine(0, img.height)
imageShape.addLine(0, 0) imageShape.addLine(0, 0)
imageShape.update() imageShape.update()
imageShape.regions[0].fillImage = img imageShape.fillImage = img
imageShape.regions[0].filled = true imageShape.filled = true
imageObject.addShape(imageShape) imageObject.addShape(imageShape)
let parent = pointerList[action.parent] let parent = pointerList[action.parent]
parent.addObject( parent.addObject(
@ -918,29 +920,34 @@ class BaseShape {
let ctx = context.ctx; let ctx = context.ctx;
ctx.lineWidth = this.lineWidth ctx.lineWidth = this.lineWidth
ctx.lineCap = "round" ctx.lineCap = "round"
for (let region of this.regions) { // for (let region of this.regions) {
// if (region.filled) continue; // // if (region.filled) continue;
if ((region.fillStyle || region.fillImage) && region.filled) { // if ((region.fillStyle || region.fillImage) && region.filled) {
// ctx.fillStyle = region.fill // // ctx.fillStyle = region.fill
if (region.fillImage) { // if (region.fillImage) {
let pat = ctx.createPattern(region.fillImage, "no-repeat") // let pat = ctx.createPattern(region.fillImage, "no-repeat")
ctx.fillStyle = pat // ctx.fillStyle = pat
} else { // } else {
ctx.fillStyle = region.fillStyle // ctx.fillStyle = region.fillStyle
} // }
ctx.beginPath() // ctx.beginPath()
for (let curve of region.curves) { // for (let curve of region.curves) {
ctx.lineTo(curve.points[0].x, curve.points[0].y) // ctx.lineTo(curve.points[0].x, curve.points[0].y)
ctx.bezierCurveTo(curve.points[1].x, curve.points[1].y, // ctx.bezierCurveTo(curve.points[1].x, curve.points[1].y,
curve.points[2].x, curve.points[2].y, // curve.points[2].x, curve.points[2].y,
curve.points[3].x, curve.points[3].y) // curve.points[3].x, curve.points[3].y)
} // }
ctx.fill() // ctx.fill()
} // }
} // }
if (this.regions.length==0 && context.fillShape && this.inProgress) { if (this.filled) {
ctx.beginPath() ctx.beginPath()
ctx.fillStyle = context.fillStyle if (this.fillImage) {
let pat = ctx.createPattern(this.fillImage, "no-repeat")
ctx.fillStyle = pat
} else {
ctx.fillStyle = this.fillStyle
}
if (this.curves.length > 0) { if (this.curves.length > 0) {
ctx.moveTo(this.curves[0].points[0].x, this.curves[0].points[0].y) ctx.moveTo(this.curves[0].points[0].x, this.curves[0].points[0].y)
for (let curve of this.curves) { for (let curve of this.curves) {
@ -974,11 +981,12 @@ class BaseShape {
} }
class TempShape extends BaseShape { class TempShape extends BaseShape {
constructor(startx, starty, curves, lineWidth, stroked) { constructor(startx, starty, curves, lineWidth, stroked, filled) {
super(startx, starty) super(startx, starty)
this.curves = curves this.curves = curves
this.lineWidth = lineWidth this.lineWidth = lineWidth
this.stroked = stroked this.stroked = stroked
this.filled = filled
this.inProgress = false this.inProgress = false
} }
} }
@ -1171,6 +1179,7 @@ class Shape extends BaseShape {
this.startx = this.curves[0].points[0].x this.startx = this.curves[0].points[0].x
this.starty = this.curves[0].points[0].y this.starty = this.curves[0].points[0].y
} }
return [this]
} }
getClockwiseCurves(point, otherPoints) { getClockwiseCurves(point, otherPoints) {
// Returns array of {x, y, idx, angle} // Returns array of {x, y, idx, angle}
@ -1240,6 +1249,7 @@ class Shape extends BaseShape {
i++; i++;
} }
let shapes = [this]
this.vertices.forEach((vertex, i) => { this.vertices.forEach((vertex, i) => {
for (let i=0; i<Math.min(10,this.regions.length); i++) { for (let i=0; i<Math.min(10,this.regions.length); i++) {
let region = this.regions[i] let region = this.regions[i]
@ -2097,16 +2107,16 @@ function stage() {
// Iterate in reverse so we paintbucket the frontmost shape // Iterate in reverse so we paintbucket the frontmost shape
for (let i=context.activeObject.currentFrame.shapes.length-1; i>=0; i--) { for (let i=context.activeObject.currentFrame.shapes.length-1; i>=0; i--) {
let shape = context.activeObject.currentFrame.shapes[i] let shape = context.activeObject.currentFrame.shapes[i]
for (let region of shape.regions) { // for (let region of shape.regions) {
let intersect_count = 0; let intersect_count = 0;
for (let curve of region.curves) { for (let curve of shape.curves) {
intersect_count += curve.intersects(line).length intersect_count += curve.intersects(line).length
} }
if (intersect_count%2==1) { if (intersect_count%2==1) {
actions.colorRegion.create(region, context.fillStyle) actions.colorShape.create(shape, context.fillStyle)
break shapeLoop; break shapeLoop;
} }
} // }
} }
break; break;
default: default:
@ -2545,7 +2555,7 @@ function splitPane(div, percent, horiz, newPane=undefined) {
div.addEventListener('mouseup', (event) => { div.addEventListener('mouseup', (event) => {
console.log("mouseup") console.log("mouseup")
event.currentTarget.setAttribute("dragging", false) event.currentTarget.setAttribute("dragging", false)
event.currentTarget.style.userSelect = 'auto'; // event.currentTarget.style.userSelect = 'auto';
}) })
Coloris({el: ".color-field"}) Coloris({el: ".color-field"})
updateAll() updateAll()