jellies-draw 0.1.0

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

@@ -0,0 +1,74 @@
+import Properties from '../properties'
+import Canvas from '../canvas'
+import Konva from 'konva'
+import Histories from '../histories'
+export default {
+  add(file) {
+    Properties.tool = 'selector'
+    const reader = new FileReader()
+    reader.onload = () => {
+      this.generate({
+        x: 10,
+        y: 10,
+        imageUrl: reader.result,
+        needToRecord: true
+      })
+    }
+    reader.readAsDataURL(file)
+  },
+  bindEvents(newImage) {
+    newImage.off('transformend')
+    newImage.off('dragend')
+    newImage.on('transformend', Histories.record)
+    newImage.on('dragend', Histories.record)
+  },
+  generate({ x, y, scaleX, scaleY, skewX, rotation, imageUrl, needToRecord = false }) {
+    const image = new Image()
+    image.onload = () => {
+      const { width, height } = this.getImageSize(scaleX, scaleY, image)
+      const newImage = new Konva.Image({
+        x,
+        y,
+        width,
+        height,
+        scaleX,
+        scaleY,
+        skewX,
+        rotation,
+        image,
+        imageUrl,
+        name: 'node',
+        nodeType: 'image',
+        draggable: true
+      })
+      this.bindEvents(newImage)
+      Canvas.layer.add(newImage)
+      if (needToRecord) {
+        Histories.record()
+      }
+    }
+    image.src = imageUrl
+  },
+  getImageSize(scaleX, scaleY, image) {
+    if (!scaleX && !scaleY) {
+      return {}
+    }
+    if (image.width > Canvas.stage.width() || image.height > Canvas.stage.height()) {
+      const ratio = image.width / image.height
+      if (image.width > image.height) {
+        return {
+          width: Canvas.stage.width(),
+          height: Canvas.stage.width() / ratio
+        }
+      } 
+      return {
+        width: Canvas.stage.height() * ratio,
+        height: Canvas.stage.height()
+      }
+    }
+    return {
+      width: image.width,
+      height: image.height
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+import Rectangle from './rectangle';
+import Ellipse from './ellipse';
+import Image from './image';
+import Line from './line';
+import Arrow from './arrow';
+import Pen from './pen';
+import Eraser from './eraser';
+import Text from './text';
+import Selector from './selector';
+import Clear from './clear';
+
+export default {
+  rectangle: Rectangle,
+  ellipse: Ellipse,
+  image: Image,
+  line: Line,
+  arrow: Arrow,
+  pen: Pen,
+  eraser: Eraser,
+  text: Text,
+  selector: Selector,
+  clear: Clear
+}

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

@@ -0,0 +1,56 @@
+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 stroke = Properties.strokeColor
+    const strokeWidth = Properties.strokeWidth
+    const newLine = this.generate({ 
+      points: [offsetX, offsetY, offsetX, offsetY],
+      stroke,
+      strokeWidth
+    })
+    this.temporalShape = newLine
+    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
+  },
+  generate({ x, y, scaleX, scaleY, points, stroke, strokeWidth }) {
+    const newLine = new Konva.Line({
+      x,
+      y,
+      scaleX,
+      scaleY,
+      points,
+      stroke,
+      strokeWidth,
+      name: 'node',
+      nodeType: 'line',
+      lineCap: 'round',
+      bezier: false,
+      strokeScaleEnabled: false
+    })
+    this.bindEvents(newLine)
+    return newLine
+  },
+  bindEvents(newLine) {
+    newLine.off('transformend')
+    newLine.off('dragend')
+    newLine.on('transformend', Histories.record)
+    newLine.on('dragend', Histories.record)
+  }
+}

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

@@ -0,0 +1,61 @@
+import Konva from 'konva'
+import Properties from '../properties'
+import Canvas from '../canvas'
+import Histories from '../histories'
+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 stroke = Properties.strokeColor
+    const strokeWidth = Properties.strokeWidth
+    const newCurve = this.generate({ 
+      points: [offsetX, offsetY, offsetX, offsetY],
+      stroke,
+      strokeWidth
+    })
+    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);
+    }
+  },
+  finish() {
+    this.temporalShape = null
+  },
+  generate({ x, y, scaleX, scaleY, points, stroke, strokeWidth }) {
+    const newLine = new Konva.Line({
+      x,
+      y,
+      scaleX,
+      scaleY,
+      points,
+      stroke,
+      strokeWidth,
+      name: 'node',
+      nodeType: 'pen',
+      lineCap: 'round',
+      bezier: false,
+      strokeScaleEnabled: false
+    })
+    this.bindEvents(newLine)
+    return newLine
+  },
+  bindEvents(newLine) {
+    newLine.off('transformend')
+    newLine.off('dragend')
+    newLine.on('transformend', Histories.record)
+    newLine.on('dragend', Histories.record)
+  }
+}

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

