fix: avoid access document or window in server side

antvis · Dec 14, 2023 · 4869eca · 4869eca
1 parent f2cae96
commit 4869eca
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 27 deletions.
diff --git a/packages/x6-common/src/dom/matrix.ts b/packages/x6-common/src/dom/matrix.ts
@@ -1,7 +1,6 @@
 import { PointLike } from '../types'
 import { createSvgElement } from './elem'
 
-const svgDocument = createSvgElement('svg') as SVGSVGElement
 const transformRegex = /(\w+)\(([^,)]+),?([^)]+)?\)/gi
 const transformSeparatorRegex = /[ ,]+/
 const transformationListRegex = /^(\w+)\((.*)\)/
@@ -36,6 +35,7 @@ export interface Scale {
  * @see https://developer.mozilla.org/en/docs/Web/API/SVGPoint
  */
 export function createSVGPoint(x: number, y: number) {
+  const svgDocument = createSvgElement('svg') as SVGSVGElement
   const p = svgDocument.createSVGPoint()
   p.x = x
   p.y = y
@@ -58,6 +58,7 @@ export function createSVGPoint(x: number, y: number) {
  * @see https://developer.mozilla.org/en/docs/Web/API/SVGMatrix
  */
 export function createSVGMatrix(matrix?: DOMMatrix | MatrixLike | null) {
+  const svgDocument = createSvgElement('svg') as SVGSVGElement
   const mat = svgDocument.createSVGMatrix()
   if (matrix != null) {
     const source = matrix as any
@@ -75,6 +76,7 @@ export function createSVGMatrix(matrix?: DOMMatrix | MatrixLike | null) {
  * @see https://developer.mozilla.org/en/docs/Web/API/SVGTransform
  */
 export function createSVGTransform(matrix?: DOMMatrix | MatrixLike) {
+  const svgDocument = createSvgElement('svg') as SVGSVGElement
   if (matrix != null) {
     if (!(matrix instanceof DOMMatrix)) {
       matrix = createSVGMatrix(matrix) // eslint-disable-line

diff --git a/packages/x6-common/src/dom/prefix.ts b/packages/x6-common/src/dom/prefix.ts
@@ -5,7 +5,7 @@ function camelize(str: string) {
 
 const memoized: { [key: string]: string | null } = {}
 const prefixes = ['webkit', 'ms', 'moz', 'o']
-const testStyle = document ? document.createElement('div').style : {}
+const testStyle = typeof document !== 'undefined' ? document.createElement('div').style : {}
 
 function getWithPrefix(name: string) {
   for (let i = 0; i < prefixes.length; i += 1) {

diff --git a/packages/x6-common/src/dom/selection.ts b/packages/x6-common/src/dom/selection.ts
@@ -1,4 +1,6 @@
 export const clearSelection = (function () {
+  if (typeof document == 'undefined')
+    return function () {}
   const doc = document as any
   if (doc.selection) {
     return function () {

diff --git a/packages/x6-common/src/dom/text.ts b/packages/x6-common/src/dom/text.ts
@@ -7,8 +7,6 @@ import { attr } from './attr'
 import { Vector } from '../vector'
 import { createSvgElement, empty } from './elem'
 
-const canvasContext = document.createElement('canvas').getContext('2d')!
-
 function createTextPathNode(
   attrs: { d?: string; 'xlink:href'?: string },
   elem: SVGElement,
@@ -374,6 +372,7 @@ export function text(
 }
 
 export function measureText(text: string, styles: any = {}) {
+  const canvasContext = document.createElement('canvas').getContext('2d')!
   if (!text) {
     return { width: 0 }
   }

diff --git a/packages/x6-common/src/polyfill/index.ts b/packages/x6-common/src/polyfill/index.ts
@@ -10,27 +10,29 @@ if (
 
 // compatible with ParentNode.append() before chrome 54
 // https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
-;(function (arr) {
-  arr.forEach((item) => {
-    if (Object.prototype.hasOwnProperty.call(item, 'append')) {
-      return
-    }
-    Object.defineProperty(item, 'append', {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value(...args: any[]) {
-        const docFrag = document.createDocumentFragment()
+if (typeof window !== 'undefined') {
+  ;(function (arr) {
+    arr.forEach((item) => {
+      if (Object.prototype.hasOwnProperty.call(item, 'append')) {
+        return
+      }
+      Object.defineProperty(item, 'append', {
+        configurable: true,
+        enumerable: true,
+        writable: true,
+        value(...args: any[]) {
+          const docFrag = document.createDocumentFragment()
 
-        args.forEach((arg: any) => {
-          const isNode = arg instanceof Node
-          docFrag.appendChild(
-            isNode ? arg : document.createTextNode(String(arg)),
-          )
-        })
+          args.forEach((arg: any) => {
+            const isNode = arg instanceof Node
+            docFrag.appendChild(
+              isNode ? arg : document.createTextNode(String(arg)),
+            )
+          })
 
-        this.appendChild(docFrag)
-      },
+          this.appendChild(docFrag)
+        },
+      })
     })
-  })
-})([Element.prototype, Document.prototype, DocumentFragment.prototype])
+  })([Element.prototype, Document.prototype, DocumentFragment.prototype])
+}
diff --git a/packages/x6/src/util/index.ts b/packages/x6/src/util/index.ts
@@ -10,8 +10,6 @@ import { Dom, PointData, PointLike } from '@antv/x6-common'
 import { normalize } from '../registry/marker/util'
 
 export namespace Util {
-  const svgDocument = Dom.createSvgElement('svg') as SVGSVGElement
-
   export const normalizeMarker = normalize
   /**
    * Transforms point by an SVG transformation represented by `matrix`.
@@ -47,6 +45,7 @@ export namespace Util {
     rect: Rectangle.RectangleLike,
     matrix: DOMMatrix,
   ) {
+    const svgDocument = Dom.createSvgElement('svg') as SVGSVGElement
     const p = svgDocument.createSVGPoint()
 
     p.x = rect.x