bitcchan.js

	const app = new Vue({
	  el: '#app',
	  data: {
	    handle: null,
	    handleColor: '#F1F1F1',
	    handleStrokeColor: '#333333',
	    handleStrokeWidth: 2,
	    resizeHandleRadius: 4,
	    rotateHandleRadius: 6,
	    activeStrokeColor: 'black',
	    activeStrokeWidth: 2,
	    dragging: false,
	    resizing: false,
	    rotating: false,
	    rects: [{
	      label: 'Polygon',
	      z: 0,
	      angle: 0,
	      points: [
	        [100, 100],
	        [100, 200],
	        [300, 200],
	        [300, 100]
	      ],
	      fill: '#389773',
	      stroke: '#000000',
	      strokeWidth: 0,
	      active: false,
	      deg: 0
	    }]
	  },
	  mounted() {},
	  methods: {
	    selectRect(rect, event) {
	      let that = this;
	      that.rects.forEach(function(r, i) {
	        r.active = false;
	      })
	      rect.active = true;
	    },
	    deselectRect(rect) {
	      rect.active = false
	    },
	    deleteRect() {
	      let that = this;
	      that.rects.forEach(function(rect, i) {
	        if (rect.active) {
	          that.rects.splice(i, 1)
	        }
	      })
	    },
	    startDrag(rect, event) {
	      let that = this;
	      if (rect.active) {
	        that.dragging = true;
	      }
	    },
	    startResize(rect, h, event) {
	      let that = this;


	      if (rect.active && !event.shiftKey) {
	        that.resizing = true;
	        that.handle = h;
	      } else if (rect.active && event.shiftKey) {
	        that.rotating = true;
	        that.handle = h;
	      }
	    },
	    mouseMove(event) {
	      let that = this;
	      this.rects.forEach(function(rect) {
	        // Dragging
	        if (rect.active && that.dragging) {
	          rect.points.forEach(function(point, i) {
	            point[0] += event.movementX;
	            point[1] += event.movementY;
	            that.$set(rect.points, i, [point[0], point[1]])
	          })
	        }
	        // Resizing
	        if (rect.active && that.resizing) {
          	let horizBefore = that.handle % 2;
            
	          rect.points[that.handle][0] += event.movementX;
	          rect.points[that.handle][1] += event.movementY;
            
            if (horizBefore) {
              rect.points[(that.handle - 1) & 3][0] += event.movementX;
              rect.points[(that.handle + 1) & 3][1] += event.movementY;     
            } else {
              rect.points[(that.handle - 1) & 3][1] += event.movementY;
              rect.points[(that.handle + 1) & 3][0] += event.movementX;            
            }
            
	          that.$set(rect.points, that.handle, [rect.points[that.handle][0], rect.points[that.handle][1]])
	        }
	        // Rotating
	        if (rect.active && that.rotating) {
          
	          let center = that.centroid(rect.points);
	          let radians = Math.atan2(event.clientX - center[0], event.clientY - center[1]);
	          rect.points.forEach(function(point, i) {
	            let rot = that.rotation(center[0], center[1], point[0], point[1], radians)
	            that.$set(rect.points, i, rot)
	          })



	        }
	      })
	    },
	    centroid(points) {
	      let l = points.length;
	      return points.reduce(function(center, p, i) {
	        center[0] += p[0];
	        center[1] += p[1];
	        if (i === l - 1) {
	          center[0] /= l;
	          center[1] /= l;
	        }
	        return center;
	      }, [0, 0]);
	    },
	    rotation(cx, cy, x, y, radians) {
	      let cos = Math.cos(radians),
	        sin = Math.sin(radians),
	        nx = (cos * (x - cx)) + (sin * (y - cy)) + cx,
	        ny = (cos * (y - cy)) - (sin * (x - cx)) + cy;
	      return [nx, ny];
	    },
	    clearAction() {
	      let that = this;
	      that.dragging = false;
	      that.resizing = false;
	      that.rotating = false;
	      this.handle = null;
	    }
	  }
	})