@@ -0,0 +1,71 @@
+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 newRectangle = this.generate({
+      x: offsetX, 
+      y: offsetY,
+      width: 1,
+      height: 1,
+      fill,
+      stroke,
+      strokeWidth
+    })
+    this._checkRectangleAndChangeToCell(newRectangle)
+    this.temporalShape = newRectangle
+    Canvas.layer.add(this.temporalShape)
+  },
+  change({ offsetX, offsetY }) {
+    if (Canvas.isDrawing) {
+      this.temporalShape.width(offsetX - this.startX)
+      this.temporalShape.height(offsetY - this.startY)
+    }
+  },
+  finish() {
+    Properties.tool = 'selector'
+    this.temporalShape = null
+  },
+  _checkRectangleAndChangeToCell(newRectangle) {
+    setTimeout(() => {
+      if (!this.temporalShape && newRectangle.width() < 5 && newRectangle.height() < 5) {
+        newRectangle.width(30)
+        newRectangle.height(30)
+      }
+    }, 200)
+  },
+  generate({ x, y, scaleX, scaleY, width, height, fill, stroke, strokeWidth }) {
+    const newRectangle = new Konva.Rect({
+      x,
+      y,
+      scaleX, 
+      scaleY,
+      width,
+      height,
+      fill,
+      stroke,
+      strokeWidth,
+      name: 'node',
+      nodeType: 'rectangle',
+      strokeScaleEnabled: false
+    })
+    this.bindEvents(newRectangle)
+    return newRectangle
+  },
+  bindEvents(newRectangle) {
+    newRectangle.off('transformend')
+    newRectangle.off('dragend')
+    newRectangle.on('transformend', Histories.record)
+    newRectangle.on('dragend', Histories.record)
+  }
+}

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

@@ -0,0 +1,47 @@
+import Konva from 'konva'
+import Canvas from '../canvas'
+import Transformer from '../transformer'
+export default {
+  startX: 0,
+  startY: 0,
+  selector: null,
+  show({ offsetX, offsetY }) {
+    this.selector = new Konva.Rect({
+      fill: 'rgba(176,188,207,0.3)',
+      visible: true,
+      x: offsetX,
+      y: offsetY,
+      width: 0,
+      height: 0
+    });
+    Canvas.layer.add(this.selector);
+    this.startX = offsetX;
+    this.startY = offsetY;
+  },
+  change({ offsetX, offsetY }) {
+    if (this.selector) {
+      this.selector.setAttrs({
+        x: Math.min(this.startX, offsetX),
+        y: Math.min(this.startY, offsetY),
+        width: Math.abs(this.startX - offsetX),
+        height: Math.abs(this.startY - offsetY)
+      });
+    }
+  },
+  finish() {
+    if (this.selector) {
+      Transformer.selectNodes(Canvas.stage.find('.node').filter(node => this._isInSelector(node)));
+      this.selector.destroy();
+      this.selector = null
+    }
+  },
+  isSelecting() {
+    return this.selector !== null
+  },
+  _isInSelector(node) {
+    return Konva.Util.haveIntersection(
+      this.selector.getClientRect(),
+      node.getClientRect()
+    );
+  }
+}

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

