tldraw-v12-custom-arrow

App.tsx

import {
  App as Editor,
  TldrawEditor,
  TldrawUi,
  ContextMenu,
  Canvas,
  TLArrowUtil,
  TLArrowTool, // overrode to export
  TldrawEditorConfig,
  defineShape,
  TldrawUiOverrides,
  TLTranslationKey,
  toolbarItem,
  TLArrowShape,
} from "@tldraw/tldraw";
import "@tldraw/tldraw/editor.css";
import "@tldraw/tldraw/ui.css";

class CustomArrowUtil extends TLArrowUtil {
  override canBind = () => true;
  override canEdit = () => false;
  defaultProps() {
    console.log("defaultProps");
    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: "changeDefaultText",
    };
  }
  override onBeforeCreate = (shape: TLArrowShape) => {
    console.log("onBeforeCreate");
    return {
      ...shape,
      props: {
        ...shape.props,
        labelColor: "blue" as const,
        color: "green" as const,
      },
    };
  };
  render(shape: TLArrowShape) {
    return <>{super.render(shape)}</>;
  }
}

function App() {
  const allRelationNames = ["supports"];

  const customTldrawConfig = new TldrawEditorConfig({
    tools: allRelationNames.map(
      (name) =>
        class extends TLArrowTool {
          static id = name;
          static initial = "idle";
          shapeType = name;
        }
    ),
    shapes: [
      ...allRelationNames.map((id) =>
        defineShape({
          type: id,
          getShapeUtil: () =>
            class extends CustomArrowUtil {
              constructor(app: Editor) {
                super(app, id);
              }
            },
        })
      ),
    ],
    allowUnknownShapes: true,
  });

  const overrrides: TldrawUiOverrides = {
    translations: {
      en: {},
    },
    tools(app, tools) {
      allRelationNames.forEach((name) => {
        tools[name] = {
          id: name,
          icon: "tool-arrow",
          label: name as TLTranslationKey,
          kbd: "",
          readonlyOk: true,
          onSelect: () => {
            app.setSelectedTool(name);
          },
        };
      });
      return tools;
    },
    toolbar(_, toolbar, { tools }) {
      toolbar.push(...allRelationNames.map((name) => toolbarItem(tools[name])));
      return toolbar;
    },
  };

  return (
    <div style={{ width: "100vw", height: "100vh" }}>
      <TldrawEditor
        baseUrl="https://samepage.network/assets/tldraw/"
        config={customTldrawConfig}
      >
        <TldrawUi
          assetBaseUrl="https://samepage.network/assets/tldraw/"
          overrides={overrrides}
        >
          <ContextMenu>
            <Canvas />
          </ContextMenu>
        </TldrawUi>
      </TldrawEditor>
    </div>
  );
}

export default App;