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) {