Still buggy version of pen tool that can create polylines in 3D space correctly (except for incorrect canvas translation). Using cleaned up and re-factored version of the code. Not suitable for testing.

2 files changed, 542 insertions, 1247 deletions

diff --git a/js/lib/geom/sub-path.js b/js/lib/geom/sub-path.js
index 765316b1..761391b7 100755
--- a/js/lib/geom/sub-path.js
+++ b/js/lib/geom/sub-path.js
@@ -11,30 +11,6 @@ var GeomObj =       require("js/lib/geom/geom-obj").GeomObj;
 var AnchorPoint =   require("js/lib/geom/anchor-point").AnchorPoint;
 var MaterialsModel = require("js/models/materials-model").MaterialsModel;
 
-// TODO Those function do not seems to be used. We should remove them
-/*
-function SubpathOffsetPoint(pos, mapPos) {
-    this.Pos = [pos[0],pos[1],pos[2]];
-    this.CurveMapPos = [mapPos[0], mapPos[1], mapPos[2]];
-}
-
-function SubpathOffsetTriangle(v0, v1, v2) {
-    this.v0 = v0;
-    this.v1 = v1;
-    this.v2 = v2;
-    this.n = [0,0,1]; //replace with the actual cross product later
-}
-
-function sortNumberAscending(a,b){
-    return a-b;
-}
-function sortNumberDescending(a,b){
-    return b-a;
-}
-function SegmentIntersections(){
-    this.paramArray = [];
-}
-*/
 ///////////////////////////////////////////////////////////////////////
 // Class GLSubpath
 //      representation a sequence of cubic bezier curves.
