vap-visual - npm Package Compare versions

Comparing version 1.1.4 to 1.1.5

Geo/drawer/_Drawer.d.ts

@@ -11,4 +11,4 @@ import { GeoOpts } from '../interface';
     protected DATA: any[];
-    constructor(props: GeoOpts, project: Projecting, svg: d3.Selection<any, any, any, any>, channel: VisualChannel);
-    protected abstract init(svg: d3.Selection<any, any, any, any>): any;
+    constructor(props: GeoOpts, project: Projecting, svg: d3.Selection<any, any, any, any>, channel: VisualChannel, autoPlay?: number | true);
+    protected abstract init(svg: d3.Selection<any, any, any, any>, autoPlay?: number | true): any;
     setData(data: any[]): void;
@@ -15,0 +15,0 @@ abstract resize(): any;

Geo/drawer/_Drawer.js

@@ -5,3 +5,3 @@ "use strict";
 var Drawer = /** @class */ (function () {
-    function Drawer(props, project, svg, channel) {
+    function Drawer(props, project, svg, channel, autoPlay) {
         this.props = null;
@@ -14,3 +14,3 @@ this.project = null;
         this.CONTAINER = svg;
-        this.init(svg);
+        this.init(svg, autoPlay);
     }
@@ -17,0 +17,0 @@ Drawer.prototype.setData = function (data) {

Geo/drawer/AreaDrawer.d.ts

@@ -10,3 +10,6 @@ import { Drawer } from './_Drawer';
     private SELECT_FN;
-    protected init(SVG: d3.Selection<any, any, any, any>): void;
+    private AUTO_STATUS;
+    private AUTO_LOCK;
+    protected init(SVG: d3.Selection<any, any, any, any>, autoPlay: any): void;
+    private autoPlay;
     onSelect(fn: any): void;
@@ -16,3 +19,3 @@ resize(): void;
     private showCricle;
-    select(item: any): void;
+    select(item: any, isAuto: boolean): void;
     private events;
@@ -19,0 +22,0 @@ protected drawMap(): void;

Geo/drawer/AreaDrawer.js

@@ -33,5 +33,8 @@ "use strict";
         _this.SELECT_FN = null;
+        _this.AUTO_STATUS = '';
+        _this.AUTO_LOCK = false;
         return _this;
     }
-    AreaDrawer.prototype.init = function (SVG) {
+    AreaDrawer.prototype.init = function (SVG, autoPlay) {
+        var _this = this;
         if (this.props.shadow) {
@@ -43,3 +46,29 @@ this.BACKGROUND = SVG.append('g').attr('class', '_geo_bg');
         this.events();
+        if (autoPlay) {
+            this.ROOT.on('mouseover', function () { _this.AUTO_LOCK = true; });
+            this.ROOT.on('mouseout', function () { _this.AUTO_LOCK = false; });
+            this.GROUP.selectAll('path').on('mouseover', function (d) {
+                if (_this.SELECTED)
+                    return;
+                _this.select(d, true);
+            });
+            // .attr('d', d => this.project.drawArea(path, d))
+            // this.autoPlay();
+            setTimeout(function () { return _this.autoPlay(); }, 33);
+            window.setInterval(function () { return _this.autoPlay(); }, typeof autoPlay == 'number' ? autoPlay : 5000);
+        }
     };
+    AreaDrawer.prototype.autoPlay = function () {
+        if (this.AUTO_LOCK || this.SELECTED)
+            return;
+        var areaName = this.AUTO_STATUS + '';
+        var item = null;
+        while (areaName == this.AUTO_STATUS) {
+            var feature = (0, DataUtil_1.sample)(this.project.features());
+            areaName = feature.properties.name;
+            item = feature;
+        }
+        this.select(item, true);
+        this.AUTO_STATUS = areaName;
+    };
     AreaDrawer.prototype.onSelect = function (fn) {
@@ -121,17 +150,19 @@ this.SELECT_FN = fn;
         var project = this.project.getRoot();
-        this.ROOT.select('#area-' + id).insert('circle', 'text')
+        var CIRCLE = this.ROOT.select('#area-' + id).insert('circle', 'text')
             .attr('class', '_region_point')
             .attr('cx', project(cp)[0])
             .attr('cy', project(cp)[1])
-            .attr('r', 10)
-            .append('animate')
-            .attr('attributeName', 'r')
-            .attr('attributeType', 'xml')
-            .attr('form', 10)
-            .attr('to', 25)
-            .attr('begin', '0s')
-            .attr('dur', '1s')
-            .attr('repeatCount', 'indefinite');
+            .attr('r', 10);
+        setTimeout(function () {
+            CIRCLE.append('animate')
+                .attr('attributeName', 'r')
+                .attr('attributeType', 'xml')
+                .attr('form', 10)
+                .attr('to', 25)
+                .attr('begin', '0s')
+                .attr('dur', '1s')
+                .attr('repeatCount', 'indefinite');
+        }, 33);
     };
-    AreaDrawer.prototype.select = function (item) {
+    AreaDrawer.prototype.select = function (item, isAuto) {
         var _this = this;
@@ -151,3 +182,3 @@ this.CONTAINER.classed('_geo_active', false);
         }
-        this.SELECT_FN(item);
+        this.SELECT_FN(item, isAuto);
         this.CONTAINER.classed('_geo_active', true);
@@ -213,2 +244,3 @@ this.GROUP.classed('_region_selected', function (d) {
         if (this.props.onClick) {
+            // const self = this;
             this.GROUP.on('click', function (evt, _d) {
@@ -233,7 +265,9 @@ var _a;
                         d = null;
-                        self.select(null);
+                        // self.AUTO_LOCK = false;
+                        self.select(null, false);
                     }
                     else {
+                        // self.AUTO_LOCK = true;
                         self.SELECTED = fullName;
-                        self.select(data);
+                        self.select(data, false);
                     }
@@ -284,3 +318,2 @@ }
             .attr('x', function (d) {
-            console.log(root(d.properties.cp)[0], d.properties);
             if (d.properties.textPX) {
@@ -287,0 +320,0 @@ return root(d.properties.cp)[0] + d.properties.textPX;

Geo/index.js

@@ -190,3 +190,3 @@ "use strict";
                         }
-                        this.areaDrawer = new AreaDrawer_1.AreaDrawer(this.props, this.project, SVG, this.channel);
+                        this.areaDrawer = new AreaDrawer_1.AreaDrawer(this.props, this.project, SVG, this.channel, this.props.autoPlay);
                         if (this.props.lineConf) {
@@ -240,3 +240,3 @@ this.lineDrawer = new LineDrawer_1.LineDrawer(this.props, this.project, SVG, this.channel);
     Geo.prototype.unSelectArea = function () {
-        this.areaDrawer.select(null);
+        this.areaDrawer.select(null, false);
     };
@@ -250,3 +250,9 @@ Geo.prototype.setExtra = function () {
         var _this = this;
-        this.areaDrawer.onSelect(function (item) {
+        this.areaDrawer.onSelect(function (item, isAuto) {
+            if (isAuto) {
+                if (_this.props.onAutoPlay) {
+                    _this.props.onAutoPlay(item.properties.name);
+                }
+                return;
+            }
             if (_this.lineDrawer) {
@@ -253,0 +259,0 @@ _this.lineDrawer.onSelect(item);

Geo/interface.d.ts

@@ -241,2 +241,10 @@ import { VALUE_FORMAT, SINGLE_COLOR, MULTI_COLOR } from '../interface';
     children?: any;
+    /**
+     * 自动播放
+    */
+    autoPlay?: true | number;
+    /**
+     * 自动播放时，触发的事件
+    */
+    onAutoPlay?: (data: any) => void;
 }
@@ -243,0 +251,0 @@ /**

package.json

 {
     "name": "vap-visual",
-    "version": "1.1.4",
+    "version": "1.1.5",
     "description": "vap-visual - A Visual FrameWork base on  d3",
@@ -5,0 +5,0 @@ "main": "index.js",

No alert changes

Improved metrics

Total package byte prevSize

714161

increased by0.28%

Lines of code

16333

increased by0.31%

No dependency changes