@yuzhouu/canvas-kit 0.1.2 → 0.1.3

package/_vendor/plugin-geo/canvas.tsx

@@ -1,90 +0,0 @@
-import type { LandCanvasPlugin, ShapeRendererProps } from "@land/canvas-plugin-api";
-import type { GeoShapeRecord } from "./types";
-
-interface GeoShapeSvgProps {
-  shape: GeoShapeRecord;
-  fill?: string;
-  stroke?: string;
-  strokeWidth?: number;
-}
-
-export function createGeoCanvasPlugin(): LandCanvasPlugin {
-  return {
-    id: "land.geo.react",
-    setup(registerShapeRenderer) {
-      registerShapeRenderer({
-        type: "geo",
-        component: GeoShapeRenderer,
-      });
-    },
-  };
-}
-
-function GeoShapeRenderer({
-  shape,
-}: ShapeRendererProps<GeoShapeRecord>) {
-  return (
-    <GeoShapeSvg shape={shape} />
-  );
-}
-
-export function GeoShapeSvg({
-  shape,
-  fill = shape.props.fill,
-  stroke = shape.props.stroke,
-  strokeWidth = shape.props.strokeWidth,
-}: GeoShapeSvgProps) {
-  const { geo } = shape.props;
-  const inset = strokeWidth / 2;
-  const width = Math.max(shape.props.w - strokeWidth, 0);
-  const height = Math.max(shape.props.h - strokeWidth, 0);
-  const rectangleRadius = Math.min(10, width * 0.12, height * 0.12);
-
-  const sharedProps = {
-    fill,
-    stroke,
-    strokeWidth,
-    strokeLinejoin: "round" as const,
-    strokeLinecap: "round" as const,
-  };
-
-  return (
-    <svg
-      width="100%"
-      height="100%"
-      viewBox={`0 0 ${shape.props.w} ${shape.props.h}`}
-      style={{ display: "block", overflow: "visible" }}
-      shapeRendering="geometricPrecision"
-    >
-      {geo === "ellipse" ? (
-        <ellipse
-          {...sharedProps}
-          cx={shape.props.w / 2}
-          cy={shape.props.h / 2}
-          rx={width / 2}
-          ry={height / 2}
-        />
-      ) : geo === "diamond" ? (
-        <polygon
-          {...sharedProps}
-          points={[
-            `${shape.props.w / 2},${inset}`,
-            `${shape.props.w - inset},${shape.props.h / 2}`,
-            `${shape.props.w / 2},${shape.props.h - inset}`,
-            `${inset},${shape.props.h / 2}`,
-          ].join(" ")}
-        />
-      ) : (
-        <rect
-          {...sharedProps}
-          x={inset}
-          y={inset}
-          width={width}
-          height={height}
-          rx={rectangleRadius}
-          ry={rectangleRadius}
-        />
-      )}
-    </svg>
-  );
-}

package/_vendor/plugin-geo/core.ts

