tldraw-beta2-custom-arrow

App.tsx

import {
  ArrowShapeTool,
  ArrowShapeUtil,
  TLArrowShape,
  TLUiOverrides,
  Tldraw,
  toolbarItem,
} from "@tldraw/tldraw";
import "@tldraw/tldraw/tldraw.css";

class CustomArrowTool extends ArrowShapeTool {
  static override id = "supports";
  static override initial = "idle";
  override shapeType = "supports";
}

class CustomArrowUtil extends ArrowShapeUtil { 
  static override type = "supports" as const; // ArrowShapeUtil static type: string;
  override canBind = () => true;
  override canEdit = () => false;
  getDefaultProps() {
    console.log("getDefaultProps"); // does not fire
    return {
      labelColor: "blue" as const,
      color: "green" as const,
      fill: "none" as const,
      dash: "draw" as const,
      size: "s" as const,
      opacity: "1" as const,
      arrowheadStart: "arrow" as const,
      arrowheadEnd: "arrow" as const,
      font: "draw" as const,
      start: { type: "point" as const, x: 0, y: 0 },
      end: { type: "point" as const, x: 0, y: 0 },
      bend: 0,
      text: "getDefaultProps",
    };
  }
  override onBeforeCreate = (shape: TLArrowShape) => {
    console.log("onBeforeCreate"); // does not fire
    return {
      ...shape,
      props: {
        ...shape.props,
        labelColor: "blue" as const,
        color: "green" as const,
        text: "onBeforeCreate",
      },
    };
  };
  component(shape: TLArrowShape) {
    return <>{super.component(shape)}</>;
  }
}

const customShapeUtils = [CustomArrowUtil];
const customTools = [CustomArrowTool];

const allRelationNames = ["supports"];
const uiOverrides: TLUiOverrides = {
  tools(app, tools) {
    allRelationNames.forEach((name) => {
      tools[name] = {
        id: name,
        icon: "tool-arrow",
        label: name,
        kbd: "",
        readonlyOk: true,
        onSelect: () => {
          app.setCurrentTool(name);
        },
      };
    });
    return tools;
  },
  toolbar(_, toolbar, { tools }) {
    toolbar.push(...allRelationNames.map((name) => toolbarItem(tools[name])));
    return toolbar;
  },
};

export default function CustomConfigExample() {
  return (
    <div className="tldraw__editor" style={{ width: "100vw", height: "100vh" }}>
      <Tldraw
        shapeUtils={customShapeUtils}
        tools={customTools}
        overrides={uiOverrides}
      />
    </div>
  );
}