@yuzhouu/canvas-kit 0.1.2 → 0.1.4

package/_vendor/plugin-frame/core.ts

@@ -1,534 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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";