From 16458c577c201279dad141a62320946fac87c2c6 Mon Sep 17 00:00:00 2001 From: nahkd123 Date: Fri, 4 Oct 2024 14:57:18 +0700 Subject: [PATCH] Make node size smaller on narrow curve + hide nodes if linear bezier curve --- .../src/ui/graph/AnimationGraphPane.svelte | 2 +- nahara-motion-ui/src/ui/graph/graph.ts | 55 ++++++++++--------- .../src/ui/timeline/TimelineTrack.svelte | 2 +- 3 files changed, 32 insertions(+), 27 deletions(-) diff --git a/nahara-motion-ui/src/ui/graph/AnimationGraphPane.svelte b/nahara-motion-ui/src/ui/graph/AnimationGraphPane.svelte index 5b494be..e10ad25 100644 --- a/nahara-motion-ui/src/ui/graph/AnimationGraphPane.svelte +++ b/nahara-motion-ui/src/ui/graph/AnimationGraphPane.svelte @@ -137,7 +137,7 @@ ["ease-out", "Ease out", "easing.out"], ["ease-in-out", "Ease in out", "easing.inout"], [ - { type: "bezier", startControlPoint: { x: 0.5, y: -0.2 }, endControlPoint: { x: -0.5, y: 0.2 } }, + { type: "bezier", startControlPoint: { x: 0.5, y: 0 }, endControlPoint: { x: -0.5, y: 0 } }, "Bezier curve", "easing.bezier" ] diff --git a/nahara-motion-ui/src/ui/graph/graph.ts b/nahara-motion-ui/src/ui/graph/graph.ts index 29f7d72..086db52 100644 --- a/nahara-motion-ui/src/ui/graph/graph.ts +++ b/nahara-motion-ui/src/ui/graph/graph.ts @@ -266,6 +266,9 @@ export namespace graph { const { startControlPoint, endControlPoint } = keyframe.easing; const curveWidth = x - lastX; const curveHeight = (typeof keyframe.value != "number" && "model" in keyframe.value) ? 100 : y - lastY; + const nodeRadi = Math.min(curveWidth / 5, 5); + if (curveHeight == 0) return; + const cp1Dist = Math.sqrt((startControlPoint.x * curveWidth)**2 + (startControlPoint.y * curveHeight)**2); const cp2Dist = Math.sqrt((endControlPoint.x * curveWidth)**2 + (endControlPoint.y * curveHeight)**2); @@ -274,13 +277,13 @@ export namespace graph { ctx.beginPath(); if (typeof keyframe.value != "number" && "model" in keyframe.value) ctx.moveTo(lastX, lastY); - else ctx.moveTo(lastX + startControlPoint.x * curveWidth * 5 / cp1Dist, lastY + startControlPoint.y * curveHeight * 5 / cp1Dist); + else ctx.moveTo(lastX + startControlPoint.x * curveWidth * nodeRadi / cp1Dist, lastY + startControlPoint.y * curveHeight * nodeRadi / cp1Dist); ctx.lineTo(lastX + startControlPoint.x * curveWidth, lastY + startControlPoint.y * curveHeight); ctx.stroke(); ctx.closePath(); ctx.beginPath(); - ctx.moveTo(x + endControlPoint.x * curveWidth * 5 / cp2Dist, y + endControlPoint.y * curveHeight * 5 / cp2Dist); + ctx.moveTo(x + endControlPoint.x * curveWidth * nodeRadi / cp2Dist, y + endControlPoint.y * curveHeight * nodeRadi / cp2Dist); ctx.lineTo(x + endControlPoint.x * curveWidth, y + endControlPoint.y * curveHeight); ctx.stroke(); ctx.closePath(); @@ -289,13 +292,13 @@ export namespace graph { ctx.lineWidth = 2; ctx.beginPath(); - ctx.arc(lastX + startControlPoint.x * curveWidth, lastY + startControlPoint.y * curveHeight, 5, 0, Math.PI * 2); + ctx.arc(lastX + startControlPoint.x * curveWidth, lastY + startControlPoint.y * curveHeight, nodeRadi, 0, Math.PI * 2); ctx.closePath(); ctx.fill(); ctx.stroke(); ctx.beginPath(); - ctx.arc(x + endControlPoint.x * curveWidth, y + endControlPoint.y * curveHeight, 5, 0, Math.PI * 2); + ctx.arc(x + endControlPoint.x * curveWidth, y + endControlPoint.y * curveHeight, nodeRadi, 0, Math.PI * 2); ctx.closePath(); ctx.fill(); ctx.stroke(); @@ -344,29 +347,31 @@ export namespace graph { const { startControlPoint, endControlPoint } = keyframe.easing; const cp1Xy = [lastX + startControlPoint.x * curveWidth, lastY + startControlPoint.y * curveHeight]; const cp2Xy = [x + endControlPoint.x * curveWidth, y + endControlPoint.y * curveHeight]; + const nodeRadi = Math.min(curveWidth / 5, 5); + + if (curveHeight != 0) { + // TODO deduplicate code + state.keyframeCurveAreaWidth = curveWidth; + state.keyframeCurveAreaHeight = curveHeight; + + if ((mx - cp1Xy[0]) ** 2 + (my - cp1Xy[1]) ** 2 <= nodeRadi ** 2) { + clickedKeyframe = keyframe; + state.adjustingKeyframe = keyframe; + state.adjustHandleType = "cp1"; + state.keyframeInitialTime = keyframe.time; + state.keyframeInitialCp = { ...keyframe.easing.startControlPoint }; + return "break"; + } - // TODO deduplicate code - state.keyframeCurveAreaWidth = curveWidth; - state.keyframeCurveAreaHeight = curveHeight; - - if ((mx - cp1Xy[0]) ** 2 + (my - cp1Xy[1]) ** 2 <= 5 ** 2) { - clickedKeyframe = keyframe; - state.adjustingKeyframe = keyframe; - state.adjustHandleType = "cp1"; - state.keyframeInitialTime = keyframe.time; - state.keyframeInitialCp = { ...keyframe.easing.startControlPoint }; - return "break"; - } - - if ((mx - cp2Xy[0]) ** 2 + (my - cp2Xy[1]) ** 2 <= 5 ** 2) { - clickedKeyframe = keyframe; - state.adjustingKeyframe = keyframe; - state.adjustHandleType = "cp2"; - state.keyframeInitialTime = keyframe.time; - state.keyframeInitialCp = { ...keyframe.easing.endControlPoint }; - return "break"; + if ((mx - cp2Xy[0]) ** 2 + (my - cp2Xy[1]) ** 2 <= nodeRadi ** 2) { + clickedKeyframe = keyframe; + state.adjustingKeyframe = keyframe; + state.adjustHandleType = "cp2"; + state.keyframeInitialTime = keyframe.time; + state.keyframeInitialCp = { ...keyframe.easing.endControlPoint }; + return "break"; + } } - } const draggingScalarHandle = typeof keyframe.value == "number" && (mx - x) ** 2 + (my - y) ** 2 <= 5 ** 2; diff --git a/nahara-motion-ui/src/ui/timeline/TimelineTrack.svelte b/nahara-motion-ui/src/ui/timeline/TimelineTrack.svelte index 55d7a24..2ece1be 100644 --- a/nahara-motion-ui/src/ui/timeline/TimelineTrack.svelte +++ b/nahara-motion-ui/src/ui/timeline/TimelineTrack.svelte @@ -111,7 +111,7 @@ ["ease-out", "Ease out", "easing.out"], ["ease-in-out", "Ease in out", "easing.inout"], [ - { type: "bezier", startControlPoint: { x: 0.5, y: -0.2 }, endControlPoint: { x: -0.5, y: 0.2 } }, + { type: "bezier", startControlPoint: { x: 0.5, y: 0 }, endControlPoint: { x: -0.5, y: 0 } }, "Bezier curve", "easing.bezier" ]