'use strict';

let paper = require('js/index/paper-core.min'),
    IconShadow = require('js/index/IconShadow'),
    drawUtils = require('js/index/drawUtils'),
    paperScope = require('js/index/PaperScopeManager');


class Icon {

    /**
     * @param position - of this icon
     * @param color - of this icon
     * @param iconPath - of this icon
     * @param iconBase - for this icon
     * @param iconDraggedCallback - will be called whenever this icon has been dragged
     */
    constructor(position, color, iconPath, iconBase, iconDraggedCallback) {
        this.originalPosition = new paper.Point(position);
        this.iconPath = iconPath;
        this.iconPath.position = position;
        this.iconPath.fillColor = color;
        this.iconShadow = new IconShadow(iconPath, iconBase);
        this.size = Math.max(iconPath.bounds.width, iconPath.bounds.height);
        this.scale = 1;
        this.iconPath.moveAbove(iconBase.getPathWithoutShadows());
        this.iconPath.onMouseDrag = function(event) {
            this.move(event.delta);
            iconDraggedCallback();
        }.bind(this);
    }


    /**
     * @param newSize absolute size in px which this icon should fit in (keeps aspect ratio)
     */
    setSize(newSize) {
        let scale = newSize / this.size;
        this.iconPath.scale(scale, this.iconPath.position);
        this.iconShadow.scale(scale);
        this.size = newSize;
    }


    /**
     * Scales this icon + shadow without changing setting this.size. setScale(1) will rescale
     * this object to its original size.
     * @param newScale factor.
     */
    setScale(newScale) {
        this.iconPath.scale(newScale / this.scale, this.iconPath.position);
        this.iconShadow.scale(newScale / this.scale);
        this.scale = newScale;
        paperScope.draw().view.draw();
    }


    /**
     * Sets the color of this icon.
     * @param color paper.js compatible color value
     */
    setColor(color) {
        this.iconPath.fillColor = color;
        paperScope.draw().view.draw();
    }


    /**
     * @param {paper.Point} delta - how much this icon + shadow should be moved.
     */
    move(delta) {
        this.iconPath.position = this.iconPath.position.add(delta);
        this.iconShadow.move(delta);
        paperScope.draw().view.draw();
    }


    center() {
        this.iconShadow.move(this.originalPosition.subtract(this.iconPath.position));
        this.iconPath.position = new paper.Point(this.originalPosition);
        paperScope.draw().view.draw();
    }


    /**
     * Remove this icon + shadow from the canvas.
     */
    remove() {
        this.iconPath.remove();
        this.iconShadow.remove();
    }


    getIconShadow() {
        return this.iconShadow;
    }

}

module.exports = Icon;

@@ -711,33 +711,65 @@
 conPath.
-fillColor
+visible = false;%0A        this.iconBase
  = 
+i
 co
-lor
+nBase
 ;%0A      
@@ -1013,92 +1013,25 @@
 icon
-Path.onMouseDrag = function(event) %7B%0A            this.move(event.delta);%0A           
+DraggedCallback =
  ico
@@ -1046,18 +1046,16 @@
 Callback
-()
 ;%0A      
@@ -1060,19 +1060,53 @@
     
-%7D.bind(this
+this.applyIcon();%0A        this.setColor(color
 );%0A 
@@ -1337,32 +1337,58 @@
 Path.position);%0A
+        this.applyIcon();%0A
         this.ico
@@ -1721,32 +1721,58 @@
 Path.position);%0A
+        this.applyIcon();%0A
         this.ico
@@ -2018,33 +2018,40 @@
  %7B%0A        this.
-i
+appliedI
 conPath.fillColo
@@ -2283,32 +2283,58 @@
 ion.add(delta);%0A
+        this.applyIcon();%0A
         this.ico
@@ -2567,32 +2567,58 @@
 ginalPosition);%0A
+        this.applyIcon();%0A
         paperSco
@@ -2803,65 +2803,1016 @@
     
-%7D%0A%0A%0A    getIconShadow() %7B%0A        return this.iconShadow;
+    if (this.appliedIconPath) this.appliedIconPath.remove();%0A    %7D%0A%0A%0A    getIconShadow() %7B%0A        return this.iconShadow;%0A    %7D%0A%0A%0A    /**%0A     * this.iconPath is not actually visible on the canvas, but%0A     * rather serves as a template for the actual icon path which is%0A     * cut to fit the base.%0A     */%0A    applyIcon() %7B%0A        // cut icon to base%0A        let basePath = this.iconBase.getPathWithoutShadows();%0A        let newAppliedIconPath = this.iconPath.intersect(basePath);%0A%0A        let color;%0A        if (this.appliedIconPath) %7B%0A            color = this.appliedIconPath.fillColor;%0A            this.appliedIconPath.replaceWith(newAppliedIconPath);%0A        %7D%0A        this.appliedIconPath = newAppliedIconPath;%0A%0A        // setup drag to move%0A        this.appliedIconPath.onMouseDrag = function(event) %7B%0A            this.move(event.delta);%0A            this.iconDraggedCallback();%0A        %7D.bind(this);%0A%0A        // reapply color (if any)%0A        if (color) %7B%0A            this.setColor(color);%0A        %7D
 %0A   

Cut icon to base outline