@@ -1,495 +0,0 @@
-import {
-  SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID,
-  type LandCorePlugin,
-  type ShapeRecordBase,
-  type ToolbarAction,
-  type ToolbarActionValue,
-  type ToolbarContribution,
-  type ShapeSvgExporter,
-  type SvgNode,
-} from "@land/canvas-core";
-import { DiamondTool, EllipseTool, RectangleTool } from "./GeoTools";
-import { GeoShapeUtil } from "./GeoShapeUtil";
-import {
-  isGeoShapeRecord,
-  type GeoShapeKind,
-  type GeoShapeProps,
-  type GeoShapeRecord,
-} from "./types";
-
-export class GeoShapeSvgExporter implements ShapeSvgExporter<GeoShapeRecord> {
-  readonly type = "geo" as const;
-
-  toSvg(shape: GeoShapeRecord): SvgNode {
-    const { geo, fill, stroke, strokeWidth, w, h } = shape.props;
-    const inset = strokeWidth / 2;
-    const width = Math.max(w - strokeWidth, 0);
-    const height = Math.max(h - strokeWidth, 0);
-    const sharedAttrs = {
-      fill,
-      stroke,
-      "stroke-width": strokeWidth,
-      "stroke-linejoin": "round",
-      "stroke-linecap": "round",
-    };
-
-    if (geo === "ellipse") {
-      return {
-        tag: "ellipse",
-        attrs: {
-          ...sharedAttrs,
-          cx: w / 2,
-          cy: h / 2,
-          rx: width / 2,
-          ry: height / 2,
-        },
-      };
-    }
-
-    if (geo === "diamond") {
-      return {
-        tag: "polygon",
-        attrs: {
-          ...sharedAttrs,
-          points: [
-            `${formatNumber(w / 2)},${formatNumber(inset)}`,
-            `${formatNumber(w - inset)},${formatNumber(h / 2)}`,
-            `${formatNumber(w / 2)},${formatNumber(h - inset)}`,
-            `${formatNumber(inset)},${formatNumber(h / 2)}`,
-          ].join(" "),
-        },
-      };
-    }
-
-    const radius = Math.min(10, width * 0.12, height * 0.12);
-    return {
-      tag: "rect",
-      attrs: {
-        ...sharedAttrs,
-        x: inset,
-        y: inset,
-        width,
-        height,
-        rx: radius,
-        ry: radius,
-      },
-    };
-  }
-}
-
-export function createGeoCorePlugin(): LandCorePlugin {
-  return {
-    id: "land.geo",
-    shapeCapabilities: [
-      {
-        type: "geo",
-        schemaProps: ["w", "h", "geo", "fill", "stroke", "strokeWidth"],
-        reactRenderer: "supported",
-        toolbarEntry: "supported",
-        notes: [
-          "Toolbar covers rectangle, ellipse, and diamond through geo props.",
-        ],
-      },
-    ],
-    shapeUtils: [new GeoShapeUtil()],
-    shapeSvgExporters: [new GeoShapeSvgExporter()],
-    toolbarActions: [
-      createSetGeoKindToolbarAction(),
-      createSetGeoStyleToolbarAction("fill"),
-      createSetGeoStyleToolbarAction("stroke"),
-      createSetGeoStyleToolbarAction("strokeWidth"),
-      createSetGeoDefaultStyleToolbarAction("fill"),
-      createSetGeoDefaultStyleToolbarAction("stroke"),
-      createSetGeoDefaultStyleToolbarAction("strokeWidth"),
-    ],
-    toolbarContributions: [
-      createGeoToolToolbarContribution(),
-      createGeoDefaultStyleToolbarContribution(),
-      createGeoSelectionToolbarContribution(),
-    ],
-    setup(editor) {
-      editor.tools.register(
-        "rectangle",
-        (currentEditor) => new RectangleTool(currentEditor),
-        { shortcut: "r" },
-      );
-      editor.tools.register(
-        "ellipse",
-        (currentEditor) => new EllipseTool(currentEditor),
-        { shortcut: "o" },
-      );
-      editor.tools.register(
-        "diamond",
-        (currentEditor) => new DiamondTool(currentEditor),
-        { shortcut: "d" },
-      );
-    },
-  };
-}
-
-const GEO_FILL_SWATCHES = [
-  { value: "#dbeafe", label: "Blue", color: "#dbeafe" },
-  { value: "#dcfce7", label: "Green", color: "#dcfce7" },
-  { value: "#fee2e2", label: "Red", color: "#fee2e2" },
-  { value: "#f8fafc", label: "White", color: "#f8fafc" },
-] as const;
-
-const GEO_STROKE_SWATCHES = [
-  { value: "#1d4ed8", label: "Blue", color: "#1d4ed8" },
-  { value: "#15803d", label: "Green", color: "#15803d" },
-  { value: "#dc2626", label: "Red", color: "#dc2626" },
-  { value: "#334155", label: "Slate", color: "#334155" },
-] as const;
-
-const GEO_STROKE_WIDTH_OPTIONS = [
-  { value: 1, label: "1" },
-  { value: 2, label: "2" },
-  { value: 4, label: "4" },
-] as const;
-
-function createGeoToolToolbarContribution(): ToolbarContribution {
-  return {
-    id: "geo.tool-toolbar",
-    surface: "tool",
-    placement: "chrome",
-    order: 20,
-    actionIds: [SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID],
-    getGroups() {
-      return [
-        {
-          id: "geo.tools",
-          items: [
-            {
-              kind: "button",
-              id: "geo.tool.rectangle",
-              actionId: SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID,
-              value: "rectangle",
-              label: "Rectangle",
-              shortcut: "R",
-              icon: "square",
-              dataUi: "rectangle-tool-button",
-            },
-            {
-              kind: "button",
-              id: "geo.tool.ellipse",
-              actionId: SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID,
-              value: "ellipse",
-              label: "Ellipse",
-              shortcut: "O",
-              icon: "circle",
-              dataUi: "ellipse-tool-button",
-            },
-            {
-              kind: "button",
-              id: "geo.tool.diamond",
-              actionId: SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID,
-              value: "diamond",
-              label: "Diamond",
-              shortcut: "D",
-              icon: "diamond",
-              dataUi: "diamond-tool-button",
-            },
-          ],
-        },
-      ];
-    },
-  };
-}
-
-function createSetGeoStyleToolbarAction(
-  prop: "fill" | "stroke" | "strokeWidth",
-): ToolbarAction<ToolbarActionValue> {
-  return {
-    id: `geo.set-${prop}`,
-    isVisible(context) {
-      return context.selection.commonShapeType === "geo";
-    },
-    isEnabled(context) {
-      return context.selection.count > 0;
-    },
-    getValue(context) {
-      return getCommonGeoPropValue(context.selection.selectedShapes, prop);
-    },
-    run({ context, value }) {
-      if (!isValidGeoStyleValue(prop, value)) {
-        return;
-      }
-      const updates = context.selection.selectedShapes
-        .filter(isGeoShapeRecord)
-        .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 createSetGeoDefaultStyleToolbarAction(
-  prop: "fill" | "stroke" | "strokeWidth",
-): ToolbarAction<ToolbarActionValue> {
-  return {
-    id: `geo.default-${prop}`,
-    isVisible(context) {
-      return isGeoToolActive(context.tool.activeToolId);
-    },
-    getValue(context) {
-      return context.editor.getDefaultShapeProps<GeoShapeProps>("geo")[prop];
-    },
-    run({ context, value }) {
-      if (!isValidGeoStyleValue(prop, value)) {
-        return;
-      }
-      context.editor.updateDefaultShapeProps("geo", { [prop]: value });
-    },
-  };
-}
-
-function createSetGeoKindToolbarAction(): ToolbarAction<GeoShapeKind | null> {
-  return {
-    id: "geo.set-kind",
-    isVisible(context) {
-      return context.selection.commonShapeType === "geo";
-    },
-    isEnabled(context) {
-      return context.selection.count > 0;
-    },
-    getValue(context) {
-      return getCommonGeoShapeKind(context.selection.selectedShapes);
-    },
-    run({ context, value }) {
-      if (
-        value !== "rectangle" &&
-        value !== "ellipse" &&
-        value !== "diamond"
-      ) {
-        return;
-      }
-      const updates = context.selection.selectedShapes
-        .filter(isGeoShapeRecord)
-        .filter((shape) => !shape.isLocked)
-        .map((shape) => ({
-          id: shape.id,
-          props: { geo: value },
-        }));
-      if (updates.length === 0) {
-        return;
-      }
-      context.editor.commands.updateShapes(updates, { source: "user" });
-    },
-  };
-}
-
-function createGeoDefaultStyleToolbarContribution(): ToolbarContribution {
-  return {
-    id: "geo.default-style.tool-toolbar",
-    surface: "tool",
-    order: 21,
-    actionIds: [
-      "geo.default-fill",
-      "geo.default-stroke",
-      "geo.default-strokeWidth",
-    ],
-    when(context) {
-      return isGeoToolActive(context.tool.activeToolId);
-    },
-    getGroups() {
-      return getGeoStyleToolbarGroups({
-        fillActionId: "geo.default-fill",
-        strokeActionId: "geo.default-stroke",
-        strokeWidthActionId: "geo.default-strokeWidth",
-        dataUiPrefix: "geo-default",
-      });
-    },
-  };
-}
-
-function createGeoSelectionToolbarContribution(): ToolbarContribution {
-  return {
-    id: "geo.selection-toolbar",
-    surface: "selection",
-    order: 20,
-    actionIds: [
-      "geo.set-kind",
-      "geo.set-fill",
-      "geo.set-stroke",
-      "geo.set-strokeWidth",
-    ],
-    when(context) {
-      return context.selection.commonShapeType === "geo";
-    },
-    getGroups() {
-      return [
-        {
-          id: "geo.shape-kind",
-          items: [
-            {
-              kind: "segmented",
-              id: "geo.shape-kind",
-              actionId: "geo.set-kind",
-              options: [
-                {
-                  value: "rectangle",
-                  label: "Rectangle",
-                  icon: "square",
-                  dataUi: "rectangle-shape-button",
-                },
-                {
-                  value: "ellipse",
-                  label: "Ellipse",
-                  icon: "circle",
-                  dataUi: "ellipse-shape-button",
-                },
-                {
-                  value: "diamond",
-                  label: "Diamond",
-                  icon: "diamond",
-                  dataUi: "diamond-shape-button",
-                },
-              ],
-            },
-          ],
-        },
-        ...getGeoStyleToolbarGroups({
-          fillActionId: "geo.set-fill",
-          strokeActionId: "geo.set-stroke",
-          strokeWidthActionId: "geo.set-strokeWidth",
-          dataUiPrefix: "geo",
-        }),
-      ];
-    },
-  };
-}
-
-function getGeoStyleToolbarGroups({
-  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: GEO_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: GEO_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: GEO_STROKE_WIDTH_OPTIONS.map((option) => ({
-            ...option,
-            dataUi: `${dataUiPrefix}-stroke-width-${option.value}-button`,
-          })),
-        },
-      ],
-    },
-  ];
-}
-
-function getCommonGeoPropValue(
-  selectedShapes: readonly ShapeRecordBase[],
-  prop: "fill" | "stroke" | "strokeWidth",
-): ToolbarActionValue {
-  let value: ToolbarActionValue | undefined;
-  for (const shape of selectedShapes) {
-    if (shape.type !== "geo") {
-      continue;
-    }
-    const nextValue = (shape.props as GeoShapeProps)[prop];
-    if (value === undefined) {
-      value = nextValue;
-      continue;
-    }
-    if (value !== nextValue) {
-      return null;
-    }
-  }
-  return value ?? null;
-}
-
-function getCommonGeoShapeKind(
-  selectedShapes: readonly ShapeRecordBase[],
-): GeoShapeKind | null {
-  let commonKind: GeoShapeKind | null = null;
-  for (const shape of selectedShapes) {
-    if (!isGeoShapeRecord(shape)) {
-      continue;
-    }
-    if (commonKind === null) {
-      commonKind = shape.props.geo;
-      continue;
-    }
-    if (commonKind !== shape.props.geo) {
-      return null;
-    }
-  }
-  return commonKind;
-}
-
-function isValidGeoStyleValue(
-  prop: "fill" | "stroke" | "strokeWidth",
-  value: ToolbarActionValue,
-): boolean {
-  if (prop === "strokeWidth") {
-    return GEO_STROKE_WIDTH_OPTIONS.some((option) => option.value === value);
-  }
-  const swatches = prop === "fill" ? GEO_FILL_SWATCHES : GEO_STROKE_SWATCHES;
-  return swatches.some((option) => option.value === value);
-}
-
-function isGeoToolActive(activeToolId: string): boolean {
-  return (
-    activeToolId === "rectangle" ||
-    activeToolId === "ellipse" ||
-    activeToolId === "diamond"
-  );
-}
-
-function formatNumber(value: number): string {
-  if (!Number.isFinite(value)) {
-    return "0";
-  }
-  return Number(value.toFixed(4)).toString();
-}

