fix: slice time error

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
 

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;

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 };
 

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;

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');

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');
 

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() {

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),

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' });

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
       }
     }