From ea5fe3952f4ac3d2c3ad05c2f1d79ade2843b62a Mon Sep 17 00:00:00 2001 From: Braulio Date: Thu, 5 Dec 2024 12:03:29 +0100 Subject: [PATCH 1/4] resize upper corner --- src/pods/canvas/canvas.pod.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/pods/canvas/canvas.pod.tsx b/src/pods/canvas/canvas.pod.tsx index 930989ff..3c45776d 100644 --- a/src/pods/canvas/canvas.pod.tsx +++ b/src/pods/canvas/canvas.pod.tsx @@ -109,6 +109,22 @@ export const CanvasPod = () => { window.__TESTING_KONVA_LAYER__ = layerRef.current; } + transformerRef.current?.on('transformend', () => { + const transformer = transformerRef.current; + const selectedShapes = selectedShapesRefs.current; + if (isTransfomerBeingDragged || !transformer) return; + + if (selectedShapes && selectedShapes.length === 1) { + console.log('transformend'); + transformer.nodes([]); + transformer.getLayer()?.batchDraw(); + setTimeout(() => { + transformer.nodes(selectedShapes); // Vuelve a asignar los nodos + transformer.getLayer()?.batchDraw(); // Redibuja la capa nuevamente + }, 0); + } + }); + { /* TODO: add other animation for isDraggerOver */ } From 66a76c9c499e5cffe7bc6c9e838cceb82b67a1bd Mon Sep 17 00:00:00 2001 From: Braulio Date: Thu, 5 Dec 2024 19:19:47 +0100 Subject: [PATCH 2/4] remove console.log --- .../tabsbar/business/tabsbar.business.spec.ts | 4 ---- src/pods/canvas/canvas.pod.tsx | 1 - 2 files changed, 5 deletions(-) diff --git a/src/common/components/mock-components/front-rich-components/tabsbar/business/tabsbar.business.spec.ts b/src/common/components/mock-components/front-rich-components/tabsbar/business/tabsbar.business.spec.ts index 5e6b414b..b6e3892f 100644 --- a/src/common/components/mock-components/front-rich-components/tabsbar/business/tabsbar.business.spec.ts +++ b/src/common/components/mock-components/front-rich-components/tabsbar/business/tabsbar.business.spec.ts @@ -28,11 +28,7 @@ describe('tabsbar.business tests', () => { font: { fontSize: 14, fontFamily: 'Arial' }, }); - console.log({ tabs }, { containerWidth }, { minTabWidth }); - console.log({ result }); - const totalSum = _sum(result.widthList) + (tabs.length - 1) * tabsGap; - console.log('totalSum: ', totalSum); // Assert expect(result.widthList[0]).not.toBe(0); diff --git a/src/pods/canvas/canvas.pod.tsx b/src/pods/canvas/canvas.pod.tsx index 3c45776d..a55cea10 100644 --- a/src/pods/canvas/canvas.pod.tsx +++ b/src/pods/canvas/canvas.pod.tsx @@ -115,7 +115,6 @@ export const CanvasPod = () => { if (isTransfomerBeingDragged || !transformer) return; if (selectedShapes && selectedShapes.length === 1) { - console.log('transformend'); transformer.nodes([]); transformer.getLayer()?.batchDraw(); setTimeout(() => { From a53bbbecc0faa62d31782d7d51d54afbf6ebfd57 Mon Sep 17 00:00:00 2001 From: Braulio Date: Fri, 6 Dec 2024 13:24:00 +0100 Subject: [PATCH 3/4] fix top and left anchors resize --- src/pods/canvas/use-transform.hook.ts | 47 +++++++++++++++++++++++++-- 1 file changed, 45 insertions(+), 2 deletions(-) diff --git a/src/pods/canvas/use-transform.hook.ts b/src/pods/canvas/use-transform.hook.ts index 5ee9da9c..c5b7beba 100644 --- a/src/pods/canvas/use-transform.hook.ts +++ b/src/pods/canvas/use-transform.hook.ts @@ -18,6 +18,7 @@ export const useTransform = ( selectedShapesRefs, transformerRef, selectedShapeType, + getSelectedShapeData, } = useCanvasContext().selectionInfo; const setTransfomerSingleSelection = () => { @@ -46,14 +47,56 @@ export const useTransform = ( } }, [selectedShapesIds]); + const isDraggingFromTopAnchor = () => { + const transformer = transformerRef.current; + if (!transformer) { + return false; + } + + return ( + transformer?.getActiveAnchor() === 'top-left' || + transformer?.getActiveAnchor() === 'top-center' || + transformer?.getActiveAnchor() === 'top-right' + ); + }; + + const isDraggingFromLeftAnchor = () => { + const transformer = transformerRef.current; + if (!transformer) { + return false; + } + + console.log(transformer?.getActiveAnchor()); + + return ( + transformer?.getActiveAnchor() === 'top-left' || + transformer?.getActiveAnchor() === 'middle-left' || + transformer?.getActiveAnchor() === 'bottom-left' + ); + }; + const updateSingleItem = (node: Node, skipHistory: boolean) => { const scaleX = node.scaleX(); const scaleY = node.scaleY(); const position = { x: node.x(), y: node.y() }; const selectedShapeId = selectedShapesIds[0]; - const newWidth = node.width() * scaleX; - const newHeight = node.height() * scaleY; + let newWidth = node.width() * scaleX; + let newHeight = node.height() * scaleY; + + if (isDraggingFromTopAnchor()) { + const oldShapedata = getSelectedShapeData(); + const oldHeight = oldShapedata?.height ?? 0; + + newHeight = oldHeight + (oldShapedata?.y ?? 0) - position.y; + } + + if (isDraggingFromLeftAnchor()) { + const oldShapedata = getSelectedShapeData(); + const oldWidth = oldShapedata?.width ?? 0; + + newWidth = oldWidth + (oldShapedata?.x ?? 0) - position.x; + } updateShapeSizeAndPosition( selectedShapeId, From 4bf4daf30edba07a48ee75c3723f6b194a7dddeb Mon Sep 17 00:00:00 2001 From: Braulio Date: Fri, 6 Dec 2024 18:27:32 +0100 Subject: [PATCH 4/4] updates and comments --- src/pods/canvas/canvas.pod.tsx | 42 ++++++++++++++++++--------- src/pods/canvas/use-transform.hook.ts | 9 ++++-- 2 files changed, 35 insertions(+), 16 deletions(-) diff --git a/src/pods/canvas/canvas.pod.tsx b/src/pods/canvas/canvas.pod.tsx index a55cea10..a51e7764 100644 --- a/src/pods/canvas/canvas.pod.tsx +++ b/src/pods/canvas/canvas.pod.tsx @@ -1,4 +1,4 @@ -import { createRef, useMemo, useRef, useState } from 'react'; +import { createRef, useEffect, useMemo, useRef, useState } from 'react'; import Konva from 'konva'; import { useCanvasContext } from '@/core/providers'; import { Layer, Line, Rect, Stage, Transformer } from 'react-konva'; @@ -109,20 +109,34 @@ export const CanvasPod = () => { window.__TESTING_KONVA_LAYER__ = layerRef.current; } - transformerRef.current?.on('transformend', () => { + // We need this trick, if the user plays hard with the transfoermer, + // resizing quite fast it mabe get out of sync wit the shape + // so once the transformer ends, we reassign the nodes to the transformer + // and redraw the layer + useEffect(() => { const transformer = transformerRef.current; - const selectedShapes = selectedShapesRefs.current; - if (isTransfomerBeingDragged || !transformer) return; - - if (selectedShapes && selectedShapes.length === 1) { - transformer.nodes([]); - transformer.getLayer()?.batchDraw(); - setTimeout(() => { - transformer.nodes(selectedShapes); // Vuelve a asignar los nodos - transformer.getLayer()?.batchDraw(); // Redibuja la capa nuevamente - }, 0); - } - }); + if (!transformer) return; + + const handleTransformEnd = () => { + const selectedShapes = selectedShapesRefs.current; + if (isTransfomerBeingDragged || !transformer) return; + + if (selectedShapes && selectedShapes.length === 1) { + transformer.nodes([]); + transformer.getLayer()?.batchDraw(); + setTimeout(() => { + transformer.nodes(selectedShapes); // Vuelve a asignar los nodos + transformer.getLayer()?.batchDraw(); // Redibuja la capa nuevamente + }, 0); + } + }; + + transformer.on('transformend', handleTransformEnd); + + return () => { + transformer.off('transformend', handleTransformEnd); + }; + }, [transformerRef.current]); { /* TODO: add other animation for isDraggerOver */ diff --git a/src/pods/canvas/use-transform.hook.ts b/src/pods/canvas/use-transform.hook.ts index c5b7beba..33f3e7ad 100644 --- a/src/pods/canvas/use-transform.hook.ts +++ b/src/pods/canvas/use-transform.hook.ts @@ -47,6 +47,9 @@ export const useTransform = ( } }, [selectedShapesIds]); + // If the user isDragging from the top or left anchot we need to treat + // it as an special case, since the X,Y top position change and it may + // impact the size of the transformer (see where this is being used) const isDraggingFromTopAnchor = () => { const transformer = transformerRef.current; if (!transformer) { @@ -66,8 +69,6 @@ export const useTransform = ( return false; } - console.log(transformer?.getActiveAnchor()); - return ( transformer?.getActiveAnchor() === 'top-left' || transformer?.getActiveAnchor() === 'middle-left' || @@ -84,6 +85,10 @@ export const useTransform = ( let newWidth = node.width() * scaleX; let newHeight = node.height() * scaleY; + // Top and Left anchor, for this cases we need to do an extra calc + // to balance top of X,Y coordinates (origin) and transformer size + // if we don't to this adjustements in this case the shape may be + // up or down instead of resizing if (isDraggingFromTopAnchor()) { const oldShapedata = getSelectedShapeData(); const oldHeight = oldShapedata?.height ?? 0;