@yuzhouu/canvas-kit 0.1.2

package/_vendor/plugin-frame/core.ts

@@ -0,0 +1,534 @@
+import {
+  SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID,
+  type ContextMenuContribution,
+  type LandCorePlugin,
+  type ShapeSvgExporter,
+  type SvgNode,
+  type ShapeId,
+  type ToolbarAction,
+  type ToolbarActionValue,
+  type ToolbarContribution,
+} from "@land/canvas-core";
+import { FrameTool } from "./FrameTool";
+import {
+  FrameShapeUtil,
+  type FrameShapeProps,
+  type FrameShapeRecord,
+} from "./FrameShapeUtil";
+
+export class FrameShapeSvgExporter
+  implements ShapeSvgExporter<FrameShapeRecord>
+{
+  readonly type = "frame" as const;
+
+  toSvg(shape: FrameShapeRecord): SvgNode {
+    const { fill, stroke, strokeWidth, w, h, name } = shape.props;
+    const inset = strokeWidth / 2;
+    const width = Math.max(w - strokeWidth, 0);
+    const height = Math.max(h - strokeWidth, 0);
+
+    return {
+      tag: "g",
+      children: [
+        {
+          tag: "rect",
+          attrs: {
+            x: inset,
+            y: inset,
+            width,
+            height,
+            fill,
+            stroke,
+            "stroke-width": strokeWidth,
+            "stroke-linejoin": "round",
+            "stroke-linecap": "round",
+          },
+        },
+        {
+          tag: "text",
+          attrs: {
+            x: 12,
+            y: 18,
+            fill: stroke,
+            "font-family":
+              "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+            "font-size": 12,
+            "font-weight": 600,
+          },
+          children: [name],
+        },
+      ],
+    };
+  }
+}
+
+export function createFrameCorePlugin(): LandCorePlugin {
+  return {
+    id: "land.frame",
+    shapeCapabilities: [
+      {
+        type: "frame",
+        schemaProps: ["w", "h", "name", "fill", "stroke", "strokeWidth"],
+        reactRenderer: "supported",
+        toolbarEntry: "supported",
+        notes: [
+          "Frame renderer, SVG exporter, creation tool, selected-frame style toolbar, selected-child order badge, and minimal single-child sibling reorder controls live in the frame plugin package. ParentId-based child query, child-index ordering, containing-parent query, clipped query bounds, point-in-clip checks, host clipping, select-drag containment, export descendant traversal, and clipped child export have preflights. Richer hover/drag reorder UI remains deferred.",
+        ],
+      },
+    ],
+    shapeUtils: [new FrameShapeUtil()],
+    shapeSvgExporters: [new FrameShapeSvgExporter()],
+    toolbarActions: [
+      createSetFrameStyleToolbarAction("fill"),
+      createSetFrameStyleToolbarAction("stroke"),
+      createSetFrameStyleToolbarAction("strokeWidth"),
+      createSetFrameDefaultStyleToolbarAction("fill"),
+      createSetFrameDefaultStyleToolbarAction("stroke"),
+      createSetFrameDefaultStyleToolbarAction("strokeWidth"),
+      createRenameFrameToolbarAction(),
+      createFrameChildMoveToolbarAction("backward"),
+      createFrameChildMoveToolbarAction("forward"),
+    ],
+    toolbarContributions: [
+      createFrameToolToolbarContribution(),
+      createFrameDefaultStyleToolbarContribution(),
+      createFrameSelectionToolbarContribution(),
+      createFrameChildOrderToolbarContribution(),
+    ],
+    contextMenuContributions: [createFrameChildOrderContextMenuContribution()],
+    setup(editor) {
+      editor.tools.register(
+        "frame",
+        (currentEditor) => new FrameTool(currentEditor),
+        { shortcut: "f" },
+      );
+    },
+  };
+}
+
+function createFrameChildOrderContextMenuContribution(): ContextMenuContribution {
+  return {
+    id: "frame.child-order.context-menu",
+    target: "selection",
+    order: 40,
+    actionIds: ["frame.child-order.backward", "frame.child-order.forward"],
+    when(context) {
+      return getSelectedParentType(context) === "frame";
+    },
+    getSections(context) {
+      const state = context.editor.getSelectionSiblingOrderState();
+      return [
+        {
+          id: "frame.child-order-context-menu",
+          title: "Frame child",
+          items: [
+            ...(state
+              ? [
+                  {
+                    kind: "badge" as const,
+                    id: "frame.child-order-status",
+                    label: `${state.index + 1} / ${state.count}`,
+                    dataUi: "context-menu-frame-child-order-status",
+                  },
+                ]
+              : []),
+            {
+              kind: "command",
+              id: "frame.child-order.forward",
+              actionId: "frame.child-order.forward",
+              label: "Bring forward",
+              icon: "move-up",
+              dataUi: "context-menu-frame-child-bring-forward-button",
+            },
+            {
+              kind: "command",
+              id: "frame.child-order.backward",
+              actionId: "frame.child-order.backward",
+              label: "Send backward",
+              icon: "move-down",
+              dataUi: "context-menu-frame-child-send-backward-button",
+            },
+          ],
+        },
+      ];
+    },
+  };
+}
+
+const FRAME_FILL_SWATCHES = [
+  { value: "transparent", label: "None", color: "transparent" },
+  { value: "#eff6ff", label: "Blue", color: "#eff6ff" },
+  { value: "#f0fdf4", label: "Green", color: "#f0fdf4" },
+  { value: "#fff7ed", label: "Amber", color: "#fff7ed" },
+] as const;
+
+const FRAME_STROKE_SWATCHES = [
+  { value: "#94a3b8", label: "Slate", color: "#94a3b8" },
+  { value: "#2563eb", label: "Blue", color: "#2563eb" },
+  { value: "#16a34a", label: "Green", color: "#16a34a" },
+  { value: "#ea580c", label: "Orange", color: "#ea580c" },
+] as const;
+
+const FRAME_STROKE_WIDTH_OPTIONS = [
+  { value: 1, label: "1" },
+  { value: 2, label: "2" },
+  { value: 4, label: "4" },
+] as const;
+
+function createFrameToolToolbarContribution(): ToolbarContribution {
+  return {
+    id: "frame.tool-toolbar",
+    surface: "tool",
+    placement: "chrome",
+    order: 60,
+    actionIds: [SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID],
+    getGroups() {
+      return [
+        {
+          id: "frame.tools",
+          items: [
+            {
+              kind: "button",
+              id: "frame.tool.frame",
+              actionId: SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID,
+              value: "frame",
+              label: "Frame",
+              shortcut: "F",
+              icon: "square",
+              dataUi: "frame-tool-button",
+            },
+          ],
+        },
+      ];
+    },
+  };
+}
+
+function createSetFrameStyleToolbarAction(
+  prop: "fill" | "stroke" | "strokeWidth",
+): ToolbarAction<ToolbarActionValue> {
+  return {
+    id: `frame.set-${prop}`,
+    isVisible(context) {
+      return context.selection.commonShapeType === "frame";
+    },
+    isEnabled(context) {
+      return context.selection.count > 0;
+    },
+    getValue(context) {
+      return getCommonFramePropValue(context.selection.selectedShapes, prop);
+    },
+    run({ context, value }) {
+      if (!isValidFrameStyleValue(prop, value)) {
+        return;
+      }
+      const updates = context.selection.selectedShapes
+        .filter((shape): shape is FrameShapeRecord => shape.type === "frame")
+        .filter((shape) => !shape.isLocked)
+        .map((shape) => ({
+          id: shape.id,
+          props: {
+            [prop]: value,
+          },
+        }));
+      if (updates.length === 0) {
+        return;
+      }
+      context.editor.commands.updateShapes(updates, { source: "user" });
+    },
+  };
+}
+
+function createSetFrameDefaultStyleToolbarAction(
+  prop: "fill" | "stroke" | "strokeWidth",
+): ToolbarAction<ToolbarActionValue> {
+  return {
+    id: `frame.default-${prop}`,
+    isVisible(context) {
+      return context.tool.activeToolId === "frame";
+    },
+    getValue(context) {
+      return context.editor.getDefaultShapeProps<FrameShapeProps>("frame")[prop];
+    },
+    run({ context, value }) {
+      if (!isValidFrameStyleValue(prop, value)) {
+        return;
+      }
+      context.editor.updateDefaultShapeProps("frame", { [prop]: value });
+    },
+  };
+}
+
+function createRenameFrameToolbarAction(): ToolbarAction<string | null> {
+  return {
+    id: "frame.rename",
+    isVisible(context) {
+      return (
+        context.selection.count === 1 &&
+        context.selection.singleShapeType === "frame"
+      );
+    },
+    isEnabled(context) {
+      const [shape] = context.selection.selectedShapes;
+      return shape?.type === "frame" && !shape.isLocked;
+    },
+    getValue(context) {
+      const [shape] = context.selection.selectedShapes;
+      return shape?.type === "frame"
+        ? (shape.props as FrameShapeProps).name
+        : null;
+    },
+    run({ context, value }) {
+      const [shape] = context.selection.selectedShapes;
+      if (shape?.type !== "frame" || typeof value !== "string") {
+        return;
+      }
+      context.editor.commands.updateShapes(
+        [
+          {
+            id: shape.id,
+            props: { name: value },
+          },
+        ],
+        { source: "user" },
+      );
+    },
+  };
+}
+
+function createFrameDefaultStyleToolbarContribution(): ToolbarContribution {
+  return {
+    id: "frame.default-style.tool-toolbar",
+    surface: "tool",
+    order: 61,
+    actionIds: [
+      "frame.default-fill",
+      "frame.default-stroke",
+      "frame.default-strokeWidth",
+    ],
+    when(context) {
+      return context.tool.activeToolId === "frame";
+    },
+    getGroups() {
+      return getFrameStyleToolbarGroups({
+        fillActionId: "frame.default-fill",
+        strokeActionId: "frame.default-stroke",
+        strokeWidthActionId: "frame.default-strokeWidth",
+        dataUiPrefix: "frame-default",
+      });
+    },
+  };
+}
+
+function createFrameSelectionToolbarContribution(): ToolbarContribution {
+  return {
+    id: "frame.selection-toolbar",
+    surface: "selection",
+    order: 20,
+    actionIds: [
+      "frame.set-fill",
+      "frame.set-stroke",
+      "frame.set-strokeWidth",
+      "frame.rename",
+    ],
+    when(context) {
+      return context.selection.commonShapeType === "frame";
+    },
+    getGroups(context) {
+      return [
+        ...(context.selection.count === 1
+          ? [
+              {
+                id: "frame.name",
+                items: [
+                  {
+                    kind: "text-input" as const,
+                    id: "frame.name",
+                    actionId: "frame.rename",
+                    label: "Frame name",
+                    placeholder: "Frame",
+                    dataUi: "frame-name-input",
+                  },
+                ],
+              },
+            ]
+          : []),
+        ...getFrameStyleToolbarGroups({
+          fillActionId: "frame.set-fill",
+          strokeActionId: "frame.set-stroke",
+          strokeWidthActionId: "frame.set-strokeWidth",
+          dataUiPrefix: "frame",
+        }),
+      ];
+    },
+  };
+}
+
+function getFrameStyleToolbarGroups({
+  fillActionId,
+  strokeActionId,
+  strokeWidthActionId,
+  dataUiPrefix,
+}: {
+  fillActionId: string;
+  strokeActionId: string;
+  strokeWidthActionId: string;
+  dataUiPrefix: string;
+}) {
+  return [
+    {
+      id: `${dataUiPrefix}.style-fill`,
+      items: [
+        {
+          kind: "swatches" as const,
+          id: `${dataUiPrefix}.fill`,
+          actionId: fillActionId,
+          label: "Fill",
+          options: FRAME_FILL_SWATCHES.map((option) => ({
+            ...option,
+            dataUi: `${dataUiPrefix}-fill-${option.label.toLowerCase()}-button`,
+          })),
+        },
+      ],
+    },
+    {
+      id: `${dataUiPrefix}.style-stroke`,
+      items: [
+        {
+          kind: "swatches" as const,
+          id: `${dataUiPrefix}.stroke`,
+          actionId: strokeActionId,
+          label: "Stroke",
+          options: FRAME_STROKE_SWATCHES.map((option) => ({
+            ...option,
+            dataUi: `${dataUiPrefix}-stroke-${option.label.toLowerCase()}-button`,
+          })),
+        },
+      ],
+    },
+    {
+      id: `${dataUiPrefix}.style-stroke-width`,
+      items: [
+        {
+          kind: "stepper" as const,
+          id: `${dataUiPrefix}.stroke-width`,
+          actionId: strokeWidthActionId,
+          label: "Stroke width",
+          dataUi: `${dataUiPrefix}-stroke-width-control`,
+          options: FRAME_STROKE_WIDTH_OPTIONS.map((option) => ({
+            ...option,
+            dataUi: `${dataUiPrefix}-stroke-width-${option.value}-button`,
+          })),
+        },
+      ],
+    },
+  ];
+}
+
+function createFrameChildMoveToolbarAction(
+  direction: "backward" | "forward",
+): ToolbarAction<null> {
+  return {
+    id: `frame.child-order.${direction}`,
+    isVisible(context) {
+      return getSelectedParentType(context) === "frame";
+    },
+    isEnabled(context) {
+      return context.editor.canMoveSelectionWithinParent(direction);
+    },
+    run({ context }) {
+      context.editor.moveSelectionWithinParent(direction, "user");
+    },
+  };
+}
+
+function createFrameChildOrderToolbarContribution(): ToolbarContribution {
+  return {
+    id: "frame.child-order.selection-toolbar",
+    surface: "selection",
+    order: 30,
+    actionIds: ["frame.child-order.backward", "frame.child-order.forward"],
+    when(context) {
+      return getSelectedParentType(context) === "frame";
+    },
+    getGroups(context) {
+      const state = context.editor.getSelectionSiblingOrderState();
+      return [
+        {
+          id: "frame.child-order",
+          items: [
+            ...(state
+              ? [
+                  {
+                    kind: "badge" as const,
+                    id: "frame.child-order-status",
+                    label: `${state.index + 1} / ${state.count}`,
+                    dataUi: "frame-child-order-status",
+                  },
+                ]
+              : []),
+            {
+              kind: "button",
+              id: "frame.child-order.backward",
+              actionId: "frame.child-order.backward",
+              label: "Send backward",
+              icon: "move-down",
+              dataUi: "frame-child-send-backward-button",
+            },
+            {
+              kind: "button",
+              id: "frame.child-order.forward",
+              actionId: "frame.child-order.forward",
+              label: "Bring forward",
+              icon: "move-up",
+              dataUi: "frame-child-bring-forward-button",
+            },
+          ],
+        },
+      ];
+    },
+  };
+}
+
+function getCommonFramePropValue(
+  selectedShapes: readonly { type: string; props: object }[],
+  prop: "fill" | "stroke" | "strokeWidth",
+): ToolbarActionValue {
+  let value: ToolbarActionValue | undefined;
+  for (const shape of selectedShapes) {
+    if (shape.type !== "frame") {
+      continue;
+    }
+    const nextValue = (shape.props as FrameShapeProps)[prop];
+    if (value === undefined) {
+      value = nextValue;
+      continue;
+    }
+    if (value !== nextValue) {
+      return null;
+    }
+  }
+  return value ?? null;
+}
+
+function isValidFrameStyleValue(
+  prop: "fill" | "stroke" | "strokeWidth",
+  value: ToolbarActionValue,
+): boolean {
+  if (prop === "strokeWidth") {
+    return FRAME_STROKE_WIDTH_OPTIONS.some((option) => option.value === value);
+  }
+  const swatches =
+    prop === "fill" ? FRAME_FILL_SWATCHES : FRAME_STROKE_SWATCHES;
+  return swatches.some((option) => option.value === value);
+}
+
+function getSelectedParentType(
+  context: Parameters<NonNullable<ToolbarContribution["when"]>>[0],
+): string | null {
+  const [shape] = context.selection.selectedShapes;
+  if (context.selection.count !== 1 || !shape?.parentId.startsWith("shape:")) {
+    return null;
+  }
+  return context.editor.getShape(shape.parentId as ShapeId)?.type ?? null;
+}

package/_vendor/plugin-frame/feature.ts

@@ -0,0 +1,20 @@
+import {
+  defineLandExtension,
+  type LandFeatureBundle,
+} from "@land/canvas-plugin-api";
+import { createFrameCanvasPlugin } from "./canvas";
+import { createFrameCorePlugin } from "./core";
+
+export function createFrameFeatureBundle(): LandFeatureBundle {
+  return {
+    id: "land.frame.bundle",
+    corePlugins: [createFrameCorePlugin()],
+    canvasPlugins: [createFrameCanvasPlugin()],
+    shapeTypes: ["frame"],
+  };
+}
+
+export const Frame = defineLandExtension({
+  name: "frame",
+  createFeature: createFrameFeatureBundle,
+});

package/_vendor/plugin-frame/index.ts

@@ -0,0 +1,6 @@
+export { FrameShapeUtil } from "./FrameShapeUtil";
+export type { FrameShapeProps, FrameShapeRecord } from "./FrameShapeUtil";
+export { FrameTool } from "./FrameTool";
+export { FrameShapeSvgExporter, createFrameCorePlugin } from "./core";
+export { createFrameCanvasPlugin } from "./canvas";
+export { Frame, createFrameFeatureBundle } from "./feature";