速度グラフの表示処理/表示切替処理を実装

mimaraka · mimaraka · commit 3f05a9733359 · 2024-10-10T18:18:54.000+09:00
diff --git a/curve_editor/host_object_editor_graph.cpp b/curve_editor/host_object_editor_graph.cpp
@@ -15,6 +15,16 @@ namespace cved {
 		return result;
 	}
 
+	std::vector<double> GraphEditorHostObject::get_curve_velocity_array(EditMode mode, double start_x, double start_y, double end_x, double end_y, size_t n) {
+		std::vector<double> result;
+		for (size_t i = 0u; i < n; i++) {
+			double x = start_x + (end_x - start_x) * i / (n - 1);
+			double y = global::editor.editor_graph().get_curve(mode)->get_velocity(x, start_y, end_y);
+			result.emplace_back(y);
+		}
+		return result;
+	}
+
 	std::wstring GraphEditorHostObject::get_curve_type(uintptr_t curve_ptr) {
 		auto curve = reinterpret_cast<GraphCurve*>(curve_ptr);
 		if (!curve) {
diff --git a/curve_editor/host_object_editor_graph.hpp b/curve_editor/host_object_editor_graph.hpp
@@ -14,6 +14,7 @@
 namespace cved {
 	class GraphEditorHostObject : public mkaul::wv2::HostObject {
 		static std::vector<double> get_curve_value_array(EditMode mode, double start_x, double start_y, double end_x, double end_y, size_t n);
+		static std::vector<double> get_curve_velocity_array(EditMode mode, double start_x, double start_y, double end_x, double end_y, size_t n);
 		static std::wstring get_curve_type(uintptr_t curve_ptr);
 
 	public:
@@ -22,6 +23,10 @@ namespace cved {
 				return global::editor.editor_graph().get_curve(mode)->get_value(prog, start, end);
 			});
 			register_member(L"getCurveValueArray", DispatchType::Method, get_curve_value_array);
+			register_member(L"getCurveVelocity", DispatchType::Method, +[](EditMode mode, double prog, double start, double end) {
+				return global::editor.editor_graph().get_curve(mode)->get_velocity(prog, start, end);
+			});
+			register_member(L"getCurveVelocityArray", DispatchType::Method, get_curve_velocity_array);
 			register_member(L"getCurrentCurvePtr", DispatchType::Method, +[] {
 				return reinterpret_cast<std::uintptr_t>(global::editor.editor_graph().current_curve());
 			});
diff --git a/curve_editor/ui/css/editor_graph.css b/curve_editor/ui/css/editor_graph.css
@@ -4,6 +4,7 @@
     --color-fit-button: rgb(240, 240, 240);
     --color-fit-button-hover: rgb(224, 224, 224);
     --color-axis: rgb(0, 0, 0);
+    --color-velocity-path: rgb(0, 0, 0);
     --color-rect: rgb(200, 200, 200);
     --anchor-radius: 4px;
 }
@@ -13,6 +14,7 @@
         --color-fit-button: rgb(35, 35, 35);
         --color-fit-button-hover: rgb(52, 52, 52);
         --color-axis: rgb(255, 255, 255);
+        --color-velocity-path: rgb(255, 255, 255);
         --color-rect: rgb(17, 17, 17);
     }
 }
@@ -77,6 +79,11 @@ body {
     text-anchor: start;
 }
 
+.velocity-path {
+    stroke: var(--color-velocity-path);
+    opacity: 0.3;
+}
+
 #fit {
     position: absolute;
     top: 15px;
@@ -90,19 +97,27 @@ body {
     color: var(--color-content);
     transition: all 0.2s ease-out;
 }
+
 #fit:hover {
     background-color: var(--color-fit-button-hover);
     opacity: 0.8;
 }
+
 #fit:active {
     background-color: var(--color-control-active);
     opacity: 0.8;
 }
+
+#fit:focus {
+    outline: none;
+}
+
 .visible {
     visibility: visible;
     opacity: 0.5;
     transition: 0.3s;
 }