package/_vendor/plugin-geo/feature.ts

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

package/_vendor/plugin-geo/types.ts

@@ -1,27 +0,0 @@
-import {
-  isShapeRecord,
-  type BaseRecord,
-  type ShapeRecordBase,
-} from "@land/canvas-core";
-
-export type GeoShapeKind = "rectangle" | "ellipse" | "diamond";
-
-export interface GeoShapeProps {
-  w: number;
-  h: number;
-  geo: GeoShapeKind;
-  fill: string;
-  stroke: string;
-  strokeWidth: number;
-}
-
-export interface GeoShapeRecord extends ShapeRecordBase<"geo", GeoShapeProps> {
-  type: "geo";
-  props: GeoShapeProps;
-}
-
-export function isGeoShapeRecord(
-  record: BaseRecord | null | undefined,
-): record is GeoShapeRecord {
-  return isShapeRecord(record) && record.type === "geo";
-}

package/_vendor/plugin-group/GroupShapeUtil.ts

@@ -1,59 +0,0 @@
-import {
-  Box,
-  ShapeUtil,
-  type Vec,
-  type ShapeRecordBase,
-} from "@land/canvas-core";
-
-export interface GroupShapeProps {
-  w: number;
-  h: number;
-}
-
-export type GroupShapeRecord = ShapeRecordBase<"group", GroupShapeProps>;
-
-function clampDimension(value: unknown, fallback: number): number {
-  return typeof value === "number" && Number.isFinite(value)
-    ? Math.max(1, value)
-    : fallback;
-}
-
-export class GroupShapeUtil extends ShapeUtil<GroupShapeRecord> {
-  readonly type = "group" as const;
-
-  getDefaultProps(): GroupShapeProps {
-    return {
-      w: 1,
-      h: 1,
-    };
-  }
-
-  validateProps(props: unknown): GroupShapeProps {
-    const candidate =
-      props && typeof props === "object"
-        ? (props as Partial<GroupShapeProps>)
-        : {};
-    const fallback = this.getDefaultProps();
-
-    return {
-      w: clampDimension(candidate.w, fallback.w),
-      h: clampDimension(candidate.h, fallback.h),
-    };
-  }
-
-  getBounds(shape: GroupShapeRecord): Box {
-    return new Box(shape.x, shape.y, shape.props.w, shape.props.h);
-  }
-
-  hitTest(_shape: GroupShapeRecord, _positionedPoint: Vec): boolean {
-    return false;
-  }
-
-  shouldTransformDescendants(_shape: GroupShapeRecord): boolean {
-    return true;
-  }
-
-  canReceiveChildren(_shape: GroupShapeRecord): boolean {
-    return true;
-  }
-}