Merge b35af46 into ca2b5d1

.gitattributes

@@ -0,0 +1 @@
+* text eol=lf

.github/workflows/ci.yml

@@ -12,7 +12,7 @@ jobs:
       uses: actions/setup-node@v1
       with:
         node-version: ${{ matrix.node-version }}
-    - name: install global yarn and lerna 
+    - name: install global yarn and lerna
       run: |
         npm install -g yarn
         npm install -g lerna
@@ -27,4 +27,4 @@ jobs:
       uses: coverallsapp/github-action@master
       with:
         github-token: ${{ secrets.GITHUB_TOKEN }}
-        path-to-lcov: ./packages/x6/test/coverage/lcov.info
+        path-to-lcov: ./test/coverage/lcov.info

.gitignore

@@ -4,3 +4,7 @@ npm-debug.log
 yarn-error.log
 lerna-debug.log
 node_modules
+coverage
+lib
+es
+dist

examples/x6-example-drawio/src/pages/editor.ts

@@ -1,10 +1,10 @@
-import { Graph, Primer, Style, FontStyle, Image } from '@antv/x6'
+import { Graph, Basecoat, Style, FontStyle, Image } from '@antv/x6'
 import { Commands } from './graph/commands'
 import avatarMale from './images/male.png'
 import avatarFemale from './images/female.png'
 import './editor.less'
 
