feat: editable element stats (#6382)

Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
2024-06-13 01:49:46 +08:00
parent 22b39277f5
commit d2f67e619f
40 changed files with 3596 additions and 413 deletions
@@ -0,0 +1,101 @@
+import type { ElementsMap, ExcalidrawElement } from "../../element/types";
+import { rotate } from "../../math";
+import StatsDragInput from "./DragInput";
+import type { DragInputCallbackType } from "./DragInput";
+import { getStepSizedValue, moveElement } from "./utils";
+
+interface PositionProps {
+  property: "x" | "y";
+  element: ExcalidrawElement;
+  elementsMap: ElementsMap;
+}
+
+const STEP_SIZE = 10;
+
+const Position = ({ property, element, elementsMap }: PositionProps) => {
+  const [topLeftX, topLeftY] = rotate(
+    element.x,
+    element.y,
+    element.x + element.width / 2,
+    element.y + element.height / 2,
+    element.angle,
+  );
+  const value =
+    Math.round((property === "x" ? topLeftX : topLeftY) * 100) / 100;
+
+  const handlePositionChange: DragInputCallbackType = ({
+    accumulatedChange,
+    originalElements,
+    originalElementsMap,
+    shouldChangeByStepSize,
+    nextValue,
+  }) => {
+    const origElement = originalElements[0];
+    const [cx, cy] = [
+      origElement.x + origElement.width / 2,
+      origElement.y + origElement.height / 2,
+    ];
+    const [topLeftX, topLeftY] = rotate(
+      origElement.x,
+      origElement.y,
+      cx,
+      cy,
+      origElement.angle,
+    );
+
+    if (nextValue !== undefined) {
+      const newTopLeftX = property === "x" ? nextValue : topLeftX;
+      const newTopLeftY = property === "y" ? nextValue : topLeftY;
+      moveElement(
+        newTopLeftX,
+        newTopLeftY,
+        element,
+        origElement,
+        elementsMap,
+        originalElementsMap,
+      );
+      return;
+    }
+
+    const changeInTopX = property === "x" ? accumulatedChange : 0;
+    const changeInTopY = property === "y" ? accumulatedChange : 0;
+
+    const newTopLeftX =
+      property === "x"
+        ? Math.round(
+            shouldChangeByStepSize
+              ? getStepSizedValue(origElement.x + changeInTopX, STEP_SIZE)
+              : topLeftX + changeInTopX,
+          )
+        : topLeftX;
+
+    const newTopLeftY =
+      property === "y"
+        ? Math.round(
+            shouldChangeByStepSize
+              ? getStepSizedValue(origElement.y + changeInTopY, STEP_SIZE)
+              : topLeftY + changeInTopY,
+          )
+        : topLeftY;
+
+    moveElement(
+      newTopLeftX,
+      newTopLeftY,
+      element,
+      origElement,
+      elementsMap,
+      originalElementsMap,
+    );
+  };
+
+  return (
+    <StatsDragInput
+      label={property === "x" ? "X" : "Y"}
+      elements={[element]}
+      dragInputCallback={handlePositionChange}
+      value={value}
+    />
+  );
+};
+
+export default Position;