From f32c51ca38e29dc84e7647ca0ca672eead8b510a Mon Sep 17 00:00:00 2001 From: Peaceultime Date: Thu, 16 Jan 2025 17:39:33 +0100 Subject: [PATCH] Remove Tweening (looked laggy). Add edge property editing. Improve Edge selection and visualisation. --- components/CanvasEditor.vue | 69 +++++++++++++----------- components/canvas/CanvasEdgeEditor.vue | 42 ++++++++++++--- components/canvas/CanvasNodeEditor.vue | 6 ++- composables/useTween.ts | 70 ------------------------- db.sqlite-shm | Bin 32768 -> 32768 bytes db.sqlite-wal | Bin 1236032 -> 2323712 bytes 6 files changed, 77 insertions(+), 110 deletions(-) delete mode 100644 composables/useTween.ts diff --git a/components/CanvasEditor.vue b/components/CanvasEditor.vue index 66bffea..95ed656 100644 --- a/components/CanvasEditor.vue +++ b/components/CanvasEditor.vue @@ -25,8 +25,6 @@ interface HistoryAction type NodeEditor = InstanceType; type EdgeEditor = InstanceType; -const TWEEN_DURATION = 200; - const cancelEvent = (e: Event) => e.preventDefault(); const stopPropagation = (e: Event) => e.stopImmediatePropagation(); function getID(length: number) @@ -72,8 +70,6 @@ const focusing = ref(), editing = ref(); const canvasRef = useTemplateRef('canvasRef'), transformRef = useTemplateRef('transformRef'); const nodes = useTemplateRef('nodes'), edges = useTemplateRef('edges'); -const xTween = useTween(dispX, linear, updateTransform), yTween = useTween(dispY, linear, updateTransform), zoomTween = useTween(zoom, linear, updateTransform); - const focused = computed(() => focusing.value ? focusing.value?.type === 'node' ? nodes.value?.find(e => !!e && e.id === focusing.value!.id) : edges.value?.find(e => !!e && e.id === focusing.value!.id) : undefined), edited = computed(() => editing.value ? editing.value?.type === 'node' ? nodes.value?.find(e => !!e && e.id === editing.value!.id) : edges.value?.find(e => !!e && e.id === editing.value!.id) : undefined); const history = ref([]); @@ -82,12 +78,9 @@ const historyCursor = computed(() => history.value.length > 0 && historyPos.valu const reset = (_: MouseEvent) => { zoom.value = minZoom.value; - zoomTween.refresh(); dispX.value = 0; - xTween.refresh(); dispY.value = 0; - yTween.refresh(); updateTransform(); } @@ -102,14 +95,12 @@ onMounted(() => { let lastX = 0, lastY = 0, lastDistance = 0; let box = canvasRef.value?.getBoundingClientRect()!; const dragMove = (e: MouseEvent) => { - dispX.value -= (lastX - e.clientX) / zoom.value; - dispY.value -= (lastY - e.clientY) / zoom.value; + dispX.value = dispX.value - (lastX - e.clientX) / zoom.value; + dispY.value = dispY.value - (lastY - e.clientY) / zoom.value; + lastX = e.clientX; lastY = e.clientY; - xTween.refresh(); - yTween.refresh(); - updateTransform(); }; const dragEnd = (e: MouseEvent) => { @@ -146,10 +137,10 @@ onMounted(() => { const centerX = (box.x + box.width / 2), centerY = (box.y + box.height / 2); const mousex = centerX - e.clientX, mousey = centerY - e.clientY; - xTween.update(dispX.value - (mousex / (diff * zoom.value) - mousex / zoom.value), TWEEN_DURATION); - yTween.update(dispY.value - (mousey / (diff * zoom.value) - mousey / zoom.value), TWEEN_DURATION); + dispX.value = dispX.value - (mousex / (diff * zoom.value) - mousex / zoom.value); + dispY.value = dispY.value - (mousey / (diff * zoom.value) - mousey / zoom.value); - zoomTween.update(clamp(zoom.value * diff, minZoom.value, 3), TWEEN_DURATION); + zoom.value = clamp(zoom.value * diff, minZoom.value, 3) updateTransform(); }, { passive: true }); @@ -187,8 +178,8 @@ onMounted(() => { }; const touchmove = (e: TouchEvent) => { const pos = center(e.touches); - dispX.value -= (lastX - pos.x) / zoom.value; - dispY.value -= (lastY - pos.y) / zoom.value; + dispX.value = dispX.value - (lastX - pos.x) / zoom.value; + dispY.value = dispY.value - (lastY - pos.y) / zoom.value; lastX = pos.x; lastY = pos.y; @@ -197,13 +188,9 @@ onMounted(() => { const dist = distance(e.touches); const diff = dist / lastDistance; - zoom.value = clamp(zoom.value * diff, minZoom.value, 3); //@TODO + zoom.value = clamp(zoom.value * diff, minZoom.value, 3); } - zoomTween.refresh(); - xTween.refresh(); - yTween.refresh(); - updateTransform(); }; @@ -214,8 +201,8 @@ function updateTransform() { if(transformRef.value) { - transformRef.value.style.transform = `scale3d(${zoomTween.current()}, ${zoomTween.current()}, 1) translate3d(${xTween.current()}px, ${yTween.current()}px, 0)`; - transformRef.value.style.setProperty('--tw-scale', zoomTween.current().toString()); + transformRef.value.style.transform = `scale3d(${zoom.value}, ${zoom.value}, 1) translate3d(${dispX.value}px, ${dispY.value}px, 0)`; + transformRef.value.style.setProperty('--tw-scale', zoom.value.toString()); } } function moveNode(ids: string[], deltax: number, deltay: number) @@ -271,7 +258,10 @@ function edit(element: Element) function createNode(e: MouseEvent) { let box = canvasRef.value?.getBoundingClientRect()!; - const node: CanvasNode = { id: getID(16), x: (e.layerX / zoom.value) - box.width / 2 - 50, y: (e.layerY / zoom.value) - box.height / 2 - 25, width: 100, height: 50, type: 'text' }; + const width = 250, height = 100; + const x = (e.layerX / zoom.value) - dispX.value - (width / 2); + const y = (e.layerY / zoom.value) - dispY.value - (height / 2); + const node: CanvasNode = { id: getID(16), x, y, width, height, type: 'text' }; if(!canvas.value.nodes) canvas.value.nodes = [node]; @@ -331,8 +321,25 @@ function editNodeProperty(ids: string[], property: T addAction('property', actions); } +function editEdgeProperty(ids: string[], property: T, value: CanvasEdge[T]) +{ + if(ids.length === 0) + return; + + const actions: HistoryAction<'property'>[] = []; + + for(const id of ids) + { + const copy = JSON.parse(JSON.stringify(canvas.value.edges!.find(e => e.id === id)!)) as CanvasEdge; + canvas.value.edges!.find(e => e.id === id)![property] = value; + actions.push({ element: { type: 'edge', id }, from: copy, to: canvas.value.edges!.find(e => e.id === id)! }); + } + + addAction('property', actions); +} const unselect = () => { + if(focusing.value) console.log("Unselecting %s (%s)", focusing.value.id, focusing.value.type); if(focusing.value !== undefined) { focused.value?.dom?.removeEventListener('click', stopPropagation); @@ -488,16 +495,16 @@ useShortcuts({