Merge 8d1cf6b into 02f8f45

examples/x6-example-features/src/pages/index.less

@@ -15,3 +15,7 @@
 .x6-page-background {
   box-shadow: 0 0 2px 1px #e9e9e9;
 }
+
+.scalable * {
+  vector-effect: non-scaling-stroke;
+}

examples/x6-example-features/src/pages/joint.tsx

@@ -1,77 +1,89 @@
 import React from 'react'
 import { joint } from '@antv/x6'
-import {
-  Rect,
-  Rect1,
-  Circle,
-  Ellipse,
-  Rhombus,
-} from '@antv/x6/lib/research/shape/basic'
 import './index.less'
 
 export default class Example extends React.Component {
   private container: HTMLDivElement
 
   componentDidMount() {
     const graph = new joint.Graph({ container: this.container })
-    const rect = new Rect({
+    const rect = graph.addNode({
       size: { width: 100, height: 40 },
       position: { x: 32, y: 40 },
       attrs: {
         text: { text: 'rect' },
       },
     })
 
-    const circle = new Circle({
+    rect.setAttrByPath('rect/fill', 'red')
+
+    graph.addNode({
+      type: 'basic.circle',
       position: { x: 160, y: 40 },
       attrs: {
         text: { text: 'circle' },
       },
     })
 
-    const ellipse = new Ellipse({
+    graph.addNode({
+      type: 'basic.ellipse',
       position: { x: 240, y: 40 },
       attrs: {
         text: { text: 'ellipse' },
       },
     })
 
-    const rhombus = new Rhombus({
-      position: { x: 320, y: 40 },
+    graph.addNode({
+      type: 'basic.text',
+      position: { x: 170, y: 120 },
+      size: { width: 60, height: 30 },
       attrs: {
-        text: { text: 'rhombus' },
+        text: { text: 'text' },
       },
     })
 
-    graph.model.addCell(rect)
-    graph.model.addCell(circle)
-    graph.model.addCell(ellipse)
-    graph.model.addCell(rhombus)
-
-    const rect1 = new Rect1({
-      size: { width: 100, height: 40 },
-      position: { x: 32, y: 120 },
+    graph.addNode({
+      type: 'basic.rhombus',
+      position: { x: 320, y: 40 },
       attrs: {
-        text: { text: 'rect' },
+        text: { text: 'rhombus', fontSize: 10 },
       },
     })
 
-    graph.model.addCell(rect1)
-
-    rect.setAttrByPath('rect/fill', 'red')
-
-    console.log(rect1)
-
-    console.log(graph)
-
-    // class NodeView1 extends joint.CellView {}
-    // NodeView1.setDefaults({ tagName: 'ss' })
+    graph.addNode({
+      type: 'basic.image',
+      size: { width: 40, height: 40 },
+      position: { x: 450, y: 50 },
+      attrs: {
+        text: { text: 'image' },
+        image: {
+          'xlink:href': 'http://placehold.it/48x48',
+          width: 48,
+          height: 48,
+        },
+      },
+    })
 
-    // class NodeView2 extends joint.CellView {}
-    // NodeView2.setDefaults({ tagName: 'dd' })
+    graph.addNode({
+      type: 'basic.path',
+      position: { x: 50, y: 120 },
+      size: { width: 40, height: 40 },
+      attrs: {
+        path: {
+          d:
+            'M25.979,12.896 19.312,12.896 19.312,6.229 12.647,6.229 12.647,12.896 5.979,12.896 5.979,19.562 12.647,19.562 12.647,26.229 19.312,26.229 19.312,19.562 25.979,19.562z',
+        },
+        text: { text: 'path' },
+      },
+    })
 
-    // console.log(NodeView1.getDefaults())
-    // console.log(NodeView2.getDefaults())
+    graph.addNode({
+      type: 'basic.text-block',
+      position: { x: 400, y: 150 },
+      size: { width: 180, height: 100 },
+      content:
+        'Lorem ipsum dolor sit amet,\n consectetur adipiscing elit. Nulla vel porttitor est.',
+    })
   }
 
   refContainer = (container: HTMLDivElement) => {

packages/x6-react-shape/package.json

@@ -24,7 +24,7 @@
     "watch": "watch 'yarn build' ./src",
     "build:esm": "tsc --module esnext --target es2015 --outDir ./es",
     "build:cjs": "tsc --module commonjs --target es5 --outDir ./lib",
-    "build:umd": "webpack --config webpack.config.ts ",
+    "build:umd": "webpack --config webpack.config.ts --mode production",
     "build": "run-p build:cjs build:esm build:umd",
     "prebuild": "run-s lint clean",
     "prepare": "yarn build",

packages/x6/package.json

@@ -26,22 +26,21 @@
     "clean:build": "rimraf dist es lib",
     "clean:coverage": "rimraf ./test/coverage",
     "clean": "run-p clean:build clean:coverage",
-    "lint": "run-s lint:ts lint:es lint:style",
     "lint:es": "eslint --ext .js scripts --fix",
     "lint:ts": "tslint -c tslint.json -p tsconfig.json --fix",
     "lint:style": "stylelint 'src/**/*.less' --syntax less --fix",
+    "lint": "run-s lint:ts lint:es lint:style",
     "build:esm": "tsc --module esnext --target es2015 --outDir ./es",
     "build:cjs": "tsc --module commonjs --target es5 --outDir ./lib",
     "build:umd": "webpack --config webpack.config.ts --mode production",
     "build:less": "lessc ./src/index.less ./lib/index.css",
     "build:images": "node ./scripts/make-images.js",
     "build:version": "node ./scripts/make-version.js",
-    "build:dev": "run-p build:images build:less build:cjs build:esm build:umd",
-    "build": "run-s build:version build:dev",
+    "build:dev": "run-p build:images build:less build:cjs build:esm",
+    "build": "run-s build:version build:dev build:umd",
     "prebuild": "run-s lint clean",
     "watch": "watch 'yarn build:dev' ./src",
     "test": "jest --coverage",
-    "test1": "karma start",
     "test:watch": "jest --watch --coverage",
     "test:debug": "DEBUG_MODE=1 jest",
     "coveralls": "cat ./test/coverage/lcov.info | coveralls",

packages/x6/src/geometry/curve.ts

@@ -785,7 +785,7 @@ export namespace Curve {
   function getCurveControlPoints(
     points: (Point | Point.PointLike | Point.PointData)[],
   ) {
-    const knots = points.map(p => Point.parse(p))
+    const knots = points.map(p => Point.clone(p))
     const firstControlPoints = []
     const secondControlPoints = []
     const n = knots.length - 1

packages/x6/src/geometry/ellipse.ts

@@ -58,7 +58,7 @@ export class Ellipse implements Ellipse.EllipseLike {
    * lying on the ellipse boundary and `n > 1` for points outside the ellipse.
    */
   normalizedDistance(p: Point | Point.PointLike | Point.PointData) {
-    const ref = Point.parse(p)
+    const ref = Point.clone(p)
     const dx = ref.x - this.x
     const dy = ref.y - this.y
     const a = this.a
@@ -133,7 +133,7 @@ export class Ellipse implements Ellipse.EllipseLike {
     p: Point | Point.PointLike | Point.PointData,
     angle: number = 0,
   ) {
-    const ref = Point.parse(p)
+    const ref = Point.clone(p)
 
     if (angle) {
       ref.rotate(angle, this.getCenter())
@@ -167,7 +167,7 @@ export class Ellipse implements Ellipse.EllipseLike {
   }
 
   tangentTheta(p: Point | Point.PointLike | Point.PointData) {
-    const ref = Point.parse(p)
+    const ref = Point.clone(p)
     const x0 = ref.x
     const y0 = ref.y
     const a = this.a

packages/x6/src/geometry/line.ts

@@ -354,7 +354,7 @@ export class Line {
    * `0` if the point lies on the line.
    */
   pointOffset(p: Point | Point.PointLike | Point.PointData) {
-    const ref = Point.parse(p)
+    const ref = Point.clone(p)
     const start = this.start
     const end = this.end
     const determinant =

packages/x6/src/geometry/path/index.ts

@@ -1 +1,2 @@
 export * from './path'
+export * from './segment'

packages/x6/src/geometry/path/path.ts

@@ -368,7 +368,7 @@ export class Path {
     return lastVisibleIndex
   }
 
-  protected getSegmentSubdivisions(options: Path.Options = {}): Segment[][] {
+  getSegmentSubdivisions(options: Path.Options = {}): Segment[][] {
     const precision = this.getPrecision(options)
     const segmentSubdivisions = []
     for (let i = 0, ii = this.segments.length; i < ii; i += 1) {
@@ -1088,8 +1088,8 @@ export class Path {
 
 export namespace Path {
   export interface Options {
-    precision?: number
-    segmentSubdivisions?: Segment[][]
+    precision?: number | null
+    segmentSubdivisions?: Segment[][] | null
   }
 }
 export namespace Path {
@@ -1154,10 +1154,20 @@ export namespace Path {
   ): Segment
   export function createSegment(
     type: 'C',
-    ...args: GetConstructorArgs<typeof CurveTo>
+    x0: number,
+    y0: number,
+    x1: number,
+    y1: number,
+    x2: number,
+    y2: number,
+  ): Segment
+  export function createSegment(
+    type: 'C',
+    p1: Point | Point.PointLike | Point.PointData,
+    p2: Point | Point.PointLike | Point.PointData,
+    p3: Point | Point.PointLike | Point.PointData,
   ): Segment
   export function createSegment(type: 'Z' | 'z'): Segment
-
   export function createSegment(
     type: 'L' | 'M' | 'C' | 'Z' | 'z',
     ...args: any[]