From 11a1a8f2a6e6e8f6ca0bd5f6d9d1f1c3be71e506 Mon Sep 17 00:00:00 2001 From: Yanyan-Wang Date: Thu, 26 Nov 2020 18:05:44 +0800 Subject: [PATCH] fix: update edge with false endArrow and startArrow; fix: node and edge state style with update problem; fix: import lib problem; fix: tooltip for combo; --- CHANGELOG.md | 11 + package.json | 5 +- src/algorithm/structs/stack/index.ts | 1 + src/behavior/behavior.ts | 2 +- src/behavior/behaviorOption.ts | 2 +- src/behavior/click-select.ts | 2 +- src/behavior/drag-combo.ts | 2 +- src/behavior/drag-node.ts | 2 +- src/behavior/index.ts | 2 +- src/behavior/tooltip-base.ts | 3 +- src/global.ts | 2 +- src/graph/controller/event.ts | 10 +- src/graph/controller/item.ts | 16 +- src/graph/controller/layout.ts | 1 + src/graph/controller/mode.ts | 4 +- src/graph/controller/state.ts | 3 +- src/graph/controller/view.ts | 7 +- src/graph/graph.ts | 12 +- src/graph/tree-graph.ts | 4 +- src/interface/behavior.ts | 4 +- src/interface/item.ts | 5 +- src/interface/shape.ts | 2 +- src/item/combo.ts | 4 +- src/item/edge.ts | 2 +- src/item/item.ts | 43 +- src/item/node.ts | 4 +- src/layout/concentric.ts | 5 +- src/layout/dagre.ts | 3 +- src/layout/force/force.ts | 5 +- src/layout/gForce.ts | 7 +- src/layout/gpu/fruchterman.ts | 4 +- src/layout/gpu/gForce.ts | 2 + src/layout/grid.ts | 3 +- src/layout/index.ts | 2 +- src/layout/layout.ts | 4 +- src/layout/radial/radial.ts | 5 +- src/plugins/base.ts | 4 +- src/plugins/edgeFilterLens/index.ts | 2 +- src/plugins/fisheye/index.ts | 2 +- src/plugins/grid/index.ts | 9 +- src/plugins/imageMinimap/index.ts | 20 +- src/plugins/menu/index.ts | 7 +- src/plugins/minimap/index.ts | 19 +- src/plugins/timeBar/index.ts | 11 +- src/plugins/timeBar/path.ts | 4 +- src/plugins/timeBar/timeBarTooltip.ts | 11 +- src/plugins/toolBar/index.ts | 7 +- src/plugins/tooltip/index.ts | 10 +- src/shape/combo.ts | 2 +- src/shape/combos/circle.ts | 2 +- src/shape/combos/rect.ts | 2 +- src/shape/edge.ts | 23 +- src/shape/edges/polyline.ts | 17 +- src/shape/edges/router.ts | 2 +- src/shape/node.ts | 2 +- src/shape/nodes/circle.ts | 4 +- src/shape/nodes/diamond.ts | 2 +- src/shape/nodes/ellipse.ts | 2 +- src/shape/nodes/image.ts | 2 +- src/shape/nodes/modelRect.ts | 2 +- src/shape/nodes/rect.ts | 2 +- src/shape/nodes/star.ts | 2 +- src/shape/nodes/triangle.ts | 2 +- src/shape/shape.ts | 10 +- src/shape/shapeBase.ts | 9 +- src/shape/xml.ts | 2 +- src/types/index.ts | 8 +- src/util/base.ts | 11 +- src/util/graphic.ts | 2 +- src/util/index.ts | 8 +- src/util/math.ts | 2 +- stories/Algorithm/component/path.tsx | 534 +++---------------- stories/LargeGraph/component/large-graph.tsx | 10 +- stories/Layout/component/register-layout.tsx | 13 +- stories/Plugins/component/tooltip.tsx | 21 +- stories/Shape/component/quadratic.tsx | 36 ++ stories/Tree/component/tree-data.tsx | 108 ++-- tests/unit/graph/svg-spec.ts | 4 +- tests/unit/shape/combo-spec.ts | 2 +- tests/unit/shape/node-spec.ts | 2 +- tests/unit/state/edge-state-spec.ts | 2 +- tests/unit/state/refactor-state-spec.ts | 2 +- 82 files changed, 426 insertions(+), 729 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d411623cab..e8c8c77e3d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,16 @@ # ChangeLog +#### 4.0.2 +- fix: node and edge state style with update problem; +- fix: import lib problem; +- fix: import node module problem; +- fix: hidden shapes show up after zoom-canvas or drag-canvas with enableOptimize; +- fix: tooltip for combo; +- fix: update edge with false endArrow and startArrow; + +#### 4.0.1 +- fix: glslang problem; + #### 4.0.0-beta.0 - feat: fruchterman and gforce layout with gpu; - feat: gforce; diff --git a/package.json b/package.json index ed914f9431..e48ade6b83 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g6", - "version": "4.0.1", + "version": "4.0.2", "description": "A Graph Visualization Framework in JavaScript", "keywords": [ "antv", @@ -47,7 +47,8 @@ "site:build": "npm run site:clean && GATSBY=true gatsby build --prefix-paths", "site:clean": "gatsby clean", "site:develop": "GATSBY=true gatsby develop --open", - "site:deploy": "npm run site:build && gh-pages -d public", + "site:deploy": "npm run site:build && npm run site:copy-mirror-action && gh-pages -d public", + "site:copy-mirror-action": "mkdir -p public/.github/workflows && cp .github/workflows/mirror.yml public/.github/workflows", "start": "npm run site:develop", "test": "jest", "test-live": "DEBUG_MODE=1 jest --watch ./tests/unit/graph/graph-watermarker-spec.ts", diff --git a/src/algorithm/structs/stack/index.ts b/src/algorithm/structs/stack/index.ts index e43813906a..a0ef8c856f 100644 --- a/src/algorithm/structs/stack/index.ts +++ b/src/algorithm/structs/stack/index.ts @@ -1,6 +1,7 @@ import LinkedList from '../linked-list'; export default class Stack { + private linkedList: LinkedList; private maxStep: number; diff --git a/src/behavior/behavior.ts b/src/behavior/behavior.ts index 0890341e18..2654cb5a7c 100644 --- a/src/behavior/behavior.ts +++ b/src/behavior/behavior.ts @@ -1,4 +1,4 @@ -import { clone, each, wrapBehavior } from '@antv/util/lib'; +import { clone, each, wrapBehavior } from '@antv/util'; import { BehaviorOption } from '../types'; import behaviorOption from './behaviorOption'; diff --git a/src/behavior/behaviorOption.ts b/src/behavior/behaviorOption.ts index 9c45e8e9ae..6b38c3ab6e 100644 --- a/src/behavior/behaviorOption.ts +++ b/src/behavior/behaviorOption.ts @@ -1,4 +1,4 @@ -import each from '@antv/util/lib/each'; +import { each } from '@antv/util'; import { IGraph } from '../interface/graph'; import { G6Event } from '../types'; diff --git a/src/behavior/click-select.ts b/src/behavior/click-select.ts index 78fa671f13..b00e5c8cac 100644 --- a/src/behavior/click-select.ts +++ b/src/behavior/click-select.ts @@ -1,4 +1,4 @@ -import each from '@antv/util/lib/each'; +import { each } from '@antv/util'; import { G6Event, IG6GraphEvent } from '../types'; const DEFAULT_TRIGGER = 'shift'; diff --git a/src/behavior/drag-combo.ts b/src/behavior/drag-combo.ts index 05889b3c90..4dbdf86710 100644 --- a/src/behavior/drag-combo.ts +++ b/src/behavior/drag-combo.ts @@ -7,7 +7,7 @@ import { G6Event, IG6GraphEvent, Item, ComboConfig } from '../types'; import { calculationItemsBBox } from '../util/base'; import Global from '../global'; import { IGraph } from '../interface/graph'; -import { each } from '@antv/util/lib'; +import { each } from '@antv/util'; import { IGroup } from '@antv/g-base/lib/interfaces'; import { ICombo, INode } from '../interface/item'; diff --git a/src/behavior/drag-node.ts b/src/behavior/drag-node.ts index dfd899af39..d36d0c7ef5 100644 --- a/src/behavior/drag-node.ts +++ b/src/behavior/drag-node.ts @@ -6,7 +6,7 @@ * @Description: 拖动节点的Behavior */ import { Point } from '@antv/g-base/lib/types'; -import { deepMix, clone } from '@antv/util/lib'; +import { deepMix, clone } from '@antv/util'; import { INode, ICombo } from '../interface/item'; import { G6Event, IG6GraphEvent, Item, NodeConfig } from '../types'; import Global from '../global'; diff --git a/src/behavior/index.ts b/src/behavior/index.ts index 9a29df5679..a5136b9598 100644 --- a/src/behavior/index.ts +++ b/src/behavior/index.ts @@ -1,4 +1,4 @@ -import each from '@antv/util/lib/each'; +import { each } from '@antv/util'; import Behavior from './behavior'; import DragCanvas from './drag-canvas'; import DragNode from './drag-node'; diff --git a/src/behavior/tooltip-base.ts b/src/behavior/tooltip-base.ts index 8a8c791628..caa61aad6c 100644 --- a/src/behavior/tooltip-base.ts +++ b/src/behavior/tooltip-base.ts @@ -1,5 +1,4 @@ -import modifyCSS from '@antv/dom-util/lib/modify-css'; -import createDom from '@antv/dom-util/lib/create-dom'; +import { modifyCSS, createDom } from '@antv/dom-util'; import { IG6GraphEvent } from '../types'; export default { diff --git a/src/global.ts b/src/global.ts index 5a8acadb3b..8680839561 100644 --- a/src/global.ts +++ b/src/global.ts @@ -7,7 +7,7 @@ const textColor = 'rgb(0, 0, 0)'; const colorSet = getColorsWithSubjectColor(subjectColor, backColor); export default { - version: '4.0.1', + version: '4.0.2', rootContainerClassName: 'root-container', nodeContainerClassName: 'node-container', edgeContainerClassName: 'edge-container', diff --git a/src/graph/controller/event.ts b/src/graph/controller/event.ts index efb7168d37..01d0117ab0 100644 --- a/src/graph/controller/event.ts +++ b/src/graph/controller/event.ts @@ -1,14 +1,12 @@ -import addEventListener from '@antv/dom-util/lib/add-event-listener'; +import { addEventListener } from '@antv/dom-util'; import Canvas from '@antv/g-base/lib/abstract/canvas'; -import Group from '@antv/g-canvas/lib/group'; -import ShapeBase from '@antv/g-canvas/lib/shape/base'; -import each from '@antv/util/lib/each'; -import isNil from '@antv/util/lib/is-nil'; -import wrapBehavior from '@antv/util/lib/wrap-behavior'; +import { Group, Shape } from '@antv/g-canvas'; +import { each, isNil, wrapBehavior } from '@antv/util'; import Graph from '../graph'; import { IG6GraphEvent, Matrix, Item } from '../../types'; import { cloneEvent, isViewportChanged } from '../../util/base'; +type ShapeBase = Shape.Base; type Fun = () => void; // const EVENTS = [ diff --git a/src/graph/controller/item.ts b/src/graph/controller/item.ts index fc9af35f29..1d9bb13ce8 100644 --- a/src/graph/controller/item.ts +++ b/src/graph/controller/item.ts @@ -1,11 +1,5 @@ -import Group from '@antv/g-canvas/lib/group'; -import clone from '@antv/util/lib/clone'; -import deepMix from '@antv/util/lib/deep-mix'; -import each from '@antv/util/lib/each'; -import isArray from '@antv/util/lib/is-array'; -import isObject from '@antv/util/lib/is-object'; -import isString from '@antv/util/lib/is-string'; -import upperFirst from '@antv/util/lib/upper-first'; +import { Group } from '@antv/g-canvas'; +import { clone, deepMix, each, isArray, isObject, isString, upperFirst } from '@antv/util'; import Edge from '../../item/edge'; import Node from '../../item/node'; import Combo from '../../item/combo'; @@ -204,6 +198,8 @@ export default class ItemController { const mapper = graph.get(type + MAPPER_SUFFIX); const model = item.getModel(); + const isOnlyMove = item.isOnlyMove(cfg); + if (mapper) { const result: ModelConfig = deepMix({}, model, cfg); const mappedModel: ModelConfig = mapper(result); @@ -248,11 +244,13 @@ export default class ItemController { } (item as IEdge).setTarget(target); } + item.update(cfg); } - item.update(cfg); + // item.update(cfg); if (type === NODE || type === COMBO) { + item.update(cfg, isOnlyMove); const edges: IEdge[] = (item as INode).getEdges(); each(edges, (edge: IEdge) => { edge.refresh(); diff --git a/src/graph/controller/layout.ts b/src/graph/controller/layout.ts index 7fbeccc314..1a93716788 100644 --- a/src/graph/controller/layout.ts +++ b/src/graph/controller/layout.ts @@ -272,6 +272,7 @@ export default class LayoutController { const offScreenCanvas = document.createElement('canvas'); const gpuWorkerAbility = isGPU && typeof window !== 'undefined' + // eslint-disable-next-line @typescript-eslint/dot-notation && window.navigator && !navigator[`gpu`] // WebGPU 还不支持 OffscreenCanvas && 'OffscreenCanvas' in window && 'transferControlToOffscreen' in offScreenCanvas; diff --git a/src/graph/controller/mode.ts b/src/graph/controller/mode.ts index 788b8b6c25..1c8b570da7 100644 --- a/src/graph/controller/mode.ts +++ b/src/graph/controller/mode.ts @@ -1,6 +1,4 @@ -import each from '@antv/util/lib/each'; -import isArray from '@antv/util/lib/is-array'; -import isString from '@antv/util/lib/is-string'; +import { each, isArray, isString } from '@antv/util'; import Behavior from '../../behavior/behavior'; import { IBehavior } from '../../interface/behavior'; import { IGraph } from '../../interface/graph'; diff --git a/src/graph/controller/state.ts b/src/graph/controller/state.ts index 5e5fbce40f..cff3ee91e3 100644 --- a/src/graph/controller/state.ts +++ b/src/graph/controller/state.ts @@ -1,5 +1,4 @@ -import each from '@antv/util/lib/each'; -import isString from '@antv/util/lib/is-string'; +import { each, isString } from '@antv/util'; import { Item, States } from '../../types'; import Graph from '../graph'; import { INode } from '../../interface/item'; diff --git a/src/graph/controller/view.ts b/src/graph/controller/view.ts index f9aa0889a2..519485187a 100644 --- a/src/graph/controller/view.ts +++ b/src/graph/controller/view.ts @@ -1,13 +1,12 @@ import Canvas from '@antv/g-base/lib/abstract/canvas'; import { Point } from '@antv/g-base/lib/types'; -import Group from '@antv/g-canvas/lib/group'; -import isNumber from '@antv/util/lib/is-number'; -import isString from '@antv/util/lib/is-string'; +import { Group } from '@antv/g-canvas'; +import { isNumber, isString } from '@antv/util'; import { Item, Matrix, Padding, GraphAnimateConfig } from '../../types'; import { formatPadding } from '../../util/base'; import { applyMatrix, invertMatrix } from '../../util/math'; import Graph from '../graph'; -import modifyCSS from '@antv/dom-util/lib/modify-css'; +import { modifyCSS } from '@antv/dom-util'; export default class ViewController { private graph: Graph; diff --git a/src/graph/graph.ts b/src/graph/graph.ts index 1d6f2719a7..fa35007686 100644 --- a/src/graph/graph.ts +++ b/src/graph/graph.ts @@ -1,10 +1,10 @@ import EventEmitter from '@antv/event-emitter'; import { IGroup } from '@antv/g-base/lib/interfaces'; -import { BBox, Point } from '@antv/g-base/lib/types'; -import GCanvas from '@antv/g-canvas/lib/canvas'; -import GSVGCanvas from '@antv/g-svg/lib/canvas'; -import { mat3 } from '@antv/matrix-util/lib'; -import { clone, deepMix, each, isPlainObject, isString, isNumber, groupBy } from '@antv/util'; +import { Point } from '@antv/g-base/lib/types'; +import { Canvas as GCanvas } from '@antv/g-canvas'; +import { Canvas as GSVGCanvas } from '@antv/g-svg'; +import { mat3 } from '@antv/matrix-util'; +import { clone, deepMix, each, isPlainObject, isString, isNumber } from '@antv/util'; import { IGraph, DataUrlType } from '../interface/graph'; import { IEdge, INode, ICombo } from '../interface/item'; import { @@ -40,7 +40,7 @@ import { ViewController, } from './controller'; import PluginBase from '../plugins/base'; -import createDom from '@antv/dom-util/lib/create-dom'; +import { createDom } from '@antv/dom-util'; import { plainCombosToTrees, traverseTree, reconstructTree, traverseTreeUp } from '../util/graphic'; import degree from '../algorithm/degree'; import Stack from '../algorithm/structs/stack'; diff --git a/src/graph/tree-graph.ts b/src/graph/tree-graph.ts index c5c6f3b1f5..e7b3303481 100644 --- a/src/graph/tree-graph.ts +++ b/src/graph/tree-graph.ts @@ -1,6 +1,6 @@ import { Point } from '@antv/g-base/lib/types'; -import Hierarchy from '@antv/hierarchy/lib'; -import { each, isString } from '@antv/util/lib'; +import Hierarchy from '@antv/hierarchy'; +import { each, isString } from '@antv/util'; import { ITreeGraph } from '../interface/graph'; import { GraphData, Item, NodeConfig, ShapeStyle, TreeGraphData, GraphOptions } from '../types'; import { radialLayout, traverseTree } from '../util/graphic'; diff --git a/src/interface/behavior.ts b/src/interface/behavior.ts index 673cf7362e..72695e7ad9 100644 --- a/src/interface/behavior.ts +++ b/src/interface/behavior.ts @@ -1,5 +1,5 @@ -import GraphEvent from '@antv/g-base/lib/event/graph-event'; -import Canvas from '@antv/g-canvas/lib/canvas'; +import { Event as GraphEvent } from '@antv/g-base'; +import { Canvas } from '@antv/g-canvas'; import { G6Event, IG6GraphEvent, IShapeBase, Item } from '../types'; import { IGraph } from './graph'; diff --git a/src/interface/item.ts b/src/interface/item.ts index 1c424802db..742badc2de 100644 --- a/src/interface/item.ts +++ b/src/interface/item.ts @@ -1,7 +1,7 @@ /* eslint @typescript-eslint/no-use-before-define: 0 */ import { IGroup } from '@antv/g-base/lib/interfaces'; import { Point } from '@antv/g-base/lib/types'; -import Group from '@antv/g-canvas/lib/group'; +import { Group } from '@antv/g-canvas'; import { IBBox, IPoint, @@ -162,8 +162,9 @@ export interface IItemBase { * 将更新应用到 model 上，刷新属性 * @internal 仅提供给 Graph 使用，外部直接调用 graph.update 接口 * @param {Object} cfg 配置项，可以是增量信息 + * @param {boolean} onlyMove 是否仅移动，只有 node 和 combo 可能是 true */ - update(cfg: ModelConfig): void; + update(cfg: ModelConfig, onlyMove?: boolean): void; /** * 更新元素内容，样式 diff --git a/src/interface/shape.ts b/src/interface/shape.ts index 2ccdb0cdc2..09b1b49ee0 100644 --- a/src/interface/shape.ts +++ b/src/interface/shape.ts @@ -1,4 +1,4 @@ -import GGroup from '@antv/g-canvas/lib/group'; +import { Group as GGroup } from '@antv/g-canvas'; import { IShape } from '@antv/g-canvas/lib/interfaces'; import { IPoint, Item, LabelStyle, ModelConfig, ShapeStyle } from '../types'; diff --git a/src/item/combo.ts b/src/item/combo.ts index d91e0db527..819341f070 100644 --- a/src/item/combo.ts +++ b/src/item/combo.ts @@ -1,10 +1,10 @@ import { ICombo, INode, IItemBaseConfig } from '../interface/item'; -import Group from '@antv/g-canvas/lib/group'; +import { Group } from '@antv/g-canvas'; import Node from './node'; import { ComboConfig, IBBox, IShapeBase } from '../types'; import Global from '../global'; import { getBBox } from '../util/graphic'; -import isNumber from '@antv/util/lib/is-number'; +import { isNumber } from '@antv/util'; const CACHE_BBOX = 'bboxCache'; const CACHE_CANVAS_BBOX = 'bboxCanvasCache'; diff --git a/src/item/edge.ts b/src/item/edge.ts index ff702c1931..a14da307e8 100644 --- a/src/item/edge.ts +++ b/src/item/edge.ts @@ -207,7 +207,7 @@ export default class Edge extends Item implements IEdge { * 边不需要重计算容器位置，直接重新计算 path 位置 * @param {object} cfg 待更新数据 */ - public update(cfg: EdgeConfig) { + public update(cfg: EdgeConfig, onlyMove: boolean = false) { const model: EdgeConfig = this.get('model'); const oriVisible = model.visible; const cfgVisible = cfg.visible; diff --git a/src/item/item.ts b/src/item/item.ts index 7b0cf2d4e8..bd0f84e58e 100644 --- a/src/item/item.ts +++ b/src/item/item.ts @@ -1,4 +1,4 @@ -import Group from '@antv/g-canvas/lib/group'; +import { Group } from '@antv/g-canvas'; import { each, isNil, @@ -8,6 +8,7 @@ import { uniqueId, mix, deepMix, + isArray, } from '@antv/util'; import { IItemBase, IItemBaseConfig } from '../interface/item'; import Shape from '../shape/shape'; @@ -26,6 +27,7 @@ import { import { getBBox } from '../util/graphic'; import { translate } from '../util/math'; import { IGroup } from '@antv/g-base/lib/interfaces'; +import Global from '../global'; const CACHE_BBOX = 'bboxCache'; const CACHE_CANVAS_BBOX = 'bboxCanvasCache'; @@ -211,22 +213,34 @@ export default class ItemBase implements IItemBase { const children = group.get('children'); const keyShape: IShapeBase = this.getKeyShape(); const self = this; + const keyShapeName = keyShape.get('name'); each(children, (child) => { const name = child.get('name'); - if (name) { + if (name && name !== keyShapeName) { originStyles[name] = self.getShapeStyleByName(name); - } else { - const keyShapeName = keyShape.get('name'); - const keyShapeStyle = self.getShapeStyleByName(); - if (!keyShapeName) { - Object.assign(originStyles, keyShapeStyle); - } else { - originStyles[keyShapeName] = keyShapeStyle; - } } }); + const model = this.getModel(); + const shapeFactory = Shape.getFactory(this.get('type')); + const shapeOptions = shapeFactory.getShape().getOptions(model); + const defaultStyle = shapeOptions.style; + const size = shapeOptions.size; + const itemType = this.get('type'); + if (itemType === 'edge') { + if (!defaultStyle.lineWidth) defaultStyle.lineWidth = size || Global.defaultEdge.size; + } else if (itemType === 'node') { + if (!defaultStyle.r) defaultStyle.r = size / 2 || Global.defaultNode.size / 2; + if (!defaultStyle.width) defaultStyle.r = (isArray(size) ? size[0] : size) || Global.defaultNode.size / 2; + if (!defaultStyle.height) defaultStyle.r = (isArray(size) ? size[1] : size) || Global.defaultNode.size / 2; + } + if (!keyShapeName) { + Object.assign(originStyles, defaultStyle); + } else { + originStyles[keyShapeName] = defaultStyle; + } + const drawOriginStyle = this.getOriginStyle(); let styles = {}; if (cfg) { @@ -371,6 +385,10 @@ export default class ItemBase implements IItemBase { public getCurrentStatesStyle(): ShapeStyle { const self = this; let styles = {}; + const states = self.getStates(); + if (!states || !states.length) { + return this.getOriginStyle(); + } each(self.getStates(), (state) => { styles = Object.assign(styles, self.getStateStyle(state)); }); @@ -545,7 +563,7 @@ export default class ItemBase implements IItemBase { * @internal 仅提供给 Graph 使用，外部直接调用 graph.update 接口 * @param {Object} cfg 配置项，可以是增量信息 */ - public update(cfg: ModelConfig) { + public update(cfg: ModelConfig, onlyMove: boolean = false) { const model: ModelConfig = this.get('model'); const oriVisible = model.visible; const cfgVisible = cfg.visible; @@ -566,7 +584,8 @@ export default class ItemBase implements IItemBase { Object.assign(model, cfg); // isOnlyMove 仅用于node - const onlyMove = this.isOnlyMove(cfg); + // const onlyMove = this.isOnlyMove(cfg); + // 仅仅移动位置时，既不更新，也不重绘 if (onlyMove) { this.updatePosition(cfg); diff --git a/src/item/node.ts b/src/item/node.ts index f391cb0701..41446fd1fb 100644 --- a/src/item/node.ts +++ b/src/item/node.ts @@ -1,6 +1,4 @@ -import each from '@antv/util/lib/each'; -import isNil from '@antv/util/lib/is-nil'; -import mix from '@antv/util/lib/mix'; +import { each, isNil, mix } from '@antv/util'; import { IEdge, INode } from '../interface/item'; import { IPoint, IShapeBase, NodeConfig } from '../types'; import { diff --git a/src/layout/concentric.ts b/src/layout/concentric.ts index cae4454ac8..e1c4de4c09 100644 --- a/src/layout/concentric.ts +++ b/src/layout/concentric.ts @@ -5,12 +5,9 @@ */ import { EdgeConfig, IPointTuple, NodeConfig, NodeIdxMap } from '../types'; - -import isArray from '@antv/util/lib/is-array'; -import isString from '@antv/util/lib/is-string'; +import { isArray, isString, isNumber } from '@antv/util'; import { BaseLayout } from './layout'; import { getDegree } from '../util/math'; -import { isNumber } from '@antv/util'; type Node = NodeConfig & { [key: string]: number; diff --git a/src/layout/dagre.ts b/src/layout/dagre.ts index d70f6a3301..3fee55e615 100644 --- a/src/layout/dagre.ts +++ b/src/layout/dagre.ts @@ -5,9 +5,8 @@ import dagre from 'dagre'; -import isArray from '@antv/util/lib/is-array'; +import { isArray, isNumber } from '@antv/util'; import { BaseLayout } from './layout'; -import { isNumber } from '@antv/util'; /** * 层次布局 diff --git a/src/layout/force/force.ts b/src/layout/force/force.ts index 540b7dd907..edca1446d9 100644 --- a/src/layout/force/force.ts +++ b/src/layout/force/force.ts @@ -8,10 +8,7 @@ import { GraphData, IPointTuple } from '../../types'; import * as d3Force from 'd3-force'; import forceInABox from './force-in-a-box'; -import isArray from '@antv/util/lib/is-array'; -import isFunction from '@antv/util/lib/is-function'; -import isNumber from '@antv/util/lib/is-number'; -import mix from '@antv/util/lib/mix'; +import { isArray, isFunction, isNumber, mix } from '@antv/util'; import { BaseLayout } from '../layout'; import { LAYOUT_MESSAGE } from '../worker/layoutConst'; diff --git a/src/layout/gForce.ts b/src/layout/gForce.ts index 3967ad6c54..231eb1594c 100644 --- a/src/layout/gForce.ts +++ b/src/layout/gForce.ts @@ -106,6 +106,7 @@ export default class GForceLayout extends BaseLayout { enableTick: true }; } + /** * 执行布局 */ @@ -239,8 +240,9 @@ export default class GForceLayout extends BaseLayout { iter++; if (iter > maxIteration) window.clearInterval(self.timeInterval); }, 0); - self.onLayoutEnd && self.onLayoutEnd(); + if (self.onLayoutEnd) self.onLayoutEnd(); } + public calRepulsive(accArray, nodes) { const self = this; // const nodes = self.nodes; @@ -277,6 +279,7 @@ export default class GForceLayout extends BaseLayout { }); }); } + public calAttractive(accArray, edges) { const self = this; // const edges = self.edges; @@ -353,6 +356,7 @@ export default class GForceLayout extends BaseLayout { velArray[2 * i + 1] = vy; }); } + public updatePosition(velArray, stepInterval, nodes) { const self = this; // const nodes = self.nodes; @@ -363,6 +367,7 @@ export default class GForceLayout extends BaseLayout { node.y += distY; }); } + public stop() { if (this.timeInterval && typeof window !== 'undefined') { window.clearInterval(this.timeInterval); diff --git a/src/layout/gpu/fruchterman.ts b/src/layout/gpu/fruchterman.ts index 7dca9cacfa..08a9bc2064 100644 --- a/src/layout/gpu/fruchterman.ts +++ b/src/layout/gpu/fruchterman.ts @@ -231,12 +231,14 @@ export default class FruchtermanGPULayout extends BaseLayout { const execute = async () => { for (let i = 0; i < maxIteration; i++) { + // eslint-disable-next-line no-await-in-loop await kernelFruchterman.execute(); if (clustering) { kernelCluster.setBinding({ u_Data: kernelFruchterman, }); + // eslint-disable-next-line no-await-in-loop await kernelCluster.execute(); kernelFruchterman.setBinding({ u_ClusterCenters: kernelCluster, @@ -265,7 +267,7 @@ export default class FruchtermanGPULayout extends BaseLayout { node.y = y; }); } - onLayoutEnd && onLayoutEnd(); + if (onLayoutEnd) onLayoutEnd(); } execute(); diff --git a/src/layout/gpu/gForce.ts b/src/layout/gpu/gForce.ts index 2b2810c871..a946f902ad 100644 --- a/src/layout/gpu/gForce.ts +++ b/src/layout/gpu/gForce.ts @@ -296,6 +296,7 @@ export default class GForceGPULayout extends BaseLayout { // }); // } + // eslint-disable-next-line no-await-in-loop await kernelGForce.execute(); // midRes = await kernelGForce.getOutput(); @@ -306,6 +307,7 @@ export default class GForceGPULayout extends BaseLayout { u_Data: kernelGForce }); + // eslint-disable-next-line no-await-in-loop await kernelAveMovement.execute(); // 更新衰减函数 diff --git a/src/layout/grid.ts b/src/layout/grid.ts index f092632e47..8e95659a01 100644 --- a/src/layout/grid.ts +++ b/src/layout/grid.ts @@ -6,9 +6,8 @@ import { EdgeConfig, IPointTuple, NodeConfig, NodeIdxMap } from '../types'; -import isString from '@antv/util/lib/is-string'; +import { isArray, isString, isNumber } from '@antv/util'; import { BaseLayout } from './layout'; -import { isArray, isNumber } from '@antv/util'; import { getDegree } from '../util/math'; import { isNaN } from '../util/base'; diff --git a/src/layout/index.ts b/src/layout/index.ts index 99991b3ac1..edefb3b1c2 100644 --- a/src/layout/index.ts +++ b/src/layout/index.ts @@ -3,7 +3,7 @@ * @author shiwu.wyy@antfin.com */ -import each from '@antv/util/lib/each'; +import { each } from '@antv/util'; import Layout from './layout'; import Circular from './circular'; diff --git a/src/layout/layout.ts b/src/layout/layout.ts index df1886caca..dd261825c5 100644 --- a/src/layout/layout.ts +++ b/src/layout/layout.ts @@ -6,9 +6,7 @@ import { EdgeConfig, GraphData, IPointTuple, NodeConfig, ComboConfig } from '../types'; import { ILayout } from '../interface/layout'; -// import augment from '@antv/util/lib/augment'; -import each from '@antv/util/lib/each'; -import mix from '@antv/util/lib/mix'; +import { each, mix } from '@antv/util'; /** * 基础布局，将被自定义布局所继承 diff --git a/src/layout/radial/radial.ts b/src/layout/radial/radial.ts index 1a54b7040b..fa760756f4 100644 --- a/src/layout/radial/radial.ts +++ b/src/layout/radial/radial.ts @@ -5,10 +5,7 @@ import { IPointTuple, NodeConfig, Matrix } from '../../types'; -import isArray from '@antv/util/lib/is-array'; -import isNumber from '@antv/util/lib/is-number'; -import isString from '@antv/util/lib/is-string'; -import isFunction from '@antv/util/lib/is-function'; +import { isArray, isFunction, isNumber, isString } from '@antv/util'; import { floydWarshall, getAdjMatrix } from '../../util/math'; import { isNaN } from '../../util/base'; diff --git a/src/plugins/base.ts b/src/plugins/base.ts index e1e0259c95..5ae07e21ea 100644 --- a/src/plugins/base.ts +++ b/src/plugins/base.ts @@ -1,6 +1,4 @@ -import deepMix from '@antv/util/lib/deep-mix'; -import each from '@antv/util/lib/each'; -import wrapBehavior from '@antv/util/lib/wrap-behavior'; +import { wrapBehavior, each, deepMix } from '@antv/util'; import Graph from '../graph/graph'; import { IG6GraphEvent } from '../types'; diff --git a/src/plugins/edgeFilterLens/index.ts b/src/plugins/edgeFilterLens/index.ts index 3a105af2f9..7d4a51a9fb 100644 --- a/src/plugins/edgeFilterLens/index.ts +++ b/src/plugins/edgeFilterLens/index.ts @@ -1,4 +1,4 @@ -import { clone } from '@antv/util/lib'; +import { clone } from '@antv/util'; import { IG6GraphEvent, ShapeStyle } from '../../types'; import Graph from '../../graph/graph'; import Base from '../base'; diff --git a/src/plugins/fisheye/index.ts b/src/plugins/fisheye/index.ts index 2bac58ae8e..2a0058f803 100644 --- a/src/plugins/fisheye/index.ts +++ b/src/plugins/fisheye/index.ts @@ -1,4 +1,4 @@ -import { clone } from '@antv/util/lib'; +import { clone } from '@antv/util'; import { IG6GraphEvent, ShapeStyle } from '../../types'; import Graph from '../../graph/graph'; import Base from '../base'; diff --git a/src/plugins/grid/index.ts b/src/plugins/grid/index.ts index e064921ed1..54a4e6d43a 100644 --- a/src/plugins/grid/index.ts +++ b/src/plugins/grid/index.ts @@ -1,9 +1,8 @@ -import createDOM from '@antv/dom-util/lib/create-dom'; -import modifyCSS from '@antv/dom-util/lib/modify-css'; +import { modifyCSS, createDom } from '@antv/dom-util'; import Canvas from '@antv/g-base/lib/abstract/canvas'; import { IGraph } from '../../interface/graph'; import { ViewPortEventParam } from '../../types'; -import Base, { IPluginBaseConfig } from '../base'; +import Base from '../base'; interface GridConfig { img?: string; @@ -29,11 +28,11 @@ export default class Grid extends Base { const height: number = graph.get('height'); const img = this.get('img') || GRID_PNG; - const container: HTMLDivElement = createDOM( + const container: HTMLDivElement = createDom( `
`, ); - const gridContainer: HTMLDivElement = createDOM( + const gridContainer: HTMLDivElement = createDom( `
`, // ); @@ -363,17 +361,17 @@ export default class ImageMiniMap extends Base { self.set('container', container); - const containerDOM = createDOM( + const containerDOM = createDom( `
`, ); container.appendChild(containerDOM); - const span = createDOM(``); + const span = createDom(``); containerDOM.appendChild(span); self.set('containerDOM', containerDOM); self.set('containerSpan', span); - const img = createDOM( + const img = createDom( ``, @@ -454,7 +452,7 @@ export default class ImageMiniMap extends Base { oriImgDOM.remove(); self.set('graphImg', img); - const imgDOM = createDOM( + const imgDOM = createDom( ``, ); self.set('imgDOM', imgDOM); diff --git a/src/plugins/menu/index.ts b/src/plugins/menu/index.ts index f63a4a07e8..5ef242ae09 100644 --- a/src/plugins/menu/index.ts +++ b/src/plugins/menu/index.ts @@ -1,6 +1,5 @@ -import modifyCSS from '@antv/dom-util/lib/modify-css'; -import createDOM from '@antv/dom-util/lib/create-dom'; -import isString from '@antv/util/lib/is-string'; +import { modifyCSS, createDom } from '@antv/dom-util'; +import { isString } from '@antv/util'; import insertCss from 'insert-css'; import Graph from '../../graph/graph'; import { IG6GraphEvent, Item } from '../../types'; @@ -70,7 +69,7 @@ export default class Menu extends Base { public init() { const className = this.get('className'); - const menu = createDOM(`
`); + const menu = createDom(`
`); modifyCSS(menu, { top: '0px', position: 'absolute', visibility: 'hidden' }); let container: HTMLDivElement | null = this.get('container'); if (!container) { diff --git a/src/plugins/minimap/index.ts b/src/plugins/minimap/index.ts index 292beecc9b..b0eda5666b 100644 --- a/src/plugins/minimap/index.ts +++ b/src/plugins/minimap/index.ts @@ -1,16 +1,13 @@ -import GCanvas from '@antv/g-canvas/lib/canvas'; -import GSVGCanvas from '@antv/g-svg/lib/canvas'; +import { Canvas as GCanvas } from '@antv/g-canvas'; +import { Canvas as GSVGCanvas } from '@antv/g-svg'; import Base, { IPluginBaseConfig } from '../base'; -import isString from '@antv/util/lib/is-string'; -import createDOM from '@antv/dom-util/lib/create-dom'; -import modifyCSS from '@antv/dom-util/lib/modify-css'; -import isNil from '@antv/util/lib/is-nil'; -import each from '@antv/util/lib/each'; +import { isString, isNil, each } from '@antv/util'; +import { createDom, modifyCSS } from '@antv/dom-util'; import Graph from '../../graph/graph'; import { Matrix, ShapeStyle } from '../../types'; import { transform } from '@antv/matrix-util'; import { Point } from '@antv/g-math/lib/types'; -import GraphEvent from '@antv/g-base/lib/event/graph-event'; +import { Event as GraphEvent } from '@antv/g-base'; import { debounce } from '@antv/util'; const { max } = Math; @@ -77,7 +74,7 @@ export default class MiniMap extends Base { const canvas = this.get('canvas'); const containerDOM = canvas.get('container'); - const viewport = createDOM(` + const viewport = createDom(`
`, ); @@ -493,7 +490,7 @@ export default class MiniMap extends Base { self.set('container', container); - const containerDOM = createDOM( + const containerDOM = createDom( '
', ); container.appendChild(containerDOM); diff --git a/src/plugins/timeBar/index.ts b/src/plugins/timeBar/index.ts index cc8b8e14dc..79449dff5b 100644 --- a/src/plugins/timeBar/index.ts +++ b/src/plugins/timeBar/index.ts @@ -1,11 +1,10 @@ /** * 基于 G 的时间轴组件 */ -import GCanvas from '@antv/g-canvas/lib/canvas'; -import GSVGCanvas from '@antv/g-svg/lib/canvas'; -import { IGroup, ICanvas } from '@antv/g-base'; -import createDOM from '@antv/dom-util/lib/create-dom' -import modifyCSS from '@antv/dom-util/lib/modify-css' +import { Canvas as GCanvas } from '@antv/g-canvas'; +import { Canvas as GSVGCanvas } from '@antv/g-svg'; +import { ICanvas } from '@antv/g-base'; +import { createDom, modifyCSS } from '@antv/dom-util'; import Base, { IPluginBaseConfig } from '../base'; import TrendTimeBar, { SliderOption } from './trendTimeBar' import TimeBarSlice, { TimeBarSliceOption } from './timeBarSlice' @@ -116,7 +115,7 @@ export default class TimeBar extends Base { let timeBarContainer; if (!container) { - timeBarContainer = createDOM(`
`); + timeBarContainer = createDom(`
`); modifyCSS(timeBarContainer, { position: 'relative' }); } else { if (isString(container)) { diff --git a/src/plugins/timeBar/path.ts b/src/plugins/timeBar/path.ts index aeec22b73e..4997438e37 100644 --- a/src/plugins/timeBar/path.ts +++ b/src/plugins/timeBar/path.ts @@ -1,7 +1,7 @@ import * as pathUtil from '@antv/path-util'; import { Category, Linear } from '@antv/scale'; -import { map, each, isEqual, head } from '@antv/util'; -import isArray from '@antv/util/lib/is-array'; +import { map, each, isEqual, head, isArray } from '@antv/util'; + type Point = [number, number]; diff --git a/src/plugins/timeBar/timeBarTooltip.ts b/src/plugins/timeBar/timeBarTooltip.ts index 5448b9dd95..7536526ae6 100644 --- a/src/plugins/timeBar/timeBarTooltip.ts +++ b/src/plugins/timeBar/timeBarTooltip.ts @@ -1,6 +1,5 @@ -import createDOM from '@antv/dom-util/lib/create-dom' import { isString } from '@antv/util'; -import modifyCSS from '@antv/dom-util/lib/modify-css'; +import { createDom, modifyCSS } from '@antv/dom-util'; export const BACKGROUND_STYLE = { opacity: 0.5, @@ -108,7 +107,7 @@ export default class TimeBarTooltip { textColor, text, padding, opacity, fontSize } = self; let parentNode: string | HTMLElement = self.container; - const container: HTMLElement = createDOM( + const container: HTMLElement = createDom( `
`, ); if (isString(parentNode)) { @@ -119,13 +118,13 @@ export default class TimeBarTooltip { self.parentWidth = parentNode.offsetWidth; modifyCSS(container, { visibility: 'hidden', top: 0, left: 0 }); - const background: HTMLElement = createDOM(` + const background: HTMLElement = createDom(`
`); background.innerHTML = text; container.appendChild(background); self.backgroundDOM = background; - const arrow: HTMLElement = createDOM( + const arrow: HTMLElement = createDom( `
` ) container.appendChild(arrow); @@ -157,7 +156,7 @@ export default class TimeBarTooltip { modifyCSS(self.backgroundDOM, { marginLeft: `${-backgroundWidth / 2 - right + self.parentWidth + 12}px` }) } } - + public hide() { modifyCSS(this.container as HTMLElement, { top: 0, left: 0, visibility: 'hidden', }); } diff --git a/src/plugins/toolBar/index.ts b/src/plugins/toolBar/index.ts index f378ae433b..e2a522a8de 100644 --- a/src/plugins/toolBar/index.ts +++ b/src/plugins/toolBar/index.ts @@ -1,6 +1,5 @@ -import modifyCSS from '@antv/dom-util/lib/modify-css'; -import createDOM from '@antv/dom-util/lib/create-dom'; -import { clone, isString } from '@antv/util/lib'; +import { modifyCSS, createDom } from '@antv/dom-util'; +import { clone, isString } from '@antv/util'; import Base, { IPluginBaseConfig } from '../base'; import { IGraph } from '../../interface/graph'; import { Point } from '@antv/g-base'; @@ -94,7 +93,7 @@ export default class ToolBar extends Base { const toolBar = getContent(graph); let toolBarDOM = toolBar; if (isString(toolBar)) { - toolBarDOM = createDOM(toolBar); + toolBarDOM = createDom(toolBar); } const className = this.get('className'); diff --git a/src/plugins/tooltip/index.ts b/src/plugins/tooltip/index.ts index f019633227..4edcab6333 100644 --- a/src/plugins/tooltip/index.ts +++ b/src/plugins/tooltip/index.ts @@ -1,6 +1,5 @@ -import modifyCSS from '@antv/dom-util/lib/modify-css'; -import createDOM from '@antv/dom-util/lib/create-dom'; -import isString from '@antv/util/lib/is-string'; +import { modifyCSS, createDom } from '@antv/dom-util'; +import { isString } from '@antv/util'; import insertCss from 'insert-css'; import Graph from '../../graph/graph'; import { IG6GraphEvent, Item } from '../../types'; @@ -66,6 +65,9 @@ export default class Tooltip extends Base { 'edge:mouseenter': 'onMouseEnter', 'edge:mouseleave': 'onMouseLeave', 'edge:mousemove': 'onMouseMove', + 'combo:mouseenter': 'onMouseEnter', + 'combo:mouseleave': 'onMouseLeave', + 'combo:mousemove': 'onMouseMove', afterremoveitem: 'onMouseLeave', 'contextmenu': 'onMouseLeave', 'node:drag': 'onMouseLeave' @@ -74,7 +76,7 @@ export default class Tooltip extends Base { public init() { const className = this.get('className') || 'g6-component-tooltip'; - const tooltip = createDOM(`
`); + const tooltip = createDom(`
`); let container: HTMLDivElement | null = this.get('container'); if (!container) { container = this.get('graph').get('container'); diff --git a/src/shape/combo.ts b/src/shape/combo.ts index a717ca908e..2335257bf4 100644 --- a/src/shape/combo.ts +++ b/src/shape/combo.ts @@ -2,7 +2,7 @@ * @fileOverview common combo shape * @author shiwu.wyy@antfin.com */ -import GGroup from '@antv/g-canvas/lib/group'; +import { Group as GGroup } from '@antv/g-canvas'; import { IShape } from '@antv/g-canvas/lib/interfaces'; import { isArray, isNil, clone } from '@antv/util'; import { ILabelConfig, ShapeOptions } from '../interface/shape'; diff --git a/src/shape/combos/circle.ts b/src/shape/combos/circle.ts index cf34ddd175..2a9d9186c5 100644 --- a/src/shape/combos/circle.ts +++ b/src/shape/combos/circle.ts @@ -1,4 +1,4 @@ -import GGroup from '@antv/g-canvas/lib/group'; +import { Group as GGroup } from '@antv/g-canvas'; import { IShape } from '@antv/g-canvas/lib/interfaces'; import { Item, ComboConfig, ShapeStyle } from '../../types'; import Global from '../../global'; diff --git a/src/shape/combos/rect.ts b/src/shape/combos/rect.ts index 64f041a9dd..40b0b438e1 100644 --- a/src/shape/combos/rect.ts +++ b/src/shape/combos/rect.ts @@ -1,4 +1,4 @@ -import GGroup from '@antv/g-canvas/lib/group'; +import { Group as GGroup } from '@antv/g-canvas'; import { IShape } from '@antv/g-canvas/lib/interfaces'; import { mix, isNumber, clone, isNil } from '@antv/util'; import { LabelStyle, Item, ComboConfig, ShapeStyle } from '../../types'; diff --git a/src/shape/edge.ts b/src/shape/edge.ts index b942807139..e37735b550 100644 --- a/src/shape/edge.ts +++ b/src/shape/edge.ts @@ -5,9 +5,9 @@ */ import { Point } from '@antv/g-base/lib/types'; -import GGroup from '@antv/g-canvas/lib/group'; +import { Group as GGroup } from '@antv/g-canvas'; import { IShape, IElement } from '@antv/g-canvas/lib/interfaces'; -import { deepMix, mix, each, isNil } from '@antv/util'; +import { deepMix, mix, each, isNil, isNumber, isArray } from '@antv/util'; import { ILabelConfig, ShapeOptions } from '../interface/shape'; import { EdgeConfig, EdgeData, IPoint, LabelStyle, ShapeStyle, Item, ModelConfig } from '../types'; import { getLabelPosition, getLoopCfgs } from '../util/graphic'; @@ -17,8 +17,6 @@ import Global from '../global'; import Shape from './shape'; import { shapeBase, CLS_LABEL_BG_SUFFIX } from './shapeBase'; import { Path } from '@antv/g-canvas/lib/shape'; -import isArray from '@antv/util/lib/is-array'; -import isNumber from '@antv/util/lib/is-number'; const CLS_SHAPE = 'edge-shape'; @@ -147,22 +145,33 @@ const singleEdge: ShapeOptions = { // 添加结束点 points.push(endPoint); - const previousStyle = mix({}, strokeStyle, shape.attr(), cfg.style); + const currentAttr = shape.attr(); + const previousStyle = mix({}, strokeStyle, currentAttr, cfg.style); const source = cfg.sourceNode; const target = cfg.targetNode; let routeCfg: { [key: string]: unknown } = { radius: previousStyle.radius }; if (!controlPoints) { routeCfg = { source, target, offset: previousStyle.offset, radius: previousStyle.radius }; } + if (currentAttr.endArrow && previousStyle.endArrow === false) { + cfg.style.endArrow = { + path: '' + }; + } + if (currentAttr.startArrow && previousStyle.startArrow === false) { + cfg.style.startArrow = { + path: '' + }; + } const path = (this as any).getPath(points, routeCfg); const style = mix( strokeStyle, shape.attr(), { lineWidth: size, - path, + path }, - cfg.style, + cfg.style ); if (shape) { diff --git a/src/shape/edges/polyline.ts b/src/shape/edges/polyline.ts index d04d1b4668..7f5829c8bf 100644 --- a/src/shape/edges/polyline.ts +++ b/src/shape/edges/polyline.ts @@ -1,5 +1,5 @@ import { Point } from '@antv/g-base/lib/types'; -import Group from '@antv/g-canvas/lib/group'; +import { Group } from '@antv/g-canvas'; import { mix, each, isArray, isString } from '@antv/util'; import { ShapeStyle, EdgeConfig, Item } from '../../types'; import { pointsToPolygon } from '../../util/path'; @@ -118,7 +118,8 @@ Shape.registerEdge( // 添加结束点 points.push(endPoint); - const previousStyle = mix({}, strokeStyle, shape.attr(), cfg.style); + const currentAttr = shape.attr(); + const previousStyle = mix({}, strokeStyle, currentAttr, cfg.style); const source = cfg.sourceNode; const target = cfg.targetNode; const radius = previousStyle.radius; @@ -131,12 +132,22 @@ Shape.registerEdge( if (isNaN(startPoint.x) || isNaN(startPoint.y) || isNaN(endPoint.x) || isNaN(endPoint.y)) { path = 'M0 0, L0 0'; } + if (currentAttr.endArrow && previousStyle.endArrow === false) { + cfg.style.endArrow = { + path: '' + }; + } + if (currentAttr.startArrow && previousStyle.startArrow === false) { + cfg.style.startArrow = { + path: '' + }; + } const style = mix( strokeStyle, shape.attr(), { lineWidth: size, - path, + path }, cfg.style, ); diff --git a/src/shape/edges/router.ts b/src/shape/edges/router.ts index be9cdd815a..12f0faf613 100644 --- a/src/shape/edges/router.ts +++ b/src/shape/edges/router.ts @@ -6,7 +6,7 @@ */ import { INode } from '../../interface/item'; import { Item } from '../../types'; -import deepMix from '@antv/util/lib/deep-mix'; +import { deepMix } from '@antv/util'; import { getLineIntersect } from '../../util/math'; import { getExpandedBBox, diff --git a/src/shape/node.ts b/src/shape/node.ts index 4eaffe7722..91a29f8c7d 100644 --- a/src/shape/node.ts +++ b/src/shape/node.ts @@ -2,7 +2,7 @@ * @fileOverview common node shape * @author huangtonger@aliyun.com */ -import GGroup from '@antv/g-canvas/lib/group'; +import { Group as GGroup } from '@antv/g-canvas'; import { IShape, IElement } from '@antv/g-canvas/lib/interfaces'; import { isArray, isNil, mix } from '@antv/util'; import { ILabelConfig, ShapeOptions } from '../interface/shape'; diff --git a/src/shape/nodes/circle.ts b/src/shape/nodes/circle.ts index 52b7c323b2..785365da86 100644 --- a/src/shape/nodes/circle.ts +++ b/src/shape/nodes/circle.ts @@ -1,6 +1,6 @@ -import GGroup from '@antv/g-canvas/lib/group'; +import { Group as GGroup } from '@antv/g-canvas'; import { IShape } from '@antv/g-canvas/lib/interfaces'; -import deepMix from '@antv/util/lib/deep-mix'; +import { deepMix } from '@antv/util'; import { Item, NodeConfig, ShapeStyle } from '../../types'; import Global from '../../global'; import Shape from '../shape'; diff --git a/src/shape/nodes/diamond.ts b/src/shape/nodes/diamond.ts index 20aca4a968..00f1a519a4 100644 --- a/src/shape/nodes/diamond.ts +++ b/src/shape/nodes/diamond.ts @@ -1,4 +1,4 @@ -import GGroup from '@antv/g-canvas/lib/group'; +import { Group as GGroup } from '@antv/g-canvas'; import { IShape } from '@antv/g-canvas/lib/interfaces'; import { mix } from '@antv/util'; import { Item, NodeConfig, ShapeStyle } from '../../types'; diff --git a/src/shape/nodes/ellipse.ts b/src/shape/nodes/ellipse.ts index 1fe22bf570..728d923c12 100644 --- a/src/shape/nodes/ellipse.ts +++ b/src/shape/nodes/ellipse.ts @@ -1,4 +1,4 @@ -import GGroup from '@antv/g-canvas/lib/group'; +import { Group as GGroup } from '@antv/g-canvas'; import { IShape } from '@antv/g-canvas/lib/interfaces'; import { mix } from '@antv/util'; import { Item, NodeConfig, ShapeStyle } from '../../types'; diff --git a/src/shape/nodes/image.ts b/src/shape/nodes/image.ts index ef7e6bb0ce..a6f60421b8 100644 --- a/src/shape/nodes/image.ts +++ b/src/shape/nodes/image.ts @@ -1,6 +1,6 @@ import Shape from '../shape'; import { NodeConfig, Item } from '../../types'; -import GGroup from '@antv/g-canvas/lib/group'; +import { Group as GGroup } from '@antv/g-canvas'; import { IShape } from '@antv/g-canvas/lib/interfaces'; /** diff --git a/src/shape/nodes/modelRect.ts b/src/shape/nodes/modelRect.ts index 8c6cb870bd..aef1b427d1 100644 --- a/src/shape/nodes/modelRect.ts +++ b/src/shape/nodes/modelRect.ts @@ -1,4 +1,4 @@ -import GGroup from '@antv/g-canvas/lib/group'; +import { Group as GGroup } from '@antv/g-canvas'; import { IShape } from '@antv/g-canvas/lib/interfaces'; import { mix, isString } from '@antv/util'; import { Item, NodeConfig, ShapeStyle } from '../../types'; diff --git a/src/shape/nodes/rect.ts b/src/shape/nodes/rect.ts index c430b02f6e..9fa366d98e 100644 --- a/src/shape/nodes/rect.ts +++ b/src/shape/nodes/rect.ts @@ -1,4 +1,4 @@ -import GGroup from '@antv/g-canvas/lib/group'; +import { Group as GGroup } from '@antv/g-canvas'; import { IShape } from '@antv/g-canvas/lib/interfaces'; import { mix } from '@antv/util'; import { Item, NodeConfig, ShapeStyle } from '../../types'; diff --git a/src/shape/nodes/star.ts b/src/shape/nodes/star.ts index dae6910d84..6694280679 100644 --- a/src/shape/nodes/star.ts +++ b/src/shape/nodes/star.ts @@ -1,4 +1,4 @@ -import GGroup from '@antv/g-canvas/lib/group'; +import { Group as GGroup } from '@antv/g-canvas'; import { IShape } from '@antv/g-canvas/lib/interfaces'; import { mix } from '@antv/util'; import { Item, NodeConfig, ShapeStyle } from '../../types'; diff --git a/src/shape/nodes/triangle.ts b/src/shape/nodes/triangle.ts index bf6784e3d5..5eefc8f8fa 100644 --- a/src/shape/nodes/triangle.ts +++ b/src/shape/nodes/triangle.ts @@ -1,7 +1,7 @@ import Shape from '../shape'; import { mix } from '@antv/util'; import Global from '../../global'; -import GGroup from '@antv/g-canvas/lib/group'; +import { Group as GGroup } from '@antv/g-canvas'; import { IShape } from '@antv/g-canvas/lib/interfaces'; import { ModelConfig, NodeConfig, Item, ShapeStyle } from '../../types'; import { ShapeOptions } from '../../interface/shape'; diff --git a/src/shape/shape.ts b/src/shape/shape.ts index 09657ca519..4ff5f32207 100644 --- a/src/shape/shape.ts +++ b/src/shape/shape.ts @@ -3,7 +3,7 @@ * @author dxq613@gmail.com */ -import GGroup from '@antv/g-canvas/lib/group'; +import { Group as GGroup } from '@antv/g-canvas'; import { IShape } from '@antv/g-canvas/lib/interfaces'; import { upperFirst } from '@antv/util'; import { ShapeOptions, ShapeDefine } from '../interface/shape'; @@ -132,17 +132,17 @@ const ShapeFramework = { /** * 绘制 */ - drawShape(/* cfg, group */) {}, + drawShape(/* cfg, group */) { }, /** * 绘制完成后的操作，便于用户继承现有的节点、边 */ - afterDraw(/* cfg, group */) {}, + afterDraw(/* cfg, group */) { }, // update(cfg, item) // 默认不定义 - afterUpdate(/* cfg, item */) {}, + afterUpdate(/* cfg, item */) { }, /** * 设置节点、边状态 */ - setState(/* name, value, item */) {}, + setState(/* name, value, item */) { }, /** * 获取控制点 * @param {Object} cfg 节点、边的配置项 diff --git a/src/shape/shapeBase.ts b/src/shape/shapeBase.ts index aa12d16239..3b19ea332d 100644 --- a/src/shape/shapeBase.ts +++ b/src/shape/shapeBase.ts @@ -2,7 +2,7 @@ * @fileOverview 自定义节点和边的过程中，发现大量重复代码 * @author dxq613@gmail.com */ -import GGroup from '@antv/g-canvas/lib/group'; +import { Group as GGroup } from '@antv/g-canvas'; import { IShape, IElement } from '@antv/g-canvas/lib/interfaces'; import { ShapeOptions, ILabelConfig } from '../interface/shape'; import { IPoint, Item, LabelStyle, ShapeStyle, ModelConfig, EdgeConfig } from '../types'; @@ -339,23 +339,21 @@ export const shapeBase: ShapeOptions = { const model = item.getModel(); // 原始样式 - // const originStyle = clone(item.getOriginStyle()); const originStyle = mix({}, model.style, clone(item.getOriginStyle())); const keyShapeName = shape.get('name'); - const keyShapeStyles = shape.attr(); + const keyShapeStyles = clone(shape.attr()); // 已有样式 - 要取消的状态的样式 const filtetDisableStatesStyle = {}; - // style 为要取消的状态的样式 + // styles 为要取消的状态的样式 for (const p in styles) { const style = styles[p]; if (isPlainObject(style) && !ARROWS.includes(p)) { const subShape = group.find((element) => element.get('name') === p); if (subShape) { const subShapeStyles = subShape.attr(); - // const current = subShapeStyles[p] each(style, (v, key) => { if (subShapeStyles[key] || subShapeStyles[key] === 0) { delete subShapeStyles[key]; @@ -368,6 +366,7 @@ export const shapeBase: ShapeOptions = { const keptAttrs = { x: 1, y: 1, cx: 1, cy: 1 }; if (keyShapeStyles[p] && !keptAttrs[p]) { delete keyShapeStyles[p]; + shape.attr(p, originStyle[p]); } } } diff --git a/src/shape/xml.ts b/src/shape/xml.ts index 22351803cf..3245ead6a1 100644 --- a/src/shape/xml.ts +++ b/src/shape/xml.ts @@ -3,7 +3,7 @@ * @author xuzhi.mxz@antfin.com */ -import get from '@antv/util/lib/get'; +import { get } from '@antv/util'; import { getTextSize } from '../util/graphic'; /** diff --git a/src/types/index.ts b/src/types/index.ts index 3c7098ad91..db1e2b0345 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1,13 +1,13 @@ /* eslint @typescript-eslint/no-use-before-define: 0 */ -import GraphEvent from '@antv/g-base/lib/event/graph-event'; +import { IGroup, Event as GraphEvent } from '@antv/g-base'; import { BBox, AnimateCfg } from '@antv/g-base/lib/types'; -import Canvas from '@antv/g-canvas/lib/canvas'; -import ShapeBase from '@antv/g-canvas/lib/shape/base'; +import { Canvas, Shape } from '@antv/g-canvas'; import Node from '../item/node'; import { IGraph } from '../interface/graph'; import { IEdge, INode, ICombo } from '../interface/item'; import { ILabelConfig } from '../interface/shape'; -import { IGroup } from '@antv/g-base'; + +type ShapeBase = Shape.Base; // Node Edge Combo 实例 export type Item = INode | IEdge | ICombo; diff --git a/src/util/base.ts b/src/util/base.ts index 5b429fc3da..55cec3c4e8 100644 --- a/src/util/base.ts +++ b/src/util/base.ts @@ -1,7 +1,4 @@ -import isArray from '@antv/util/lib/is-array'; -import isNil from '@antv/util/lib/is-nil'; -import isNumber from '@antv/util/lib/is-number'; -import isString from '@antv/util/lib/is-string'; +import { isString, isNumber, isNil, isArray } from '@antv/util'; import { G6GraphEvent } from '../interface/behavior'; import { IG6GraphEvent, Padding, Matrix, Item } from '../types'; @@ -215,7 +212,7 @@ export const gpuDetector = (): any => { if (typeof window === 'undefined' || typeof document === 'undefined') return {}; return { canvas: !!window.CanvasRenderingContext2D, - webgl: (function () { + webgl: (() => { try { const canvas = document.createElement('canvas'); return !!(window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl'))); @@ -225,7 +222,7 @@ export const gpuDetector = (): any => { })(), workers: !!window.Worker, fileapi: window.File && window.FileReader && window.FileList && window.Blob, - getWebGLErrorMessage: function () { + getWebGLErrorMessage: () => { const element = document.createElement('div'); element.id = 'webgl-error-message'; element.style.fontFamily = 'monospace'; @@ -248,7 +245,7 @@ export const gpuDetector = (): any => { } return element; }, - addGetWebGLMessage: function (parameters) { + addGetWebGLMessage(parameters) { parameters = parameters || {}; const parent = parameters.parent !== undefined ? parameters.parent : document.body; const id = parameters.id !== undefined ? parameters.id : 'oldie'; diff --git a/src/util/graphic.ts b/src/util/graphic.ts index 2ad9d72eab..2c3fcc75d5 100644 --- a/src/util/graphic.ts +++ b/src/util/graphic.ts @@ -1,4 +1,4 @@ -import Group from '@antv/g-canvas/lib/group'; +import { Group } from '@antv/g-canvas'; import Path from '@antv/g-canvas/lib/shape/path'; import { vec2 } from '@antv/matrix-util'; import Global from '../global'; diff --git a/src/util/index.ts b/src/util/index.ts index cdc547d2b9..ca50cf45eb 100644 --- a/src/util/index.ts +++ b/src/util/index.ts @@ -3,12 +3,8 @@ import * as GraphicUtil from './graphic'; import * as PathUtil from './path'; import * as BaseUtil from './base'; import * as ColorUtil from './color'; -import { mat3, transform } from '@antv/matrix-util/lib'; -import mix from '@antv/util/lib/mix'; -import deepMix from '@antv/util/lib/deep-mix'; -import isArray from '@antv/util/lib/is-array'; -import isNumber from '@antv/util/lib/is-number'; -import { uniqueId } from '@antv/util'; +import { mat3, transform } from '@antv/matrix-util'; +import { mix, isNumber, deepMix, isArray, uniqueId } from '@antv/util'; const Base = { mat3, diff --git a/src/util/math.ts b/src/util/math.ts index 941a2ac454..6e97d70bdb 100644 --- a/src/util/math.ts +++ b/src/util/math.ts @@ -1,7 +1,7 @@ import { Point } from '@antv/g-base/lib/types'; import { IGroup } from '@antv/g-canvas/lib/interfaces'; import { mat3, transform, vec3 } from '@antv/matrix-util'; -import isArray from '@antv/util/lib/is-array'; +import { isArray } from '@antv/util'; import { GraphData, ICircle, diff --git a/stories/Algorithm/component/path.tsx b/stories/Algorithm/component/path.tsx index 4ef634083a..8107e81b9c 100644 --- a/stories/Algorithm/component/path.tsx +++ b/stories/Algorithm/component/path.tsx @@ -2,480 +2,94 @@ import React, { useEffect } from 'react'; import G6, { Algorithm } from '../../../src'; const { findAllPath, findShortestPath } = Algorithm; -const data = { - nodes: [ - { - id: '0', - label: '0', - }, - { - id: '1', - label: '1', - }, - { - id: '2', - label: '2', - }, - { - id: '3', - label: '3', - }, - { - id: '4', - label: '4', - }, - { - id: '5', - label: '5', - }, - { - id: '6', - label: '6', - }, - { - id: '7', - label: '7', - }, - { - id: '8', - label: '8', - }, - { - id: '9', - label: '9', - }, - { - id: '10', - label: '10', - }, - { - id: '11', - label: '11', - }, - { - id: '12', - label: '12', - }, - { - id: '13', - label: '13', - }, - { - id: '14', - label: '14', - }, - { - id: '15', - label: '15', - }, - { - id: '16', - label: '16', - }, - { - id: '17', - label: '17', - }, - { - id: '18', - label: '18', - }, - { - id: '19', - label: '19', - }, - { - id: '20', - label: '20', - }, - { - id: '21', - label: '21', - }, - { - id: '22', - label: '22', - }, - { - id: '23', - label: '23', - }, - { - id: '24', - label: '24', - }, - { - id: '25', - label: '25', - }, - { - id: '26', - label: '26', - }, - { - id: '27', - label: '27', - }, - { - id: '28', - label: '28', - }, - { - id: '29', - label: '29', - }, - { - id: '30', - label: '30', - }, - { - id: '31', - label: '31', - }, - { - id: '32', - label: '32', - }, - { - id: '33', - label: '33', - }, - ], - edges: [ - { - source: '0', - target: '1', - }, - { - source: '0', - target: '2', - }, - { - source: '0', - target: '3', - }, - { - source: '0', - target: '4', - }, - { - source: '0', - target: '5', - }, - { - source: '0', - target: '7', - }, - { - source: '0', - target: '8', - }, - { - source: '0', - target: '9', - }, - { - source: '0', - target: '10', - }, - { - source: '0', - target: '11', - }, - { - source: '0', - target: '13', - }, - { - source: '0', - target: '14', - }, - { - source: '0', - target: '15', - }, - { - source: '0', - target: '16', - }, - { - source: '2', - target: '3', - }, - { - source: '4', - target: '5', - }, - { - source: '4', - target: '6', - }, - { - source: '5', - target: '6', - }, - { - source: '7', - target: '13', - }, - { - source: '8', - target: '14', - }, - { - source: '9', - target: '10', - }, - { - source: '10', - target: '22', - }, - { - source: '10', - target: '14', - }, - { - source: '10', - target: '12', - }, - { - source: '10', - target: '24', - }, - { - source: '10', - target: '21', - }, - { - source: '10', - target: '20', - }, - { - source: '11', - target: '24', - }, - { - source: '11', - target: '22', - }, - { - source: '11', - target: '14', - }, - { - source: '12', - target: '13', - }, - { - source: '16', - target: '17', - }, - { - source: '16', - target: '18', - }, - { - source: '16', - target: '21', - }, - { - source: '16', - target: '22', - }, - { - source: '17', - target: '18', - }, - { - source: '17', - target: '20', - }, - { - source: '18', - target: '19', - }, - { - source: '19', - target: '20', - }, - { - source: '19', - target: '33', - }, - { - source: '19', - target: '22', - }, - { - source: '19', - target: '23', - }, - { - source: '20', - target: '21', - }, - { - source: '21', - target: '22', - }, - { - source: '22', - target: '24', - }, - { - source: '22', - target: '25', - }, - { - source: '22', - target: '26', - }, - { - source: '22', - target: '23', - }, - { - source: '22', - target: '28', - }, - { - source: '22', - target: '30', - }, - { - source: '22', - target: '31', - }, - { - source: '22', - target: '32', - }, - { - source: '22', - target: '33', - }, - { - source: '23', - target: '28', - }, - { - source: '23', - target: '27', - }, - { - source: '23', - target: '29', - }, - { - source: '23', - target: '30', - }, - { - source: '23', - target: '31', - }, - { - source: '23', - target: '33', - }, - { - source: '32', - target: '33', - }, - ], -}; - const FindPath = () => { const container = React.useRef(); useEffect(() => { - let sourceNode, targetNode, operation; - const contextMenu = new G6.Menu({ - getContent(graph) { - console.log('graph', graph); - return `
-
所有路径
-
最短路径
-
`; - }, - handleMenuClick: (target, item) => { - operation = target.title; - sourceNode = item; - }, - offsetX: 0, - offsetY: 0, - itemTypes: ['node', 'edge'], - }); + + const div = document.getElementById('container'); + const tipDiv = document.createElement('div'); + tipDiv.innerHTML = `Press 'shift' and click two nodes to select begin and end nodes. 按住 'shift' 并点选两个节点作为起点和终点。`; + + + const button = document.createElement('button'); + button.innerHTML = `查看最短路径`; + + div.appendChild(tipDiv); + div.appendChild(button); const graph = new G6.Graph({ - container: container.current, + container: container?.current, width: 500, height: 500, - plugins: [contextMenu], - defaultEdge: { - style: { - endArrow: true, - }, - }, - edgeStateStyles: { - isPath: { - stroke: 'orange', - strokeOpacity: 0.4, - lineWidth: 3, - }, - highlight: { - stroke: 'lightgreen', - strokeOpacity: 0.6, - lineWidth: 4, - }, - }, + linkCenter: true, modes: { - default: ['zoom-canvas', 'drag-canvas', 'drag-node'], + default: ['click-select', 'drag-canvas', 'drag-node', 'zoom-canvas'], }, - }); - - graph.data(data); - graph.render(); - - graph.on('node:click', (e) => { - graph.getEdges().forEach((edge) => { - graph.clearItemStates(edge); - }); - if (sourceNode && operation === 'all') { - targetNode = e.item; - const allPaths = findAllPath(graph, sourceNode, targetNode, true); - allPaths.forEach((path) => { - for (let i = 0; i < path.length - 1; i++) { - const start = path[i]; - const end = path[i + 1]; - graph.getEdges().forEach((edge) => { - if (edge.getSource().get('id') === start && edge.getTarget().get('id') === end) { - graph.setItemState(edge, 'isPath', true); - } - }); - } - }); - sourceNode = null; - targetNode = null; + fitView: true, + layout: { + type: 'force' } - if (sourceNode && operation === 'short') { - targetNode = e.item; - const { length, path } = findShortestPath(graph, sourceNode, targetNode, true); - for (let i = 0; i < path.length - 1; i++) { - const start = path[i]; - const end = path[i + 1]; - graph.getEdges().forEach((edge) => { - if (edge.getSource().get('id') === start && edge.getTarget().get('id') === end) { - graph.setItemState(edge, 'highlight', true); - } + }); + fetch('https://gw.alipayobjects.com/os/bmw-prod/b0ca4b15-bd0c-43ec-ae41-c810374a1d55.json') + .then((res) => res.json()) + .then((data) => { + + const clearStates = () => { + graph.getNodes().forEach(node => { + graph.clearItemStates(node); + }); + graph.getEdges().forEach(edge => { + graph.clearItemStates(edge); }); } - sourceNode = null; - targetNode = null; - } - }); + + graph.on('canvas:click', e => { + clearStates(); + }); + + graph.data(data); + graph.render(); + + button.addEventListener('click', e => { + const selectedNodes = graph.findAllByState('node', 'selected'); + if (selectedNodes.length !== 2) { + alert('Please select TWO nodes!\n\r请选择有且两个节点！'); + return; + } + clearStates(); + const { findShortestPath } = G6.Algorithm; + const { path } = findShortestPath(graph, selectedNodes[0].getID(), selectedNodes[1].getID()); + const pathNodeMap = {}; + path.forEach(id => { + const pathNode = graph.findById(id); + pathNode.toFront(); + graph.setItemState(pathNode, 'highlight', true); + pathNodeMap[id] = true; + }); + graph.getEdges().forEach(edge => { + const edgeModel = edge.getModel(); + const source = edgeModel.source; + const target = edgeModel.target; + const sourceInPathIdx = path.indexOf(source); + const targetInPathIdx = path.indexOf(target); + if (sourceInPathIdx === -1 || targetInPathIdx === -1) return; + if (Math.abs(sourceInPathIdx - targetInPathIdx) === 1) { + graph.setItemState(edge, 'highlight', true); + } else { + graph.setItemState(edge, 'inactive', true); + } + }); + graph.getNodes().forEach(node => { + if (!pathNodeMap[node.getID()]) { + graph.setItemState(node, 'inactive', true); + } + }); + }); + + }); }); - return
; + return
; }; export default FindPath; diff --git a/stories/LargeGraph/component/large-graph.tsx b/stories/LargeGraph/component/large-graph.tsx index 9a03252d3a..ca15a7d906 100644 --- a/stories/LargeGraph/component/large-graph.tsx +++ b/stories/LargeGraph/component/large-graph.tsx @@ -415,7 +415,7 @@ G6.registerNode('real-node', { }, 'aggregated-node'); // 这样可以继承 aggregated-node 的 setState // Custom the quadratic edge for multiple edges between one node pair -G6.registerEdge('quadratic', { +G6.registerEdge('custom-quadratic', { setState: (name, value, item) => { const group = item.get('group'); const model = item.getModel(); @@ -511,7 +511,7 @@ G6.registerEdge('quadratic', { }, 'quadratic'); // Custom the line edge for single edge between one node pair -G6.registerEdge('line', { +G6.registerEdge('custom-line', { setState: (name, value, item) => { const group = item.get('group'); const model = item.getModel(); @@ -847,7 +847,7 @@ const processNodesEdges = (nodes, edges, width, height, largeGraphMode, edgeLabe } }); - G6.Util.processParallelEdges(edges, 12.5, 'quadratic', 'line'); + G6.Util.processParallelEdges(edges, 12.5, 'custom-quadratic', 'custom-line'); return { maxDegree, edges @@ -1473,7 +1473,7 @@ const LargeGraph = () => { cedge.loopCfg = { dist: 20, } - } else cedge.type = 'line'; + } else cedge.type = 'custom-line'; aggregatedData.edges.push(cedge); }); @@ -1609,7 +1609,7 @@ const LargeGraph = () => { size: DEFAULTNODESIZE, }, plugins: [contextMenu], - layout: layoutConfig + layout: layoutConfig, }); graph.get('canvas').set('localRefresh', false); diff --git a/stories/Layout/component/register-layout.tsx b/stories/Layout/component/register-layout.tsx index 0e5feac061..ed3a9af3f4 100644 --- a/stories/Layout/component/register-layout.tsx +++ b/stories/Layout/component/register-layout.tsx @@ -241,13 +241,24 @@ const RegisterLayout = () => { defaultEdge: { size: 1, color: '#e2e2e2', + type: 'line' }, modes: { default: ['drag-canvas', 'drag-node'], - }, + } }); graph.data(data); graph.render(); + + graph.on('edge:mouseenter', (e) => { + console.log('enter') + debugger + graph.setItemState(e.item, 'active', true); + }); + + graph.on('edge:mouseout', (e) => { + graph.setItemState(e.item, 'active', false); + }); } }); diff --git a/stories/Plugins/component/tooltip.tsx b/stories/Plugins/component/tooltip.tsx index fab8b92310..cd85f6d409 100644 --- a/stories/Plugins/component/tooltip.tsx +++ b/stories/Plugins/component/tooltip.tsx @@ -11,18 +11,20 @@ const data = { x: 150, y: 50, label: 'node1', + comboId: 'a' }, { id: 'node2', - x: 200, + x: 500, y: 150, - label: 'node2', + label: 'node2' }, { id: 'node3', x: 100, y: 150, label: 'node3', + comboId: 'a' }, ], edges: [ @@ -39,6 +41,11 @@ const data = { target: 'node1', }, ], + combos: [ + { + id: 'a' + } + ] }; const Tooltip = () => { @@ -48,14 +55,14 @@ const Tooltip = () => { const tooltip = new G6.Tooltip({ offsetX: 100, offsetY: 120, // the height of the top div - shouldBegin: d => { - if (d.target.get('name') === 'text-shape') return true; - return false; - }, + // shouldBegin: d => { + // if (d.target.get('name') === 'text-shape') return true; + // return false; + // }, getContent: e => { return e.target.get('name') || e.target.get('className') || 'aaa'; }, - itemTypes: ['node'] + itemTypes: ['node', 'combo'] }); graph = new Graph({ container: container.current as string | HTMLElement, diff --git a/stories/Shape/component/quadratic.tsx b/stories/Shape/component/quadratic.tsx index 6845f6a0bb..c0663afae8 100644 --- a/stories/Shape/component/quadratic.tsx +++ b/stories/Shape/component/quadratic.tsx @@ -32,10 +32,20 @@ const data = { type: 'polyline', curveOffset: -150, curvePosition: 0.5, + style: { + endArrow: { + path: G6.Arrow.triangle(5, 15, 0) + } + } }, { source: '1', target: '3', + style: { + endArrow: { + path: G6.Arrow.triangle(5, 15, 0) + } + } }, ], }; @@ -69,6 +79,32 @@ const Quadratic = () => { }); graph.data(data); graph.render(); + + graph.on('canvas:click', e => { + const edge = graph.getEdges()[0]; + const keyShape = edge.getKeyShape(); + // keyShape.attr('endArrow', { path: '' }); + // keyShape.attr('stroke', '#f00'); + graph.updateItem(graph.getEdges()[1], { + style: { + endArrow: false, + stroke: '#f00' + }, + }); + // console.log(graph.getEdges()[0]) + }); + + graph.on('edge:click', e => { + + graph.updateItem(graph.getEdges()[1], { + style: { + endArrow: { + path: G6.Arrow.triangle(15, 15, 0) + }, + stroke: '#0f0' + }, + }); + }); } }); diff --git a/stories/Tree/component/tree-data.tsx b/stories/Tree/component/tree-data.tsx index a474af0446..afa4be0c8c 100644 --- a/stories/Tree/component/tree-data.tsx +++ b/stories/Tree/component/tree-data.tsx @@ -30,38 +30,24 @@ const TreeData = () => { height: 800, modes: { default: [ - { - type: 'collapse-expand', - onChange: function onChange(item, collapsed) { - const data = item.get('model').data; - data.collapsed = collapsed; - return true; - }, - }, 'drag-canvas', 'zoom-canvas', + 'drag-node' ], }, - defaultNode: { - size: 26, - anchorPoints: [ - [0, 0.5], - [1, 0.5], - ], - style: { - fill: '#C6E5FF', - stroke: '#5B8FF9', - }, - }, + // defaultNode: { + // type: 'circle' + // }, defaultEdge: { - type: 'cubic-horizontal', + type: 'line', style: { - stroke: '#A3B1BF', - }, + lineAppendWidth: 5 + } }, nodeStateStyles: { - selected: { - fill: 'red' + active: { + fillOpacity: 0.1, + shadowBlur: 0 } }, layout: { @@ -85,42 +71,64 @@ const TreeData = () => { }, }); - graph.node(function (node) { - return { - label: node.id, - labelCfg: { - offset: 10, - position: node.children && node.children.length > 0 ? 'left' : 'right', - }, - }; - }); + // graph.node(function (node) { + // return { + // label: node.id, + // labelCfg: { + // offset: 10, + // position: node.children && node.children.length > 0 ? 'left' : 'right', + // }, + // }; + // }); graph.data(data); graph.render(); graph.fitView(); graph.on('node:mouseenter', (e) => { - graph.setItemState(e.item, 'hover', true); - console.log(e.item); + graph.setItemState(e.item, 'active', true); }); + graph.on('node:mouseout', (e) => { + graph.setItemState(e.item, 'active', false); + }); + + graph.setItemState(graph.getNodes()[10], 'selected', true); graph.on("node:click", (evt) => { + console.log('clicking') const { item } = evt; - const nodes = graph.findAllByState("node", "selected"); - debugger - nodes.forEach((node) => graph.setItemState(node, "selected", false)); - graph.setItemState(item, "selected", true); - const nodeData = graph.findDataById(item.getID()); - const node = { - id: `${Math.floor(Math.random() * 1000)}`, - label: "test" + Math.random() * 1000 - }; - if (!nodeData.children) { - nodeData.children = [node]; - } else { - nodeData.children.push(node); - } - graph.changeData(); + // graph.clearItemStates(graph.getNodes()[10]); + graph.getNodes().forEach(node => { + graph.clearItemStates(node); + }); + graph.setItemState(item, 'selected', true); + }); + + + graph.on('edge:mouseenter', (e) => { + console.log('enter') + graph.setItemState(e.item, 'active', true); + }); + + graph.on('edge:mouseout', (e) => { + graph.setItemState(e.item, 'active', false); + console.log(e.item) + }); + graph.on("edge:click", (evt) => { + console.log('clicking') + const { item } = evt; + // graph.clearItemStates(graph.getNodes()[10]); + graph.getEdges().forEach(edge => { + graph.clearItemStates(edge); + }); + graph.setItemState(item, 'selected', true); + }); + + graph.on('canvas:click', e => { + graph.getEdges().forEach(edge => { + // graph.clearItemStates(edge); + graph.setItemState(edge, 'selected', false); + }); }); }); } diff --git a/tests/unit/graph/svg-spec.ts b/tests/unit/graph/svg-spec.ts index 4d8531b2df..03e7cee71e 100644 --- a/tests/unit/graph/svg-spec.ts +++ b/tests/unit/graph/svg-spec.ts @@ -94,7 +94,7 @@ describe('graph', () => { const children = inst.get('group').get('children'); expect(children.length).toBe(4); expect(children[1].get('className')).toEqual('edge-container'); - + const nodes = inst.getNodes(); expect(nodes).not.toBe(undefined); expect(nodes.length).toBe(0); @@ -1237,7 +1237,7 @@ describe('behaviors', () => { expect(itemKeyShape.attr('lineWidth')).toBe(1); expect(unrelativeNodeKeyShape.attr('lineWidth')).toBe(1); expect(unrelativeNodeKeyShape.attr('stroke')).toBe('rgb(95, 149, 255)'); - expect(unrelativeNodeKeyShape.attr('opacity')).toBe(1); + expect(unrelativeNodeKeyShape.attr('opacity')).toBe(undefined); }); it('click-select', () => { graph.setMode('select'); diff --git a/tests/unit/shape/combo-spec.ts b/tests/unit/shape/combo-spec.ts index 7ff49201f7..3e560e6d7d 100644 --- a/tests/unit/shape/combo-spec.ts +++ b/tests/unit/shape/combo-spec.ts @@ -181,7 +181,7 @@ describe('combo node test', () => { factory.setState('rectnode', 'active', true, item); expect(shape.attr('fillOpacity')).not.toBe(1); factory.setState('rectnode', 'active', false, item); - expect(shape.attr('fillOpacity')).toBe(1); + expect(shape.attr('fillOpacity')).toBe(undefined); }); it('label position', () => { diff --git a/tests/unit/shape/node-spec.ts b/tests/unit/shape/node-spec.ts index 24d70c2a12..266a214588 100644 --- a/tests/unit/shape/node-spec.ts +++ b/tests/unit/shape/node-spec.ts @@ -238,7 +238,7 @@ describe('shape node test', () => { factory.setState('rectnode', 'active', true, item); expect(shape.attr('fillOpacity')).not.toBe(1); factory.setState('rectnode', 'active', false, item); - expect(shape.attr('fillOpacity')).toBe(1); + expect(shape.attr('fillOpacity')).toBe(undefined); }); it('selected', () => { diff --git a/tests/unit/state/edge-state-spec.ts b/tests/unit/state/edge-state-spec.ts index ed0b8028dc..1c401e149a 100644 --- a/tests/unit/state/edge-state-spec.ts +++ b/tests/unit/state/edge-state-spec.ts @@ -75,7 +75,7 @@ describe('graph edge states', () => { graph.setItemState(item, 'hover', false); expect(item.hasState('hover')).toEqual(false); const keyShape = item.getKeyShape(); - expect(keyShape.attr('opacity')).toEqual(1); + expect(keyShape.attr('opacity')).toEqual(undefined); expect(keyShape.attr('lineWidth')).toEqual(3); expect(keyShape.attr('stroke')).toEqual('steelblue'); }); diff --git a/tests/unit/state/refactor-state-spec.ts b/tests/unit/state/refactor-state-spec.ts index 54c39ec049..464eb6bf24 100644 --- a/tests/unit/state/refactor-state-spec.ts +++ b/tests/unit/state/refactor-state-spec.ts @@ -172,7 +172,7 @@ describe('graph refactor states', () => { expect(item.hasState('select')).toBe(false); expect(item.getStates()).toEqual(['hover']); expect(keyShape.attr('lineWidth')).toBe(1); - expect(keyShape.attr('stroke')).toBe(undefined); + expect(keyShape.attr('stroke')).toBe('rgb(95, 149, 255)'); // remove hover states graph.setItemState(item, 'hover', false);