Merge ce77e8f into 7109e88

.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/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/ports.tsx

@@ -14,7 +14,7 @@ export default class Example extends React.Component {
         const geo = this.getCellGeometry(cell)
         return geo != null ? geo.relative : false
       },
-      isCellFoldable() {
+      isCellCollapsable() {
         return false
       },
       edgeStyle: {

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/entity/disposable.test.ts

@@ -1,4 +1,3 @@
-import { Platform } from '../util'
 import {
   Disposable,
   IDisposable,
@@ -40,15 +39,15 @@ describe('disposable', () => {
       expect(obj.disposed).toBe(true)
     })
 
-    it('should add `unload` listener for ie', () => {
-      const tmp = Platform as any
-      tmp.IS_IE = true
-      const obj = new Disposable()
-      expect(obj.disposed).toBe(false)
-      tmp.IS_IE = false
-      window.dispatchEvent(new Event('unload'))
-      expect(obj.disposed).toBe(true)
-    })
+    // it('should add `unload` listener for ie', () => {
+    //   const tmp = Platform as any
+    //   tmp.IS_IE = true
+    //   const obj = new Disposable()
+    //   expect(obj.disposed).toBe(false)
+    //   tmp.IS_IE = false
+    //   window.dispatchEvent(new Event('unload'))
+    //   expect(obj.disposed).toBe(true)
+    // })
 
     it('shoule work with `aop`', () => {
       const obj = new AOPTest()

packages/x6/src/entity/disposable.ts

@@ -1,5 +1,5 @@
-import { Platform } from '../util'
-import { DomEvent } from '../dom'
+// import { Platform } from '../util'
+// import { DomEvent } from '../dom'
 
 /**
  * An object which implements the disposable pattern.
@@ -28,13 +28,13 @@ export interface IDisposable {
 }
 
 export class Disposable implements IDisposable {
-  constructor() {
-    if (Platform.IS_IE) {
-      DomEvent.addListener(window, 'unload', () => {
-        this.dispose()
-      })
-    }
-  }
+  // constructor() {
+  //   if (Platform.IS_IE) {
+  //     DomEvent.addListener(window, 'unload', () => {
+  //       this.dispose()
+  //     })
+  //   }
+  // }
 
   private isDisposed: boolean = false
 

packages/x6/src/geometry/index.ts

@@ -5,3 +5,4 @@ export * from './ellipse'
 export * from './rectangle'
 export * from './path'
 export * from './curve'
+export * from './polyline'

packages/x6/src/graph/rubberband-accessor.ts

@@ -14,6 +14,17 @@ export class RubberbandAccessor extends BaseGraph {
     return this
   }
 
+  setRubberbandEnabled(enabled: boolean) {
+    if (enabled !== this.isRubberbandEnabled()) {
+      if (enabled) {
+        this.enabledRubberband()
+      } else {
+        this.disableRubberband()
+      }
+    }
+    return this
+  }
+
   enabledRubberband() {
     this.rubberbandHandler.enable()
     return this

packages/x6/src/types/index.ts

@@ -1,3 +1,2 @@
-export * from './json'
 export * from './align'
 export * from './style'