diff options
author | Pushkar Joshi | 2012-04-03 14:50:34 -0700 |
---|---|---|
committer | Pushkar Joshi | 2012-04-03 14:50:34 -0700 |
commit | 79fb912bdaa22b8107bbddc93d1779820af80cf9 (patch) | |
tree | 022c08e2cff19d1599808037684b271dedecb146 /js/lib | |
parent | 06970d710f7172ee5ab736ef082c7703c61bfd0c (diff) | |
download | ninja-79fb912bdaa22b8107bbddc93d1779820af80cf9.tar.gz |
working File I/O for pen tool created paths and some minor bug fixes (correctly setting the canvas for brush stroke file I/O, correct plane matrix for file I/O)
Diffstat (limited to 'js/lib')
-rwxr-xr-x | js/lib/drawing/world.js | 7 | ||||
-rwxr-xr-x | js/lib/geom/brush-stroke.js | 14 | ||||
-rwxr-xr-x | js/lib/geom/sub-path.js | 181 |
3 files changed, 91 insertions, 111 deletions
diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js index 5a054224..a1a5b5ae 100755 --- a/js/lib/drawing/world.js +++ b/js/lib/drawing/world.js | |||
@@ -943,7 +943,7 @@ World.prototype.importObjectJSON = function( jObj, parentGeomObj ) | |||
943 | { | 943 | { |
944 | var type = jObj.type; | 944 | var type = jObj.type; |
945 | var BrushStroke = require("js/lib/geom/brush-stroke").BrushStroke; | 945 | var BrushStroke = require("js/lib/geom/brush-stroke").BrushStroke; |
946 | 946 | var SubPath = require("js/lib/geom/sub-path").SubPath; | |
947 | var obj; | 947 | var obj; |
948 | switch (type) | 948 | switch (type) |
949 | { | 949 | { |
@@ -962,6 +962,11 @@ World.prototype.importObjectJSON = function( jObj, parentGeomObj ) | |||
962 | obj.importJSON( jObj ); | 962 | obj.importJSON( jObj ); |
963 | break; | 963 | break; |
964 | 964 | ||
965 | case 5: //cubic bezier | ||
966 | obj = new SubPath(); | ||
967 | obj.importJSON(jObj); | ||
968 | break; | ||
969 | |||
965 | case 6: //brush stroke | 970 | case 6: //brush stroke |
966 | obj = new BrushStroke(); | 971 | obj = new BrushStroke(); |
967 | obj.importJSON(jObj); | 972 | obj.importJSON(jObj); |
diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js index e93c9382..2a751a89 100755 --- a/js/lib/geom/brush-stroke.js +++ b/js/lib/geom/brush-stroke.js | |||
@@ -541,6 +541,10 @@ var BrushStroke = function GLBrushStroke() { | |||
541 | var bboxWidth = bboxMax[0] - bboxMin[0]; | 541 | var bboxWidth = bboxMax[0] - bboxMin[0]; |
542 | var bboxHeight = bboxMax[1] - bboxMin[1]; | 542 | var bboxHeight = bboxMax[1] - bboxMin[1]; |
543 | 543 | ||
544 | if (!this._canvas){ | ||
545 | //set the canvas by querying the world | ||
546 | this._canvas = this.getWorld().getCanvas(); | ||
547 | } | ||
544 | if (this._canvas) { | 548 | if (this._canvas) { |
545 | var newLeft = Math.round(this._stageWorldCenter[0] - 0.5 * bboxWidth); | 549 | var newLeft = Math.round(this._stageWorldCenter[0] - 0.5 * bboxWidth); |
546 | var newTop = Math.round(this._stageWorldCenter[1] - 0.5 * bboxHeight); | 550 | var newTop = Math.round(this._stageWorldCenter[1] - 0.5 * bboxHeight); |
@@ -550,7 +554,7 @@ var BrushStroke = function GLBrushStroke() { | |||
550 | 554 | ||
551 | CanvasController.setProperty(this._canvas, "width", bboxWidth+"px"); | 555 | CanvasController.setProperty(this._canvas, "width", bboxWidth+"px"); |
552 | CanvasController.setProperty(this._canvas, "height", bboxHeight+"px"); | 556 | CanvasController.setProperty(this._canvas, "height", bboxHeight+"px"); |
553 | this._canvas.elementModel.shapeModel.GLWorld.setViewportFromCanvas(this._canvas); | 557 | //this._canvas.elementModel.shapeModel.GLWorld.setViewportFromCanvas(this._canvas); |
554 | } | 558 | } |
555 | 559 | ||
556 | 560 | ||
@@ -662,8 +666,8 @@ var BrushStroke = function GLBrushStroke() { | |||
662 | this._copyCoordinates3D(this._OrigLocalPoints, retObject.origLocalPoints); //todo <ditto> | 666 | this._copyCoordinates3D(this._OrigLocalPoints, retObject.origLocalPoints); //todo <ditto> |
663 | 667 | ||
664 | retObject.stageWorldCenter = [this._stageWorldCenter[0],this._stageWorldCenter[1],this._stageWorldCenter[2]]; | 668 | retObject.stageWorldCenter = [this._stageWorldCenter[0],this._stageWorldCenter[1],this._stageWorldCenter[2]]; |
665 | retObject.planeMat = [this._planeMat[0],this._planeMat[1],this._planeMat[2],this._planeMat[3]]; | 669 | retObject.planeMat = this._planeMat; |
666 | retObject.planeMatInv = [this._planeMatInv[0],this._planeMatInv[1],this._planeMatInv[2],this._planeMatInv[3]]; | 670 | retObject.planeMatInv = this._planeMatInv; |
667 | retObject.dragPlane = [this._dragPlane[0],this._dragPlane[1],this._dragPlane[2],this._dragPlane[3]]; | 671 | retObject.dragPlane = [this._dragPlane[0],this._dragPlane[1],this._dragPlane[2],this._dragPlane[3]]; |
668 | 672 | ||
669 | //stroke appearance properties | 673 | //stroke appearance properties |
@@ -691,8 +695,8 @@ var BrushStroke = function GLBrushStroke() { | |||
691 | this._copyCoordinates3D(jo.origLocalPoints, this._OrigLocalPoints); //todo <ditto> | 695 | this._copyCoordinates3D(jo.origLocalPoints, this._OrigLocalPoints); //todo <ditto> |
692 | 696 | ||
693 | this._stageWorldCenter = [jo.stageWorldCenter[0],jo.stageWorldCenter[1],jo.stageWorldCenter[2]]; | 697 | this._stageWorldCenter = [jo.stageWorldCenter[0],jo.stageWorldCenter[1],jo.stageWorldCenter[2]]; |
694 | this._planeMat = [jo.planeMat[0], jo.planeMat[1],jo.planeMat[2],jo.planeMat[3]]; | 698 | this._planeMat = jo.planeMat; |
695 | this._planeMatInv = [jo.planeMatInv[0],jo.planeMatInv[1],jo.planeMatInv[2],jo.planeMatInv[3]]; | 699 | this._planeMatInv = jo.planeMatInv; |
696 | this._dragPlane = [jo.dragPlane[0],jo.dragPlane[1],jo.dragPlane[2],jo.dragPlane[3]]; | 700 | this._dragPlane = [jo.dragPlane[0],jo.dragPlane[1],jo.dragPlane[2],jo.dragPlane[3]]; |
697 | 701 | ||
698 | //stroke appearance properties | 702 | //stroke appearance properties |
diff --git a/js/lib/geom/sub-path.js b/js/lib/geom/sub-path.js index d8d74928..35070915 100755 --- a/js/lib/geom/sub-path.js +++ b/js/lib/geom/sub-path.js | |||
@@ -95,6 +95,7 @@ var GLSubpath = function GLSubpath() { | |||
95 | this._planeMat = null; | 95 | this._planeMat = null; |
96 | this._planeMatInv = null; | 96 | this._planeMatInv = null; |
97 | this._planeCenter = null; | 97 | this._planeCenter = null; |
98 | this._dragPlane = null; | ||
98 | 99 | ||
99 | //used to query what the user selected, OR-able for future extensions | 100 | //used to query what the user selected, OR-able for future extensions |
100 | this.SEL_NONE = 0; //nothing was selected | 101 | this.SEL_NONE = 0; //nothing was selected |
@@ -130,7 +131,10 @@ var GLSubpath = function GLSubpath() { | |||
130 | // get the world | 131 | // get the world |
131 | var world = this.getWorld(); | 132 | var world = this.getWorld(); |
132 | if (!world) throw( "null world in subpath render" ); | 133 | if (!world) throw( "null world in subpath render" ); |
133 | 134 | if (!this._canvas){ | |
135 | //set the canvas by querying the world | ||
136 | this._canvas = this.getWorld().getCanvas(); | ||
137 | } | ||
134 | // get the context | 138 | // get the context |
135 | var ctx = world.get2DContext(); | 139 | var ctx = world.get2DContext(); |
136 | if (!ctx) throw ("null context in subpath render"); | 140 | if (!ctx) throw ("null context in subpath render"); |
@@ -145,42 +149,19 @@ var GLSubpath = function GLSubpath() { | |||
145 | //build the coordinates of the samples in 2D (canvas) space (localDirty bit checked in buildLocalCoord | 149 | //build the coordinates of the samples in 2D (canvas) space (localDirty bit checked in buildLocalCoord |
146 | this.buildLocalCoord(); | 150 | this.buildLocalCoord(); |
147 | 151 | ||
148 | // | 152 | //figure the size of the area we will draw into |
149 | var bboxWidth=0, bboxHeight=0; | 153 | var bboxWidth=0, bboxHeight=0; |
150 | //var bboxMid=[0,0,0]; | ||
151 | if (useLocalCoord){ | 154 | if (useLocalCoord){ |
152 | bboxWidth = this._LocalBBoxMax[0] - this._LocalBBoxMin[0]; | 155 | bboxWidth = this._LocalBBoxMax[0] - this._LocalBBoxMin[0]; |
153 | bboxHeight = this._LocalBBoxMax[1] - this._LocalBBoxMin[1]; | 156 | 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 | } | 157 | } |
156 | else { | 158 | else { |
157 | var bboxMin = this.getBBoxMin(); | 159 | var bboxMin = this.getBBoxMin(); |
158 | var bboxMax = this.getBBoxMax(); | 160 | var bboxMax = this.getBBoxMax(); |
159 | bboxWidth = bboxMax[0] - bboxMin[0]; | 161 | bboxWidth = bboxMax[0] - bboxMin[0]; |
160 | bboxHeight = bboxMax[1] - bboxMin[1]; | 162 | 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 | } | 163 | } |
163 | 164 | ||
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"); | ||
179 | CanvasController.setProperty(this._canvas, "width", bboxWidth+"px"); | ||
180 | CanvasController.setProperty(this._canvas, "height", bboxHeight+"px"); | ||
181 | this._canvas.elementModel.shapeModel.GLWorld.setViewportFromCanvas(this._canvas); | ||
182 | */ | ||
183 | } | ||
184 | ctx.save(); | 165 | ctx.save(); |
185 | ctx.clearRect(0, 0, bboxWidth, bboxHeight); | 166 | ctx.clearRect(0, 0, bboxWidth, bboxHeight); |
186 | 167 | ||
@@ -354,6 +335,10 @@ GLSubpath.prototype.setPlaneMatrix = function(planeMat){ | |||
354 | this._planeMat = planeMat; | 335 | this._planeMat = planeMat; |
355 | }; | 336 | }; |
356 | 337 | ||
338 | GLSubpath.prototype.setDragPlane = function(p){ | ||
339 | this._dragPlane = p; | ||
340 | }; | ||
341 | |||
357 | GLSubpath.prototype.setPlaneMatrixInverse = function(planeMatInv){ | 342 | GLSubpath.prototype.setPlaneMatrixInverse = function(planeMatInv){ |
358 | this._planeMatInv = planeMatInv; | 343 | this._planeMatInv = planeMatInv; |
359 | }; | 344 | }; |
@@ -867,6 +852,12 @@ GLSubpath.prototype.getStrokeWidth = function () { | |||
867 | }; | 852 | }; |
868 | 853 | ||
869 | GLSubpath.prototype.translateSubpathPerCanvas = function(elemMediator){ | 854 | GLSubpath.prototype.translateSubpathPerCanvas = function(elemMediator){ |
855 | if (!this._canvas){ | ||
856 | if (!this.getWorld()) | ||
857 | return; //cannot do anything if there is no world | ||
858 | //set the canvas by querying the world | ||
859 | this._canvas = this.getWorld().getCanvas(); | ||
860 | } | ||
870 | //check if the canvas was translated | 861 | //check if the canvas was translated |
871 | var penCanvasCurrentLeft = parseInt(elemMediator.getProperty(this._canvas, "left"));//parseFloat(DocumentControllerModule.DocumentController.GetElementStyle(this._penCanvas, "left")); | 862 | var penCanvasCurrentLeft = parseInt(elemMediator.getProperty(this._canvas, "left"));//parseFloat(DocumentControllerModule.DocumentController.GetElementStyle(this._penCanvas, "left")); |
872 | var penCanvasCurrentTop = parseInt(elemMediator.getProperty(this._canvas, "top"));//parseFloat(DocumentControllerModule.DocumentController.GetElementStyle(this._penCanvas, "top")); | 863 | var penCanvasCurrentTop = parseInt(elemMediator.getProperty(this._canvas, "top"));//parseFloat(DocumentControllerModule.DocumentController.GetElementStyle(this._penCanvas, "top")); |
@@ -1516,95 +1507,75 @@ GLSubpath.prototype.isPointInQuad2D = function(r0,r1,r2,r3,p){ | |||
1516 | return false; | 1507 | return false; |
1517 | }; | 1508 | }; |
1518 | 1509 | ||
1519 | GLSubpath.prototype.export = function() { | 1510 | GLSubpath.prototype.exportJSON = function() { |
1520 | var rtnStr = "type: " + this.geomType() + "\n"; | 1511 | var retObject= new Object(); |
1521 | 1512 | //the type of this object | |
1522 | rtnStr += "strokeWidth: " + this._strokeWidth + "\n"; | 1513 | retObject.type = this.geomType(); |
1523 | rtnStr += "strokeStyle: " + this._strokeStyle + "\n"; | 1514 | retObject.geomType = retObject.type; |
1524 | |||
1525 | rtnStr += "strokeMat: "; | ||
1526 | if (this._strokeMaterial) | ||
1527 | rtnStr += this._strokeMaterial.getName(); | ||
1528 | else | ||
1529 | rtnStr += "flatMaterial"; | ||
1530 | rtnStr += "\n"; | ||
1531 | |||
1532 | rtnStr += "fillMat: "; | ||
1533 | if (this._fillMaterial) | ||
1534 | rtnStr += this._fillMaterial.getName(); | ||
1535 | else | ||
1536 | rtnStr += "flatMaterial"; | ||
1537 | rtnStr += "\n"; | ||
1538 | |||
1539 | var isClosedStr = "false"; | ||
1540 | if (this._isClosed) | ||
1541 | isClosedStr = "true"; | ||
1542 | rtnStr += "isClosed: " + isClosedStr + "\n"; | ||
1543 | |||
1544 | //add the anchor points | ||
1545 | var numAnchors = this._Anchors.length; | ||
1546 | rtnStr += "numAnchors: " + numAnchors + "\n"; | ||
1547 | for (var i=0;i<numAnchors;i++){ | ||
1548 | rtnStr += "anchor"+i+"x: " + this._Anchors[i].getPosX() + "\n"; | ||
1549 | rtnStr += "anchor"+i+"y: " + this._Anchors[i].getPosY() + "\n"; | ||