feat: html shape

packages/x6/src/global/version.ts

@@ -3,5 +3,5 @@
 /**
  * Auto generated version file, do not modify it!
  */
-const version = '0.3.4'
+const version = '1.0.0-alpha.0'
 export { version }

packages/x6/src/global/x6.ts

@@ -2,6 +2,7 @@ import { Config } from './config'
 import { version as v } from './version'
 import { CellView } from '../view'
 import { Node, Edge } from '../model'
+import { HTML } from '../shape/standard/html'
 import {
   Attr,
   Background,
@@ -47,6 +48,7 @@ export namespace X6 {
     EdgeConnectionAnchor.registry.register
   export const registerConnectionPoint = ConnectionPoint.registry.register
   export const registerConnectionStrategy = ConnectionStrategy.registry.register
+  export const registerHTMLComponent = HTML.componentRegistry.register
 }
 
 export namespace X6 {

packages/x6/src/graph/base.ts

@@ -2,17 +2,17 @@ import { Graph } from './graph'
 import { Disposable } from '../common'
 
 export class Base extends Disposable {
-  protected readonly graph: Graph
+  public readonly graph: Graph
 
-  protected get options() {
+  public get options() {
     return this.graph.options
   }
 
-  protected get model() {
+  public get model() {
     return this.graph.model
   }
 
-  protected get view() {
+  public get view() {
     return this.graph.view
   }
 

packages/x6/src/graph/graph.ts

@@ -11,10 +11,10 @@ import { CellView } from '../view/cell'
 import { NodeView } from '../view/node'
 import { Scroller as ScrollerWidget } from '../addon/scroller'
 import { Base } from './base'
-import { Hook } from './hook'
 import { GraphView } from './view'
 import { EventArgs } from './events'
 import { Decorator } from './decorator'
+import { Hook as HookManager } from './hook'
 import { Options as GraphOptions } from './options'
 import { DefsManager as Defs } from './defs'
 import { GridManager as Grid } from './grid'
@@ -38,7 +38,7 @@ export class Graph extends Basecoat<EventArgs> {
   public readonly options: GraphOptions.Definition
   public readonly model: Model
   public readonly view: GraphView
-  public readonly hook: Hook
+  public readonly hook: HookManager
   public readonly grid: Grid
   public readonly defs: Defs
   public readonly coord: Coord
@@ -65,7 +65,7 @@ export class Graph extends Basecoat<EventArgs> {
     super()
 
     this.options = GraphOptions.merge(options)
-    this.hook = new Hook(this)
+    this.hook = new HookManager(this)
     this.view = this.hook.createView()
     this.defs = this.hook.createDefsManager()
     this.coord = this.hook.createCoordManager()
@@ -1372,6 +1372,7 @@ export namespace Graph {
 
 export namespace Graph {
   export const View = GraphView
+  export const Hook = HookManager
   export const Renderer = ViewRenderer
   export const Keyboard = Shortcut
   export const MouseWheel = Wheel

packages/x6/src/graph/hook.ts

@@ -10,6 +10,7 @@ import { Scroller } from '../addon/scroller'
 import { Selection } from '../addon/selection'
 import { Clipboard } from '../addon/clipboard'
 import { Transform } from '../addon/transform'
+import { HTML } from '../shape/standard/html'
 import { Base } from './base'
 import { Graph } from './graph'
 import { Options } from './options'
@@ -406,6 +407,20 @@ export class Hook extends Base implements Hook.IHook {
   ) {
     return this.graph.renderer.forcePostponedViewUpdate(view, flag)
   }
+
+  @Decorator.hook()
+  getHTMLComponent(node: HTML): HTMLElement | string | null | undefined {
+    let ret = node.getHTML()
+    if (typeof ret === 'string') {
+      ret = HTML.componentRegistry.get(ret) || ret
+    }
+
+    if (typeof ret === 'function') {
+      return ret.call(this, node)
+    }
+
+    return ret
+  }
 }
 
 export namespace Hook {
@@ -469,5 +484,10 @@ export namespace Hook {
     createMouseWheel: CreateManager<MouseWheel>
     createPrintManager: CreateManager<PrintManager>
     createFormatManager: CreateManager<FormatManager>
+
+    getHTMLComponent(
+      this: Graph,
+      node: HTML,
+    ): HTMLElement | string | null | undefined
   }
 }

packages/x6/src/model/model.ts

@@ -1045,7 +1045,17 @@ export class Model extends Basecoat<Model.EventArgs> {
     return Model.toJSON(this.getCells())
   }
 
-  fromJSON() {}
+  parseJSON(data: Parameters<typeof Model.fromJSON>[0]) {
+    return Model.fromJSON(data)
+  }
+
+  fromJSON(
+    data: Parameters<typeof Model.fromJSON>[0],
+    options: Model.FromJSONOptions = {},
+  ) {
+    const cells = this.parseJSON(data)
+    this.resetCells(cells, options)
+  }
 
   // #endregion
 
@@ -1087,6 +1097,8 @@ export namespace Model {
   export interface AddOptions extends Collection.AddOptions {}
   export interface RemoveOptions extends Collection.RemoveOptions {}
 
+  export interface FromJSONOptions extends Collection.SetOptions {}
+
   export interface GetCellsInAreaOptions {
     strict?: boolean
   }

packages/x6/src/shape/base.ts

@@ -1,7 +1,9 @@
 import { Node } from '../model/node'
 import { ObjectExt } from '../util'
 
-export class Base extends Node {
+export class Base<
+  Properties extends Node.Properties = Node.Properties
+> extends Node<Properties> {
   get label() {
     return this.getLabel()
   }

packages/x6/src/shape/basic/text-block.ts

@@ -6,7 +6,6 @@ import { Store } from '../../model/store'
 import { NodeView } from '../../view'
 import { getName } from './util'
 
-const contentAction = 'content' as any
 const contentSelector = '.text-block-content'
 const registryName = getName('text-block')
 
@@ -147,62 +146,71 @@ export namespace TextBlock {
   Node.registry.register(registryName, TextBlock)
 }
 
-export class TextBlockView extends NodeView<TextBlock> {
-  confirmUpdate(flag: number, options: any = {}) {
-    let ret = super.confirmUpdate(flag, options)
-    if (this.hasAction(ret, contentAction)) {
-      this.updateContent()
-      ret = this.removeAction(ret, contentAction)
+export namespace TextBlock {
+  const contentAction = 'content' as any
+
+  export class View extends NodeView<TextBlock> {
+    confirmUpdate(flag: number, options: any = {}) {
+      let ret = super.confirmUpdate(flag, options)
+      if (this.hasAction(ret, contentAction)) {
+        this.updateContent()
+        ret = this.removeAction(ret, contentAction)
+      }
+      return ret
     }
-    return ret
-  }
 
-  update(partialAttrs?: Attr.CellAttrs) {
-    if (Platform.SUPPORT_FOREIGNOBJECT) {
-      super.update(partialAttrs)
-    } else {
-      const node = this.cell
-      const attrs = { ...(partialAttrs || node.getAttrs()) }
-      delete attrs[contentSelector]
-      super.update(attrs)
-      if (!partialAttrs || ObjectExt.has(partialAttrs, contentSelector)) {
-        this.updateContent(partialAttrs)
+    update(partialAttrs?: Attr.CellAttrs) {
+      if (Platform.SUPPORT_FOREIGNOBJECT) {
+        super.update(partialAttrs)
+      } else {
+        const node = this.cell
+        const attrs = { ...(partialAttrs || node.getAttrs()) }
+        delete attrs[contentSelector]
+        super.update(attrs)
+        if (!partialAttrs || ObjectExt.has(partialAttrs, contentSelector)) {
+          this.updateContent(partialAttrs)
+        }
       }
     }
-  }
-
-  updateContent(partialAttrs?: Attr.CellAttrs) {
-    if (Platform.SUPPORT_FOREIGNOBJECT) {
-      super.update(partialAttrs)
-    } else {
-      const node = this.cell
-      const textAttrs = (partialAttrs || node.getAttrs())[contentSelector]
 
-      // Break the text to fit the node size taking into
-      // account the attributes set on the node.
-      const text = Dom.breakText(node.getContent(), node.getSize(), textAttrs, {
-        svgDocument: this.graph.view.svg,
-      })
-
-      const attrs = {
-        [contentSelector]: ObjectExt.merge({}, textAttrs, { text }),
+    updateContent(partialAttrs?: Attr.CellAttrs) {
+      if (Platform.SUPPORT_FOREIGNOBJECT) {
+        super.update(partialAttrs)
+      } else {
+        const node = this.cell
+        const textAttrs = (partialAttrs || node.getAttrs())[contentSelector]
+
+        // Break the text to fit the node size taking into
+        // account the attributes set on the node.
+        const text = Dom.breakText(
+          node.getContent(),
+          node.getSize(),
+          textAttrs,
+          {
+            svgDocument: this.graph.view.svg,
+          },
+        )
+
+        const attrs = {
+          [contentSelector]: ObjectExt.merge({}, textAttrs, { text }),
+        }
+
+        super.update(attrs)
       }
-
-      super.update(attrs)
     }
   }
-}
 
-export namespace TextBlockView {
-  TextBlockView.config({
-    bootstrap: ['render', contentAction],
-    actions: Platform.SUPPORT_FOREIGNOBJECT
-      ? {}
-      : {
-          size: contentAction,
-          content: contentAction,
-        },
-  })
+  export namespace View {
+    View.config({
+      bootstrap: ['render', contentAction],
+      actions: Platform.SUPPORT_FOREIGNOBJECT
+        ? {}
+        : {
+            size: contentAction,
+            content: contentAction,
+          },
+    })
 
-  NodeView.registry.register(registryName, TextBlockView)
+    NodeView.registry.register(registryName, View)
+  }
 }

packages/x6/src/shape/basic/text.ts

@@ -3,26 +3,7 @@ import { getName, createShape } from './util'
 
 const viewName = getName('text')
 
-export class TextView extends NodeView {
-  confirmUpdate(flag: number, options: any = {}) {
-    let ret = super.confirmUpdate(flag, options)
-    if (this.hasAction(ret, 'scale')) {
-      this.resize()
-      ret = this.removeAction(ret, 'scale')
-    }
-    return ret
-  }
-}
-
-TextView.config({
-  actions: {
-    attrs: ['scale'],
-  },
-})
-
-NodeView.registry.register(viewName, TextView)
-
-export const Text = createShape(
+export class Text extends createShape(
   'text',
   {
     view: viewName,
@@ -37,4 +18,25 @@ export const Text = createShape(
     },
   },
   { noText: true },
-)
+) {}
+
+export namespace Text {
+  export class View extends NodeView {
+    confirmUpdate(flag: number, options: any = {}) {
+      let ret = super.confirmUpdate(flag, options)
+      if (this.hasAction(ret, 'scale')) {
+        this.resize()
+        ret = this.removeAction(ret, 'scale')
+      }
+      return ret
+    }
+  }
+
+  View.config({
+    actions: {
+      attrs: ['scale'],
+    },
+  })
+
+  NodeView.registry.register(viewName, View)
+}