jellies-draw 0.1.0

package/src/components/functions/transformer.js

@@ -0,0 +1,214 @@
+import Konva from 'konva'
+import Canvas from './canvas'
+import Properties from './properties'
+import Histories from './histories'
+export default {
+  transformer: null,
+  linearTransformer: {
+    start: null,
+    end: null,
+    node: null
+  },
+  initialize() {
+    this.transformer = new Konva.Transformer();
+    Canvas.layer.add(this.transformer);
+  },
+  copySelectedNodes() {
+    const selectedNodes = this._nodes().map(node => node.clone());
+    return selectedNodes;
+  },
+  removeSelectedNodes() {
+    this._nodes().forEach((node) => node.destroy());
+    this.deselectAllNodes();
+  },
+  setPropertiesOfSelectedNodes(properties) {
+    const selectedNodes = this._nodes().slice();
+    selectedNodes.forEach((node) => {
+      Object.keys(properties).forEach((key) => {
+        if (node.getClassName() === 'Text') {
+          if (key === 'stroke') {
+            node.setAttr('fill', properties[key]);
+          } else if (key !== 'fill') {
+            node.setAttr(key, properties[key]);
+          }
+        } else {
+          node.setAttr(key, properties[key]);
+        }
+      });
+    });
+  },
+  selectNode(targetNode, isAppending = false) {
+    const isSelected = this._nodes().indexOf(targetNode) >= 0 || this.linearTransformer.node === targetNode;
+    if (!isAppending && !isSelected) {
+      this.selectNodes([targetNode]);
+    } else if (isAppending && isSelected) {
+      const nodes = this._nodes().slice();
+      if (this.linearTransformer.node) {
+        nodes.push(this.linearTransformer.node);
+      }
+      nodes.splice(nodes.indexOf(targetNode), 1);
+      this.selectNodes(nodes);
+    } else if (isAppending && !isSelected) {
+      if (this.linearTransformer.node) {
+        this.selectNodes([this.linearTransformer.node].concat([targetNode]));
+        this._removeLinearTransformer();
+      } else {
+        this.selectNodes(this._nodes().concat([targetNode]));
+      }
+    }
+  },
+  selectNodes(targetNodes) {
+    this._nodes([]);
+    if (this._hasOnlyLinearNode(targetNodes)) {
+      this._selectLinearNode(targetNodes[0]);
+    } else {
+      this._nodes(targetNodes);
+      if (targetNodes.length === 1) {
+        this.transformer.enabledAnchors(['top-left', 'top-center', 'top-right', 'middle-right', 'middle-left', 'bottom-left', 'bottom-center', 'bottom-right']);
+      } else {
+        this.transformer.enabledAnchors(['top-left', 'top-right', 'bottom-left', 'bottom-right']);
+      }
+      Properties.isTextNodesSelected = this._hasSelectedOnlyTextNodes()
+    }
+    Properties.setProperties(this._getCommonPropertiesOfSelectedNodes());
+  },
+  deselectAllNodes() {
+    this.selectNodes([]);
+    if (this.linearTransformer.node) {
+      this.linearTransformer.node.destroy();
+      this._removeLinearTransformer()
+    }
+  },
+  selectAllNodes() {
+    this.selectNodes(Canvas.stage.find('.node'));
+  },
+  _getCommonPropertiesOfSelectedNodes() {
+    const nodes = this._nodes();
+    if (nodes.length === 0) {
+      return {};
+    }
+    const firstNode = nodes[0];
+    const commonProperties = {};
+
+    Object.keys(firstNode.attrs).forEach((property) => {
+      const firstValue = firstNode.attrs[property];
+      const isCommon = nodes.every((node) => {
+        return node.attrs[property] === firstValue;
+      });
+      if (isCommon) {
+        if (property === 'fill') {
+          if (!this._hasSelectedOnlyTextNodes()) {
+            commonProperties.fillColor = firstValue;
+          }
+        } else if (property === 'stroke') {
+          commonProperties.strokeColor = firstValue;
+        } else if (property === 'fontSize') {
+          commonProperties.fontSize = firstValue;
+        } else if (property === 'strokeWidth') {
+          commonProperties.strokeWidth = firstValue;
+        }
+      }
+    });
+    return commonProperties;
+  },
+  _selectLinearNode(node) {
+    node.on('dragmove', () => {
+      if (node === this.linearTransformer.node) {
+        this._removeLinearTransformer()
+        this._showLinearTransformer(node)
+      }
+    });
+    this._showLinearTransformer(node)
+  },
+  _showLinearTransformer(node) {
+    const updateLinearNode = (() => {
+      const negateNodeTransform = node.getAbsoluteTransform().copy().invert();
+      const start = negateNodeTransform.point({
+        x: this.linearTransformer.start.x(),
+        y: this.linearTransformer.start.y()
+      });
+      const end = negateNodeTransform.point({
+        x: this.linearTransformer.end.x(),
+        y: this.linearTransformer.end.y()
+      });
+      node.points([start.x, start.y, end.x, end.y]);
+    })
+    const nodeTransform = node.getAbsoluteTransform();
+    const points = node.getPoints();
+    const start = nodeTransform.point({x: points[0], y: points[1]});
+    const end = nodeTransform.point({x: points[2], y: points[3]});
+    this.linearTransformer.start = new Konva.Circle({
+      x: start.x,
+      y: start.y,
+      radius: 5,
+      strokeWidth: 1,
+      stroke: '#1ca5f8',
+      fill: '#fff',
+      draggable: true
+    })
+    this.linearTransformer.end = new Konva.Circle({
+      x: end.x,
+      y: end.y,
+      radius: 5,
+      strokeWidth: 1,
+      stroke: '#1ca5f8',
+      fill: '#fff',
+      draggable: true
+    })
+    this.linearTransformer.node = node
+    this.linearTransformer.start.on('dragmove', updateLinearNode)
+    this.linearTransformer.end.on('dragmove', updateLinearNode)
+    this.linearTransformer.start.on('dragend', Histories.record)
+    this.linearTransformer.end.on('dragend', Histories.record)
+    Canvas.layer.add(this.linearTransformer.start)
+    Canvas.layer.add(this.linearTransformer.end)
+  },
+  _removeLinearTransformer() {
+    if (this.linearTransformer.start) {
+      this.linearTransformer.start.destroy()
+    }
+    if (this.linearTransformer.end) {
+      this.linearTransformer.end.destroy()
+    }
+    this.linearTransformer.start = null
+    this.linearTransformer.end = null
+    this.linearTransformer.node = null
+  },
+  _nodes(newNodes = undefined) {
+    if (newNodes !== undefined) {
+      if (newNodes.length === 0) {
+        this._removeLinearTransformer();
+        Properties.isTextNodesSelected = false;
+      }
+      this.transformer.nodes(newNodes);
+      this.transformer.moveToTop();
+    } else {
+      if (this.linearTransformer.node) {
+        return this.transformer.nodes().concat([this.linearTransformer.node]);
+      }
+      return this.transformer.nodes();
+    }
+    return [];
+  },
+  _hasOnlyLinearNode(nodes) {
+    if (nodes.length !== 1) {
+      return false;
+    }
+    const node = nodes[0];
+    return (node.className === 'Arrow' ||
+      node.className === 'Line' && node.getPoints().length === 4);
+  },
+  _hasSelectedOnlyTextNodes() {
+    const nodes = this._nodes();
+    if (nodes.length > 0) {
+      let hasOnlyTextNodes = true;
+      nodes.forEach((node) => {
+        if (node.getClassName() !== 'Text') {
+          hasOnlyTextNodes = false;
+        }
+      });
+      return hasOnlyTextNodes;
+    }
+    return false;
+  }
+}

