Merge branch 'feat/joint'

.github/workflows/ci.yml

@@ -2,7 +2,7 @@ name: CI
 on: [push, pull_request]
 jobs:
   run:
-    runs-on: ubuntu-latest
+    runs-on: macOS-latest
     strategy:
       matrix:
         node-version: [8.x, 10.x, 12.x]
@@ -27,4 +27,4 @@ jobs:
       uses: coverallsapp/github-action@master
       with:
         github-token: ${{ secrets.GITHUB_TOKEN }}
-        path-to-lcov: ./test/coverage/lcov.info
+        path-to-lcov: ./packages/x6/test/coverage/lcov.info

.stylelintrc

@@ -9,6 +9,7 @@
     "stylelint-declaration-block-no-ignored-properties"
   ],
   "rules": {
+    "block-no-empty": null,
     "function-name-case": "lower",
     "comment-empty-line-before": null,
     "no-invalid-double-slash-comments": null,

.travis.yml

@@ -13,6 +13,6 @@ install:
   - yarn bootstrap
 script:
   - yarn build
-  - yarn test
-after_script:
-  - yarn coveralls
+#   - yarn test
+# after_script:
+#   - yarn coveralls

examples/x6-example-components/src/pages/colorpicker.tsx

@@ -6,7 +6,7 @@ export default class ColorPickerExample extends React.PureComponent {
     return (
       <div style={{ height: '100%' }}>
         <div style={{ width: 120 }}>
-          <ColorPicker value="#333333" />
+          <ColorPicker color="#333333" />
         </div>
       </div>
     )

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

@@ -21,12 +21,13 @@ export class CalloutShape extends Shape.Actor {
   }
 
   getLabelMargins() {
-    return new Rectangle(
-      0,
-      0,
-      0,
-      ObjectExt.getNumber(this.style, 'factor', this.factor) * this.scale,
-    )
+    return {
+      left: 0,
+      top: 0,
+      right: 0,
+      bottom:
+        ObjectExt.getNumber(this.style, 'factor', this.factor) * this.scale,
+    }
   }
 
   redrawPath(c: SvgCanvas2D, x: number, y: number, w: number, h: number) {

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

@@ -13,7 +13,7 @@ export class CubeShape extends Shape.Cylinder {
     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 { left: s, top: s, right: 0, bottom: 0 }
     }
 
     return null

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

@@ -7,7 +7,7 @@ export class DocumentShape extends Shape.Actor {
   getLabelMargins(rect: Rectangle) {
     if (ObjectExt.getBoolean(this.style, 'boundedLbl', false)) {
       const dy = getFactor(this.style, this.factor, rect.height)
-      return new Rectangle(0, 0, 0, dy)
+      return { left: 0, top: 0, right: 0, bottom: dy }
     }
 
     return null

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

@@ -15,12 +15,12 @@ export class TapeShape extends Shape.Actor {
         this.direction === 'west'
       ) {
         const dy = getFactor(this.style, this.factor, h)
-        return new Rectangle(rect.x, rect.y + dy, w, h - 2 * dy)
+        return { left: rect.x, top: rect.y + dy, right: w, bottom: h - 2 * dy }
       }
 
       const dx = getFactor(this.style, this.factor, w)
 
-      return new Rectangle(rect.x + dx, rect.y, w - 2 * dx, h)
+      return { left: rect.x + dx, top: rect.y, right: w - 2 * dx, bottom: h }
     }
 
     return null

examples/x6-example-features/src/layouts/index.tsx

@@ -25,7 +25,7 @@ const features = [
 const charts = [{ link: '/flowchart', title: 'FlowChart' }]
 
 const BasicLayout: React.FC = props => {
-  const pathname = props.location.pathname
+  const pathname = (props as any).location.pathname
   if (charts.some(item => item.link === pathname)) {
     return props.children as React.ReactElement
   }

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

@@ -82,6 +82,10 @@ export default class Example extends React.Component {
         // targetPerimeter: true,
       })
     })
+
+    graph.on('cell:connected', ({ edge }) => {
+      console.log(edge)
+    })
   }
 
   refContainer = (container: HTMLDivElement) => {

examples/x6-example-features/src/pages/flowchart/setting.tsx

@@ -19,7 +19,8 @@ export class Setting extends React.Component<Setting.Props, Setting.State> {
     }
   }
 
-  onTitleChange = ({ target: { value } }) => {
+  onTitleChange = (e: any) => {
+    const value = e.target.value
     if (value && value.trim()) {
       const cell = this.state.selectedCells[0]
       const data = cell.data

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

@@ -0,0 +1,47 @@
+import React from 'react'
+import { joint } from '@antv/x6'
+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 joint.Node({
+      markup: '<g class="rotatable"><g class="scalable"><rect/></g><text/></g>',
+      size: { width: 100, height: 40 },
+      position: { x: 32, y: 40 },
+      attrs: {
+        '.': { fill: '#ffffff', stroke: 'none' },
+        rect: {
+          fill: '#ffffff',
+          stroke: '#000000',
+          width: 100,
+          height: 60,
+        },
+        text: {
+          fill: '#000000',
+          text: 'rect',
+          fontSize: 14,
+          textAnchor: 'middle',
+          fontFamily: 'Arial, helvetica, sans-serif',
+          refX: 0.5,
+          refY: 0.5,
+          yAlignment: 'middle',
+        },
+      },
+    })
+
+    graph.model.addCell(rect)
+
+    console.log(graph)
+  }
+
+  refContainer = (container: HTMLDivElement) => {
+    this.container = container
+  }
+
+  render() {
+    return <div ref={this.refContainer} className="graph" />
+  }
+}

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

@@ -6,7 +6,14 @@ export default class Example extends React.Component {
   private container: HTMLDivElement
 
   componentDidMount() {
-    const graph = new Graph(this.container)
+    const graph = new Graph(this.container, {
+      edgeStyle: {
+        bendable: true,
+      },
+      edgeHandle: {
+        changable: true,
+      },
+    })
     const style: Style = {
       startArrow: 'classic',
       endArrow: 'classic',

package.json

@@ -17,13 +17,10 @@
     "changelog": "lerna-changelog",
     "contributor": "git-contributor",
     "clean": "lerna run clean",
-    "clean:coverage": "rimraf ./test/coverage",
     "build": "lerna run build",
     "build:dev": "sh ./scripts/build-dev.sh",
     "lint": "lerna run lint",
-    "test": "jest",
-    "pretest": "run-p clean:coverage",
-    "coveralls": "cat ./test/coverage/lcov.info | coveralls",
+    "test": "lerna run test --stream",
     "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
     "pretty-quick": "pretty-quick",
     "clear": "rimraf yarn.lock && lerna run clean && lerna clean -y && rimraf ./node_modules",
@@ -50,28 +47,22 @@
   "devDependencies": {
     "@commitlint/cli": "^8.2.0",
     "@commitlint/config-conventional": "^8.2.0",
-    "@types/jest": "^24.0.17",
-    "@types/sinon": "^7.5.0",
-    "coveralls": "^3.0.9",
     "eslint-config-airbnb-base": "^14.0.0",
     "eslint-config-prettier": "^6.7.0",
     "eslint-plugin-import": "^2.18.2",
     "git-contributor": "^1.0.10",
     "husky": "^3.1.0",
-    "jest": "^24.9.0",
     "lerna": "^3.19.0",
     "lerna-changelog": "^0.8.3",
     "lint-staged": "^9.2.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^1.19.1",
     "pretty-quick": "^2.0.1",
     "rimraf": "^3.0.0",
-    "sinon": "^7.5.0",
     "stylelint-config-prettier": "^6.0.0",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard": "^19.0.0",
     "stylelint-declaration-block-no-ignored-properties": "^2.1.0",
-    "ts-jest": "^24.0.2",
     "tslint-config-airbnb": "^5.11.2",
     "tslint-config-prettier": "^1.18.0",
     "tslint-eslint-rules": "^5.4.0"

packages/x6/jest.config.js

@@ -1,10 +1,13 @@
 'use strict'
 
 module.exports = {
-  verbose: true,
-  transform: {
-    '^.+\\.ts$': 'ts-jest',
-  },
+  // verbose: true,
+  runner: 'jest-electron/runner',
+  testEnvironment: 'jest-electron/environment',
+  transform: { '^.+\\.ts$': 'ts-jest' },
   testMatch: ['**/src/**/*.test.ts', '**/src/**/*.spec.ts'],
-  moduleFileExtensions: ['js', 'ts'],
+  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
+  // collectCoverage: true,
+  coverageReporters: ['lcov', 'text-summary'],
+  coverageDirectory: './test/coverage',
 }

packages/x6/package.json

@@ -29,9 +29,10 @@
     "clean:lib": "rimraf ./lib",
     "clean:coverage": "rimraf ./test/coverage",
     "clean": "run-p clean:es clean:lib clean:coverage",
-    "lint": "run-s lint:ts lint:es",
+    "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",
     "watch": "watch 'yarn build:dev' ./src",
     "build:lib": "tsc --module commonjs --target es5 --outDir ./lib",
     "build:es": "tsc --module es2015 --target es2015 --outDir ./es",
@@ -41,12 +42,20 @@
     "build:dev": "run-p build:images build:less build:lib build:es",
     "build": "run-s build:version build:dev",
     "prebuild": "run-s lint clean",
-    "test": "jest",
+    "test": "jest --coverage",
+    "test1": "karma start",
+    "test:watch": "jest --watch --coverage",
+    "test:debug": "DEBUG_MODE=1 jest",
+    "coveralls": "cat ./test/coverage/lcov.info | coveralls",
     "pretest": "run-p clean:coverage",
     "prepare": "run-s build:version test build",
     "precommit": "lint-staged"
   },
   "lint-staged": {
+    "src/**/*.less": [
+      "stylelint --syntax less --fix",
+      "git add"
+    ],
     "*.js": [
       "eslint --fix",
       "git add"
@@ -58,22 +67,29 @@
   },
   "devDependencies": {
     "@types/jest": "^24.0.17",
+    "@types/jquery": "^3.3.31",
+    "@types/lodash": "^4.14.149",
     "@types/sinon": "^7.5.0",
     "base64-img": "^1.0.4",
+    "coveralls": "^3.0.6",
     "eslint": "^6.1.0",
     "image-size": "^0.7.4",
     "jest": "^24.8.0",
+    "jest-electron": "^0.1.11",
     "less": "^3.10.3",
     "lint-staged": "^9.2.1",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.0",
     "sinon": "^7.5.0",
+    "stylelint": "^12.0.0",
     "ts-jest": "^24.0.2",
     "tslint": "^5.18.0",
     "typescript": "^3.5.3",
     "watch": "^1.0.2"
   },
   "dependencies": {
+    "jquery": "^3.4.1",
+    "lodash": "^4.17.15",
     "mousetrap": "^1.6.3",
     "size-sensor": "^0.2.5",
     "utility-types": "^3.10.0"

packages/x6/scripts/build-jq.sh

@@ -0,0 +1,15 @@
+#!/bin/sh
+
+name=jquery
+version=3.4.1
+target=../../dev
+
+cd node_modules
+# rm -rf $name
+# git clone https://github.com/jquery/jquery $name
+
+cd $name
+git checkout tags/$version -b $version
+yarn
+rm -rf $target
+grunt custom:-ajax,-callbacks,-css/showHide,-data,-deprecated,-effects,-event/alias,-event/trigger,-queue,-core/ready,-deferred,-exports/global,-serialize,-wrap dist:$target

packages/x6/src/canvas/svg/index.ts

@@ -1,6 +1,6 @@
 /* tslint:disable:no-parameter-reassignment */
 
-import { Url } from '../../util'
+import { UrlExt } from '../../util'
 import { DomUtil } from '../../dom'
 import { SvgCanvas2DText } from './text'
 
@@ -82,7 +82,7 @@ export class SvgCanvas2D extends SvgCanvas2DText {
   ) {
     const state = this.state
 
-    src = Url.toAbsolute(src)
+    src = UrlExt.toAbsolute(src)
     x += state.tx
     y += state.ty
 

packages/x6/src/core/renderer.ts

@@ -92,7 +92,7 @@ export class Renderer {
       // update shape for style changed
       !force &&
       state.shape != null &&
-      (!ObjectExt.equals(state.shape.style, state.style) ||
+      (!ObjectExt.isEqual(state.shape.style, state.style) ||
         this.hasPlaceholderStyles(state))
     ) {
       state.shape.resetStyle()