jellies-draw 0.1.0

package/src/components/ToolButtons.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="buttons">
+    <tool-button
+      v-for="tool, index in tools"
+      :key="tool"
+      :action="tool"
+      :short-cut="(index + 1) % 10"
+      :is-active="currentTool === tool"
+      @action-applied="applyAction"
+    />
+    <input
+      ref="fileSelector"
+      class="file-selector"
+      type="file"
+      @change="uploadImage"
+    />
+  </div>
+</template>
+<script>
+import ToolButton from './ToolButton.vue'
+import Properties from './functions/properties'
+import Tools from './functions/tools'
+export default {
+  name: 'ToolButtons',
+  components: {
+    ToolButton
+  },
+  props: {
+    hasShortCuts: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted() {
+    document.addEventListener('keydown', this.handleShortCutKey)
+  },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.handleShortCutKey)
+  },
+  data() {
+    return {
+      tools: [
+        'selector',
+        'rectangle',
+        'ellipse',
+        'arrow',
+        'line',
+        'pen',
+        'text',
+        'image',
+        'eraser',
+        'clear'
+      ]
+    }
+  },
+  computed: {
+    currentTool: {
+      get() {
+        return Properties.tool;
+      },
+      set(newTool) {
+        Properties.tool = newTool;
+      }
+    }
+  },
+  watch: {
+    currentTool(newTool) {
+      this.currentTool = newTool;
+    }
+  },
+  methods: {
+    applyAction(action) {
+      if (action === 'image') {
+        this.$refs.fileSelector.click()
+      }
+      if (action === 'clear') {
+        Tools.clear.clear()
+      }
+      this.currentTool = action
+      this.releaseInstantTool()
+    },
+    releaseInstantTool() {
+      if (this.currentTool === 'image' || this.currentTool === 'clear') {
+        setTimeout(() => {
+          this.currentTool = 'selector'
+        }, 300)
+      }
+    },
+    uploadImage(event) {
+      const file = event.target.files[0]
+      Tools.image.add(file)
+      event.target.value = ''
+    },
+    handleShortCutKey(event) {
+      if (this.hasShortCuts && this.currentTool !== 'text') {
+        const key = event.key
+        const index = parseInt(key, 10)
+        if (index >= 0 && index < this.tools.length) {
+          this.applyAction(this.tools[(index + 9) % 10])
+        }
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+.buttons {
+  display: flex;
+}
+.file-selector {
+  display: none;
+}
+</style>

package/src/components/functions/canvas.js

@@ -0,0 +1,136 @@
+import Konva from 'konva';
+import Transformer from './transformer';
+import Clipboard from './clipboard';
+import Properties from './properties';
+import Tools from './tools';
+import Histories from './histories';
+export default {
+  layer: null,
+  stage: null,
+  container: null,
+  resizeHandler: null,
+  keydownHandler: null,
+  pointerDownHandler: null,
+  pointerMoveHandler: null,
+  pointerUpHandler: null,
+  clickHandler: null,
+  isEditingText: false,
+  isDrawing: false,
+  isRecording: false,
+  initialize(canvas, container) {
+    this.container = container
+    this.generateEventHandlers()
+    window.addEventListener('resize', this.resizeHandler);
+    this.stage = new Konva.Stage({
+      container: canvas,
+      width: container.offsetWidth,
+      height: container.offsetHeight
+    });
+    this.layer = new Konva.Layer();
+    this.stage.add(this.layer);
+    document.addEventListener('keydown', this.keydownHandler);
+    Transformer.initialize();
+    Histories.record();
+    this.stage.on('pointerdown', this.pointerDownHandler);
+    this.stage.on('pointermove', this.pointerMoveHandler);
+    this.stage.on('pointerup', this.pointerUpHandler);
+    this.stage.on('click tap', this.clickHandler);
+  },
+  generateEventHandlers() {
+    this.resizeHandler = this._handleResize.bind(this);
+    this.keydownHandler = this._handleKeydown.bind(this);
+    this.pointerDownHandler = this.handlePointerDown.bind(this);
+    this.pointerMoveHandler = this.handlePointerMove.bind(this);
+    this.pointerUpHandler = this.handlePointerUp.bind(this);
+    this.clickHandler = this.handleClick.bind(this);
+  },
+  clear() {
+    this.layer.destroyChildren();
+    Transformer.initialize();
+  },
+  destroy() {
+    this.stage.off('pointerdown', this.pointerDownHandler);
+    this.stage.off('pointermove', this.pointerMoveHandler);
+    this.stage.off('pointerup', this.pointerUpHandler);
+    this.stage.off('click tap', this.clickHandler);
+    document.removeEventListener('keydown', this.keydownHandler);
+    this.stage.clear()
+    this.stage = null;
+    window.removeEventListener('resize', this.resizeHandler);
+  },
+  _handleResize() {
+    if (this.stage) {
+      this.stage.width(this.container.offsetWidth);
+      this.stage.height(this.container.offsetHeight);
+      this.stage.batchDraw();
+    }
+  },
+  _handleKeydown(event) {
+    if (event.key === 'Escape') {
+      Transformer.deselectAllNodes();
+    } else if (event.key === 'Backspace') {
+      Transformer.removeSelectedNodes();
+    } else if (event.ctrlKey || event.metaKey) {
+      if (!this.isEditingText) {
+        this._handleKeyShortCuts(event);
+      }
+    }
+  },
+  _handleKeyShortCuts(event) {
+    event.preventDefault();
+    if (event.key === 'c') {
+      Clipboard.copy();
+    } else if (event.key === 'x') {
+      Clipboard.cut();
+    } else if (event.key === 'v') {
+      Clipboard.paste();
+    } else if (event.key === 'a') {
+      Transformer.selectAllNodes();
+    } else if (event.key === 'z' || event.key === 'Z') {
+      if (event.shiftKey) {
+        Histories.redo()
+      } else {
+        Histories.undo()
+      }
+    }
+  },
+  handlePointerDown(event) {
+    if (Properties.tool === 'selector') {
+      if (event.target !== this.stage) {
+        return;
+      }
+    }
+    Tools[Properties.tool].show(event.evt)
+  },
+  handlePointerMove(event) {
+    if (Properties.tool !== 'clear') {
+      Tools[Properties.tool].change(event.evt)
+    }
+  },
+  handlePointerUp(event) {
+    Tools[Properties.tool].finish()
+    if (this.isDrawing || this.isEditingText) {
+      Histories.record()
+    }
+    this.isDrawing = false
+    this.isEditingText = false
+  },
+  handleClick(event) {
+    const metaPressed = event.evt.shiftKey || event.evt.ctrlKey || event.evt.metaKey;
+    const targetNode = event.target;
+    if (Properties.isUsingDrawingTool) {
+      return;
+    }
+    if (Tools.selector.isSelecting()) {
+      return;
+    }
+    if (!targetNode.hasName('node')) {
+      return;
+    }
+    if (targetNode === this.stage) {
+      Transformer.deselectAllNodes();
+      return;
+    }
+    Transformer.selectNode(targetNode, metaPressed);
+  }
+}

package/src/components/functions/clipboard.js

@@ -0,0 +1,32 @@
+import Canvas from './canvas';
+import Transformer from './transformer';
+import Tools from './tools';
+export default {
+  copiedNodes: [],
+  copy() {
+    this.copiedNodes = Transformer.copySelectedNodes();
+  },
+  cut() {
+    this.copy();
+    Transformer.removeSelectedNodes();
+  },
+  paste() {
+    if (this.copiedNodes) {
+      this.copiedNodes.forEach((node) => {
+        node.x(node.x() + 10);
+        node.y(node.y() + 10);
+        this._addEventsToCopiedNode(node);
+        Canvas.layer.add(node);
+      });
+      Transformer.selectNodes(this.copiedNodes);
+      this.copiedNodes = Transformer.copySelectedNodes();
+    }
+  },
+  _addEventsToCopiedNode(node) {
+    if (node.getClassName() === 'Text') {
+      Tools.text.bindEvents(node);
+    } else if (node.getClassName() === 'Arrow') {
+      Tools.arrow.bindEvents(node);
+    }
+  }
+}

package/src/components/functions/histories.js

@@ -0,0 +1,53 @@
+import Vue from 'vue'
+import Konva from 'konva'
+import Canvas from './canvas'
+import Transformer from './transformer'
+import Tools from './tools'
+import Properties from './properties'
+export default new Vue({
+  data() {
+    return {
+      histories: [],
+      historyIndex: -1
+    }
+  },
+  methods: {
+    record() {
+      if (Canvas.isRecording) {
+        return
+      }
+      Canvas.isRecording = true
+      this.histories.splice(this.historyIndex + 1)
+      this.histories.push(Canvas.layer.toJSON())
+      this.historyIndex++
+      this.$nextTick(() => {
+        Canvas.isRecording = false
+      })
+    },
+    undo() {
+      if (this.historyIndex > 0) {
+        this.historyIndex--
+        this.refreshNodes()
+      }
+    },
+    redo() {
+      if (this.historyIndex < this.histories.length - 1) {
+        this.historyIndex++
+        this.refreshNodes()
+      }
+    },
+    refreshNodes() {
+      Canvas.layer.destroyChildren();
+      const latestNodes = Konva.Node.create(this.histories[this.historyIndex]).find('.node')
+      latestNodes.forEach(({ attrs }) => {
+        if (attrs.nodeType === 'image') {
+          Tools[attrs.nodeType].generate(attrs)
+        } else {
+          Canvas.layer.add(Tools[attrs.nodeType].generate(attrs))
+        }
+      })
+      Transformer.initialize()
+      Properties.refreshNodesStatus()
+    }
+  }
+})

package/src/components/functions/properties.js

@@ -0,0 +1,126 @@
+import Vue from 'vue'
+import Canvas from './canvas'
+import Transformer from './transformer'
+
+export default new Vue({
+  data() {
+    return {
+      fillColorPicked: 'transparent',
+      strokeColorPicked: '#000000',
+      fontSizeSelected: 20,
+      strokeWidthSelected: 4,
+      toolSelected: 'selector',
+      isTextNodesSelected: false,
+      isMassivelyAssigningProperties: false
+    }
+  },
+  computed: {
+    fillColor: {
+      get() {
+        return this.fillColorPicked;
+      },
+      set(newFillColor) {
+        this.fillColorPicked = newFillColor;
+        if (!this.isMassivelyAssigningProperties) {
+          Transformer.setPropertiesOfSelectedNodes({
+            fill: newFillColor
+          });
+        }
+      }
+    },
+    strokeColor: {
+      get() {
+        return this.strokeColorPicked;
+      },
+      set(newStrokeColor) {
+        this.strokeColorPicked = newStrokeColor;
+        if (!this.isMassivelyAssigningProperties) {
+          Transformer.setPropertiesOfSelectedNodes({
+            stroke: newStrokeColor
+          });
+        }
+      }
+    },
+    fontSize: {
+      get() {
+        return this.fontSizeSelected;
+      },
+      set(newFontSize) {
+        this.fontSizeSelected = newFontSize;
+        if (!this.isMassivelyAssigningProperties) {
+          Transformer.setPropertiesOfSelectedNodes({
+            fontSize: parseInt(newFontSize)
+          });
+        }
+      }
+    },
+    strokeWidth: {
+      get() {
+        return this.strokeWidthSelected;
+      },
+      set(newStrokeWidth) {
+        this.strokeWidthSelected = newStrokeWidth;
+        if (!this.isMassivelyAssigningProperties) {
+          Transformer.setPropertiesOfSelectedNodes({
+            strokeWidth: parseInt(newStrokeWidth)
+          });
+        }
+      }
+    },
+    tool: {
+      get() {
+        return this.toolSelected;
+      },
+      set(newTool) {
+        this.toolSelected = newTool;
+      }
+    },
+    isUsingText() {
+      return this.tool === 'text' || this.isTextNodesSelected;
+    },
+    isUsingDrawingTool() {
+      return (this.tool !== 'selector');
+    }
+  },
+  watch: {
+    toolSelected() {
+      this.refreshNodesStatus()
+    }
+  },
+  methods: {
+    bindMoveCursor(shape) {
+      if (this.isUsingDrawingTool) {
+        shape.off('mouseenter', this.handleSwitchToMoveCursor);
+        shape.off('mouseleave', this.handleClearMoveCursor);
+      } else {
+        shape.on('mouseenter', this.handleSwitchToMoveCursor);
+        shape.on('mouseleave', this.handleClearMoveCursor);
+      }
+    },
+    handleSwitchToMoveCursor(){
+      Canvas.stage.container().style.cursor = 'move';
+    },
+    handleClearMoveCursor(){
+      Canvas.stage.container().style.cursor = null;
+    },
+    setProperties(properties) {
+      this.isMassivelyAssigningProperties = true;
+      Object.keys(properties).forEach(property => {
+        this[property] = properties[property];
+      });
+      this.isMassivelyAssigningProperties = false;
+    },
+    refreshNodesStatus() {
+      if (Canvas.layer) {
+        Canvas.layer.children.forEach(shape => {
+          shape.draggable(!this.isUsingDrawingTool);
+          this.bindMoveCursor(shape);
+          if (this.isUsingDrawingTool || this.isUsingText) {
+            Transformer.deselectAllNodes();
+            this.handleClearMoveCursor();
+          }
+        });
+      }
+    }
+  }
+})

package/src/components/functions/tools/arrow.js

@@ -0,0 +1,70 @@
+import Konva from 'konva'
+import Properties from '../properties'
+import Canvas from '../canvas'
+import Histories from '../histories'
+export default {
+  temporalShape: null,
+  startX: 0,
+  startY: 0,
+  show({ offsetX, offsetY }) {
+    Canvas.isDrawing = true;
+    this.startX = offsetX
+    this.startY = offsetY
+    const strokeWidth = Properties.strokeWidth
+    const pointerWidth = Math.pow(Properties.strokeWidth, 2) / 2
+    const pointerLength = Math.pow(Properties.strokeWidth, 2) / 2
+    const stroke = Properties.strokeColor
+    const newArrow = this.generate({ 
+      points: [offsetX, offsetY, offsetX, offsetY],
+      stroke,
+      strokeWidth,
+      pointerWidth,
+      pointerLength
+    })
+    this.temporalShape = newArrow
+    Canvas.layer.add(this.temporalShape)
+  },
+  change({ offsetX, offsetY }) {
+    if (Canvas.isDrawing) {
+      this.temporalShape.points([this.startX, this.startY, offsetX, offsetY]);
+    }
+  },
+  finish() {
+    Properties.tool = 'selector'
+    this.temporalShape = null
+  },
+  bindEvents(newArrow) {
+    newArrow.off('transform')
+    newArrow.off('transformend')
+    newArrow.off('dragend')
+    newArrow.on('transform', () => {
+      const pointerWidth = Math.pow(newArrow.strokeWidth(), 2) / 2
+      const pointerLength = Math.pow(newArrow.strokeWidth(), 2) / 2
+      const transformScale = newArrow.getAbsoluteScale().x
+      newArrow.pointerWidth(pointerWidth / transformScale);
+      newArrow.pointerLength(pointerLength / transformScale);
+    })
+    newArrow.on('transformend', Histories.record)
+    newArrow.on('dragend', Histories.record)
+  },
+  generate({ x, y, scaleX, scaleY, points, stroke, strokeWidth, pointerWidth, pointerLength }) {
+    const newArrow = new Konva.Arrow({
+      x,
+      y,
+      scaleX,
+      scaleY,
+      points,
+      stroke,
+      strokeWidth,
+      pointerWidth,
+      pointerLength,
+      name: 'node',
+      nodeType: 'arrow',
+      lineCap: 'round',
+      fillEnabled: false,
+      strokeScaleEnabled: false
+    })
+    this.bindEvents(newArrow)
+    return newArrow
+  }
+}

package/src/components/functions/tools/clear.js

@@ -0,0 +1,8 @@
+import Canvas from '../canvas'
+import Histories from '../histories'
+export default {
+  clear() {
+    Canvas.clear()
+    Histories.record()
+  }
+}

package/src/components/functions/tools/ellipse.js

@@ -0,0 +1,73 @@
+import Konva from 'konva'
+import Properties from '../properties'
+import Canvas from '../canvas'
+import Histories from '../histories'
+export default {
+  temporalShape: null,
+  startX: 0,
+  startY: 0,
+  show({ offsetX, offsetY }) {
+    Canvas.isDrawing = true;
+    this.startX = offsetX
+    this.startY = offsetY
+    const fill = Properties.fillColor
+    const stroke = Properties.strokeColor
+    const strokeWidth = Properties.strokeWidth
+    const newEllipse = this.generate({
+      x: offsetX,
+      y: offsetY,
+      radiusX: 1,
+      radiusY: 1,
+      fill,
+      stroke,
+      strokeWidth
+    })
+    this._checkEllipseAndChangeToVertex(newEllipse)
+    this.temporalShape = newEllipse
+    Canvas.layer.add(this.temporalShape)
+  },
+  change({ offsetX, offsetY }) {
+    if (Canvas.isDrawing) {
+      this.temporalShape.x((offsetX + this.startX) / 2);
+      this.temporalShape.y((offsetY + this.startY) / 2);
+      this.temporalShape.radiusX(Math.abs(offsetX - this.startX) / 2);
+      this.temporalShape.radiusY(Math.abs(offsetY - this.startY) / 2);
+    }
+  },
+  finish() {
+    Properties.tool = 'selector'
+    this.temporalShape = null
+  },
+  _checkEllipseAndChangeToVertex(newEllipse) {
+    setTimeout(() => {
+      if (!this.temporalShape && newEllipse.radiusX() < 5 && newEllipse.radiusY() < 5) {
+        newEllipse.radiusX(15)
+        newEllipse.radiusY(15)
+      }
+    }, 200)
+  },
+  generate({ x, y, radiusX, radiusY, scaleX, scaleY, fill, stroke, strokeWidth }) {    
+    const newEllipse = new Konva.Ellipse({
+      x,
+      y,
+      radiusX,
+      radiusY,
+      scaleX,
+      scaleY,
+      fill,
+      stroke,
+      strokeWidth,
+      name: 'node',
+      nodeType: 'ellipse',
+      strokeScaleEnabled: false
+    })
+    this.bindEvents(newEllipse)
+    return newEllipse
+  },
+  bindEvents(newEllipse) {
+    newEllipse.off('transformend')
+    newEllipse.off('dragend')
+    newEllipse.on('transformend', Histories.record)
+    newEllipse.on('dragend', Histories.record)
+  }
+}

package/src/components/functions/tools/eraser.js

@@ -0,0 +1,51 @@
+import Konva from 'konva'
+import Properties from '../properties'
+import Canvas from '../canvas'
+export default {
+  temporalCurveTrajectory: null,
+  temporalShape: null,
+  startX: 0,
+  startY: 0,
+  show({ offsetX, offsetY }) {
+    Canvas.isDrawing = true;
+    this.startX = offsetX
+    this.startY = offsetY
+    this.temporalCurveTrajectory = null
+    const strokeWidth = Properties.strokeWidth
+    const newCurve = new Konva.Line({
+      points: [offsetX, offsetY, offsetX, offsetY],
+      stroke: 'transparent',
+      strokeWidth,
+      name: 'node',
+      bezier: true,
+      lineCap: 'round',
+      strokeScaleEnabled: false
+    });
+    this.temporalShape = newCurve
+    Canvas.layer.add(this.temporalShape);
+  },
+  change({ offsetX, offsetY }) {
+    if (Canvas.isDrawing) {
+      if (!this.temporalCurveTrajectory) {
+        this.temporalCurveTrajectory = [this.startX, this.startY]
+      }
+      this.temporalCurveTrajectory.push(offsetX, offsetY)
+      this.temporalShape.points(this.temporalCurveTrajectory);
+      Canvas.stage.find('.node')
+        .filter(node => this._hasIntersectionOnEraserCurve(node))
+        .forEach(node => node.opacity(0.1));
+    }
+  },
+  finish() {
+    Canvas.stage.find('.node')
+      .filter(node => this._hasIntersectionOnEraserCurve(node))
+      .forEach(node => node.remove())
+    this.temporalShape = null
+  },
+  _hasIntersectionOnEraserCurve(node) {
+    return Konva.Util.haveIntersection(
+      this.temporalShape.getClientRect(),
+      node.getClientRect()
+    );
+  }
+}