feat: Polish wave properties

miyanokomiya · Apr 6, 2024 · 16cb57d · 16cb57d
1 parent 12cd4a8
commit 16cb57d
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 11 deletions.
diff --git a/src/assets/icons/shape_wave.svg b/src/assets/icons/shape_wave.svg
diff --git a/src/composables/states/appCanvas/wave/waveSelectedState.ts b/src/composables/states/appCanvas/wave/waveSelectedState.ts
@@ -1,7 +1,7 @@
 import { defineSingleSelectedHandlerState } from "../singleSelectedHandlerState";
 import { movingShapeControlState } from "../movingShapeControlState";
 import { WaveShape } from "../../../../shapes/polygons/wave";
-import { applyAffine, clamp } from "okageo";
+import { IVec2, applyAffine, clamp } from "okageo";
 import { getShapeDetransform, getShapeTransform } from "../../../../shapes/simplePolygon";
 import { renderValueLabel } from "../../../../utils/renderer";
 import { SimplePolygonHandler, newSimplePolygonHandler } from "../../../shapeHandlers/simplePolygonHandler";
@@ -40,15 +40,15 @@ export const newWaveSelectedState = defineSingleSelectedHandlerState<WaveShape,
                             return { waveSize: nextValue };
                           },
                           getControlFn: (shape) => {
-                            return applyAffine(getShapeTransform(shape), { x: shape.waveSize, y: 0 });
+                            return applyAffine(getShapeTransform(shape), getSizeControl(shape));
                           },
                           renderFn: (ctx, renderCtx, shape) => {
                             if (!showLabel) return;
 
                             renderValueLabel(
                               renderCtx,
                               shape.waveSize,
-                              applyAffine(getShapeTransform(shape), { x: shape.waveSize, y: 0 }),
+                              applyAffine(getShapeTransform(shape), getSizeControl(shape)),
                               0,
                               ctx.getScale(),
                             );
@@ -73,15 +73,15 @@ export const newWaveSelectedState = defineSingleSelectedHandlerState<WaveShape,
                             return { waveDepth: nextValue };
                           },
                           getControlFn: (shape) => {
-                            return applyAffine(getShapeTransform(shape), { x: 0, y: shape.waveDepth });
+                            return applyAffine(getShapeTransform(shape), getDepthControl(shape));
                           },
                           renderFn: (ctx, renderCtx, shape) => {
                             if (!showLabel) return;
 
                             renderValueLabel(
                               renderCtx,
                               shape.waveDepth,
-                              applyAffine(getShapeTransform(shape), { x: 0, y: shape.waveDepth }),
+                              applyAffine(getShapeTransform(shape), getDepthControl(shape)),
                               0,
                               ctx.getScale(),
                             );
@@ -102,9 +102,17 @@ export const newWaveSelectedState = defineSingleSelectedHandlerState<WaveShape,
       targetId: target.id,
       getAnchors: () => {
         return [
-          ["waveSize", { x: target.waveSize, y: 0 }],
-          ["waveDepth", { x: 0, y: target.waveDepth }],
+          ["waveSize", getSizeControl(target)],
+          ["waveDepth", getDepthControl(target)],
         ];
       },
     }),
 );
+
+function getSizeControl(shape: WaveShape): IVec2 {
+  return { x: shape.waveSize, y: shape.height / 4 };
+}
+
+function getDepthControl(shape: WaveShape): IVec2 {
+  return { x: shape.waveSize / 4, y: shape.waveDepth };
+}
diff --git a/src/shapes/polygons/wave.ts b/src/shapes/polygons/wave.ts
@@ -20,9 +20,9 @@ export const struct: ShapeStruct<WaveShape> = {
       fill: arg.fill ?? createFillStyle(),
       stroke: arg.stroke ?? createStrokeStyle(),
       width: arg.width ?? 100,
-      height: arg.height ?? 100,
-      waveSize: arg.waveSize ?? 20,
-      waveDepth: arg.waveDepth ?? 10,
+      height: arg.height ?? 40,
+      waveSize: arg.waveSize ?? 100,
+      waveDepth: arg.waveDepth ?? 20,
     };
   },
   getTextRangeRect: undefined,