Feat/clip

src/components/atoms/BlockField.tsx

@@ -16,7 +16,7 @@ export const BlockGroupField: React.FC<Props> = ({ label, children }) => {
   return (
     <div className="flex flex-col gap-1">
       <span>{label}:</span>
-      <div className="w-full ml-2 pl-2 border-l border-gray-400 flex flex-col gap-1">{children}</div>
+      <div className="ml-2 pl-2 border-l border-gray-400 flex flex-col gap-1">{children}</div>
     </div>
   );
 };

src/components/atoms/InlineField.tsx

@@ -1,11 +1,12 @@
 interface Props {
   label: string;
+  inert?: boolean;
   children: React.ReactNode;
 }
 
-export const InlineField: React.FC<Props> = ({ label, children }) => {
+export const InlineField: React.FC<Props> = ({ label, inert, children }) => {
   return (
-    <div className="flex items-center">
+    <div className={"flex items-center" + (inert ? " opacity-50" : "")} {...{ inert: inert ? "" : undefined }}>
       <span>{label}:</span>
       <div className="ml-auto">{children}</div>
     </div>

src/components/shapeInspectorPanel/ClipInspector.tsx

@@ -0,0 +1,89 @@
+import { useCallback } from "react";
+import { ClipRule, Shape } from "../../models";
+import { BlockGroupField } from "../atoms/BlockField";
+import iconClipIn from "../../assets/icons/clip_rule_in.svg";
+import iconClipOut from "../../assets/icons/clip_rule_out.svg";
+import { GroupShape, isGroupShape } from "../../shapes/group";
+import { InlineField } from "../atoms/InlineField";
+import { ToggleInput } from "../atoms/inputs/ToggleInput";
+
+const rules: { value: ClipRule; icon: string }[] = [
+  { value: "out", icon: iconClipOut },
+  { value: "in", icon: iconClipIn },
+];
+
+interface Props {
+  targetShape: Shape;
+  updateTargetShape: (patch: Partial<Shape>) => void;
+  updateTargetGroupShape: (patch: Partial<GroupShape>) => void;
+}
+
+export const ClipInspector: React.FC<Props> = ({ targetShape, updateTargetShape, updateTargetGroupShape }) => {
+  const handleClipRuleChange = useCallback(
+    (val: ClipRule) => {
+      updateTargetGroupShape({ clipRule: val });
+    },
+    [updateTargetGroupShape],
+  );
+
+  const handleClippingChange = useCallback(
+    (val: boolean) => {
+      updateTargetShape({ clipping: val });
+    },
+    [updateTargetShape],
+  );
+
+  const handleCropChange = useCallback(
+    (val: boolean) => {
+      updateTargetShape({ cropClipBorder: val });
+    },
+    [updateTargetShape],
+  );
+
+  return (
+    <BlockGroupField label="Clip">
+      <InlineField label="Clip within parent group">
+        <ToggleInput value={targetShape.clipping} onChange={handleClippingChange} />
+      </InlineField>
+      <InlineField label="Crop outside border" inert={!targetShape.clipping}>
+        <ToggleInput value={targetShape.cropClipBorder} onChange={handleCropChange} />
+      </InlineField>
+      {isGroupShape(targetShape) ? (
+        <InlineField label="Clip mode" inert={targetShape.clipping}>
+          <div className="flex flex-wrap justify-end gap-1">
+            {rules.map((rule) => (
+              <ItemButton
+                key={rule.value}
+                value={rule.value}
+                icon={rule.icon}
+                selectedValue={targetShape.clipRule ?? "out"}
+                onClick={handleClipRuleChange}
+              />
+            ))}
+          </div>
+        </InlineField>
+      ) : undefined}
+    </BlockGroupField>
+  );
+};
+
+interface ItemButtonProps {
+  value: ClipRule;
+  icon: string;
+  selectedValue?: ClipRule;
+  onClick?: (val: ClipRule) => void;
+}
+
+const ItemButton: React.FC<ItemButtonProps> = ({ value, icon, selectedValue, onClick }) => {
+  const handleClick = useCallback(() => {
+    onClick?.(value);
+  }, [value, onClick]);
+
+  const highlightClassName = value === (selectedValue ?? 0) ? " border-cyan-400" : " border-white";
+
+  return (
+    <button type="button" onClick={handleClick} className={"w-12 h-12 border-2" + highlightClassName}>
+      <img src={icon} alt={value} />
+    </button>
+  );
+};

src/components/shapeInspectorPanel/GroupConstraintInspector.tsx

@@ -74,7 +74,7 @@ interface ItemButtonProps {
   onClick?: (val: GroupConstraint) => void;
 }
 
-export const ItemButton: React.FC<ItemButtonProps> = ({ value, icon, vertical, selectedValue, onClick }) => {
+const ItemButton: React.FC<ItemButtonProps> = ({ value, icon, vertical, selectedValue, onClick }) => {
   const handleClick = useCallback(() => {
     onClick?.(value);
   }, [value, onClick]);

src/components/shapeInspectorPanel/ShapeInspectorPanel.tsx

@@ -9,6 +9,9 @@ import { LineShapeInspector } from "./LineShapeInspector";
 import { LineShape, isLineShape } from "../../shapes/line";
 import { GroupConstraintInspector } from "./GroupConstraintInspector";
 import { MultipleShapesInspector } from "./MultipleShapesInspector";
+import { canClip } from "../../shapes";
+import { GroupShape, isGroupShape } from "../../shapes/group";
+import { ClipInspector } from "./ClipInspector";
 
 export const ShapeInspectorPanel: React.FC = () => {
   const targetShape = useSelectedShape();
@@ -110,6 +113,22 @@ const ShapeInspectorPanelWithShape: React.FC<ShapeInspectorPanelWithShapeProps>
     [targetShapes, getShapeComposite, patchShapes],
   );
 
+  const updateGroupShapesBySamePatch = useCallback(
+    (patch: Partial<GroupShape>) => {
+      const shapeComposite = getShapeComposite();
+
+      const layoutPatch = getPatchByLayouts(shapeComposite, {
+        update: targetShapes.reduce<{ [id: string]: Partial<Shape> }>((p, s) => {
+          if (!isGroupShape(s)) return p;
+          p[s.id] = patch;
+          return p;
+        }, {}),
+      });
+      patchShapes(layoutPatch);
+    },
+    [targetShapes, getShapeComposite, patchShapes],
+  );
+
   return (
     <form onSubmit={handleSubmit} className="flex flex-col gap-2">
       {targetShapes.length >= 2 ? (
@@ -143,6 +162,13 @@ const ShapeInspectorPanelWithShape: React.FC<ShapeInspectorPanelWithShapeProps>
         </>
       )}
       <GroupConstraintInspector targetShape={targetShape} updateTargetShape={updateTargetShapesBySamePatch} />
+      {canClip(getShapeComposite().getShapeStruct, targetShape) ? (
+        <ClipInspector
+          targetShape={targetShape}
+          updateTargetShape={updateTargetShapesBySamePatch}
+          updateTargetGroupShape={updateGroupShapesBySamePatch}
+        />
+      ) : undefined}
       <button type="submit" className="hidden" />
     </form>
   );

src/composables/shapeComposite.spec.ts

@@ -2,6 +2,7 @@ import { describe, expect, test } from "vitest";
 import {
   canGroupShapes,
   findBetterShapeAt,
+  getAllShapeRangeWithinComposite,
   getClosestShapeByType,
   getDeleteTargetIds,
   getNextShapeComposite,
@@ -971,3 +972,30 @@ describe("swapShapeParent", () => {
     });
   });
 });
+
+describe("getAllShapeRangeWithinComposite", () => {
+  test("should return the range accommodate all shapes", () => {
+    const rect0 = createShape<RectangleShape>(getCommonStruct, "rectangle", {
+      id: "rect0",
+      p: { x: 10, y: 10 },
+      width: 100,
+      height: 100,
+    });
+    const rect1 = createShape<RectangleShape>(getCommonStruct, "rectangle", {
+      id: "rect1",
+      p: { x: 210, y: 210 },
+      width: 100,
+      height: 100,
+    });
+
+    expect(
+      getAllShapeRangeWithinComposite(newShapeComposite({ shapes: [rect0], getStruct: getCommonStruct })),
+    ).toEqualRect({ x: 10, y: 10, width: 100, height: 100 });
+    expect(
+      getAllShapeRangeWithinComposite(newShapeComposite({ shapes: [rect1], getStruct: getCommonStruct })),
+    ).toEqualRect({ x: 210, y: 210, width: 100, height: 100 });
+    expect(
+      getAllShapeRangeWithinComposite(newShapeComposite({ shapes: [rect0, rect1], getStruct: getCommonStruct })),
+    ).toEqualRect({ x: 10, y: 10, width: 300, height: 300 });
+  });
+});

src/composables/shapeComposite.ts

@@ -93,10 +93,18 @@ export function newShapeComposite(option: Option) {
     shapeModule.renderShape(getStruct, ctx, shape, mergedShapeContext, imageStore);
   }
 
+  function clip(shape: Shape): Path2D | undefined {
+    return shapeModule.clipShape(getStruct, shape, mergedShapeContext);
+  }
+
   function createSVGElementInfo(shape: Shape, imageStore?: ImageStore): SVGElementInfo | undefined {
     return shapeModule.createSVGElementInfo(getStruct, shape, mergedShapeContext, imageStore);
   }
 
+  function createClipSVGPath(shape: Shape): string | undefined {
+    return shapeModule.createClipSVGPath(getStruct, shape, mergedShapeContext);
+  }
+
   function findShapeAt(
     p: IVec2,
     scope?: ShapeSelectionScope,
@@ -261,7 +269,10 @@ export function newShapeComposite(option: Option) {
     getAllTransformTargets,
 
     render,
+    clip,
     createSVGElementInfo,
+    createClipSVGPath,
+
     findShapeAt,
     isPointOn,
     transformShape,
@@ -509,3 +520,11 @@ function severCircularParentRefs(src: Shape[]): Shape[] {
   const parentRefMap = getParentRefMap(src);
   return src.map((s) => (s.parentId && !parentRefMap.has(s.id) ? { ...s, parentId: undefined } : s));
 }
+
+export function getAllShapeRangeWithinComposite(shapeComposite: ShapeComposite, includeBounds?: boolean) {
+  const shapeMap = shapeComposite.mergedShapeMap;
+  return shapeComposite.getWrapperRectForShapes(
+    shapeComposite.mergedShapeTree.map((t) => shapeMap[t.id]),
+    includeBounds,
+  );
+}