fix: registry tools is not available (#4799)

Author: lxfu1

src/registry/tool/anchor.ts

@@ -352,12 +352,18 @@ interface Options extends ToolItemOptions {
   ) => Edge.TerminalCellData['anchor']
 }
 
-export const SourceAnchor = Anchor.define<Options>({
-  name: 'source-anchor',
-  type: 'source',
-})
+export class SourceAnchor extends Anchor {
+  public static defaults: Options = {
+    ...Anchor.getDefaults(),
+    name: 'source-anchor',
+    type: 'source',
+  }
+}
 
-export const TargetAnchor = Anchor.define<Options>({
-  name: 'target-anchor',
-  type: 'target',
-})
+export class TargetAnchor extends Anchor {
+  public static defaults: Options = {
+    ...Anchor.getDefaults(),
+    name: 'target-anchor',
+    type: 'target',
+  }
+}

src/registry/tool/arrowhead.ts

@@ -134,28 +134,34 @@ interface Options extends ToolItemOptions {
   ratio?: number
 }
 
-export const SourceArrowhead = Arrowhead.define<Options>({
-  name: 'source-arrowhead',
-  type: 'source',
-  ratio: 0,
-  attrs: {
-    d: 'M 10 -8 -10 0 10 8 Z',
-    fill: '#333',
-    stroke: '#fff',
-    'stroke-width': 2,
-    cursor: 'move',
-  },
-})
-
-export const TargetArrowhead = Arrowhead.define<Options>({
-  name: 'target-arrowhead',
-  type: 'target',
-  ratio: 1,
-  attrs: {
-    d: 'M -10 -8 10 0 -10 8 Z',
-    fill: '#333',
-    stroke: '#fff',
-    'stroke-width': 2,
-    cursor: 'move',
-  },
-})
+export class SourceArrowhead extends Arrowhead {
+  public static defaults: Options = {
+    ...Arrowhead.getDefaults(),
+    name: 'source-arrowhead',
+    type: 'source',
+    ratio: 0,
+    attrs: {
+      d: 'M 10 -8 -10 0 10 8 Z',
+      fill: '#333',
+      stroke: '#fff',
+      'stroke-width': 2,
+      cursor: 'move',
+    },
+  }
+}
+
+export class TargetArrowhead extends Arrowhead {
+  public static defaults: Options = {
+    ...Arrowhead.getDefaults(),
+    name: 'target-arrowhead',
+    type: 'target',
+    ratio: 1,
+    attrs: {
+      d: 'M -10 -8 10 0 -10 8 Z',
+      fill: '#333',
+      stroke: '#fff',
+      'stroke-width': 2,
+      cursor: 'move',
+    },
+  }
+}

src/registry/tool/button.ts

@@ -148,35 +148,38 @@ interface Options extends ToolItemOptions {
   ) => any
 }
 
-export const Remove = Button.define<Options>({
-  name: 'button-remove',
-  markup: [
-    {
-      tagName: 'circle',
-      selector: 'button',
-      attrs: {
-        r: 7,
-        fill: '#FF1D00',
-        cursor: 'pointer',
+export class Remove extends Button {
+  public static defaults: Options = {
+    ...Button.getDefaults(),
+    name: 'button-remove',
+    markup: [
+      {
+        tagName: 'circle',
+        selector: 'button',
+        attrs: {
+          r: 7,
+          fill: '#FF1D00',
+          cursor: 'pointer',
+        },
       },
-    },
-    {
-      tagName: 'path',
-      selector: 'icon',
-      attrs: {
-        d: 'M -3 -3 3 3 M -3 3 3 -3',
-        fill: 'none',
-        stroke: '#FFFFFF',
-        'stroke-width': 2,
-        'pointer-events': 'none',
+      {
+        tagName: 'path',
+        selector: 'icon',
+        attrs: {
+          d: 'M -3 -3 3 3 M -3 3 3 -3',
+          fill: 'none',
+          stroke: '#FFFFFF',
+          'stroke-width': 2,
+          'pointer-events': 'none',
+        },
       },
+    ],
+    distance: 60,
+    offset: 0,
+    useCellGeometry: true,
+    onClick({ view, btn }) {
+      btn.parent.remove()
+      view.cell.remove({ ui: true, toolId: btn.cid })
     },
-  ],
-  distance: 60,
-  offset: 0,
-  useCellGeometry: true,
-  onClick({ view, btn }) {
-    btn.parent.remove()
-    view.cell.remove({ ui: true, toolId: btn.cid })
-  },
-})
+  }
+}

src/registry/tool/editor.ts

@@ -324,25 +324,37 @@ interface CellEditorOptions extends ToolItemOptions {
     | string
 }
 
-export const NodeEditor = CellEditor.define<CellEditorOptions>({
-  attrs: {
-    fontSize: 14,
-    fontFamily: 'Arial, helvetica, sans-serif',
-    color: '#000',
-    backgroundColor: '#fff',
-  },
-  getText: 'text/text',
-  setText: 'text/text',
-})
-
-export const EdgeEditor = CellEditor.define<CellEditorOptions>({
-  attrs: {
-    fontSize: 14,
-    fontFamily: 'Arial, helvetica, sans-serif',
-    color: '#000',
-    backgroundColor: '#fff',
-  },
-  labelAddable: true,
-  getText: 'label/text',
-  setText: 'label/text',
-})
+export class NodeEditor extends CellEditor {
+  public static defaults: CellEditorOptions = ObjectExt.merge(
+    {},
+    CellEditor.defaults,
+    {
+      attrs: {
+        fontSize: 14,
+        fontFamily: 'Arial, helvetica, sans-serif',
+        color: '#000',
+        backgroundColor: '#fff',
+      },
+      getText: 'text/text',
+      setText: 'text/text',
+    },
+  )
+}
+
+export class EdgeEditor extends CellEditor {
+  public static defaults: CellEditorOptions = ObjectExt.merge(
+    {},
+    CellEditor.defaults,
+    {
+      attrs: {
+        fontSize: 14,
+        fontFamily: 'Arial, helvetica, sans-serif',
+        color: '#000',
+        backgroundColor: '#fff',
+      },
+      labelAddable: true,
+      getText: 'label/text',
+      setText: 'label/text',
+    },
+  )
+}