@@ -0,0 +1,178 @@
+import Konva from 'konva'
+import Properties from '../properties'
+import Canvas from '../canvas'
+import Transformer from '../transformer'
+import Histories from '../histories'
+export default {
+  temporalText: null,
+  textarea: null,
+  textareaEditingHandler: null,
+  disableTextareaHandler: null,
+  handleTextareaTimer: null,
+  show({ offsetX, offsetY }) {
+    if (!Canvas.isEditingText) {
+      const newText = this.generate({
+        text: '',
+        x: offsetX,
+        y: offsetY,
+        fontSize: Properties.fontSize,
+        width: 200,
+        fill: Properties.strokeColor
+      })
+      this.temporalText = newText
+      Canvas.layer.add(this.temporalText)
+      clearTimeout(this.handleTextareaTimer)
+      this.handleTextareaTimer = setTimeout(() => {
+        this._handleEnableTextarea(newText)
+      }, 200)
+    }
+  },
+  bindEvents(newText) {
+    newText.off('dblclick dbltap')
+    newText.off('transform')
+    newText.off('transformend')
+    newText.off('dragend')
+    newText.on('dblclick dbltap', () => {
+      this._handleEnableTextarea(newText)
+    })
+    newText.on('transform', () => {
+      newText.setAttrs({
+        width: newText.width() * newText.scaleX(),
+        height: newText.height() * newText.scaleY(),
+        scaleX: 1,
+        scaleY: 1
+      })
+    })
+    newText.on('transformend', Histories.record)
+    newText.on('dragend', Histories.record)
+  },
+  change() {
+    return
+  },
+  finish() {
+    return
+  },
+  _handleEnableTextarea(newText) {
+    Canvas.isEditingText = true;
+    Properties.tool = 'text'
+    this.temporalText = newText;
+    newText.hide();
+    Transformer.deselectAllNodes();
+
+    const textPosition = newText.absolutePosition();
+    const areaPosition = {
+      x: Canvas.stage.container().offsetLeft + textPosition.x,
+      y: Canvas.stage.container().offsetTop + textPosition.y
+    };
+
+    if (this.textarea) {
+      this.textarea.removeEventListener('keydown', this.textareaEditingHandler);
+    }
+
+    this.textarea = document.createElement('textarea');
+    document.body.appendChild(this.textarea);
+    
+    this.textarea.value = newText.text();
+    this.textarea.style.position = 'absolute';
+    this.textarea.style.top = `${areaPosition.y}px`;
+    this.textarea.style.left = `${areaPosition.x}px`;
+    this.textarea.style.width = `${newText.width() - newText.padding() * 2}px`;
+    this.textarea.style.height =
+      `${ newText.height() - newText.padding() * 2 + 5 }px`;
+    this.textarea.style.fontSize = `${ newText.fontSize() }px`;
+    this.textarea.style.border = 'none';
+    this.textarea.style.padding = '0';
+    this.textarea.style.margin = '0';
+    this.textarea.style.overflow = 'hidden';
+    this.textarea.style.background = 'none';
+    this.textarea.style.outline = 'none';
+    this.textarea.style.resize = 'none';
+    this.textarea.style.lineHeight = newText.lineHeight();
+    this.textarea.style.fontFamily = newText.fontFamily();
+    this.textarea.style.transformOrigin = 'left top';
+    this.textarea.style.textAlign = newText.align();
+    this.textarea.style.color = newText.fill();
+    const rotation = newText.rotation();
+    let transform = '';
+    if (rotation) {
+      transform += `rotateZ(${  rotation  }deg)`;
+    }
+
+    let px = 0;
+    
+    const isFirefox =
+      navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+    if (isFirefox) {
+      px += 2 + Math.round(newText.fontSize() / 20);
+    }
+    transform += `translateY(-${  px  }px)`;
+
+    this.textarea.style.transform = transform;
+
+    this.textarea.style.height = 'auto';
+    this.textarea.style.height = `${this.textarea.scrollHeight + 3}px`;
+
+    this.textarea.focus();
+
+    this.textareaEditingHandler = this._handleTextareaEditing.bind(this);
+    this.disableTextareaHandler = this._handleDisableTextarea.bind(this);
+    this.textarea.addEventListener('keydown', this.textareaEditingHandler);
+    setTimeout(() => {
+      window.addEventListener('mousedown', this.disableTextareaHandler);
+    });
+  },
+  _handleDisableTextarea(event) {
+    if (event.target !== this.textarea) {
+      this.temporalText.text(this.textarea.value)
+      this.textarea.remove()
+      window.removeEventListener('mousedown', this.disableTextareaHandler)
+      this.temporalText.show()
+      Properties.tool = 'selector'
+    }
+  },
+  _handleTextareaEditing() {
+    const scale = this.temporalText.getAbsoluteScale().x;
+    this._setTextareaWidth(this.temporalText.width() * scale);
+    this.textarea.style.height = 'auto';
+    this.textarea.style.height =
+    `${this.textarea.scrollHeight + this.temporalText.fontSize()  }px`;
+  },
+  _setTextareaWidth(newWidth) {
+    if (!newWidth) {
+      newWidth = this.textNode.placeholder.length * this.temporalText.fontSize();
+    }
+    const isSafari = /^((?!chrome|android).)*safari/i.test(
+      navigator.userAgent
+    );
+    const isFirefox =
+      navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+    if (isSafari || isFirefox) {
+      newWidth = Math.ceil(newWidth);
+    }
+
+    const isEdge =
+      document.documentMode || /Edge/.test(navigator.userAgent);
+    if (isEdge) {
+      newWidth += 1;
+    }
+    this.textarea.style.width = `${ newWidth }px`;
+  },
+  generate({ text, x, y, fill, fontSize, width, height, scaleX, scaleY }) {
+    const newText = new Konva.Text({
+      text,
+      x,
+      y,
+      fill,
+      fontSize,
+      width,
+      height,
+      scaleX,
+      scaleY,
+      name: 'node',
+      nodeType: 'text',
+      strokeEnabled: false
+    });
+    this.bindEvents(newText)
+    return newText
+  }
+}