package/src/index.js

@@ -0,0 +1,9 @@
+import DrawingCanvas from './components/DrawingCanvas.vue'
+import ToolButtons from './components/ToolButtons.vue'
+import PropertyPickers from './components/PropertyPickers.vue'
+
+export default {
+  DrawingCanvas,
+  PropertyPickers,
+  ToolButtons
+}

package/src/main.js

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App)
+}).$mount('#app')

package/webpack.config.js

@@ -0,0 +1,39 @@
+const path = require("path");
+module.exports = {
+    entry: "./src/index.js",//入口文件
+    output: {
+        path: path.resolve(__dirname, './dist'),//输出路径
+        publicPath: '/dist/',
+        filename: 'jellies-draw.js',
+        libraryTarget: 'umd',
+        umdNamedDefine: true
+    },
+    module: {
+        rules: [{
+                test: /\.vue$/,
+                loader: 'vue-loader'
+            },
+            {
+                test: /\.(less|css)$/,
+                use: [
+                    { loader: "style-loader" },
+                    { loader: "css-loader" },
+                    { loader: "less-loader" }
+                ]
+            },
+            {
+                test: /\.js$/,
+                exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
+                loader: 'babel-loader'
+            },
+            {
+                test: /\.(png|jpg|gif|ttf|svg|woff|woff2|eot)$/,
+                loader: 'url-loader',
+                query: {
+                    limit: 30000,
+                    name: '[name].[ext]?[hash]'
+                }
+            }
+        ]
+    },
+}