@yuzhouu/canvas-kit 0.1.2

package/_vendor/plugin-text/ArrowLabelBindingUtil.ts

@@ -0,0 +1,336 @@
+import {
+  BindingUtil,
+  type BindingRecord,
+  type BindingRecordBase,
+  type BindingUtilEffect,
+  type BindingSelectionCompanionFrameContext,
+  type Editor,
+  type SelectionOverlayFrameGeometryState,
+  type ShapeRecord,
+  type ShapeUpdate,
+  Vec,
+} from "@land/canvas-core";
+import {
+  ARROW_LABEL_BINDING_TYPE,
+  textLabelShowsCompanionFrameWhenOwnerSelected,
+} from "./textLabelHelpers";
+import { isTextShapeRecord } from "./textShapeHelpers";
+import type { TextShapeRecord } from "./textTypes";
+
+export const ARROW_LABEL_WIDTH = 120;
+export const ARROW_LABEL_MIN_WIDTH = 24;
+export const ARROW_LABEL_INDEX_SUFFIX = ".label";
+
+export interface ArrowLabelBindingProps {
+  labelPosition: number;
+}
+
+export interface ArrowLabelBindingRecord
+  extends BindingRecordBase<
+    typeof ARROW_LABEL_BINDING_TYPE,
+    ArrowLabelBindingProps
+  > {
+  type: typeof ARROW_LABEL_BINDING_TYPE;
+  props: ArrowLabelBindingProps;
+}
+
+function isArrowShapeRecord(
+  record: ShapeRecord | null | undefined,
+): record is ShapeRecord {
+  return record?.typeName === "shape" && record.type === "arrow";
+}
+
+function isArrowLabelBindingRecord(
+  record: BindingRecord | null | undefined,
+): record is ArrowLabelBindingRecord {
+  return (
+    record?.typeName === "binding" && record.type === ARROW_LABEL_BINDING_TYPE
+  );
+}
+
+function clampNormalized(value: unknown, fallback: number): number {
+  return typeof value === "number" && Number.isFinite(value)
+    ? Math.min(1, Math.max(0, value))
+    : fallback;
+}
+
+export class ArrowLabelBindingUtil extends BindingUtil<ArrowLabelBindingRecord> {
+  readonly type = ARROW_LABEL_BINDING_TYPE;
+
+  getDefaultProps(): ArrowLabelBindingProps {
+    return {
+      labelPosition: 0.5,
+    };
+  }
+
+  validateProps(props: unknown): ArrowLabelBindingProps {
+    const fallback = this.getDefaultProps();
+    const candidate =
+      props && typeof props === "object"
+        ? (props as Partial<ArrowLabelBindingProps>)
+        : {};
+
+    return {
+      labelPosition: clampNormalized(
+        candidate.labelPosition,
+        fallback.labelPosition,
+      ),
+    };
+  }
+
+  canBind(
+    _editor: Editor,
+    _binding: ArrowLabelBindingRecord,
+    context: { fromShape: ShapeRecord; toShape: ShapeRecord },
+  ): boolean {
+    return (
+      isTextShapeRecord(context.fromShape) && isArrowShapeRecord(context.toShape)
+    );
+  }
+
+  getExclusiveBindingKey(binding: ArrowLabelBindingRecord): string {
+    return binding.toId;
+  }
+
+  onBindingCreate(
+    editor: Editor,
+    binding: ArrowLabelBindingRecord,
+  ): BindingUtilEffect | void {
+    return this.syncLabelPosition(editor, binding);
+  }
+
+  onBindingUpdate(
+    editor: Editor,
+    _before: ArrowLabelBindingRecord,
+    after: ArrowLabelBindingRecord,
+  ): BindingUtilEffect | void {
+    return this.syncLabelPosition(editor, after);
+  }
+
+  onBindingLoad(
+    editor: Editor,
+    binding: ArrowLabelBindingRecord,
+  ): BindingUtilEffect | void {
+    return this.syncLabelPosition(editor, binding);
+  }
+
+  getGeometryDependentShapeIds(
+    _editor: Editor,
+    binding: ArrowLabelBindingRecord,
+    context: { role: "from" | "to" },
+  ): ShapeRecord["id"][] {
+    return context.role === "to" ? [binding.fromId] : [];
+  }
+
+  onAfterShapeChange(
+    editor: Editor,
+    binding: ArrowLabelBindingRecord,
+    _context: { role: "from" | "to" },
+  ): BindingUtilEffect | void {
+    return this.syncLabelPosition(editor, binding);
+  }
+
+  onBeforeDeleteShape(
+    _editor: Editor,
+    binding: ArrowLabelBindingRecord,
+    context: { role: "from" | "to" },
+  ): BindingUtilEffect | void {
+    if (context.role === "from") {
+      return { deleteBindingIds: [binding.id] };
+    }
+
+    return {
+      deleteShapeIds: [binding.fromId],
+      deleteBindingIds: [binding.id],
+    };
+  }
+
+  onBeforeDeleteBinding(
+    _editor: Editor,
+    binding: ArrowLabelBindingRecord,
+  ): BindingUtilEffect | void {
+    return {
+      deleteBindingIds: [binding.id],
+    };
+  }
+
+  getExportShapeIds(
+    _editor: Editor,
+    binding: ArrowLabelBindingRecord,
+  ): TextShapeRecord["id"][] {
+    return [binding.fromId];
+  }
+
+  getSelectionCompanionFrameGeometries(
+    editor: Editor,
+    binding: ArrowLabelBindingRecord,
+    context: BindingSelectionCompanionFrameContext,
+  ): SelectionOverlayFrameGeometryState[] {
+    if (binding.toId !== context.selectedShape.id) {
+      return [];
+    }
+    if (
+      textLabelShowsCompanionFrameWhenOwnerSelected(editor, binding.fromId) !==
+      true
+    ) {
+      return [];
+    }
+    const label = editor.getShape(binding.fromId);
+    const owner = editor.getShape(binding.toId);
+    if (!isTextShapeRecord(label) || !isArrowShapeRecord(owner)) {
+      return [];
+    }
+
+    const geometry = editor.computeShapeGeometry(label);
+    return [
+      {
+        bounds: geometry.bounds,
+        rotation: label.rotation,
+        rotationCenter: geometry.center,
+      },
+    ];
+  }
+
+  private syncLabelPosition(
+    editor: Editor,
+    binding: ArrowLabelBindingRecord,
+  ): BindingUtilEffect | void {
+    if (!isArrowLabelBindingRecord(binding)) {
+      return;
+    }
+
+    const label = editor.getShape(binding.fromId);
+    const owner = editor.getShape(binding.toId);
+    if (!isTextShapeRecord(label) || !isArrowShapeRecord(owner)) {
+      return { deleteBindingIds: [binding.id] };
+    }
+
+    const labelUpdate = getArrowLabelUpdate(editor, label, owner);
+    return labelUpdate
+      ? {
+          shapes: [
+            {
+              ...label,
+              ...labelUpdate,
+              props: {
+                ...label.props,
+                ...labelUpdate.props,
+              },
+            },
+          ],
+        }
+      : undefined;
+  }
+}
+
+function getArrowLabelUpdate(
+  editor: Editor,
+  label: TextShapeRecord,
+  owner: ShapeRecord,
+): ShapeUpdate | null {
+  const nextLayout = getArrowLabelLayout(editor, label, owner);
+  const nextParentId = owner.parentId;
+  const nextIndex = `${owner.index}${ARROW_LABEL_INDEX_SUFFIX}`;
+  const nextAutoSize = false;
+  const nextTextAlign = "middle" as const;
+
+  if (
+    label.x === nextLayout.x &&
+    label.y === nextLayout.y &&
+    label.rotation === nextLayout.rotation &&
+    label.parentId === nextParentId &&
+    label.index === nextIndex &&
+    label.props.w === nextLayout.props.w &&
+    label.props.autoSize === nextAutoSize &&
+    label.props.textAlign === nextTextAlign
+  ) {
+    return null;
+  }
+
+  return {
+    id: label.id,
+    x: nextLayout.x,
+    y: nextLayout.y,
+    rotation: nextLayout.rotation,
+    parentId: nextParentId,
+    index: nextIndex,
+    props: {
+      w: nextLayout.props.w,
+      autoSize: nextAutoSize,
+      textAlign: nextTextAlign,
+    },
+  };
+}
+
+export function getArrowLabelLayout(
+  editor: Editor,
+  label: TextShapeRecord,
+  owner: ShapeRecord,
+): Pick<TextShapeRecord, "x" | "y" | "rotation"> & {
+  props: Pick<TextShapeRecord["props"], "w">;
+} {
+  const ownerCenter = editor.computeShapePageCenter(owner);
+  const labelCenter = getArrowBodyMiddlePagePoint(owner) ?? ownerCenter;
+  const nextW = Math.max(ARROW_LABEL_MIN_WIDTH, ARROW_LABEL_WIDTH);
+  return {
+    x: labelCenter.x - (nextW * label.props.scale) / 2,
+    y: labelCenter.y - (label.props.h * label.props.scale) / 2,
+    rotation: owner.rotation,
+    props: {
+      w: nextW,
+    },
+  };
+}
+
+function getArrowBodyMiddlePagePoint(owner: ShapeRecord): Vec | null {
+  const props = owner.props as Record<string, unknown>;
+  const start = getPointProp(props.start);
+  const end = getPointProp(props.end);
+  const bend = getNumberProp(props.bend) ?? 0;
+  if (!start || !end) {
+    return null;
+  }
+
+  const localMiddle = Vec.Med(start, end).add(
+    end.sub(start).len()
+      ? end.sub(start).per().normalize().mul(-bend)
+      : new Vec(0, bend),
+  );
+  const ownerCenter = new Vec(owner.x + getOwnerW(owner) / 2, owner.y + getOwnerH(owner) / 2);
+  const pagePoint = new Vec(owner.x + localMiddle.x, owner.y + localMiddle.y);
+  if (owner.rotation === 0 && owner.scaleX === 1 && owner.scaleY === 1) {
+    return pagePoint;
+  }
+
+  const offset = pagePoint.sub(ownerCenter);
+  return ownerCenter.add(
+    new Vec(offset.x * owner.scaleX, offset.y * owner.scaleY).rot(
+      owner.rotation,
+    ),
+  );
+}
+
+function getPointProp(value: unknown): Vec | null {
+  if (!value || typeof value !== "object") {
+    return null;
+  }
+  const point = value as { x?: unknown; y?: unknown };
+  return typeof point.x === "number" &&
+    Number.isFinite(point.x) &&
+    typeof point.y === "number" &&
+    Number.isFinite(point.y)
+    ? new Vec(point.x, point.y)
+    : null;
+}
+
+function getNumberProp(value: unknown): number | null {
+  return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
+
+function getOwnerW(owner: ShapeRecord): number {
+  return getNumberProp((owner.props as Record<string, unknown>).w) ?? 1;
+}
+
+function getOwnerH(owner: ShapeRecord): number {
+  return getNumberProp((owner.props as Record<string, unknown>).h) ?? 1;
+}

package/_vendor/plugin-text/GeoLabelBindingUtil.ts

@@ -0,0 +1,391 @@
+import {
+  BindingUtil,
+  type BindingRecord,
+  type BindingRecordBase,
+  type BindingUtilEffect,
+  type Editor,
+  type ShapeUpdate,
+  type ShapeRecord,
+} from "@land/canvas-core";
+import { GEO_LABEL_BINDING_TYPE } from "./textLabelHelpers";
+import { isTextShapeRecord } from "./textShapeHelpers";
+import type { TextShapeRecord } from "./textTypes";
+
+export const GEO_LABEL_EDGE_PADDING = 16;
+export const GEO_LABEL_MIN_WIDTH = 16;
+export const GEO_LABEL_INDEX_SUFFIX = ".label";
+
+export interface GeoLabelBindingProps {
+  normalizedAnchor: {
+    x: number;
+    y: number;
+  };
+  ownerBaseHeight: number;
+}
+
+export interface GeoLabelBindingRecord
+  extends BindingRecordBase<typeof GEO_LABEL_BINDING_TYPE, GeoLabelBindingProps> {
+  type: typeof GEO_LABEL_BINDING_TYPE;
+  props: GeoLabelBindingProps;
+}
+
+function isGeoShapeRecord(
+  record: ShapeRecord | null | undefined,
+): record is ShapeRecord {
+  return record?.typeName === "shape" && record.type === "geo";
+}
+
+function isGeoLabelBindingRecord(
+  record: BindingRecord | null | undefined,
+): record is GeoLabelBindingRecord {
+  return (
+    record?.typeName === "binding" && record.type === GEO_LABEL_BINDING_TYPE
+  );
+}
+
+function clampNormalized(value: unknown, fallback: number): number {
+  return typeof value === "number" && Number.isFinite(value)
+    ? Math.min(1, Math.max(0, value))
+    : fallback;
+}
+
+export class GeoLabelBindingUtil extends BindingUtil<GeoLabelBindingRecord> {
+  readonly type = GEO_LABEL_BINDING_TYPE;
+
+  getDefaultProps(): GeoLabelBindingProps {
+    return {
+      normalizedAnchor: { x: 0.5, y: 0.5 },
+      ownerBaseHeight: 0,
+    };
+  }
+
+  validateProps(props: unknown): GeoLabelBindingProps {
+    const fallback = this.getDefaultProps();
+    const candidate =
+      props && typeof props === "object"
+        ? (props as Partial<GeoLabelBindingProps>)
+        : {};
+    const anchor =
+      candidate.normalizedAnchor &&
+      typeof candidate.normalizedAnchor === "object"
+        ? candidate.normalizedAnchor
+        : fallback.normalizedAnchor;
+
+    return {
+      normalizedAnchor: {
+        x: clampNormalized(anchor.x, fallback.normalizedAnchor.x),
+        y: clampNormalized(anchor.y, fallback.normalizedAnchor.y),
+      },
+      ownerBaseHeight: clampPositiveNumber(
+        candidate.ownerBaseHeight,
+        fallback.ownerBaseHeight,
+      ),
+    };
+  }
+
+  canBind(
+    _editor: Editor,
+    _binding: GeoLabelBindingRecord,
+    context: { fromShape: ShapeRecord; toShape: ShapeRecord },
+  ): boolean {
+    return (
+      isTextShapeRecord(context.fromShape) && isGeoShapeRecord(context.toShape)
+    );
+  }
+
+  getExclusiveBindingKey(binding: GeoLabelBindingRecord): string {
+    return binding.toId;
+  }
+
+  onBindingCreate(
+    editor: Editor,
+    binding: GeoLabelBindingRecord,
+  ): BindingUtilEffect | void {
+    return this.syncLabelPosition(editor, binding);
+  }
+
+  onBindingUpdate(
+    editor: Editor,
+    before: GeoLabelBindingRecord,
+    after: GeoLabelBindingRecord,
+  ): BindingUtilEffect | void {
+    return this.syncLabelPosition(
+      editor,
+      after,
+      before.toId === after.toId ? undefined : { role: "to" },
+    );
+  }
+
+  onBindingLoad(
+    editor: Editor,
+    binding: GeoLabelBindingRecord,
+  ): BindingUtilEffect | void {
+    return this.syncLabelPosition(editor, binding);
+  }
+
+  getGeometryDependentShapeIds(
+    _editor: Editor,
+    binding: GeoLabelBindingRecord,
+    context: { role: "from" | "to" },
+  ): ShapeRecord["id"][] {
+    return context.role === "from" ? [binding.toId] : [binding.fromId];
+  }
+
+  onAfterShapeChange(
+    editor: Editor,
+    binding: GeoLabelBindingRecord,
+    context: { role: "from" | "to" },
+  ): BindingUtilEffect | void {
+    return this.syncLabelPosition(editor, binding, context);
+  }
+
+  onBeforeDeleteShape(
+    editor: Editor,
+    binding: GeoLabelBindingRecord,
+    context: { role: "from" | "to" },
+  ): BindingUtilEffect | void {
+    if (context.role === "from") {
+      const owner = editor.getShape(binding.toId);
+      const ownerHeightReset = owner
+        ? getGeoLabelOwnerHeightReset(owner, binding)
+        : null;
+      return {
+        shapes: ownerHeightReset ? [ownerHeightReset] : undefined,
+        deleteBindingIds: [binding.id],
+      };
+    }
+
+    return {
+      deleteShapeIds: [binding.fromId],
+      deleteBindingIds: [binding.id],
+    };
+  }
+
+  onBeforeDeleteBinding(
+    editor: Editor,
+    binding: GeoLabelBindingRecord,
+  ): BindingUtilEffect | void {
+    const owner = editor.getShape(binding.toId);
+    const ownerHeightReset = owner
+      ? getGeoLabelOwnerHeightReset(owner, binding)
+      : null;
+    return {
+      shapes: ownerHeightReset ? [ownerHeightReset] : undefined,
+      deleteBindingIds: [binding.id],
+    };
+  }
+
+  getExportShapeIds(
+    _editor: Editor,
+    binding: GeoLabelBindingRecord,
+  ): TextShapeRecord["id"][] {
+    return [binding.fromId];
+  }
+
+  private syncLabelPosition(
+    editor: Editor,
+    binding: GeoLabelBindingRecord,
+    context?: { role: "from" | "to" },
+  ): BindingUtilEffect | void {
+    if (!isGeoLabelBindingRecord(binding)) {
+      return;
+    }
+
+    const label = editor.getShape(binding.fromId);
+    const owner = editor.getShape(binding.toId);
+    if (!isTextShapeRecord(label) || !isGeoShapeRecord(owner)) {
+      return { deleteBindingIds: [binding.id] };
+    }
+
+    const ownerBaseHeight = getGeoLabelOwnerBaseHeight(
+      binding,
+      owner,
+      context,
+    );
+    const nextBinding =
+      binding.props.ownerBaseHeight === ownerBaseHeight
+        ? null
+        : {
+            ...binding,
+            props: {
+              ...binding.props,
+              ownerBaseHeight,
+            },
+          };
+    const nextOwner = getGeoLabelOwnerUpdate(owner, label, ownerBaseHeight);
+    const ownerForLabelLayout = nextOwner ?? owner;
+    const labelUpdate = getGeoLabelUpdate(editor, label, ownerForLabelLayout);
+    const shapes: ShapeRecord[] = [];
+
+    if (nextOwner) {
+      shapes.push(nextOwner);
+    }
+    if (labelUpdate) {
+      shapes.push({
+        ...label,
+        ...labelUpdate,
+        props: {
+          ...label.props,
+          ...labelUpdate.props,
+        },
+      });
+    }
+
+    return shapes.length > 0 || nextBinding
+      ? {
+          shapes: shapes.length > 0 ? shapes : undefined,
+          bindings: nextBinding ? [nextBinding] : undefined,
+        }
+      : undefined;
+  }
+}
+
+function clampPositiveNumber(value: unknown, fallback: number): number {
+  return typeof value === "number" && Number.isFinite(value) && value > 0
+    ? value
+    : fallback;
+}
+
+function getShapePropNumber(
+  shape: ShapeRecord,
+  key: string,
+): number | null {
+  const value = (shape.props as Record<string, unknown>)[key];
+  return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
+
+function getGeoLabelOwnerBaseHeight(
+  binding: GeoLabelBindingRecord,
+  owner: ShapeRecord,
+  context?: { role: "from" | "to" },
+): number {
+  const ownerHeight = getShapePropNumber(owner, "h") ?? 1;
+  if (context?.role === "to") {
+    return ownerHeight;
+  }
+  return binding.props.ownerBaseHeight > 0
+    ? binding.props.ownerBaseHeight
+    : ownerHeight;
+}
+
+function getGeoLabelRequiredOwnerHeight(label: TextShapeRecord): number {
+  return Math.max(
+    1,
+    label.props.h * label.props.scale + GEO_LABEL_EDGE_PADDING * 2,
+  );
+}
+
+function getGeoLabelOwnerUpdate(
+  owner: ShapeRecord,
+  label: TextShapeRecord,
+  ownerBaseHeight: number,
+): ShapeRecord | null {
+  const ownerHeight = getShapePropNumber(owner, "h");
+  if (!ownerHeight) {
+    return null;
+  }
+
+  const nextHeight = Math.max(
+    ownerBaseHeight,
+    getGeoLabelRequiredOwnerHeight(label),
+  );
+  if (ownerHeight === nextHeight) {
+    return null;
+  }
+
+  return {
+    ...owner,
+    props: {
+      ...owner.props,
+      h: nextHeight,
+    },
+  };
+}
+
+function getGeoLabelOwnerHeightReset(
+  owner: ShapeRecord,
+  binding: GeoLabelBindingRecord,
+): ShapeRecord | null {
+  const ownerHeight = getShapePropNumber(owner, "h");
+  if (!ownerHeight || binding.props.ownerBaseHeight <= 0) {
+    return null;
+  }
+
+  if (ownerHeight === binding.props.ownerBaseHeight) {
+    return null;
+  }
+
+  return {
+    ...owner,
+    props: {
+      ...owner.props,
+      h: binding.props.ownerBaseHeight,
+    },
+  };
+}
+
+function getGeoLabelUpdate(
+  editor: Editor,
+  label: TextShapeRecord,
+  owner: ShapeRecord,
+): ShapeUpdate | null {
+  const nextLayout = getGeoLabelLayout(editor, label, owner);
+  const nextParentId = owner.parentId;
+  const nextIndex = `${owner.index}${GEO_LABEL_INDEX_SUFFIX}`;
+  const nextAutoSize = false;
+  const nextTextAlign = "middle" as const;
+
+  if (
+    label.x === nextLayout.x &&
+    label.y === nextLayout.y &&
+    label.rotation === nextLayout.rotation &&
+    label.parentId === nextParentId &&
+    label.index === nextIndex &&
+    label.props.w === nextLayout.props.w &&
+    label.props.autoSize === nextAutoSize &&
+    label.props.textAlign === nextTextAlign
+  ) {
+    return null;
+  }
+
+  return {
+    id: label.id,
+    x: nextLayout.x,
+    y: nextLayout.y,
+    rotation: nextLayout.rotation,
+    parentId: nextParentId,
+    index: nextIndex,
+    props: {
+      w: nextLayout.props.w,
+      autoSize: nextAutoSize,
+      textAlign: nextTextAlign,
+    },
+  };
+}
+
+export function getGeoLabelLayout(
+  editor: Editor,
+  label: TextShapeRecord,
+  owner: ShapeRecord,
+): Pick<TextShapeRecord, "x" | "y" | "rotation"> & {
+  props: Pick<TextShapeRecord["props"], "w">;
+} {
+  const ownerBounds = editor.computeShapeLocalBounds(owner);
+  const ownerCenter = editor.computeShapePageCenter(owner);
+  const nextW = Math.max(
+    GEO_LABEL_MIN_WIDTH,
+    ownerBounds.w - GEO_LABEL_EDGE_PADDING * 2,
+  );
+  const nextX = ownerCenter.x - (nextW * label.props.scale) / 2;
+  const nextY = ownerCenter.y - (label.props.h * label.props.scale) / 2;
+  const nextRotation = owner.rotation;
+
+  return {
+    x: nextX,
+    y: nextY,
+    rotation: nextRotation,
+    props: {
+      w: nextW,
+    },
+  };
+}