diff --git a/src/views/ProjectView.vue b/src/views/ProjectView.vue
index 241733c..b0716bd 100644
--- a/src/views/ProjectView.vue
+++ b/src/views/ProjectView.vue
@@ -13,7 +13,7 @@
@mouseout="handleCanvasObjectMouseOut">
+
ref.firstChild?.id === id);
- })
- .flat()
- .filter(Boolean) as unknown as Konva.Node[];
+ for (let node of layer.value.getNode().children) {
+ if (
+ node instanceof Konva.Group &&
+ node.id() === `group-${id}`
+ ) return node;
+ }
+ }) as Konva.Node[]
if (!isUndefined(nodes)) transformer.value.getNode().nodes(nodes);
});
// Mouse event handlers
-function handleStageClick(e: Event) {
+function handleStageClick(e: { target: any, evt: MouseEvent }) {
if (isNull(e.target)) return;
- const target = e.target as unknown as Konva.Container;
-
+ const target = e.target as unknown as Konva.Shape | Konva.Group;
// if we are selecting with rect, do nothing
if (selectionRectangle.visible) {
return;
}
// if click on empty area - remove all selections
- if ((e.target as unknown) === target.getStage()) {
+ if (target === target.getStage()) {
selectedIds.value = [];
return;
}
- // do nothing if clicked NOT on our rectangles
- if (!target.hasName("rect")) {
- return;
- }
-
const clickedId = target.attrs.id;
// do we pressed shift or ctrl?
- const metaPressed =
- (e as any).evt?.shiftKey ||
- (e as any).evt?.ctrlKey ||
- (e as any).evt?.metaKey;
+ const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
const isSelected = selectedIds.value.includes(clickedId);
if (!metaPressed && !isSelected) {
@@ -264,7 +263,7 @@ function handleStageClick(e: Event) {
} else if (metaPressed && isSelected) {
// if we pressed keys and node was selected
// we need to remove it from selection:
- selectedIds.value = selectedIds.value.filter((id) => id !== clickedId);
+ selectedIds.value = selectedIds.value.filter(id => id !== clickedId);
} else if (metaPressed && !isSelected) {
// add the node into selection
selectedIds.value = [...selectedIds.value, clickedId];
@@ -328,11 +327,14 @@ function handleMouseUp() {
height: Math.abs(selectionRectangle.y2 - selectionRectangle.y1),
};
+ let currentSelectedIds = [];
for (let [key, shape] of objMap) {
const shapeConfig = objMap.get(shape.id);
if (isUndefined(shapeConfig)) {
return;
- } else if (isUndefined(shapeConfig.box)) {
+ }
+
+ if (isUndefined(shapeConfig.box)) {
if (isUndefined(shapeConfig.box)) {
if (
shapeConfig.config.width &&
@@ -352,35 +354,16 @@ function handleMouseUp() {
}
}
- if (Konva.Util.haveIntersection(selBox, shapeConfig.box as IRect))
- selectedIds.value.push(shapeConfig.id)
+ if (Konva.Util.haveIntersection(selBox, {
+ x: shapeConfig.box.x + shapeConfig.x,
+ y: shapeConfig.box.y + shapeConfig.y,
+ width: shapeConfig.box.width,
+ height: shapeConfig.box.height,
+ }))
+ currentSelectedIds.push(shapeConfig.id)
}
- /* const selected = [...objMap.values()].filter((shape) => {
- // Check if rectangle intersects with selection box
- const shapeConfig = objMap.get(shape.id);
- if (isUndefined(shapeConfig)) {
- return;
- } else if (isUndefined(shapeConfig.box)) {
- if (isUndefined(shapeConfig.box)) {
- if (
- shapeConfig.config.width &&
- shapeConfig.config.height &&
- shapeConfig.config.rotation
- ) {
- shapeConfig.box = calculateRectBounding(
- shapeConfig.config.width,
- shapeConfig.config.height,
- shapeConfig.config.rotation,
- 5,
- );
- } else console.error("Could not calculate rect bounding");
- }
-
- return Konva.Util.haveIntersection(selBox, shapeConfig.box as IRect);
- });
-
- selectedIds.value = selected.map((shapeConfig) => shapeConfig.id); */
+ selectedIds.value = currentSelectedIds;
}
function handleCanvasObjectMouseOver(evt: Event) {