feat: render ports

packages/x6/src/research/core/base-view.ts

@@ -2,8 +2,8 @@ import jQuery from 'jquery'
 import { KeyValue } from '../../types'
 import { globals } from './globals'
 import { Basecoat } from '../../entity'
-import { v } from '../../v'
 import { Attribute } from '../attr'
+import { v } from '../../v'
 
 export abstract class BaseView extends Basecoat {
   public readonly cid: string
@@ -176,7 +176,7 @@ export namespace BaseView {
 }
 
 export namespace BaseView {
-  export interface JsonMarkup {
+  export interface JSONMarkup {
     /**
      * The namespace URI of the element. It defaults to SVG namespace
      * `"http://www.w3.org/2000/svg"`.
@@ -207,15 +207,23 @@ export namespace BaseView {
 
     className?: string | string[]
 
-    children?: JsonMarkup[]
+    children?: JSONMarkup[]
 
     textContent?: string
   }
 
-  export type Markup = string | JsonMarkup | JsonMarkup[]
+  export type Markup = string | JSONMarkup | JSONMarkup[]
+
+  export type Selectors = { [selector: string]: Element | Element[] }
+
+  export interface TransformData {
+    x?: number
+    y?: number
+    angle?: number
+  }
 
-  export function parseJsonMarkup(
-    markup: JsonMarkup | JsonMarkup[],
+  export function parseJSONMarkup(
+    markup: JSONMarkup | JSONMarkup[],
     options: {
       ns?: string
       bare?: boolean
@@ -225,10 +233,10 @@ export namespace BaseView {
     },
   ) {
     const fragment = document.createDocumentFragment()
-    const selectors: { [selector: string]: Element | Element[] } = {}
+    const selectors: Selectors = {}
     const groups: { [selector: string]: Element[] } = {}
     const queue: {
-      markup: JsonMarkup[]
+      markup: JSONMarkup[]
       parentNode: Element | DocumentFragment
       ns?: string
     }[] = [
@@ -241,7 +249,7 @@ export namespace BaseView {
 
     while (queue.length > 0) {
       const item = queue.pop()!
-      let ns = item.ns
+      let ns = item.ns || v.ns.svg
       const defines = item.markup
       const parentNode = item.parentNode
 
@@ -345,8 +353,48 @@ export namespace BaseView {
     }
   }
 
-  export function renderStringMarkup(container: Element, markup: string) {
-    return v.batch(markup)
+  function createContainer(firstChild: Element) {
+    return firstChild instanceof SVGElement
+      ? v.createSvgElement('g')
+      : v.createElement('div')
+  }
+
+  export function renderMarkup(markup: Markup) {
+    if (typeof markup === 'string') {
+      const nodes = v.batch(markup)
+      const count = nodes.length
+
+      if (count === 1) {
+        return {
+          elem: nodes[0].node as Element,
+        }
+      }
+
+      if (count > 1) {
+        const elem = createContainer(nodes[0].node)
+        nodes.forEach(node => {
+          elem.appendChild(node.node)
+        })
+
+        return { elem }
+      }
+
+      return {}
+    }
+
+    {
+      const result = parseJSONMarkup(markup)
+      const fragment = result.fragment
+      let elem: Element | null = null
+      if (fragment.childNodes.length > 1) {
+        elem = createContainer(fragment.firstChild as Element)
+        elem.appendChild(fragment)
+      } else {
+        elem = fragment.firstChild as Element
+      }
+
+      return { elem, selectors: result.selectors }
+    }
   }
 }
 

packages/x6/src/research/core/cell-view.ts

@@ -21,7 +21,7 @@ export abstract class CellView<C extends Cell = Cell> extends BaseView {
   protected readonly documentEvents: BaseView.Events | null
   protected cache: Dictionary<Element, CellView.CacheItem>
 
-  protected selectors: CellView.Selectors
+  protected selectors: BaseView.Selectors
 
   public cell: C
   public graph: any
@@ -96,11 +96,11 @@ export abstract class CellView<C extends Cell = Cell> extends BaseView {
     return this
   }
 
-  protected renderChildren(children: BaseView.JsonMarkup[]) {
+  protected renderChildren(children: BaseView.JSONMarkup[]) {
     if (children) {
       const isSVG = this.container instanceof SVGElement
       const ns = isSVG ? v.ns.svg : v.ns.xhtml
-      const doc = BaseView.parseJsonMarkup(children, { ns })
+      const doc = BaseView.parseJSONMarkup(children, { ns })
       v.empty(this.container)
       v.append(this.container, doc.fragment)
       // this.childNodes = doc.selectors
@@ -271,22 +271,20 @@ export abstract class CellView<C extends Cell = Cell> extends BaseView {
     }
   }
 
-  parseDOMJSON(
-    markup: BaseView.JsonMarkup | BaseView.JsonMarkup[],
+  parseJSONMarkup(
+    markup: BaseView.JSONMarkup | BaseView.JSONMarkup[],
     rootElem?: Element,
   ) {
-    const doc = BaseView.parseJsonMarkup(markup)
-    const selectors = doc.selectors
-
+    const result = BaseView.parseJSONMarkup(markup)
     if (rootElem) {
+      const selectors = result.selectors
       const rootSelector = this.rootSelector
       if (selectors[rootSelector]) {
         throw new Error('Invalid root selector')
       }
       selectors[rootSelector] = rootElem
     }
-
-    return { selectors, fragment: doc.fragment }
+    return result
   }
 
   can(feature: string): boolean {
@@ -431,7 +429,7 @@ export abstract class CellView<C extends Cell = Cell> extends BaseView {
   find(
     selector?: string,
     rootElem: Element = this.container,
-    selectors: CellView.Selectors = this.selectors,
+    selectors: BaseView.Selectors = this.selectors,
   ) {
     // These are either descendants of `this.$el` of `this.$el` itself.
     // `.` is a special selector used to select the wrapping `<g>` element.
@@ -462,7 +460,7 @@ export abstract class CellView<C extends Cell = Cell> extends BaseView {
   findOne(
     selector?: string,
     rootElem: Element = this.container,
-    selectors: CellView.Selectors = this.selectors,
+    selectors: BaseView.Selectors = this.selectors,
   ) {
     const nodes = this.find(selector, rootElem, selectors)
     return nodes.length > 0 ? nodes[0] : null
@@ -622,7 +620,7 @@ export abstract class CellView<C extends Cell = Cell> extends BaseView {
     cellAttrs: Attribute.CellAttributes,
     rootNode: Element,
     selectorCache: { [selector: string]: Element[] },
-    selectors: CellView.Selectors,
+    selectors: BaseView.Selectors,
   ) {
     const merge: Element[] = []
     const result: Dictionary<
@@ -1076,8 +1074,6 @@ export abstract class CellView<C extends Cell = Cell> extends BaseView {
 }
 
 export namespace CellView {
-  export type Selectors = { [selector: string]: Element | Element[] }
-
   export enum Flag {
     render = 'render',
     update = 'update',
@@ -1098,7 +1094,7 @@ export namespace CellView {
 
   export interface UpdateDOMSubtreeAttributesOptions {
     rootBBox?: Rectangle
-    selectors?: CellView.Selectors
+    selectors?: BaseView.Selectors
     scalableNode?: Element | null
     rotatableNode?: Element | null
     /**

packages/x6/src/research/core/graph.ts

@@ -239,7 +239,7 @@ export class Graph extends BaseView {
   constructor(options: Graph.Options) {
     super()
     this.container = options.container
-    const { selectors, fragment } = Graph.parseJsonMarkup(Graph.markup, {
+    const { selectors, fragment } = Graph.parseJSONMarkup(Graph.markup, {
       bare: true,
     })
     this.backgroundElem = selectors.background as HTMLDivElement
@@ -1687,7 +1687,7 @@ export namespace Graph {
   }
 }
 export namespace Graph {
-  export const markup: BaseView.JsonMarkup[] = [
+  export const markup: BaseView.JSONMarkup[] = [
     {
       ns: v.ns.xhtml,
       tagName: 'div',