From c547f61781dc8a8327e3960eefa0d7ceb53dce47 Mon Sep 17 00:00:00 2001 From: baizn <576375879@qq.com> Date: Thu, 24 Sep 2020 13:54:18 +0800 Subject: [PATCH] fix: slice time error --- CHANGELOG.md | 7 ++- examples/tool/timebar/demo/simple-timebar.js | 1 - examples/tool/timebar/demo/slice-timebar.js | 12 ---- examples/tool/timebar/demo/timebar.js | 1 - gatsby-browser.js | 4 +- src/plugins/timeBar/index.ts | 5 -- src/plugins/timeBar/timeBarSlice.ts | 11 ++-- src/shape/nodes/modelRect.ts | 6 +- tests/unit/plugins/edge-filter-lens-spec.ts | 6 +- tests/unit/shape/nodes/modelRect-spec.ts | 63 +++++++++----------- 10 files changed, 47 insertions(+), 69 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 96356dff62..42d0902edf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,9 +1,12 @@ # ChangeLog -#### 3.8 +#### 3.8.0 - fix: treeGraph render with addItem and stack problem, closes: #2084; -- feat: edge filter lens plugin. +- feat: G6 Interactive Document GraphMarker; +- feat: registerNode with jsx support afterDraw and setState; +- feat: edge filter lens plugin; +- feat: timebar plugin; #### 3.7.3 diff --git a/examples/tool/timebar/demo/simple-timebar.js b/examples/tool/timebar/demo/simple-timebar.js index b226229d68..a1aa04a600 100644 --- a/examples/tool/timebar/demo/simple-timebar.js +++ b/examples/tool/timebar/demo/simple-timebar.js @@ -18,7 +18,6 @@ for (let i = 0; i < 100; i++) { target: `node-${Math.round(Math.random() * 90)}`, }); } -const graphDiv = document.getElementById('container'); const width = document.getElementById('container').scrollWidth; const height = document.getElementById('container').scrollHeight || 500; diff --git a/examples/tool/timebar/demo/slice-timebar.js b/examples/tool/timebar/demo/slice-timebar.js index f83c1f8cba..aea8f0c374 100644 --- a/examples/tool/timebar/demo/slice-timebar.js +++ b/examples/tool/timebar/demo/slice-timebar.js @@ -66,18 +66,6 @@ const timebar = new G6.TimeBar({ }, }); -const timebar = new G6.TimeBar({ - x: 0, - y: 0, - width: 500, - height: 150, - padding: 10, - type: 'simple', - trend: { - data: timeBarData - } -}); - // constrained the layout inside the area const constrainBox = { x: 10, y: 10, width: 580, height: 450 }; diff --git a/examples/tool/timebar/demo/timebar.js b/examples/tool/timebar/demo/timebar.js index 3416efde95..68bfef63dc 100644 --- a/examples/tool/timebar/demo/timebar.js +++ b/examples/tool/timebar/demo/timebar.js @@ -18,7 +18,6 @@ for (let i = 0; i < 100; i++) { target: `node-${Math.round(Math.random() * 90)}`, }); } -const graphDiv = document.getElementById('container'); const width = document.getElementById('container').scrollWidth; const height = document.getElementById('container').scrollHeight || 500; diff --git a/gatsby-browser.js b/gatsby-browser.js index de19224340..d314bea4b2 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -1,4 +1,4 @@ -window.g6 = require('./src/index.ts'); // import the source for debugging -// window.g6 = require('./dist/g6.min.js'); // import the package for webworker +// window.g6 = require('./src/index.ts'); // import the source for debugging +window.g6 = require('./dist/g6.min.js'); // import the package for webworker window.insertCss = require('insert-css'); window.Chart = require('@antv/chart-node-g6'); diff --git a/src/plugins/timeBar/index.ts b/src/plugins/timeBar/index.ts index 7a39961c63..42d327c3aa 100644 --- a/src/plugins/timeBar/index.ts +++ b/src/plugins/timeBar/index.ts @@ -228,11 +228,6 @@ export default class TimeBar extends Base { return } - if (!trendData || trendData.length === 0) { - console.warn('请配置 TimeBar 组件的数据') - return - } - const rangeChange = this.get('rangeChange'); const graph: IGraph = this.get('graph'); diff --git a/src/plugins/timeBar/timeBarSlice.ts b/src/plugins/timeBar/timeBarSlice.ts index 12e617bc01..01d3259b01 100644 --- a/src/plugins/timeBar/timeBarSlice.ts +++ b/src/plugins/timeBar/timeBarSlice.ts @@ -487,11 +487,12 @@ export default class TimeBarSlice { } self.startTickRectId = self.endTickRectId } - tickRects[self.endTickRectId].rect.attr(selectedTickStyle); - - const start = self.startTickRectId / ticksLength; - const end = self.endTickRectId / ticksLength; - this.graph.emit(VALUE_CHANGE, { value: [start, end] }) + if (tickRects[self.endTickRectId]) { + tickRects[self.endTickRectId].rect.attr(selectedTickStyle); + const start = self.startTickRectId / ticksLength; + const end = self.endTickRectId / ticksLength; + this.graph.emit(VALUE_CHANGE, { value: [start, end] }) + } } public destory() { diff --git a/src/shape/nodes/modelRect.ts b/src/shape/nodes/modelRect.ts index efdf3f0b27..f23fa2d28f 100644 --- a/src/shape/nodes/modelRect.ts +++ b/src/shape/nodes/modelRect.ts @@ -130,7 +130,7 @@ Shape.registerNode( * @param {Group} group Group实例 */ drawLogoIcon(cfg: NodeConfig, group: GGroup) { - const { logoIcon } = this.getOptions(cfg) as NodeConfig; + const { logoIcon = {} } = this.getOptions(cfg) as NodeConfig; const size = (this as ShapeOptions).getSize!(cfg); const width = size[0]; @@ -156,13 +156,13 @@ Shape.registerNode( * @param {Group} group Group实例 */ drawStateIcon(cfg: NodeConfig, group: GGroup) { - const { stateIcon } = this.getOptions(cfg) as NodeConfig; + const { stateIcon = {} } = this.getOptions(cfg) as NodeConfig; const size = (this as ShapeOptions).getSize!(cfg); const width = size[0]; if (stateIcon.show) { const { width: w, height: h, x, y, offset, ...iconStyle } = stateIcon; - const image = group.addShape('image', { + group.addShape('image', { attrs: { ...iconStyle, x: x || width / 2 - (w as number) + (offset as number), diff --git a/tests/unit/plugins/edge-filter-lens-spec.ts b/tests/unit/plugins/edge-filter-lens-spec.ts index 0c9fb5961c..8dbb5e9f02 100644 --- a/tests/unit/plugins/edge-filter-lens-spec.ts +++ b/tests/unit/plugins/edge-filter-lens-spec.ts @@ -18,7 +18,7 @@ describe('edge filter lens', () => { graph.addItem('edge', { source: '0', target: '1', size: 1 }); graph.addItem('edge', { source: '0', target: '2', size: 1 }); - it.only('default edge filter lens', () => { + it('default edge filter lens', () => { const filter = new G6.EdgeFilterLens(); graph.addPlugin(filter); graph.emit('click', { x: 100, y: 100 }) @@ -46,7 +46,7 @@ describe('edge filter lens', () => { graph.removePlugin(filter); }); - it.only('filter lens with click and wheel to adjust r', () => { + it('filter lens with click and wheel to adjust r', () => { const filter = new G6.EdgeFilterLens({ trigger: 'click', scaleRBy: 'wheel' @@ -82,7 +82,7 @@ describe('edge filter lens', () => { graph.removePlugin(filter); }); - it.only('filter lens with mousemove and shouldShow and show edge label, updateParams', () => { + it('filter lens with mousemove and shouldShow and show edge label, updateParams', () => { graph.addItem('node', { id: '3', x: 130, y: 60, label: '3' }); graph.addItem('node', { id: '4', x: 130, y: 120, label: '4' }); diff --git a/tests/unit/shape/nodes/modelRect-spec.ts b/tests/unit/shape/nodes/modelRect-spec.ts index bde1557725..d2417b37ce 100644 --- a/tests/unit/shape/nodes/modelRect-spec.ts +++ b/tests/unit/shape/nodes/modelRect-spec.ts @@ -399,60 +399,53 @@ describe('model rect test', () => { expect(graph.destroyed).toBe(true); }); - it.only('extends modelRect', () => { + it('extends modelRect', () => { const nodeConfig = { // 节点基本属性 size: [150, 35], style: { - radius: 5, - stroke: '#1890FF', - fill: '#FFFFFF' + radius: 5, + stroke: '#1890FF', + fill: '#FFFFFF' }, label: '审批节点', labelCfg: { - style: { - fill: '#595959', - fontSize: 14 - }, - offset: 30 - }, - descriptionCfg1: { - style: { - fontSize: 12, - fill: '#bfbfbf' - }, - paddingTop: 0 + style: { + fill: '#595959', + fontSize: 14 + }, + offset: 30 }, // 状态属性 stateStyles: { - hover: { - stroke: '#BAE7FF', - lineWidth: 8, - strokeOpacity: 0.6 - } + hover: { + stroke: '#BAE7FF', + lineWidth: 8, + strokeOpacity: 0.6 + } }, // 左侧矩形边属性 preRect: { - show: true, - width: 4, - fill: '#1890FF', - radius: 2 + show: true, + width: 4, + fill: '#1890FF', + radius: 2 }, // 图标属性 logoIcon: { - show: true, - // img: require('@/assets/nodeimg/audit.svg'), - width: 16, - height: 16, - offset: -5 + show: true, + // img: require('@/assets/nodeimg/audit.svg'), + width: 16, + height: 16, + offset: -5 }, // 状态属性 stateIcon: { - show: true, - // img: require('@/assets/nodeimg/audit.svg'), - width: 16, - height: 16, - offset: -5 + show: true, + // img: require('@/assets/nodeimg/audit.svg'), + width: 16, + height: 16, + offset: -5 } }