aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rwxr-xr-xjs/components/tools-properties/brush-properties.reel/brush-properties.html2
-rwxr-xr-xjs/components/tools-properties/pen-properties.reel/pen-properties.html2
-rwxr-xr-xjs/helper-classes/3D/view-utils.js1
-rwxr-xr-xjs/lib/geom/brush-stroke.js2
-rwxr-xr-xjs/lib/geom/sub-path.js264
-rwxr-xr-xjs/tools/PenTool.js44
6 files changed, 269 insertions, 46 deletions
diff --git a/js/components/tools-properties/brush-properties.reel/brush-properties.html b/js/components/tools-properties/brush-properties.reel/brush-properties.html
index 98442164..d9c35dc2 100755
--- a/js/components/tools-properties/brush-properties.reel/brush-properties.html
+++ b/js/components/tools-properties/brush-properties.reel/brush-properties.html
@@ -84,7 +84,7 @@
84 </head> 84 </head>
85 85
86 <body> 86 <body>
87 <div id="brushProperties" class="subToolHolderPanel"> 87 <div data-montage-id="brushProperties" class="subToolHolderPanel">
88 <div id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;"> 88 <div id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;">
89 <label class="label"> Width:</label> 89 <label class="label"> Width:</label>
90 <div id="strokeSize" class="label"></div> 90 <div id="strokeSize" class="label"></div>
diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.html b/js/components/tools-properties/pen-properties.reel/pen-properties.html
index 74a3a747..acbedcac 100755
--- a/js/components/tools-properties/pen-properties.reel/pen-properties.html
+++ b/js/components/tools-properties/pen-properties.reel/pen-properties.html
@@ -39,7 +39,7 @@
39 </head> 39 </head>
40 40
41 <body> 41 <body>
42 <div id="penProperties" class="subToolHolderPanel"> 42 <div data-montage-id="penProperties" class="subToolHolderPanel">
43 <div id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;"> 43 <div id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;">
44 <label class="label"> Stroke:</label> 44 <label class="label"> Stroke:</label>
45 <div id="strokeSize" class="label"></div> 45 <div id="strokeSize" class="label"></div>
diff --git a/js/helper-classes/3D/view-utils.js b/js/helper-classes/3D/view-utils.js
index a72b7906..f60b953a 100755
--- a/js/helper-classes/3D/view-utils.js
+++ b/js/helper-classes/3D/view-utils.js
@@ -242,7 +242,6 @@ exports.ViewUtils = Montage.create(Component, {
242 var worldPt = MathUtils.transformPoint( viewPt, mat ); 242 var worldPt = MathUtils.transformPoint( viewPt, mat );
243 var stageWorldPt = this.postViewToStageWorld( worldPt, elt ); 243 var stageWorldPt = this.postViewToStageWorld( worldPt, elt );
244 this.popViewportObj(); 244 this.popViewportObj();
245
246 return stageWorldPt; 245 return stageWorldPt;
247 } 246 }
248 }, 247 },
diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js
index 22209815..e93c9382 100755
--- a/js/lib/geom/brush-stroke.js
+++ b/js/lib/geom/brush-stroke.js
@@ -413,7 +413,7 @@ var BrushStroke = function GLBrushStroke() {
413 this._LocalPoints[i][1]+= halfheight; 413 this._LocalPoints[i][1]+= halfheight;
414 414
415 //store the original points 415 //store the original points
416 this._OrigLocalPoints .push([this._LocalPoints[i][0],this._LocalPoints[i][1],this._LocalPoints[i][2]]); 416 this._OrigLocalPoints.push([this._LocalPoints[i][0],this._LocalPoints[i][1],this._LocalPoints[i][2]]);
417 } 417 }
418 //update the bbox with the same adjustment as was made for the local points above 418 //update the bbox with the same adjustment as was made for the local points above
419 this._BBoxMax[0]+= halfwidth;this._BBoxMin[0]+= halfwidth; 419 this._BBoxMax[0]+= halfwidth;this._BBoxMin[0]+= halfwidth;
diff --git a/js/lib/geom/sub-path.js b/js/lib/geom/sub-path.js
index 9bd9ad9a..19a1da3b 100755
--- a/js/lib/geom/sub-path.js
+++ b/js/lib/geom/sub-path.js
@@ -12,6 +12,7 @@ var AnchorPoint = require("js/lib/geom/anchor-point").AnchorPoint;
12var MaterialsModel = require("js/models/materials-model").MaterialsModel; 12var MaterialsModel = require("js/models/materials-model").MaterialsModel;
13 13
14// TODO Those function do not seems to be used. We should remove them 14// TODO Those function do not seems to be used. We should remove them
15/*
15function SubpathOffsetPoint(pos, mapPos) { 16function SubpathOffsetPoint(pos, mapPos) {
16 this.Pos = [pos[0],pos[1],pos[2]]; 17 this.Pos = [pos[0],pos[1],pos[2]];
17 this.CurveMapPos = [mapPos[0], mapPos[1], mapPos[2]]; 18 this.CurveMapPos = [mapPos[0], mapPos[1], mapPos[2]];
@@ -33,7 +34,7 @@ function sortNumberDescending(a,b){
33function SegmentIntersections(){ 34function SegmentIntersections(){
34 this.paramArray = []; 35 this.paramArray = [];
35} 36}
36 37*/
37/////////////////////////////////////////////////////////////////////// 38///////////////////////////////////////////////////////////////////////
38// Class GLSubpath 39// Class GLSubpath
39// representation a sequence of cubic bezier curves. 40// representation a sequence of cubic bezier curves.
@@ -49,15 +50,22 @@ var GLSubpath = function GLSubpath() {
49 this._BBoxMax = [0, 0, 0]; 50 this._BBoxMax = [0, 0, 0];
50 this._isClosed = false; 51 this._isClosed = false;
51 52
52 this._samples = []; //polyline representation of this curve 53 this._samples = []; //polyline representation of this curve in stage world space
53 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) 54 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)
54 this._anchorSampleIndex = []; //index within _samples corresponding to anchor points 55 this._anchorSampleIndex = []; //index within _samples corresponding to anchor points
55 56
57 this._LocalPoints = []; //polyline representation of this curve in canvas space
58 this._LocalBBoxMin = [0,0,0]; //bbox min point of _LocalPoints
59 this._LocalBBoxMax = [0,0,0]; //bbox max point of _LocalPoints
60
56 this._UnprojectedAnchors = []; 61 this._UnprojectedAnchors = [];
57 62
58 //initially set the _dirty bit so we will construct samples 63 //initially set the _dirty bit so we will construct samples
59 this._dirty = true; 64 this._dirty = true;
60 65
66 //initially set the local dirty bit so we will construct local coordinates
67 this._isLocalDirty = true;
68
61 //whether or not to use the canvas drawing to stroke/fill 69 //whether or not to use the canvas drawing to stroke/fill
62 this._useCanvasDrawing = true; 70 this._useCanvasDrawing = true;
63 71
@@ -69,7 +77,7 @@ var GLSubpath = function GLSubpath() {
69 this._canvasY = 0; 77 this._canvasY = 0;
70 78
71 //stroke information 79 //stroke information
72 this._strokeWidth = 0.0; 80 this._strokeWidth = 1.0;
73 this._strokeColor = [0.4, 0.4, 0.4, 1.0]; 81 this._strokeColor = [0.4, 0.4, 0.4, 1.0];
74 this._strokeMaterial = null 82 this._strokeMaterial = null
75 this._strokeStyle = "Solid"; 83 this._strokeStyle = "Solid";
@@ -109,6 +117,13 @@ var GLSubpath = function GLSubpath() {
109 // return; //no need to do anything for now 117 // return; //no need to do anything for now
110 }; 118 };
111 119
120 this._offsetLocalCoord = function(deltaW, deltaH){
121 var numPoints = this._LocalPoints.length;
122 for (var i=0;i<numPoints;i++) {
123 this._LocalPoints[i][0]+= deltaW;
124 this._LocalPoints[i][1]+= deltaH;
125 }
126 };
112 //render 127 //render
113 // specify how to render the subpath in Canvas2D 128 // specify how to render the subpath in Canvas2D
114 this.render = function () { 129 this.render = function () {
@@ -116,35 +131,65 @@ var GLSubpath = function GLSubpath() {
116 var world = this.getWorld(); 131 var world = this.getWorld();
117 if (!world) throw( "null world in subpath render" ); 132 if (!world) throw( "null world in subpath render" );
118 133
119 // get the context 134 // get the context
120 var ctx = world.get2DContext(); 135 var ctx = world.get2DContext();
121 if (!ctx) throw ("null context in subpath render") 136 if (!ctx) throw ("null context in subpath render");
122 137
123 var numAnchors = this.getNumAnchors(); 138 var numAnchors = this.getNumAnchors();
124 if (numAnchors === 0) { 139 if (numAnchors === 0) {
125 return; //nothing to do for empty paths 140 return; //nothing to do for empty paths
126 } 141 }
142 var useLocalCoord = true;
143 this.createSamples(); //dirty bit checked in this function...will generate a polyline representation
127 144
128 ctx.save(); 145 //build the coordinates of the samples in 2D (canvas) space (localDirty bit checked in buildLocalCoord
146 this.buildLocalCoord();
129 147
130 this.createSamples(); //dirty bit checked in this function...will generate a polyline representation 148 //
131 var bboxMin = this.getBBoxMin(); 149 var bboxWidth=0, bboxHeight=0;
132 var bboxMax = this.getBBoxMax(); 150 //var bboxMid=[0,0,0];
133 var bboxWidth = bboxMax[0] - bboxMin[0]; 151 if (useLocalCoord){
134 var bboxHeight = bboxMax[1] - bboxMin[1]; 152 bboxWidth = this._LocalBBoxMax[0] - this._LocalBBoxMin[0];
135 var bboxMid = [0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0.5 * (bboxMax[2] + bboxMin[2])]; 153 bboxHeight = this._LocalBBoxMax[1] - this._LocalBBoxMin[1];
154 //bboxMid = [0.5 * (this._LocalBBoxMax[0] + this._LocalBBoxMin[0]), 0.5 * (this._LocalBBoxMax[1] + this._LocalBBoxMin[1]), 0.5 * (this._LocalBBoxMax[2] + this._LocalBBoxMin[2])];
155 }
156 else {
157 var bboxMin = this.getBBoxMin();
158 var bboxMax = this.getBBoxMax();
159 bboxWidth = bboxMax[0] - bboxMin[0];
160 bboxHeight = bboxMax[1] - bboxMin[1];
161 //bboxMid = [0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0.5 * (bboxMax[2] + bboxMin[2])];
162 }
136 163
137 if (this._canvas) { 164 if (this._canvas) {
165 /*
166 var ViewUtils = require("js/helper-classes/3D/view-utils").ViewUtils;
167 //compute the plane center as the midpoint of the local bbox converted to stage world space
168 var planeCenter = ViewUtils.localToStageWorld(bboxMid, this._canvas);
169 planeCenter[0]+=400; planeCenter[1]+=300; //todo replace these lines with the correct call for the offset
170 console.log("PEN: local bboxMid: "+ bboxMid +", stage-world bboxMid: "+ planeCenter);
171 var newLeft = planeCenter[0] - 0.5*bboxWidth;
172 console.log("PEN: newLeft: "+ newLeft +", bboxWidth: "+bboxWidth);
173 newLeft = Math.round(newLeft);//Math.round(this._planeCenter[0] - 0.5 * bboxWidth);
174 console.log("PEN: newLeft rounded: "+ newLeft);
175 var newTop = Math.round(planeCenter[1] - 0.5 * bboxHeight);//Math.round(this._planeCenter[1] - 0.5 * bboxHeight);
176 //assign the new position, width, and height as the canvas dimensions through the canvas controller
177 CanvasController.setProperty(this._canvas, "left", newLeft+"px");
178 CanvasController.setProperty(this._canvas, "top", newTop+"px");
138 CanvasController.setProperty(this._canvas, "width", bboxWidth+"px"); 179 CanvasController.setProperty(this._canvas, "width", bboxWidth+"px");
139 CanvasController.setProperty(this._canvas, "height", bboxHeight+"px"); 180 CanvasController.setProperty(this._canvas, "height", bboxHeight+"px");
140 this._canvas.elementModel.shapeModel.GLWorld.setViewportFromCanvas(this._canvas); 181 this._canvas.elementModel.shapeModel.GLWorld.setViewportFromCanvas(this._canvas);
182 */
141 } 183 }
184 ctx.save();
142 ctx.clearRect(0, 0, bboxWidth, bboxHeight); 185 ctx.clearRect(0, 0, bboxWidth, bboxHeight);
143 186
144 ctx.lineWidth = this._strokeWidth; 187 ctx.lineWidth = this._strokeWidth;
145 ctx.strokeStyle = "black"; 188 ctx.strokeStyle = "black";
146 if (this._strokeColor) { 189 if (this._strokeColor) {
147 ctx.strokeStyle = MathUtils.colorToHex( this._strokeColor ); 190 //ctx.strokeStyle = MathUtils.colorToHex( this._strokeColor );
191 var strokeColorStr = "rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+this._strokeColor[3]+")";
192 ctx.strokeStyle = strokeColorStr;
148 } 193 }
149 194
150 ctx.fillStyle = "white"; 195 ctx.fillStyle = "whi