feat: 完成节点属性渲染

package.json

@@ -72,6 +72,7 @@
     "jquery": "^3.3.1",
     "jquery-ui": "^1.12.1",
     "lodash.merge": "^4.6.1",
+    "save-svg-as-png": "^1.3.1",
     "uuid": "^3.2.1",
     "vue-scrollbars": "^1.0.5"
   },

postcss.config.js

@@ -1,8 +1,6 @@
 const cssnext = require('postcss-cssnext');
-const autoprefixer = require('autoprefixer');
 module.exports = {
     plugins: [
-        cssnext(),
-        autoprefixer()
+        cssnext()
     ]
 };

src/TODOs.txt

@@ -1,4 +1,2 @@
-1. 浏览器兼容性（IE10+\FF\Chrome）
 2. 添加API：检测图中是否存在环
 3. 需要完成消息提示交互：自动轮播、上一条、下一条、鼠标移入时暂定自动轮播（移出后开启）
-4. 实现点击节点后，展示节点属性面板

src/demo/SourceNodeType.js

@@ -15,7 +15,12 @@ class SourceNodeType extends  NodeType {
     }
     constructor(){
         super();
-        this.props = {};
+        this.props = {
+            id: '',
+            name: '',
+            script: '',
+            fields: []
+        };
         this.nodeTypeId = SourceNodeType.id();
         this.color = '#A6BBCE';
         this.label = '开始';

src/demo/SourceNodeType.vue

@@ -1,7 +1,16 @@
 <template>
     <el-row class="source-node-type">
-        <el-row class="source-box scrollbar-dynamic" v-bar>
-            I m source type... {{node.nodeTypeId}}
+        <el-row class="source-box">
+            <el-form
+                :model="node.props"
+                :rules="rules"
+                :ref="node.nodeId"
+                label-width="100px"
+                class="form">
+                <el-form-item label="数据流名称" prop="name">
+                    <el-input v-model="node.props.name"></el-input>
+                </el-form-item>
+            </el-form>
         </el-row>
     </el-row>
 </template>
@@ -10,7 +19,11 @@
     export default {
         props: ['node'],
         data(){
-            return {};
+            return {
+                rules: {
+                    name: {}
+                }
+            };
         }
     }
 </script>

src/demo/layout.vue

@@ -3,6 +3,7 @@
         <node-chart-flow
             @registerNodeType="registerNodeType"
             :data="nodes"
+            scrollbarStyle="native"
             :showGrid="true"
             :readonly="false"
             @clickedNode="clickedNode"

src/editor/Component.vue

@@ -1,8 +1,26 @@
 <template>
     <div class="dt-editor">
         <div class="dt-palette"></div>
-        <div class="dt-workspace">
-            <div class="dt-canvas scrollbar-dynamic" v-bar></div>
+        <div :class="[
+            'dt-workspace',
+            scrollbarStyle === SCROLLBARS.MAP ? 'is-scroll-page-map':
+            scrollbarStyle === SCROLLBARS.NATIVE ? 'is-scroll-native':
+            scrollbarStyle === SCROLLBARS.PRETTY ? 'is-scroll-pretty':''
+            ]">
+            <scrollbar v-if="scrollbarStyle === SCROLLBARS.MAP" @onUpdate="onUpdate4PageMap" @onInit="onInit4PageMap">
+                <div slot="pageMap" class="scroll-element_outer">
+                    <img id="bg_map" width="100%" height="100%" class="bg-map"/>
+                    <div class="scroll-element_size">
+                        <div class="scroll-element_track"></div>
+                        <div class="scroll-bar"></div>
+                    </div>
+                </div>
+                <div slot="content" class="scrollbar-map">
+                    <div class="dt-canvas"></div>
+                </div>
+            </scrollbar>
+            <div v-if="scrollbarStyle === SCROLLBARS.NATIVE" class="dt-canvas"></div>
+            <div v-if="scrollbarStyle === SCROLLBARS.PRETTY" class="dt-canvas scrollbar-dynamic" v-bar></div>
             <footer class="dt-footer"></footer>
         </div>
         <div class="divider-line"></div>
@@ -19,19 +37,21 @@
 <script type="text/ecmascript-6">
     import Vue from 'vue'
     import Editor from './Editor.js'