@@ -45,60 +21,44 @@ var GLSubpath = function GLSubpath() {
     ///////////////////////////////////////////////////
     // Instance variables
     ///////////////////////////////////////////////////
+
+    // NOTE:
+    //  This class contains functionality to store piecewise cubic bezier paths.
+    //  The coordinates of the paths are always in local, canvas space.
+    //  That is, the Z coordinate can be ignored (for now), and the paths are essentially in 2D.
+    //  All coordinates of the '_Samples' should lie within [0,0] and [width, height],
+    //      where width and height refer to the dimensions of the canvas for this path.
+    //  Whenever the the canvas dimensions change, the coordinates of the anchor points
+    //      and _Samples must be re-computed.
+
     this._Anchors = [];
     this._BBoxMin = [0, 0, 0];
     this._BBoxMax = [0, 0, 0];
     this._isClosed = false;
 
-    this._samples = [];                 //polyline representation of this curve in stage world space
+    this._Samples = [];                 //polyline representation of this curve in canvas space
     this._sampleParam = [];             //parametric distance of samples, within [0, N], where N is # of Bezier curves (=# of anchor points if closed, =#anchor pts -1 if open)
-    this._anchorSampleIndex = [];       //index within _samples corresponding to anchor points
+    this._anchorSampleIndex = [];       //index within _Samples corresponding to anchor points
 
-    this._LocalPoints = [];             //polyline representation of this curve in canvas space
-    this._LocalBBoxMin = [0,0,0];       //bbox min point of _LocalPoints
-    this._LocalBBoxMax = [0,0,0];       //bbox max point of _LocalPoints
-    this._AnchorLocalCoords = [];       //local coords for all the anchor points , stored as a triplet of 3D vectors (prev, curr, next, in order)
-    this._UnprojectedAnchors = [];
-
-    //initially set the _dirty bit so we will construct samples
+    //initially set the _dirty bit so we will re-construct _Anchors and _Samples
     this._dirty = true;
 
-    //initially set the local dirty bit so we will construct local coordinates
-    this._isLocalDirty = true;
-
-    //initially set the local dirty bit for the anchors so we will construct local coordinates
-    this._isAnchorLocalDirty = true;
-    
-    //whether or not to use the canvas drawing to stroke/fill
-    this._useCanvasDrawing = true;
-
-    //the canvas that will draw this subpath
-    this._canvas = null;
-    
-    //the top left location of this subpath's canvas in screen space
+    //the top left location of this subpath's canvas in screen space (used to identify cases when location changes)
     this._canvasLeft = 0;
     this._canvasTop = 0;
 
     //stroke information
     this._strokeWidth = 1.0;
     this._strokeColor = [0.4, 0.4, 0.4, 1.0];
-    this._strokeMaterial = null
-    this._strokeStyle = "Solid";
-    this._materialAmbient = [0.2, 0.2, 0.2, 1.0];
-    this._materialDiffuse = [0.4, 0.4, 0.4, 1.0];
-    this._materialSpecular = [0.4, 0.4, 0.4, 1.0];
     this._fillColor = [1.0, 1.0, 1.0, 0.0];
-    this._fillMaterial = null;
     this._DISPLAY_ANCHOR_RADIUS = 5;
+
     //drawing context
     this._world = null;
+    this._canvas = null; //todo this might be unnecessary (but faster) since we can get it from the world
 
     //tool that owns this subpath
     this._drawingTool = null;
-    this._planeMat =  Matrix.I(4);
-    this._planeMatInv = Matrix.I(4);
-    this._planeCenter = null;
-    this._dragPlane = null;
 
     //used to query what the user selected, OR-able for future extensions
     this.SEL_NONE = 0;          //nothing was selected
@@ -110,8 +70,6 @@ var GLSubpath = function GLSubpath() {
     this._selectedAnchorIndex = -1;
 
     this._SAMPLING_EPSILON = 0.5; //epsilon used for sampling the curve
-    this._DEFAULT_STROKE_WIDTH = 20; //use only if stroke width not specified
-    this._MAX_OFFSET_ANGLE = 10; //max angle (in degrees) between consecutive vectors from curve to offset path
 
     // (current GeomObj complains if buildBuffers/render is added to GLSubpath prototype)
     //buildBuffers
@@ -121,13 +79,6 @@ var GLSubpath = function GLSubpath() {
         // return; //no need to do anything for now
     };
 
-    this._offsetLocalCoord = function(deltaW, deltaH){
-        var numPoints = this._LocalPoints.length;
-        for (var i=0;i<numPoints;i++) {
-            this._LocalPoints[i][0]+= deltaW;
-            this._LocalPoints[i][1]+= deltaH;
-        }
-    };
     //render
     //  specify how to render the subpath in Canvas2D
     this.render = function () {
@@ -146,24 +97,12 @@ var GLSubpath = function GLSubpath() {
         if (numAnchors === 0) {
             return; //nothing to do for empty paths
         }
-        var useLocalCoord = true;
         this.createSamples(); //dirty bit checked in this function...will generate a polyline representation
 
-        //build the coordinates of the samples in 2D (canvas) space (localDirty bit checked in buildLocalCoord
-        this.buildLocalCoord();
-
         //figure the size of the area we will draw into
         var bboxWidth=0, bboxHeight=0;
-        if (useLocalCoord){
-            bboxWidth = this._LocalBBoxMax[0] - this._LocalBBoxMin[0];
-            bboxHeight = this._LocalBBoxMax[1] - this._LocalBBoxMin[1];
-        }
-        else {
-            var bboxMin = this.getBBoxMin();
-            var bboxMax = this.getBBoxMax();
-            bboxWidth = bboxMax[0] - bboxMin[0];
-            bboxHeight = bboxMax[1] - bboxMin[1];
-        }
+        bboxWidth = this._BBoxMax[0] - this._BBoxMin[0];
+        bboxHeight = this._BBoxMax[1] - this._BBoxMin[1];
 
         ctx.save();
         ctx.clearRect(0, 0, bboxWidth, bboxHeight);
@@ -204,33 +143,17 @@ var GLSubpath = function GLSubpath() {
         */
 
 
-        var numPoints=0, i=0;
         ctx.beginPath();
-        if (!useLocalCoord){
-            numPoints = this._samples.length/3;
-            ctx.moveTo(this._samples[0]-bboxMin[0],this._samples[1]-bboxMin[1]);
-            for (i=0;i<numPoints;i++){
-                ctx.lineTo(this._samples[3*i]-bboxMin[0],this._samples[3*i + 1]-bboxMin[1]);
-            }
-            if (this._isClosed === true) {
-                ctx.lineTo(this._samples[0]-bboxMin[0],this._samples[1]-bboxMin[1]);
-            }
-            ctx.fill();
-            ctx.stroke();
+        var numPoints = this._Samples.length;
+        ctx.moveTo(this._Samples[0][0],this._Samples[0][1]);
+        for (var i=0;i<numPoints;i++){
+            ctx.lineTo(this._Samples[i][0],this._Samples[i][1]);
         }
-        else {
-            //render using the local coords
-            numPoints = this._LocalPoints.length;
-            ctx.moveTo(this._LocalPoints[0][0],this._LocalPoints[0][1]);
-            for (i=0;i<numPoints;i++){
-                ctx.lineTo(this._LocalPoints[i][0],this._LocalPoints[i][1]);
-            }
-            if (this._isClosed === true) {
-                ctx.lineTo(this._LocalPoints[0][0],this._LocalPoints[0][1]);
-            }
-            ctx.fill();
-            ctx.stroke();
+        if (this._isClosed === true) {
+            ctx.lineTo(this._Samples[0][0],this._Samples[0][1]);
         }
+        ctx.fill();
+        ctx.stroke();
         ctx.restore();
     }; //render()
 
@@ -310,21 +233,21 @@ GLSubpath.prototype = new GeomObj();
 /////////////////////////////////////////////////////////
 // Property Accessors/Setters
 /////////////////////////////////////////////////////////
-GLSubpath.prototype.setCanvas = function (c) {
-    this._canvas = c;
-};
-GLSubpath.prototype.getCanvas = function() {
-    return this._canvas;
-};
-