path: root/js/tools/PenTool.js

/* <copyright>
This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
</copyright> */

var ShapeTool = require("js/tools/ShapeTool").ShapeTool;
var ShapesController = 	require("js/controllers/elements/shapes-controller").ShapesController;
var DrawingToolBase = require("js/tools/drawing-tool-base").DrawingToolBase;
var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager;
var Montage = require("montage/core/core").Montage;
var NJUtils = require("js/lib/NJUtils").NJUtils;
var ElementMediator = require("js/mediators/element-mediator").ElementMediator;
var TagTool = require("js/tools/TagTool").TagTool;
var ElementController = require("js/controllers/elements/element-controller").ElementController;
var snapManager = require("js/helper-classes/3D/snap-manager").SnapManager;

//todo remove this global var
var g_DoPenToolMouseMove = true;

exports.PenTool = Montage.create(ShapeTool, {

    _toolID: { value: "penTool" },
    _imageID: { value: "penToolImg" },
    _toolImageClass: { value: "penToolUp" },
    _selectedToolImageClass: { value: "penToolDown" },
    _toolTipText: { value: "Pen Tool" },
    _penView: { value: null, writable: true },

    _selectedToolClass: { value: "penToolSpecificProperties" },
    _penToolProperties: { enumerable: false, value: null, writable: true },
    _parentNode: { enumerable: false, value: null, writable: true },
    _toolsPropertiesContainer: { enumerable: false, value: null, writable: true },

    // Need to keep track of current mouse position for KEY modifiers event which do not have mouse coordinates
    _currentX: { value: 0, writable: true },
    _currentY: { value: 0, writable: true },

    //the subpaths are what is displayed on the screen currently, with _selectedSubpath being the active one currently being edited
    _selectedSubpath: { value: null, writable: true },
    _makeMultipleSubpaths: { value: true, writable: true },    //set this to true if you want to keep making subpaths after closing current subpath


    //whether the user has held down the Alt key
    _isAltDown: { value: false, writable: true },

    //whether the user has held down the Esc key
    _isEscapeDown: {value: false, writable: true },

    //whether we have just started a new path (set true in mousedown, and set false in mouse up
    _isNewPath: {value: false, writable: true},

    //whether we have clicked one of the endpoints after entering the pen tool in ENTRY_SELECT_PATH edit mode
    _isPickedEndPointInSelectPathMode: {value: false, writable: true},

    //when the user wants to place a selected anchor point on top of another point, this is the target where the point will be placed
    _snapTarget: { value: null, writable: true },

    //whether or not we're using webgl for drawing
    _useWebGL: {value: false, writable: false },

    //the canvas created by the pen tool...this is grown or shrunk with the path (if the canvas was not already provided)
    _penCanvas: { value: null, writable: true },

    //the plane matrix for the first click...so the entire path is on the same plane
    _penPlaneMat: { value: null, writable: true },

    //index of the anchor point that the user has hovered over
    _hoveredAnchorIndex: {value: null, writable: true},

    //constants used for picking points --- NOTE: these should be user-settable parameters
    _PICK_POINT_RADIUS: { value: 10, writable: false },
    _DISPLAY_ANCHOR_RADIUS: { value: 5, writable: false },
    _DISPLAY_SELECTED_ANCHOR_RADIUS: { value: 10, writable: false },
    _DISPLAY_SELECTED_ANCHOR_PREV_RADIUS: { value: 5, writable: false },
    _DISPLAY_SELECTED_ANCHOR_NEXT_RADIUS: { value: 5, writable: false },

    //constants used for editing modes (can be OR-ed)
    EDIT_NONE: { value: 0, writable: false },
    EDIT_ANCHOR: { value: 1, writable: false },
    EDIT_PREV: { value: 2, writable: false },
    EDIT_NEXT: { value: 4, writable: false },
    EDIT_PREV_NEXT: { value: 8, writable: false },
    _editMode: { value: this.EDIT_NONE, writable: true },

    //constants used for selection modes on entry to pen tool (mutually exclusive)
    ENTRY_SELECT_NONE: { value: 0, writable: false},
    ENTRY_SELECT_CANVAS: { value: 1, writable: false},
    ENTRY_SELECT_PATH: { value: 2, writable: false},
    _entryEditMode: {value: this.ENTRY_SELECT_NONE, writable: true},
    


    _getUnsnappedPosition: {
        value: function(x,y){
            var elemSnap = snapManager.elementSnapEnabled();
            var gridSnap = snapManager.gridSnapEnabled();
            var alignSnap = snapManager.snapAlignEnabled();

            snapManager.enableElementSnap(false);
            snapManager.enableGridSnap(false);
            snapManager.enableSnapAlign(false);

            var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(x,y));
            var unsnappedpos = DrawingToolBase.getHitRecPos(snapManager.snap(point.x, point.y, false));

            snapManager.enableElementSnap(elemSnap);
            snapManager.enableGridSnap(gridSnap);
            snapManager.enableSnapAlign(alignSnap);

            return unsnappedpos;
        }
    },

    ShowToolProperties: {
        value: function () {
            this._penView = PenView.create();
            this._penView.element = document.getElementById('topPanelContainer').children[0];
            this._penView.needsDraw = true;

            this._penView.addEventListener(ToolEvents.TOOL_OPTION_CHANGE, this, false);
        }

    },

    HandleLeftButtonDown:
    {
        value: function (event) {
            //ignore any right or middle clicks
            if (event.button !== 0) {
                //NOTE: this will work on Webkit only...IE has different codes (left: 1, middle: 4, right: 2)
                return;
            }
            if (this._canDraw) {
                this._isDrawing = true;
            }


            this.startDraw(event);

            //assume we are not starting a new path as we will set this to true if we create a new GLSubpath()
            this._isNewPath = false;

            //add an anchor point by computing position of mouse down
            var mouseDownPos = this._getUnsnappedPosition(event.pageX, event.pageY); //this.getMouseDownPos();
            if (mouseDownPos) {
                //if we had closed the selected subpath previously, or if we have not yet started anything, create a subpath
                if (this._selectedSubpath === null) {
                    this._selectedSubpath = new GLSubpath();
                    this._isNewPath = true;
                    if (this._entryEditMode === this.ENTRY_SELECT_PATH){
                        //this should not happen, as ENTRY_SELECT_PATH implies there was a selected subpath
                        this._entryEditMode = this.ENTRY_SELECT_NONE;
                        console.log("Warning...PenTool handleMouseDown: changing from SELECT_PATH to SELECT_NONE");
                    }
                }
                
                var prevSelectedAnchorIndex = this._selectedSubpath.getSelectedAnchorIndex();
                // ************* Add/Select Anchor Point *************
                //check if the clicked location is close to an anchor point...if so, make that anchor the selected point and do nothing else
                // BUT if the anchor point selected is the first anchor point, check if the previous selected anchor was the last anchor point...in that case, close the path
                var selParam = this._selectedSubpath.pickPath(mouseDownPos[0], mouseDownPos[1], mouseDownPos[2], this._PICK_POINT_RADIUS);
                var whichPoint = this._selectedSubpath.getSelectedMode();
                if (whichPoint & this._selectedSubpath.SEL_ANCHOR) {
                    //if we're in ENTRY_SELECT_PATH mode AND we have not yet clicked on the endpoint AND if we have now clicked on the endpoint
                    if (this._entryEditMode === this.ENTRY_SELECT_PATH && this._isPickedEndPointInSelectPathMode === false){
                        var selAnchorIndex = this._selectedSubpath.getSelectedAnchorIndex();
                        if (selAnchorIndex===0 || selAnchorIndex===this._selectedSubpath.getNumAnchors()-1){
                            //we have picked the endpoint of this path...reverse the path if necessary
                            if (selAnchorIndex ===0){
                                //reverse this path
                                this._selectedSubpath.reversePath();
                                selAnchorIndex = this._selectedSubpath.getSelectedAnchorIndex();
                            }
                            this._isPickedEndPointInSelectPathMode = true;
                        }
                    }
                    this._editMode = this.EDIT_ANCHOR;
                    //if we have selected the first anchor point, and previously had selected the last anchor point, close the path
                    var numAnchors = this._selectedSubpath.getNumAnchors();
                    if (numAnchors>1 && !this._selectedSubpath.getIsClosed() && this._selectedSubpath.getSelectedAnchorIndex()===0 && prevSelectedAnchorIndex === numAnchors-1){
                        //setting the selection mode to NONE will effectively add a new anchor point at the click location and also give us snapping
                        whichPoint = this._selectedSubpath.SEL_NONE;
                        //set the snap target in case the mouse move handler doesn't get called
                        this._snapTarget = this._selectedSubpath.getAnchor(0);
                    }
                }
                //check if the clicked location is close to prev and next of the selected anchor point..if so select that anchor, set mode to PREV or NEXT and do nothing else
                // but if the selectedAnchor index is not -1 and neither prev nor next are selected, it means click selected a point selParam along bezier segment starting at selectedAnchor
                else if (this._selectedSubpath.getSelectedAnchorIndex() !== -1) {
                    if (whichPoint & this._selectedSubpath.SEL_PREV){
                        this._editMode = this.EDIT_PREV;
                    }
                    else if (whichPoint & this._selectedSubpath.SEL_NEXT){
                        this._editMode = this.EDIT_NEXT;
                    }
                    else if (whichPoint & this._selectedSubpath.SEL_PATH) {
                        //the click point is close enough to insert point in bezier segment after selected anchor at selParam
                        if (selParam > 0 && selParam < 1) {
                            this._selectedSubpath.insertAnchorAtParameter(this._selectedSubpath.getSelectedAnchorIndex(), selParam);
                            //set the mode so that dragging will update anchor point positions
                            //this._editMode = this.EDIT_ANCHOR;
                        }
                    }
                }

                //the clicked location is not close to the path or any anchor point
                if (whichPoint === this._selectedSubpath.SEL_NONE) {
                    if (this._entryEditMode !== this.ENTRY_SELECT_PATH) {
                        //since we're not in ENTRY_SELECT_PATH mode, we don't edit the closed path...we start a new path if we clicked far away from selected path
                        if (this._selectedSubpath.getIsClosed() && this._makeMultipleSubpaths) {
                            this._penCanvas = null;
                            this._penPlaneMat = null;
                            this._snapTarget = null;
                            this._selectedSubpath = new GLSubpath();
                            this._isNewPath = true;
                        }

                        //add an anchor point to end of the subpath, and make it the selected anchor point
                        if (!this._selectedSubpath.getIsClosed() || this._makeMultipleSubpaths) {
                            this._selectedSubpath.addAnchor(new GLAnchorPoint());
                            var newAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex());
                            newAnchor.setPos(mouseDownPos[0], mouseDownPos[1], mouseDownPos[2]);
                            newAnchor.setPrevPos(mouseDownPos[0], mouseDownPos[1], mouseDownPos[2]);
                            newAnchor.setNextPos(mouseDownPos[0], mouseDownPos[1], mouseDownPos[2]);

                            //set the mode so that dragging will update the next and previous locations
                            this._editMode = this.EDIT_PREV_NEXT;
                        }
                    } else {
                        if (this._isPickedEndPointInSelectPathMode){
                            //TODO clean up this code...very similar to the code block above
                            if (!this._selectedSubpath.getIsClosed()) {
                                this._selectedSubpath.addAnchor(new GLAnchorPoint());
                                var newAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex());
                                newAnchor.setPos(mouseDownPos[0], mouseDownPos[1], mouseDownPos[2]);
                                newAnchor.setPrevPos(mouseDownPos[0], mouseDownPos[1], mouseDownPos[2]);
                                newAnchor.setNextPos(mouseDownPos[0], mouseDownPos[1], mouseDownPos[2]);

                                //set the mode so that dragging will update the next and previous locations
                                this._editMode = this.EDIT_PREV_NEXT;
                            }
                        }
                    }
                } //if (whichPoint === this._selectedSubpath.SEL_NONE) (i.e. no anchor point was selected)

                //display the curve overlay
                this.DrawSubpathAnchors(this._selectedSubpath);
                this.DrawSubpathSVG(this._selectedSubpath);
            } //if (mouseDownPos) { i.e. if mouse down yielded a valid position


            if (!g_DoPenToolMouseMove){
                NJevent("enableStageMove");
            }

            this._hoveredAnchorIndex = -1;
        } //value: function (event) {
    }, //HandleLeftButtonDown


    //need to override this function because the ShapeTool's definition contains a clearDrawingCanvas call  - Pushkar
    //  might not need to override once we draw using OpenGL instead of SVG
    // Also took out all the snapping code for now...need to add that back
    HandleMouseMove:
    {
        value: function (event) {
            //ignore any right or middle clicks
            if (event.button !== 0) {
                //NOTE: this will work on Webkit only...IE has different codes (left: 1, middle: 4, right: 2)
                return;
            }

            //clear the canvas before we draw anything else
            this.application.ninja.stage.clearDrawingCanvas();
            this._hoveredAnchorIndex = -1;

            if (this._isDrawing) {
                var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY));
                //go through the drawing toolbase to get the position of the mouse 
                var currMousePos = DrawingToolBase.getHitRecPos(DrawingToolBase.getUpdatedSnapPoint(point.x, point.y, false, this.mouseDownHitRec));
                if (currMousePos && this._selectedSubpath && (this._selectedSubpath.getSelectedAnchorIndex() >= 0 && this._selectedSubpath.getSelectedAnchorIndex() < this._selectedSubpath.getNumAnchors())) {
                    //var scoord = this._getScreenCoord(this._mouseUpHitRec);
                    var selAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex());
                    var selX = selAnchor.getPosX();
                    var selY = selAnchor.getPosY();
                    var selZ = selAnchor.getPosZ();
                    if (this._editMode & this.EDIT_ANCHOR) {
                        selAnchor.translateAll(currMousePos[0] - selX, currMousePos[1] - selY, currMousePos[2] - selZ);
                    }
                    else if (this._editMode & this.EDIT_PREV) {
                        var oldPX = selAnchor.getPrevX();
                        var oldPY = selAnchor.getPrevY();
                        var oldPZ = selAnchor.getPrevZ();
                        selAnchor.translatePrev(currMousePos[0] - oldPX, currMousePos[1] - oldPY, currMousePos[2] - oldPZ);

                        //move the next point if Alt key is down to ensure relative angle between prev and next
                        if (this._isAltDown) {
                            selAnchor.translateNextFromPrev(currMousePos[0] - oldPX, currMousePos[1] - oldPY, currMousePos[2] - oldPZ);
                        }
                    }
                    else if (this._editMode & this.EDIT_NEXT) {
                        var oldNX = selAnchor.getNextX();
                        var oldNY = selAnchor.getNextY();
                        var oldNZ = selAnchor.getNextZ();
                        selAnchor.translateNext(currMousePos[0] - oldNX, currMousePos[1] - oldNY, currMousePos[2] - oldNZ);

                        //move the prev point if Alt key is down to ensure relative angle between prev and next
                        if (this._isAltDown) {
                            selAnchor.translatePrevFromNext(currMousePos[0] - oldNX, currMousePos[1] - oldNY, currMousePos[2] - oldNZ);
                        }
                    }
                    else if (this._editMode & this.EDIT_PREV_NEXT) {
                        selAnchor.setNextPos(currMousePos[0], currMousePos[1], currMousePos[2]);
                        selAnchor.setPrevFromNext();
                    }

                    //snapping...check if the new location of the anchor point is close to another anchor point
                    this._snapTarget = null;
                    var numAnchors = this._selectedSubpath.getNumAnchors();
                    for (var i = 0; i < numAnchors; i++) {
                        //check if the selected anchor is close to any other anchors
                        if (i === this._selectedSubpath.getSelectedAnchorIndex())
                            continue;
                        var currAnchor = this._selectedSubpath.getAnchor(i);
                        var distSq = currAnchor.getDistanceSq(selX, selY, selZ);
                        if (distSq < this._PICK_POINT_RADIUS * this._PICK_POINT_RADIUS) {
                            //set the snap target to the location of the first close-enough anchor
                            this._snapTarget = currAnchor;
                            break;
                        }
                    }

                    //make the subpath dirty so it will get re-drawn
                    this._selectedSubpath.makeDirty();
                    this.DrawSubpathSVG(this._selectedSubpath);
                }

            } else { //if mouse is not down:
                //this.doSnap(event);
                //this.DrawHandles();

                var currMousePos = this._getUnsnappedPosition(event.pageX, event.pageY);
                if (currMousePos && this._selectedSubpath ){
                    var selAnchor = this._selectedSubpath.pickAnchor(currMousePos[0], currMousePos[1], currMousePos[2], this._PICK_POINT_RADIUS);
                    if (selAnchor >=0) {
                        this._hoveredAnchorIndex = selAnchor;
                    }
                }
            } //else of if (this._isDrawing) {

            //this.drawLastSnap();        // Required cleanup for both Draw/Feedbacks
            if (this._selectedSubpath){
                this.DrawSubpathAnchors(this._selectedSubpath);
            }

        }//value: function(event)
    },//HandleMouseMove

    
    TranslateSelectedSubpathPerPenCanvas:{
        value: function() {
            if (this._penCanvas!==null) {
                //obtain the 2D translation of the canvas due to the Selection tool...assuming this is called in Configure
                var penCanvasLeft = parseInt(ElementMediator.getProperty(this._penCanvas, "left"));//parseFloat(DocumentControllerModule.DocumentController.GetElementStyle(this._penCanvas, "left"));
                var penCanvasTop = parseInt(ElementMediator.getProperty(this._penCanvas, "top"));//parseFloat(DocumentControllerModule.DocumentController.GetElementStyle(this._penCanvas, "top"));
                var penCanvasWidth = parseInt(ElementMediator.getProperty(this._penCanvas, "width"));//this._penCanvas.width;
                var penCanvasHeight = parseInt(ElementMediator.getProperty(this._penCanvas, "height"));//this._penCanvas.height;
                var penCanvasOldX = penCanvasLeft + 0.5 * penCanvasWidth;
                var penCanvasOldY = penCanvasTop + 0.5 * penCanvasHeight;

                var translateCanvasX = penCanvasOldX - this._selectedSubpath.getCanvasX();
                var translateCanvasY = penCanvasOldY - this._selectedSubpath.getCanvasY();

                //update the canvasX and canvasY parameters for this subpath and also translate the subpath points (since they're stored in stage world space)
                this._selectedSubpath.setCanvasX(translateCanvasX + this._selectedSubpath.getCanvasX());
                this._selectedSubpath.setCanvasY(translateCanvasY + this._selectedSubpath.getCanvasY());
                this._selectedSubpath.translateAnchors(translateCanvasX, translateCanvasY, 0);
                this._selectedSubpath.createSamples(); //updates the bounding box
            }
        }
    },

    ShowSelectedSubpath:{
        value: function() {
            if (this._selectedSubpath){
                this._selectedSubpath.createSamples(); //dirty bit is checked here
                var bboxMin = this._selectedSubpath.getBBoxMin();
                var bboxMax = this._selectedSubpath.getBBoxMax();
                var bboxWidth = bboxMax[0] - bboxMin[0];
                var bboxHeight = bboxMax[1] - bboxMin[1];
                var bboxMid = Vector.create([0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0.5 * (bboxMax[2] + bboxMin[2])]);

                this._selectedSubpath.setCanvasX(bboxMid[0]);
                this._selectedSubpath.setCanvasY(bboxMid[1]);

                //call render shape with the bbox width and height
                this.RenderShape(bboxWidth, bboxHeight, this._penPlaneMat, bboxMid, this._penCanvas);
            }
        }
    },

    HandleLeftButtonUp: {
        value: function (event) {
            if (this._isAltDown) {
                var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY));
                this.mouseUpHitRec = DrawingToolBase.getUpdatedSnapPoint(point.x, point.y, false, this.mouseDownHitRec);
            }
            else if (this._isDrawing) {
                this.doDraw(event); //needed to get the mouse up point in case there was no mouse move
            }

            //snapping...if there was a snapTarget and a selected anchor, move the anchor to the snap target
            if (this._snapTarget !== null && this._selectedSubpath && this._selectedSubpath.getSelectedAnchorIndex() !== -1) {
                var selAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex());
                selAnchor.setPos(this._snapTarget.getPosX(), this._snapTarget.getPosY(), this._snapTarget.getPosZ());
                this._selectedSubpath.makeDirty();

                //if the first or last anchor point were snapped for an open path, check if the first and last anchor point are at the same position
                if (!this._selectedSubpath.getIsClosed()) {
                    var lastAnchorIndex = this._selectedSubpath.getNumAnchors() - 1;
                    var firstAnchor = this._selectedSubpath.getAnchor(0);
                    var lastAnchor = this._selectedSubpath.getAnchor(lastAnchorIndex);
                    if ((this._selectedSubpath.getSelectedAnchorIndex() === 0 && this._snapTarget === lastAnchor) || (this._selectedSubpath.getSelectedAnchorIndex() === lastAnchorIndex && this._snapTarget === firstAnchor)) {
                        this._selectedSubpath.setIsClosed(true);
                        //set the prev of the first anchor to the be prev of the last anchor
                        firstAnchor.setPrevPos(lastAnchor.getPrevX(), lastAnchor.getPrevY(), lastAnchor.getPrevZ());

                        //only if we have more than two anchor points, remove the last point
                        if (lastAnchorIndex > 1) {
                            //remove the last anchor from the subpath
                            this._selectedSubpath.removeAnchor(lastAnchorIndex);
                        } else {
                            //set the next of the last anchor to the be next of the first anchor
                            lastAnchor.setPrevPos(firstAnchor.getNextX(), firstAnchor.getNextY(), firstAnchor.getNextZ());
                        }
                    }
                }
            }
            this._snapTarget = null;

            var drawData = this.getDrawingData();
            if (drawData) {
                if (!this._penPlaneMat) {
                    this._penPlaneMat = drawData.planeMat;
                }

                if (this._isNewPath) {
                    var strokeSize = 1.0;//default stroke width
                    if (this.options.strokeSize) {
                        strokeSize = ShapesController.GetValueInPixels(this.options.strokeSize.value, this.options.strokeSize.units);
                    }
                    this._selectedSubpath.setStrokeWidth(strokeSize);
                    if (this.application.ninja.colorController.colorToolbar.stroke.webGlColor){
                        this._selectedSubpath.setStrokeColor(this.application.ninja.colorController.colorToolbar.stroke.webGlColor);
                    }
                    if (this.application.ninja.colorController.colorToolbar.fill.webGlColor){
                        this._selectedSubpath.setFillColor(this.application.ninja.colorController.colorToolbar.fill.webGlColor);
                    }
                } //if this is a new path being rendered

                this._selectedSubpath.makeDirty();

                this._selectedSubpath.createSamples();
                //if we have some samples to render...
                if (this._selectedSubpath.getNumAnchors() > 1) {
                    this.ShowSelectedSubpath();
                } //if (this._selectedSubpath.getNumPoints() > 0) {
            } //if drawData

            //always assume that we're not starting a new path anymore
            this._isNewPath = false;
            this.endDraw(event);

            this._isDrawing = false;
            this._hasDraw = false;
            this._editMode = this.EDIT_NONE;

            this.DrawHandles();
            //if (this._entryEditMode === this.ENTRY_SELECT_PATH || !this._selectedSubpath.getIsClosed()){
            if (this._selectedSubpath){
                this.DrawSubpathAnchors(this._selectedSubpath);//render the subpath anchors on canvas (not GL)
            }
            //}

            if (!g_DoPenToolMouseMove){
                NJevent("disableStageMove");
            }
            this._hoveredAnchorIndex = -1;
        }
    },

    //override the Alt key handlers from drawing-tool.js
    HandleAltKeyDown: {
        value: function (event) {