feat(label): define label in style and do not extra label from data

keep data used by biz

fix#31

packages/x6/src/core/renderer.ts

@@ -538,7 +538,7 @@ export class Renderer {
 
   protected redrawLabel(state: State, forced?: boolean) {
     const graph = state.view.graph
-    const txt = this.getLabelValue(state)
+    const txt = this.getLabel(state)
     const wrapping = graph.isWrapping(state.cell)
     const clipping = graph.isLabelClipped(state.cell)
 
@@ -632,7 +632,7 @@ export class Renderer {
     }
   }
 
-  getLabelValue(state: State) {
+  getLabel(state: State) {
     return state.view.graph.getLabel(state.cell)
   }
 

packages/x6/src/graph/base-graph.ts

@@ -3067,7 +3067,6 @@ export interface IPreDependencies {
   getSelectedCells(): Cell[]
   getDeletableCells(cells: Cell[]): Cell[]
   getCollapsableCells(cells: Cell[], collapse: boolean): Cell[]
-  dataToString(cell: Cell): string
-  putLabel(cell: Cell, label: string): string
   getStyle(cell: Cell | null): Style
+  getLabel(cell: Cell): HTMLElement | string | null
 }

packages/x6/src/graph/common-accessor.ts

@@ -99,51 +99,29 @@ export class CommonAccessor extends BaseGraph {
     return style != null ? style.overflow === 'hidden' : false
   }
 
-  @hook()
-  dataToString(cell: Cell): string {
-    const data = this.model.getData(cell)
-    if (data != null) {
-      if (typeof data.toString === 'function') {
-        return data.toString()
-      }
-    }
-
-    return ''
-  }
-
   @hook()
   getHtml(cell: Cell): HTMLElement | string | null {
-    let result = ''
+    let result = null
     if (cell != null) {
-      result = this.dataToString(cell)
+      result = cell.style.html
     }
-    return result
+    return result || null
   }
 
   @hook()
   getLabel(cell: Cell): HTMLElement | string | null {
-    let result = ''
+    let result = null
 
     if (this.labelsVisible && cell != null) {
       const style = this.getStyle(cell)
-      if (!style.noLabel) {
-        result = this.dataToString(cell)
+      if (style.label !== false && style.label != null) {
+        result = style.label
       }
     }
 
     return result
   }
 
-  @hook()
-  putLabel(cell: Cell, label: string) {
-    const data = cell.getData()
-    if (typeof data === 'object') {
-      throw new Error('Method not implemented.')
-    }
-
-    return label
-  }
-
   @hook()
   getCellLink(cell: Cell) {
     return null

packages/x6/src/graph/editing-accessor.ts

@@ -17,7 +17,15 @@ export class EditingAccessor extends BaseGraph {
 
   @hook()
   getEditingContent(cell: Cell, e?: Event) {
-    return this.dataToString(cell)
+    const content = this.getLabel(cell)
+    if (content != null) {
+      if (typeof content === 'string') {
+        return content
+      }
+      return content.outerHTML
+    }
+
+    return null
   }
 
   startEditing(e?: MouseEvent) {

packages/x6/src/graph/editing-manager.ts

@@ -1,24 +1,12 @@
 import { Cell } from '../core/cell'
-import { events } from './events'
 import { BaseManager } from './base-manager'
 
 export class EditingManager extends BaseManager {
   updateLabel(cell: Cell, label: string, e?: Event) {
     this.model.batchUpdate(() => {
-      const old = cell.data
-      const data = this.graph.putLabel(cell, label)
-      this.dataChanged(cell, data, this.graph.isAutoSizeCell(cell))
-      this.graph.trigger(events.labelChanged, { cell, data, old, e })
+      const style = { ...cell.style, label }
+      this.graph.styleManager.setCellStyle(style, [cell])
     })
     return cell
   }
-
-  protected dataChanged(cell: Cell, data: any, autoSize: boolean) {
-    this.model.batchUpdate(() => {
-      this.model.setData(cell, data)
-      if (autoSize) {
-        this.graph.sizeManager.cellSizeUpdated(cell, false)
-      }
-    })
-  }
 }

packages/x6/src/graph/events.ts

@@ -31,7 +31,6 @@ export const events = {
   startEditing: 'startEditing',
   editingStarted: 'editingStarted',
   editingStopped: 'editingStopped',
-  labelChanged: 'labelChanged',
   size: 'size',
 
   click: 'click',

packages/x6/src/graph/hook.ts

@@ -314,8 +314,6 @@ export interface IHooks {
    */
   getLabel: CellHook<string | HTMLElement>
 
-  putLabel: (this: Graph, cell: Cell, label: string) => any | null
-
   /**
    * Returns the initial value for in-place editing.
    */
@@ -327,11 +325,6 @@ export interface IHooks {
    */
   getTooltip: CellHook<string | HTMLElement | null>
 
-  /**
-   * Returns the textual representation for the given cell.
-   */
-  dataToString: CellHook<string>
-
   /**
    * Returns the terminal to be used for a given port.
    */

packages/x6/src/graph/size-manager.ts

@@ -123,7 +123,7 @@ export class SizeManager extends BaseManager {
       }
 
       // Adds space for label
-      let value = this.renderer.getLabelValue(state)
+      let value = this.renderer.getLabel(state)
       if (value != null && typeof value === 'string' && value.length > 0) {
         if (!this.graph.isHtmlLabel(state.cell)) {
           value = util.escape(value)

packages/x6/src/graph/tooltip-accessor.ts

@@ -26,6 +26,6 @@ export class TooltipAccessor extends BaseGraph {
 
   @hook()
   getTooltip(cell: Cell) {
-    return this.dataToString(cell)
+    return cell.style.tooltip
   }
 }

packages/x6/src/handler/cell-editor.ts

@@ -339,7 +339,8 @@ export class CellEditor extends Disposable {
   }
 
   protected getInitialValue(state: State, trigger?: Event) {
-    let result = util.escape(this.graph.getEditingContent(state.cell, trigger))
+    const content = this.graph.getEditingContent(state.cell, trigger) || ''
+    let result = util.escape(content)
 
     // Workaround for trailing line breaks being ignored in the editor
     if (

packages/x6/src/types.ts

@@ -64,10 +64,7 @@ interface ShapeStyle {
 }
 
 interface LabelStyle {
-  /**
-   * If this is true then no label is visible for a given cell.
-   */
-  noLabel?: boolean
+  label?: false | string | HTMLElement
   htmlLabel?: boolean
   horizontal?: boolean
   fontSize?: number
@@ -277,24 +274,25 @@ interface IndicatorStyle {
   indicatorDirection?: Direction
 }
 
-interface CustomStyle {
-  [key: string]: any
-}
-
-interface CustomCSS {
+interface HTMLShapeStyle {
+  html?: string | HTMLElement
   css?: {
     [selector: string]: Partial<CSSStyleDeclaration>
   }
 }
 
+interface CustomStyle {
+  [key: string]: any
+}
+
 export interface Style
   extends ShapeStyle,
     LabelStyle,
     EdgeStyle,
     ImageStyle,
     IndicatorStyle,
-    CustomStyle,
-    CustomCSS {
+    HTMLShapeStyle,
+    CustomStyle {
   direction?: Direction
 
   /**