fix: ensure the container in html view (#3196)

[@antv/x6@2.2.0](https://www.npmjs.com/package/@antv/x6/v/2.2.0)
[@antv/x6@2.2.0](https://github.com/antvis/X6/releases/tag/%40antv/x6%402.2.0)

[@antv/x6-common@2.0.6](https://www.npmjs.com/package/@antv/x6-common/v/2.0.6)
[@antv/x6-common@2.0.6](https://github.com/antvis/X6/releases/tag/%40antv/x6-common%402.0.6)

[@antv/x6-react-components@2.0.7](https://www.npmjs.com/package/@antv/x6-react-components/v/2.0.7)
[@antv/x6-react-components@2.0.7](https://github.com/antvis/X6/releases/tag/%40antv/x6-react-components%402.0.7)

[@antv/x6-sites@1.4.0](https://github.com/antvis/X6/releases/tag/%40antv/x6-sites%401.4.0)

CONTRIBUTORS

@@ -69,6 +69,7 @@ qingchi <qinky94@163.com>
 qu <33251372+Qujh97@users.noreply.github.com>
 sallen450 <qinghua10199@gmail.com>
 semantic-release-bot <semantic-release-bot@martynus.net>
+siaikin <abc1310054026@outlook.com>
 vector <vectorse@126.com>
 wenbei <38773084+wb-wenbei@users.noreply.github.com>
 wgf <34190465+evelope@users.noreply.github.com>

packages/x6-common/CHANGELOG.md

@@ -1,3 +1,10 @@
+## @antv/x6-common [2.0.6](https://github.com/antvis/x6/compare/@antv/x6-common@2.0.5...@antv/x6-common@2.0.6) (2023-01-31)
+
+
+### Bug Fixes
+
+* fix index error for priorityQueue ([#3179](https://github.com/antvis/x6/issues/3179)) ([d64150b](https://github.com/antvis/x6/commit/d64150bfadf10fe21f44734a0267261260b8c53b))
+
 ## @antv/x6-common [2.0.5](https://github.com/antvis/x6/compare/@antv/x6-common@2.0.4...@antv/x6-common@2.0.5) (2023-01-18)
 
 

packages/x6-common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6-common",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "Basic toolkit for X6",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/x6-plugin-clipboard/src/api.ts

@@ -7,7 +7,7 @@ declare module '@antv/x6/lib/graph/graph' {
     enableClipboard: () => Graph
     disableClipboard: () => Graph
     toggleClipboard: (enabled?: boolean) => Graph
-    isClipboardEmpty: () => boolean
+    isClipboardEmpty: (options?: Clipboard.Options) => boolean
     getCellsInClipboard: () => Cell[]
     cleanClipboard: () => Graph
     copy: (cells: Cell[], options?: Clipboard.CopyOptions) => Graph
@@ -55,10 +55,10 @@ Graph.prototype.toggleClipboard = function (enabled?: boolean) {
   return this
 }
 
-Graph.prototype.isClipboardEmpty = function () {
+Graph.prototype.isClipboardEmpty = function (options?: Clipboard.Options) {
   const clipboard = this.getPlugin('clipboard') as Clipboard
   if (clipboard) {
-    return clipboard.isEmpty()
+    return clipboard.isEmpty(options)
   }
   return true
 }

packages/x6-plugin-clipboard/src/clipboard.ts

@@ -89,7 +89,12 @@ export class ClipboardImpl {
     }
   }
 
-  isEmpty() {
+  isEmpty(options: ClipboardImpl.Options = {}) {
+    if (options.useLocalStorage) {
+      // With useLocalStorage turned on, no real cells can be obtained without deserialize first
+      // https://github.com/antvis/X6/issues/2573
+      this.deserialize(options)
+    }
     return this.cells.length <= 0
   }
 

packages/x6-plugin-clipboard/src/index.ts

@@ -60,8 +60,8 @@ export class Clipboard
     return this
   }
 
-  isEmpty() {
-    return this.clipboardImpl.isEmpty()
+  isEmpty(options: Clipboard.Options = {}) {
+    return this.clipboardImpl.isEmpty(options)
   }
 
   getCellsInClipboard() {

packages/x6-plugin-scroller/src/index.ts

@@ -35,17 +35,15 @@ export class Scroller extends Basecoat<Scroller.EventArgs> {
     return this.scrollerImpl.container
   }
 
-  constructor(public readonly options: Scroller.Options) {
+  constructor(public options: Scroller.Options) {
     super()
     CssLoader.ensure(this.name, content)
   }
 
   public init(graph: Graph) {
     this.graph = graph
-    this.scrollerImpl = new ScrollerImpl({
-      ...this.options,
-      graph,
-    })
+    this.options = ScrollerImpl.getOptions({ ...this.options, graph })
+    this.scrollerImpl = new ScrollerImpl(this.options)
     this.setup()
     this.startListening()
     this.updateClassName()
@@ -401,7 +399,7 @@ export namespace Scroller {
   export interface EventArgs extends ScrollerImpl.EventArgs {}
 
   type EventType = 'leftMouseDown' | 'rightMouseDown'
-  export interface Options extends ScrollerImpl.CommonOptions {
+  export interface Options extends ScrollerImpl.Options {
     pannable?: boolean | { enabled: boolean; eventTypes: EventType[] }
     modifiers?: string | ModifierKey[] | null // alt, ctrl, shift, meta
   }

packages/x6-plugin-scroller/src/scroller.ts

@@ -1128,7 +1128,8 @@ export namespace ScrollerImpl {
     panning: { e: Dom.MouseMoveEvent }
     'pan:stop': { e: Dom.MouseUpEvent }
   }
-  export interface CommonOptions {
+  export interface Options {
+    graph: Graph
     enabled?: boolean
     className?: string
     width?: number
@@ -1151,10 +1152,6 @@ export namespace ScrollerImpl {
           scroller: ScrollerImpl,
         ) => TransformManager.FitToContentFullOptions)
   }
-
-  export interface Options extends CommonOptions {
-    graph: Graph
-  }
   export interface CenterOptions {
     padding?: NumberExt.SideOptions
   }
@@ -1266,7 +1263,7 @@ export namespace ScrollerImpl {
       result.background == null
     ) {
       result.background = graphOptions.background
-      delete graphOptions.background
+      options.graph.background.clear()
     }
 
     return result as ScrollerImpl.Options

packages/x6-react-components/CHANGELOG.md

@@ -1,3 +1,10 @@
+## @antv/x6-react-components [2.0.7](https://github.com/antvis/x6/compare/@antv/x6-react-components@2.0.6...@antv/x6-react-components@2.0.7) (2023-01-31)
+
+
+### Bug Fixes
+
+* don't hide when click on color picker ([#3172](https://github.com/antvis/x6/issues/3172)) ([cae8625](https://github.com/antvis/x6/commit/cae8625feb20fd93cc8002fa6ed00d345d3cf33c))
+
 ## @antv/x6-react-components [2.0.6](https://github.com/antvis/x6/compare/@antv/x6-react-components@2.0.5...@antv/x6-react-components@2.0.6) (2023-01-17)
 
 

packages/x6-react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6-react-components",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "React components for building x6 editors",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/x6/CHANGELOG.md

@@ -1,3 +1,10 @@
+# @antv/x6 [2.2.0](https://github.com/antvis/x6/compare/@antv/x6@2.1.7...@antv/x6@2.2.0) (2023-01-31)
+
+
+### Features
+
+* add port events ([#3185](https://github.com/antvis/x6/issues/3185)) ([3265fe5](https://github.com/antvis/x6/commit/3265fe5b983f22e34d60c647212824961ecfdab5))
+
 ## @antv/x6 [2.1.6](https://github.com/antvis/x6/compare/@antv/x6@2.1.5...@antv/x6@2.1.6) (2023-01-19)
 
 ## @antv/x6 [2.1.5](https://github.com/antvis/x6/compare/@antv/x6@2.1.4...@antv/x6@2.1.5) (2023-01-13)

packages/x6/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6",
-  "version": "2.1.6",
+  "version": "2.2.0",
   "description": "JavaScript diagramming library that uses SVG and HTML for rendering",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/x6/src/shape/html.ts

@@ -36,7 +36,8 @@ export namespace HTML {
     }
 
     protected renderHTMLComponent() {
-      const container = this.selectors.foContent as Element
+      const container =
+        this.selectors && (this.selectors.foContent as HTMLDivElement)
       if (container) {
         Dom.empty(container)
         const content = shapeMaps[this.cell.shape]

sites/x6-sites/CHANGELOG.md

@@ -1,3 +1,16 @@
+# @antv/x6-sites [1.4.0](https://github.com/antvis/x6/compare/@antv/x6-sites@1.3.2...@antv/x6-sites@1.4.0) (2023-01-31)
+
+
+### Bug Fixes
+
+* fix index error for priorityQueue ([#3179](https://github.com/antvis/x6/issues/3179)) ([d64150b](https://github.com/antvis/x6/commit/d64150bfadf10fe21f44734a0267261260b8c53b))
+* prevent highlighting new edge ([#3170](https://github.com/antvis/x6/issues/3170)) ([bd30f7f](https://github.com/antvis/x6/commit/bd30f7f61de530a9b6671aaedd4be2e026de8d44))
+
+
+### Features
+
+* add port events ([#3185](https://github.com/antvis/x6/issues/3185)) ([3265fe5](https://github.com/antvis/x6/commit/3265fe5b983f22e34d60c647212824961ecfdab5))
+
 ## @antv/x6-sites [1.3.2](https://github.com/antvis/x6/compare/@antv/x6-sites@1.3.1...@antv/x6-sites@1.3.2) (2023-01-13)
 
 

sites/x6-sites/examples/showcase/practices/demo/flowchart.ts

@@ -23,12 +23,7 @@ const graph = new Graph({
     maxScale: 3,
   },
   connecting: {
-    router: {
-      name: 'manhattan',
-      args: {
-        padding: 1,
-      },
-    },
+    router: 'manhattan',
     connector: {
       name: 'rounded',
       args: {
@@ -77,27 +72,39 @@ const graph = new Graph({
 
 // #region 使用插件
 graph
-.use(new Transform({
-  resizing: true,
-  rotating: true,
-}))
-.use(new Selection({
-  enabled: true,
-  rubberband: true,
-  showNodeSelectionBox: true,
-}))
-.use(new Snapline({
-  enabled: true,
-}))
-.use(new Keyboard({
-  enabled: true,
-}))
-.use(new Clipboard({
-  enabled: true,
-}))
-.use(new History({
-  enabled: true,
-}))
+  .use(
+    new Transform({
+      resizing: true,
+      rotating: true,
+    }),
+  )
+  .use(
+    new Selection({
+      enabled: true,
+      rubberband: true,
+      showNodeSelectionBox: true,
+    }),
+  )
+  .use(
+    new Snapline({
+      enabled: true,
+    }),
+  )
+  .use(
+    new Keyboard({
+      enabled: true,
+    }),
+  )
+  .use(
+    new Clipboard({
+      enabled: true,
+    }),
+  )
+  .use(
+    new History({
+      enabled: true,
+    }),
+  )
 // #endregion
 
 // #region 初始化 stencil
@@ -154,7 +161,7 @@ graph.bindKey(['meta+v', 'ctrl+v'], () => {
   return false
 })
 
-//undo redo
+// undo redo
 graph.bindKey(['meta+z', 'ctrl+z'], () => {
   if (graph.canUndo()) {
     graph.undo()
@@ -176,7 +183,7 @@ graph.bindKey(['meta+a', 'ctrl+a'], () => {
   }
 })
 
-//delete
+// delete
 graph.bindKey('backspace', () => {
   const cells = graph.getSelectedCells()
   if (cells.length) {
@@ -200,7 +207,7 @@ graph.bindKey(['ctrl+2', 'meta+2'], () => {
 
 // 控制连接桩显示/隐藏
 const showPorts = (ports: NodeListOf<SVGElement>, show: boolean) => {
-  for (let i = 0, len = ports.length; i < len; i = i + 1) {
+  for (let i = 0, len = ports.length; i < len; i += 1) {
     ports[i].style.visibility = show ? 'visible' : 'hidden'
   }
 }

sites/x6-sites/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@antv/x6-sites",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "X6 sites deployed on gh-pages",
   "scripts": {
     "dev": "dumi dev",
@@ -14,7 +14,7 @@
     "sites"
   ],
   "dependencies": {
-    "@antv/dumi-theme-antv": "^0.3.0-beta.22",
+    "@antv/dumi-theme-antv": "^0.3.5",
     "@antv/hierarchy": "^0.6.6",
     "@antv/layout": "^0.3.12",
     "@antv/x6": "^2.x",
@@ -33,7 +33,7 @@
     "@antv/x6-react-shape": "^2.x",
     "antd": "^4.4.2",
     "dagre": "^0.8.5",
-    "dumi": "2.0.16",
+    "dumi": "^2.1.6",
     "elkjs": "^0.8.2",
     "highlight.js": "^10.1.2",
     "react": "^18.0.0",