+
 .hidden {
     visibility: hidden;
     opacity: 0;
diff --git a/curve_editor/ui/js/editor_graph.js b/curve_editor/ui/js/editor_graph.js
@@ -47,10 +47,15 @@ class ImageObject {
 }
 
 // D3.js用のデータを生成
-const createCurvePathData = (startGraphX, endGraphX) => {
+const createCurvePathData = (startGraphX, endGraphX, velocity = false) => {
     const n = config.curveResolution;
-    let data = []
-    const yArray = graphEditor.getCurveValueArray(config.editMode, startGraphX, 0, endGraphX, 1, n);
+    let data = [];
+    let yArray;
+    if (velocity) {
+        yArray = graphEditor.getCurveVelocityArray(config.editMode, startGraphX, 0, endGraphX, 1, n);
+    } else {
+        yArray = graphEditor.getCurveValueArray(config.editMode, startGraphX, 0, endGraphX, 1, n);
+    } 
     for (let i = 0; i < n; i++) {
         const x = startGraphX + (endGraphX - startGraphX) / (n - 1) * i;
         data.push({
@@ -62,25 +67,42 @@ const createCurvePathData = (startGraphX, endGraphX) => {
 }
 
 // 描画するカーブの内容を更新
-const updateCurvePath = (t = null) => {
-    const startGraphX = Math.max(0, currentScaleX.invert(0));
-    const endGraphX = Math.min(1, currentScaleX.invert(width));
+const updateCurvePath = (t = null, zoom = false) => {
+    const startGraphX = Math.max(0, currentScaleX.invert(zoom ? -200 : 0));
+    const endGraphX = Math.min(1, currentScaleX.invert(width + (zoom ? 200 : 0)));
 
-    path.datum(createCurvePathData(startGraphX, endGraphX));
-    (t ? path.transition(t) : path).attr('d', d3.line()
+    curvePath.datum(createCurvePathData(startGraphX, endGraphX));
+    (t ? curvePath.transition(t) : curvePath).attr('d', d3.line()
         .x(d => originalScaleX(d.x))
         .y(d => originalScaleY(d.y))
         .curve(curve));
 
-    const editMode = config.editMode;
-    if (editMode == 2 || editMode == 3 || editMode == 4) {
-        window.top.postMessage({
-           to: 'panel-editor',
-           command: 'updateParam'
-        });
+    if (!zoom) {
+        const editMode = config.editMode;
+        if (editMode == 2 || editMode == 3 || editMode == 4) {
+            window.top.postMessage({
+            to: 'panel-editor',
+            command: 'updateParam'
+            });
+        }
     }
 }
 
+// 描画するカーブの内容を更新
+const updateVelocityPath = (t = null) => {
+    if (!config.showVelocityGraph) {
+        return;
+    }
+    const startGraphX = Math.max(0, currentScaleX.invert(0));
+    const endGraphX = Math.min(1, currentScaleX.invert(width));
+
+    velocityPath.datum(createCurvePathData(startGraphX, endGraphX, true));
+    (t ? velocityPath.transition(t) : velocityPath).attr('d', d3.line()
+        .x(d => originalScaleX(d.x))
+        .y(d => originalScaleY(d.y))
+        .curve(curve));
+}
+
 const updateHandles = () => {
     handles.remove();
     handles = createHandles(getCurrentCurve(), g, currentScaleX, currentScaleY);
@@ -90,33 +112,43 @@ const updateHandleVisibility = () => {
     $('.anchor, .handle, .handle-line').css('visibility', config.showHandle ? 'visible' : 'hidden');
 }
 
+const updateVelocityGraphVisibility = () => {
+    velocityPath.style('visibility', config.showVelocityGraph ? 'visible' : 'hidden');
+    updateVelocityPath();
+}
+
 window.addEventListener('message', function(event) {
     switch (event.data.command) {
         case 'changeId':
             updateCurvePath();
+            updateVelocityPath();
             fit(0);
             updateHandles();
             break;
 
         case 'updateCurvePath':
             updateCurvePath();
+            updateVelocityPath();
             break;
 
         case 'updateHandles':
             updateHandles();
             updateCurvePath();
+            updateVelocityPath();
             break;
 
         case 'updateHandlePos':
             if (handles instanceof NormalHandles && handles.segmentHandlesArray.length > 1) {
                 updateHandles();
                 updateCurvePath();
+                updateVelocityPath();
             }
             else {
                 const duration = config.enableAnimation ? 180 : 0;
                 const t = d3.transition().duration(duration).ease(d3.easeCubicOut);
                 handles.updateHandles(t);
                 updateCurvePath(t);
+                updateVelocityPath(t);
             }
             break;
 
@@ -129,11 +161,16 @@ window.addEventListener('message', function(event) {
             updateHandleVisibility();
             break;
 
+        case 'updateVelocityGraphVisibility':
+            updateVelocityGraphVisibility();
+            break;
+
         case 'applyPreferences':
             image.load(config.setBackgroundImage ? config.backgroundImagePath : '');
-            path.attr('stroke', config.curveColor)
+            curvePath.attr('stroke', config.curveColor)
                 .attr('stroke-width', config.curveThickness);
             updateCurvePath();
+            updateVelocityPath();
             break;
     }
 });
@@ -158,6 +195,7 @@ const svg = d3.select('#canvas')
         if (handles instanceof NormalHandles && x >= 0 && x <= 1) {
             handles.curve.addCurve(x, y, currentScaleX(1) - currentScaleX(0));
             updateCurvePath();
+            updateVelocityPath();
             updateHandles();
         }
     })
@@ -233,8 +271,17 @@ const line = d3.line()
     .y(d => originalScaleY(d.y))
     .curve(curve);
 
+const velocityPath = zoomContainer.append('path')
+    .datum(createCurvePathData(0, 1, true))
+    .attr('fill', 'none')
+    .attr('class', 'velocity-path')
+    .attr('stroke-width', config.curveThickness)
+    .attr('d', line);
+
+updateVelocityGraphVisibility();
+
 // カーブ
-const path = zoomContainer.append('path')
+const curvePath = zoomContainer.append('path')
     .datum(createCurvePathData(0, 1))
     .attr('fill', 'none')
     .attr('stroke', config.curveColor)
@@ -319,14 +366,8 @@ const zoom = d3.zoom()
         const duration = config.enableAnimation ? 180 : 0;
         const t = d3.transition().duration(duration).ease(d3.easeCubicOut);
 
-        const startGraphX = Math.max(0, currentScaleX.invert(-200));
-        const endGraphX = Math.min(1, currentScaleX.invert(width + 200));
-
-        path.datum(createCurvePathData(startGraphX, endGraphX));
-        path.attr('d', d3.line()
-            .x(d => originalScaleX(d.x))
-            .y(d => originalScaleY(d.y))
-            .curve(curve));
+        updateCurvePath(null, true);
+        updateVelocityPath();
 
         if (event.sourceEvent && event.sourceEvent.type === 'wheel') {
             gridX.transition(t).call(axisX.scale(currentScaleX));
@@ -337,7 +378,9 @@ const zoom = d3.zoom()
             gLabelY.transition(t).call(axisLabelY(currentScaleY));
             zoomContainer.transition(t)
                 .attr('transform', event.transform);
-            path.transition(t)
+            curvePath.transition(t)
+                .attr('stroke-width', config.curveThickness / event.transform.k);
+            velocityPath.transition(t)
                 .attr('stroke-width', config.curveThickness / event.transform.k);
             leftRect.transition(t)
                 .attr('width', Math.max(0, currentScaleX(0)));
@@ -384,7 +427,9 @@ const fit = (customDuration = 700) => {
     const t = d3.transition().duration(duration);
     svg.transition(t)
         .call(zoom.transform, d3.zoomIdentity);
-    path.transition(t)
+    curvePath.transition(t)
+        .attr('stroke-width', config.curveThickness);
+    velocityPath.transition(t)
         .attr('stroke-width', config.curveThickness);
 }
 
@@ -431,7 +476,7 @@ $(window).on('keydown', event => {
             command: 'goForwardId'
         }, '*');
         break;
-    }    
+    }
 });
 
 $(window).on('resize', () => {
@@ -471,7 +516,11 @@ $(window).on('resize', () => {
         .attr('height', height);
     handles.rescaleX(currentScaleX);
     handles.rescaleY(currentScaleY);
-    path.attr('d', d3.line()
+    curvePath.attr('d', d3.line()
+        .x(d => originalScaleX(d.x))
+        .y(d => originalScaleY(d.y))
+        .curve(curve));
+    velocityPath.attr('d', d3.line()
         .x(d => originalScaleX(d.x))
         .y(d => originalScaleY(d.y))
         .curve(curve));