-export class Editor extends Primer {
+export class Editor extends Basecoat {
   graph: Graph
   commands: Commands
 

examples/x6-example-drawio/src/pages/graph/format-cell.tsx

@@ -2,7 +2,15 @@ import React from 'react'
 import classnames from 'classnames'
 import { Checkbox, InputNumber, Select, Button } from 'antd'
 import { ColorPicker, ColorResult } from '@antv/x6-components'
-import { Cell, util, Geometry, FontStyle, VAlign, Align } from '@antv/x6'
+import {
+  Cell,
+  Geometry,
+  FontStyle,
+  VAlign,
+  Align,
+  Color,
+  NumberExt,
+} from '@antv/x6'
 import { getEditor } from '../index'
 
 export class FormatCell extends React.PureComponent<
@@ -187,7 +195,7 @@ export class FormatCell extends React.PureComponent<
   renderStyleTab() {
     const hasStroke =
       (this.state.strokeWidth != null && this.state.strokeWidth > 0) ||
-      util.isValidColor(this.state.strokeColor)
+      Color.isValid(this.state.strokeColor)
 
     return (
       <div className="x6-editor-format-content">
@@ -196,11 +204,11 @@ export class FormatCell extends React.PureComponent<
             <Checkbox
               style={{ width: 136, fontWeight: 600 }}
               onChange={this.onFillCheckedChange}
-              checked={util.isValidColor(this.state.fill)}
+              checked={Color.isValid(this.state.fill)}
             >
               Fill
             </Checkbox>
-            {util.isValidColor(this.state.fill) && (
+            {Color.isValid(this.state.fill) && (
               <ColorPicker
                 color={this.state.fill!}
                 onChange={this.onFillChange}
@@ -212,11 +220,11 @@ export class FormatCell extends React.PureComponent<
             <Checkbox
               style={{ width: 136, fontWeight: 600 }}
               onChange={this.onGradientCheckedChange}
-              checked={util.isValidColor(this.state.gradient)}
+              checked={Color.isValid(this.state.gradient)}
             >
               Gradient
             </Checkbox>
-            {util.isValidColor(this.state.gradient) && (
+            {Color.isValid(this.state.gradient) && (
               <ColorPicker
                 onChange={this.onGradientChange}
                 color={this.state.gradient!}
@@ -289,7 +297,7 @@ export class FormatCell extends React.PureComponent<
                 max={100}
                 step={1}
                 onChange={this.onOpacityChange}
-                value={util.clamp(
+                value={NumberExt.clamp(
                   +(this.state.opacity! * 100).toFixed(0),
                   0,
                   100,
@@ -795,11 +803,11 @@ export class FormatCell extends React.PureComponent<
             <Checkbox
               style={{ width: 144, fontWeight: 600 }}
               onChange={this.onFontColorCheckedChange}
-              checked={util.isValidColor(this.state.fontColor)}
+              checked={Color.isValid(this.state.fontColor)}
             >
               Font Color
             </Checkbox>
-            {util.isValidColor(this.state.fontColor) && (
+            {Color.isValid(this.state.fontColor) && (
               <ColorPicker
                 color={this.state.fontColor!}
                 onChange={this.onFontColorChange}
@@ -811,11 +819,11 @@ export class FormatCell extends React.PureComponent<
             <Checkbox
               style={{ width: 144, fontWeight: 600 }}
               onChange={this.onLabelBorderColorCheckedChange}
-              checked={util.isValidColor(this.state.labelBorderColor)}
+              checked={Color.isValid(this.state.labelBorderColor)}
             >
               Border Color
             </Checkbox>
-            {util.isValidColor(this.state.labelBorderColor) && (
+            {Color.isValid(this.state.labelBorderColor) && (
               <ColorPicker
                 color={this.state.labelBorderColor!}
                 onChange={this.onLabelBorderColorChange}
@@ -827,11 +835,11 @@ export class FormatCell extends React.PureComponent<
             <Checkbox
               style={{ width: 144, fontWeight: 600 }}
               onChange={this.onLabelBgColorCheckedChange}
-              checked={util.isValidColor(this.state.labelBackgroundColor)}
+              checked={Color.isValid(this.state.labelBackgroundColor)}
             >
               Background Color
             </Checkbox>
-            {util.isValidColor(this.state.labelBackgroundColor) && (
+            {Color.isValid(this.state.labelBackgroundColor) && (
               <ColorPicker
                 color={this.state.labelBackgroundColor!}
                 onChange={this.onLabelBgColorChange}

examples/x6-example-drawio/src/pages/graph/shape/callout.ts

@@ -1,12 +1,13 @@
 import { getFactor } from './util'
 import {
-  util,
   State,
   Shape,
   Perimeter,
   Point,
   Rectangle,
   SvgCanvas2D,
+  ObjectExt,
+  Margin,
 } from '@antv/x6'
 
 export class CalloutShape extends Shape.Actor {
@@ -24,7 +25,7 @@ export class CalloutShape extends Shape.Actor {
       0,
       0,
       0,
-      util.getNumber(this.style, 'factor', this.factor) * this.scale,
+      ObjectExt.getNumber(this.style, 'factor', this.factor) * this.scale,
     )
   }
 
@@ -65,8 +66,15 @@ export function calloutPerimeter(
     CalloutShape.prototype.factor,
     bounds.height,
   )
-  const rect = new Rectangle(0, 0, 0, factor * state.view.scale)
-  const directedBounds = util.getDirectedBounds(bounds, rect, state.style)
+
+  const margin: Margin = {
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: factor * state.view.scale,
+  }
+
+  const directedBounds = State.getDirectedBounds(state, bounds, margin)
   return Perimeter.rectangle(directedBounds, state, next, orthogonal)
 }
 

examples/x6-example-drawio/src/pages/graph/shape/card.ts

@@ -1,4 +1,4 @@
-import { util, Shape, SvgCanvas2D, Point } from '@antv/x6'
+import { Shape, SvgCanvas2D, Point, ObjectExt } from '@antv/x6'
 
 export class CardShape extends Shape.Actor {
   factor: number = 30
@@ -9,7 +9,7 @@ export class CardShape extends Shape.Actor {
 
   redrawPath(c: SvgCanvas2D, x: number, y: number, w: number, h: number) {
     const arcSize = this.getLineArcSize()
-    const factor = util.getNumber(this.style, 'factor', this.factor)
+    const factor = ObjectExt.getNumber(this.style, 'factor', this.factor)
     const s = Math.max(0, Math.min(w, Math.min(h, factor)))
 
     this.drawPoints(

examples/x6-example-drawio/src/pages/graph/shape/cube.ts

@@ -1,4 +1,4 @@
-import { util, Shape, SvgCanvas2D, Rectangle } from '@antv/x6'
+import { Shape, SvgCanvas2D, Rectangle, ObjectExt } from '@antv/x6'
 
 export class CubeShape extends Shape.Cylinder {
   factor: number = 20
@@ -10,22 +10,23 @@ export class CubeShape extends Shape.Cylinder {
   }
 
   getLabelMargins(rect: Rectangle) {
-    if (util.getBoolean(this.style, 'boundedLbl', false)) {
-      const s = util.getNumber(this.style, 'factor', this.factor) * this.scale
+    if (ObjectExt.getBoolean(this.style, 'boundedLbl', false)) {
+      const s =
+        ObjectExt.getNumber(this.style, 'factor', this.factor) * this.scale
       return new Rectangle(s, s, 0, 0)
     }
 
     return null
   }
 
   drawNodeShape(c: SvgCanvas2D, x: number, y: number, w: number, h: number) {
-    const factor = util.getNumber(this.style, 'factor', this.factor)
-    const darkOpacity = util.getNumber(
+    const factor = ObjectExt.getNumber(this.style, 'factor', this.factor)
+    const darkOpacity = ObjectExt.getNumber(
       this.style,
       'darkOpacity',
       this.darkOpacity,
     )
-    const darkOpacity2 = util.getNumber(
+    const darkOpacity2 = ObjectExt.getNumber(
       this.style,
       'darkOpacity2',
       this.darkOpacity2,

examples/x6-example-drawio/src/pages/graph/shape/document.ts

@@ -1,11 +1,11 @@
 import { getFactor } from './util'
-import { util, Shape, SvgCanvas2D, Rectangle } from '@antv/x6'
+import { Shape, SvgCanvas2D, Rectangle, ObjectExt } from '@antv/x6'
 
 export class DocumentShape extends Shape.Actor {
   factor: number = 0.3
 
   getLabelMargins(rect: Rectangle) {
-    if (util.getBoolean(this.style, 'boundedLbl', false)) {
+    if (ObjectExt.getBoolean(this.style, 'boundedLbl', false)) {
       const dy = getFactor(this.style, this.factor, rect.height)
       return new Rectangle(0, 0, 0, dy)
     }

examples/x6-example-drawio/src/pages/graph/shape/flex-arrow.ts

@@ -1,4 +1,4 @@
-import { util, Shape } from '@antv/x6'
+import { Shape, ObjectExt } from '@antv/x6'
 
 export class FlexArrowShape extends Shape.ArrowConnector {
   defaultWidth = 10
@@ -12,20 +12,20 @@ export class FlexArrowShape extends Shape.ArrowConnector {
   getStartArrowWidth() {
     return (
       this.getEdgeWidth() +
-      util.getNumber(this.style, 'startWidth', this.defaultArrowWidth)
+      ObjectExt.getNumber(this.style, 'startWidth', this.defaultArrowWidth)
     )
   }
 
   getEndArrowWidth() {
     return (
       this.getEdgeWidth() +
-      util.getNumber(this.style, 'endWidth', this.defaultArrowWidth)
+      ObjectExt.getNumber(this.style, 'endWidth', this.defaultArrowWidth)
     )
   }
 
   getEdgeWidth() {
     return (
-      util.getNumber(this.style, 'width', this.defaultWidth) +
+      ObjectExt.getNumber(this.style, 'width', this.defaultWidth) +
       Math.max(0, this.strokeWidth - 1)
     )
   }

examples/x6-example-drawio/src/pages/graph/shape/internal-storage.ts

@@ -1,4 +1,4 @@
-import { util, Shape, SvgCanvas2D } from '@antv/x6'
+import { Shape, SvgCanvas2D, ObjectExt, NumberExt } from '@antv/x6'
 
 export class InternalStorageShape extends Shape.Rectangle {
   dx: number = 20
@@ -17,8 +17,16 @@ export class InternalStorageShape extends Shape.Rectangle {
       inset = Math.max(inset, Math.min(w * f, h * f))
     }
 
-    const dx = util.clamp(util.getNumber(this.style, 'dx', this.dx), inset, w)
-    const dy = util.clamp(util.getNumber(this.style, 'dy', this.dy), inset, h)
+    const dx = NumberExt.clamp(
+      ObjectExt.getNumber(this.style, 'dx', this.dx),
+      inset,
+      w,
+    )
+    const dy = NumberExt.clamp(
+      ObjectExt.getNumber(this.style, 'dy', this.dy),
+      inset,
+      h,
+    )
 
     c.begin()
     c.moveTo(x, y + dy)

examples/x6-example-drawio/src/pages/graph/shape/link.ts

@@ -1,4 +1,4 @@
-import { util, Shape } from '@antv/x6'
+import { Shape, ObjectExt } from '@antv/x6'
 
 export class LinkShape extends Shape.ArrowConnector {
   defaultWidth = 4
@@ -18,7 +18,7 @@ export class LinkShape extends Shape.ArrowConnector {
 
   getEdgeWidth() {
     return (
-      util.getNumber(this.style, 'width', this.defaultWidth) +
+      ObjectExt.getNumber(this.style, 'width', this.defaultWidth) +
       Math.max(0, this.strokeWidth - 1)
     )
   }

examples/x6-example-drawio/src/pages/graph/shape/note.ts

@@ -1,12 +1,12 @@
-import { util, Shape, SvgCanvas2D } from '@antv/x6'
+import { Shape, SvgCanvas2D, ObjectExt } from '@antv/x6'
 
 export class NoteShape extends Shape.Cylinder {
   factor: number = 30
   darkOpacity: number = 0
 
   drawNodeShape(c: SvgCanvas2D, x: number, y: number, w: number, h: number) {
-    const factor = util.getNumber(this.style, 'factor', this.factor)
-    const darkOpacity = util.getNumber(
+    const factor = ObjectExt.getNumber(this.style, 'factor', this.factor)
+    const darkOpacity = ObjectExt.getNumber(
       this.style,
       'darkOpacity',
       this.darkOpacity,

examples/x6-example-drawio/src/pages/graph/shape/parallelogram.ts

@@ -1,6 +1,5 @@
-import { getFactor } from './util'
+import { getFactor, getPerimeterPoint } from './util'
 import {
-  util,
   State,
   Shape,
   Perimeter,
@@ -83,7 +82,7 @@ export function parallelogramPerimeter(
     }
   }
 
-  return util.getPerimeterPoint(points, center, next) as Point
+  return getPerimeterPoint(points, center, next) as Point
 }
 
 Shape.register('parallelogram', ParallelogramShape)

examples/x6-example-drawio/src/pages/graph/shape/process.ts

@@ -1,5 +1,5 @@
 import { getFactor } from './util'
-import { util, Shape, SvgCanvas2D, Direction, Rectangle } from '@antv/x6'
+import { Shape, SvgCanvas2D, Direction, Rectangle, NumberExt } from '@antv/x6'
 
 export class ProcessShape extends Shape.Rectangle {
   factor: number = 0.1
@@ -14,7 +14,7 @@ export class ProcessShape extends Shape.Rectangle {
 
     if (this.rounded) {
       const f = (this.style.arcSize || 0.15 * 100) / 100
-      inset = util.clamp(f * width, f * height, inset)
+      inset = NumberExt.clamp(f * width, f * height, inset)
     }
 
     if (round) {

examples/x6-example-drawio/src/pages/graph/shape/step.ts

@@ -1,6 +1,5 @@
-import { getFactor } from './util'
+import { getFactor, getPerimeterPoint } from './util'
 import {
-  util,
   State,
   Shape,
   Perimeter,
@@ -106,17 +105,17 @@ export function stepPerimeter(
     ]
   }
 
-  const p1 = new Point(cx, cy)
+  const center = new Point(cx, cy)
 
   if (orthogonal) {
     if (next.x < x || next.x > x + w) {
-      p1.y = next.y
+      center.y = next.y
     } else {
-      p1.x = next.x
+      center.x = next.x
     }
   }
 
-  return util.getPerimeterPoint(points, p1, next) as Point
+  return getPerimeterPoint(points, center, next) as Point
 }
 
 Shape.register('step', StepShape)