+    import Constant from './Constant.js'
 
     export default {
         name: 'NodeChartFlow',
         props: {
             data: {type:Array, default: []},
             registerNodeType: {type: Function},
             readonly: {type: Boolean, default:false}, // readonly只有在初始化的时候传入才有效
-            showTips: {type: Boolean, default:true},
+            showTips: {type: Boolean, default:false},
             intervalTips: {type: Number, default: 3000},
             size: {type: Number, default: 5000},
             showGrid: {type: Boolean, default:true},
             gapGrid: {type: Number, default:20},
             strokeColorGrid: {type: String, default:'#eee'},
+            scrollbarStyle: {type:String, default:Constant.SCROLLBAR_NATIVE},
         },
         created(){
             let thiz = this;
@@ -40,6 +60,7 @@
                 data: thiz.data,
                 settings: {
                     size: thiz.size,
+                    scrollbarStyle: thiz.scrollbarStyle,
                     tips: {
                         enable: thiz.showTips,
                         interval: thiz.intervalTips
@@ -53,7 +74,7 @@
             };
             thiz.$nextTick(function () {
                 thiz.editor = new Editor(thiz.$el, config);
-                // window.editor = thiz.editor;
+                window.editor = thiz.editor;
                 thiz.$emit('registerNodeType', thiz.editor);
                 thiz.$nextTick(function () {
                     // 注册组件
@@ -77,6 +98,10 @@
                 thiz.editor.on('added-node', function (args) {
                     thiz.$emit('addedNode', args)
                 });
+                thiz.editor.on('pasted-node', function ({pastedNodes}=args) {
+                    console.log(pastedNodes.map(node=>node.datum()));
+                    thiz.$emit('pastedNode', pastedNodes)
+                });
                 thiz.editor.on('clicked-node', function ({node}=args) {
                     let datum = node.datum();
                     let nodeTypeId = datum.nodeTypeId;
@@ -88,15 +113,76 @@
         },
         destroyed(){
             this.editor.destroy();
+            window.cancelAnimationFrame(this.timer);
         },
         data(){
             return {
                 editor: null, // Editor实例
+                scrollbar: null, // page-map滚动条实例
+                timer: null, // 定时器引用
                 compt: { // 当前要显示的组件
                     id: null,
                     node: null
                 },
+                SCROLLBARS: {
+                    MAP: Constant.SCROLLBAR_MAP,
+                    PRETTY: Constant.SCROLLBAR_PRETTY,
+                    NATIVE: Constant.SCROLLBAR_NATIVE
+                }
             };
+        },
+        methods: {
+            onInit4PageMap(){
+                // 开启定时任务刷新page-map
+                let thiz = this;
+                thiz.timer = setInterval(refreshPageMap.call(thiz), 10000);
+            },
+            refreshPageMap(){
+                let thiz = this;
+                let scrollbar = thiz.scrollbar;
+                window.requestAnimationFrame(function () {
+                    let ret = thiz.getInscribedArea(100, 100, scrollbar.scrollx.size, scrollbar.scrolly.size);
+                    scrollbar.scrollx.scroll.style.width = `${ret.w}px`;
+                    scrollbar.scrolly.scroll.style.height = `${ret.h}px`;
+                    setTimeout(async function () {
+                        let data = await thiz.editor.screenshot();
+                        document.querySelector('#bg_map').src = data;
+                    }, 1);
+                });
+            },
+            onUpdate4PageMap(scrollbar, container){
+                let thiz = this;
+                thiz.scrollbar = scrollbar;
+                thiz.refreshPageMap(scrollbar);
+            },
+            /**
+             * Get inscribed area size
+             *
+             * @param int oW outer width
+             * @param int oH outer height
+             * @param int iW inner width
+             * @param int iH inner height
+             * @param bool R resize if smaller
+             */
+            getInscribedArea (oW, oH, iW, iH, R){
+                if(!R && iW < oW && iH < oH){
+                    return {
+                        "h": iH,
+                        "w": iW
+                    };
+                }
+                if((oW / oH) > (iW / iH)){
+                    return {
+                        "h": oH,
+                        "w": Math.round(oH * iW / iH)
+                    }
+                } else {
+                    return {
+                        "h": Math.round(oW * iH / iW),
+                        "w": oW
+                    };
+                }
+            },
         }
     }
 </script>

src/editor/Constant.js

@@ -38,12 +38,16 @@ export default {
     KEY_CODE_ALPHA_C: 67,
     KEY_CODE_ALPHA_V: 86,
     KEY_CODE_ALPHA_A: 65,
+    SCROLLBAR_MAP: 'page-map',
+    SCROLLBAR_NATIVE: 'native',
+    SCROLLBAR_PRETTY: 'pretty',
     EVENT_VALIDATE_FAILED: 'validate-failed', // 校验失败时触发的事件
     EVENT_ADDED_LINE: 'added-line', // 添加连线后触发的事件
     EVENT_ADDED_NODE: 'added-node', // 添加节点后触发的事件
     EVENT_DELETED_LINE: 'deleted-line', // 连线被删除后触发的事件
     EVENT_DELETED_NODE: 'deleted-node', // 节点被删除后触发的事件
     EVENT_CLICKED_NODE: 'clicked-node', // 节点单击事件
+    EVENT_PASTED_NODE: 'pasted-node', // 节点被粘贴事件
     DESC_LIST: [ // 编辑器描述
         '您可以在设定中选择显示或隐藏这些提示。',
         '您可以用 <span class="help-key-block"><span class="help-key">delete</span></span> 删除选择的节点或链接。',

src/editor/Editor.js

@@ -2,6 +2,7 @@
 import $ from 'jquery';
 import NodeType from './NodeType.js';
 import util from './ViewUtil.js';
+import SaveSVGAsPNG from 'save-svg-as-png'
 import Constant from './Constant.js';
 import Events from 'events';
 
@@ -14,6 +15,7 @@ const DEFAULT_CONFIG = {
     data: [],
     settings: {
         size: 5000,
+        scrollbarStyle: 'page-map', // 滚动条风格 - map:pageMap native:原生 pretty:简约风格
         tips: {
             enable: true, // 是否启用tips功能
             interval: 3000, // tip显示间隔
@@ -43,7 +45,11 @@ class Editor extends Events {
         this.$workspace = this.$el.find('.dt-workspace');
         this.$divider = this.$el.find('.divider-line');
         this.$sidebar = this.$el.find('.dt-side-bar');
-        this.$canvas = this.$workspace.find('.dt-canvas .dt-canvas').attr('id', Constant.CANVAS_ID);
+        this.$canvas = this.$workspace.find(
+            config.settings.scrollbarStyle === Constant.SCROLLBAR_PRETTY ?
+            '.dt-canvas .dt-canvas' : '.dt-canvas'
+        );
+        this.$canvas.attr('id', Constant.CANVAS_ID);
 
         this.___svg = null; // 存放d3生成的svg实例
         this.___def = {
@@ -75,16 +81,41 @@ class Editor extends Events {
         util.renderTipBox(thiz);
         setTimeout(function () {
             // 绘制节点
+            config.data.map(node=>{
+                node.isChanged = false;
+                node.isErrored = false;
+                return node;
+            });
             thiz.importData(config.data, false, false);
         }, 10);
     }
 
-    update() {
-
-    }
-
     destroy() {
+        this.config = null;
+        this.___def.CopyedNodes.clear();
+        this.___def.NodeCatagory.clear();
+        this.___def.NodeTypes.clear();
+        this.___def.Relations.clear();
+        this.___def.tips.clear();
+        this.___def = null;
+        this.___svg = null;
+    }
 
+    /**
+     * 生成当前画布截图
+     */
+    screenshot(){
+        let thiz = this;
+        return new Promise((resolve, reject)=>{
+            let settings = thiz.config.settings;
+            let $svg = thiz.$canvas.find('svg').clone();
+            $svg.find('g.dt-c-grid').remove();
+            let width = parseInt($svg.attr('width'));
+            let scale = width / settings.size;
+            SaveSVGAsPNG.svgAsPngUri($svg.get(0), {scale}, function (uri) {
+                resolve(uri);
+            })
+        });
     }
 
     /**
@@ -204,7 +235,6 @@ class Editor extends Events {
      */
     checkCircular() {
         // TODO 判断图中是否有环
-
     }
 
     _setRelation(from, to, line, id) {
@@ -229,6 +259,7 @@ class Editor extends Events {
         return this.___def.Relations;
     }
 
+
     _setCopyedNodes(nodes) {
         this.___def.CopyedNodes = new Set(nodes);
     }

src/editor/NodeType.js

@@ -3,6 +3,10 @@ import Constant from './Constant.js';
 
 class NodeType {
     constructor(config = {}) {
+        // 是否有更改
+        this.isChanged = true;
+        // 是否有错误
+        this.isErrored = true;
         // 节点ID
         this.nodeId = config.nodeId;
         // 坐标