diff options
-rw-r--r-- | assets/canvas-runtime.js | 40 | ||||
-rw-r--r-- | js/io/system/ninjalibrary.json | 2 | ||||
-rwxr-xr-x | js/lib/geom/circle.js | 4 | ||||
-rwxr-xr-x | js/lib/geom/rectangle.js | 20 | ||||
-rwxr-xr-x | js/panels/Materials/materials-popup.reel/materials-popup.js | 21 |
5 files changed, 51 insertions, 36 deletions
diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js index ee9f24a4..ce2a15de 100644 --- a/assets/canvas-runtime.js +++ b/assets/canvas-runtime.js | |||
@@ -685,14 +685,22 @@ NinjaCvsRt.RuntimeRectangle = function () | |||
685 | // various declarations | 685 | // various declarations |
686 | var pt, rad, ctr, startPt, bPts; | 686 | var pt, rad, ctr, startPt, bPts; |
687 | var width = Math.round(this._width), | 687 | var width = Math.round(this._width), |
688 | height = Math.round(this._height); | 688 | height = Math.round(this._height), |
689 | 689 | hw = 0.5*width, | |
690 | pt = [inset, inset]; // top left corner | 690 | hh = 0.5*height; |
691 | 691 | ||
692 | var tlRad = this._tlRadius; //top-left radius | 692 | pt = [inset, inset]; // top left corner |
693 | var trRad = this._trRadius; | 693 | |
694 | var blRad = this._blRadius; | 694 | var tlRad = this._tlRadius; //top-left radius |
695 | var brRad = this._brRadius; | 695 | var trRad = this._trRadius; |
696 | var blRad = this._blRadius; | ||
697 | var brRad = this._brRadius; | ||
698 | // limit the radii to half the rectangle dimension | ||
699 | var minDimen = hw < hh ? hw : hh; | ||
700 | if (tlRad > minDimen) tlRad = minDimen; | ||
701 | if (blRad > minDimen) blRad = minDimen; | ||
702 | if (brRad > minDimen) brRad = minDimen; | ||
703 | if (trRad > minDimen) trRad = minDimen; | ||
696 | 704 | ||
697 | if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0)) | 705 | if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0)) |
698 | { | 706 | { |
@@ -769,7 +777,7 @@ NinjaCvsRt.RuntimeRectangle = function () | |||
769 | var lw = this._strokeWidth; | 777 | var lw = this._strokeWidth; |
770 | var w = world.getViewportWidth(), | 778 | var w = world.getViewportWidth(), |
771 | h = world.getViewportHeight(); | 779 | h = world.getViewportHeight(); |
772 | 780 | ||
773 | var c, | 781 | var c, |
774 | inset, | 782 | inset, |
775 | gradient, | 783 | gradient, |
@@ -781,13 +789,13 @@ NinjaCvsRt.RuntimeRectangle = function () | |||
781 | // render the fill | 789 | // render the fill |
782 | ctx.beginPath(); | 790 | ctx.beginPath(); |
783 | if (this._fillColor) { | 791 | if (this._fillColor) { |
784 | inset = Math.ceil( lw ) + 0.5; | 792 | inset = Math.ceil( lw ) - 0.5; |
785 | 793 | ||
786 | if(this._fillColor.gradientMode) { | 794 | if(this._fillColor.gradientMode) { |
787 | if(this._fillColor.gradientMode === "radial") { | 795 | if(this._fillColor.gradientMode === "radial") { |
788 | gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w/2, h/2)-inset); | 796 | gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w, h)/2); |
789 | } else { | 797 | } else { |
790 | gradient = ctx.createLinearGradient(inset, h/2, w-2*inset, h/2); | 798 | gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2); |
791 | } | 799 | } |
792 | colors = this._fillColor.color; | 800 | colors = this._fillColor.color; |
793 | 801 | ||
@@ -815,11 +823,11 @@ NinjaCvsRt.RuntimeRectangle = function () | |||
815 | // render the stroke | 823 | // render the stroke |
816 | ctx.beginPath(); | 824 | ctx.beginPath(); |
817 | if (this._strokeColor) { | 825 | if (this._strokeColor) { |
818 | inset = Math.ceil( 0.5*lw ) + 0.5; | 826 | inset = Math.ceil( 0.5*lw ) - 0.5; |
819 | 827 | ||
820 | if(this._strokeColor.gradientMode) { | 828 | if(this._strokeColor.gradientMode) { |
821 | if(this._strokeColor.gradientMode === "radial") { | 829 | if(this._strokeColor.gradientMode === "radial") { |
822 | gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h/2, w/2)-inset, w/2, h/2, Math.max(h/2, w/2)); | 830 | gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h, w)/2-inset, w/2, h/2, Math.max(h, w)/2); |
823 | } else { | 831 | } else { |
824 | gradient = ctx.createLinearGradient(0, h/2, w, h/2); | 832 | gradient = ctx.createLinearGradient(0, h/2, w, h/2); |
825 | } | 833 | } |
@@ -1025,9 +1033,9 @@ NinjaCvsRt.RuntimeOval = function () | |||
1025 | if(this._fillColor.gradientMode) { | 1033 | if(this._fillColor.gradientMode) { |
1026 | if(this._fillColor.gradientMode === "radial") { | 1034 | if(this._fillColor.gradientMode === "radial") { |
1027 | gradient = ctx.createRadialGradient(xCtr, yCtr, 0, | 1035 | gradient = ctx.createRadialGradient(xCtr, yCtr, 0, |
1028 | xCtr, yCtr, Math.max(yScale, xScale)); | 1036 | xCtr, yCtr, Math.max(this._width, this._height)/2); |
1029 | } else { | 1037 | } else { |
1030 | gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); | 1038 | gradient = ctx.createLinearGradient(lineWidth/2, this._height/2, this._width-lineWidth, this._height/2); |
1031 | } | 1039 | } |
1032 | colors = this._fillColor.color; | 1040 | colors = this._fillColor.color; |
1033 | 1041 | ||
diff --git a/js/io/system/ninjalibrary.json b/js/io/system/ninjalibrary.json index 285444b5..e236f2e0 100644 --- a/js/io/system/ninjalibrary.json +++ b/js/io/system/ninjalibrary.json | |||
@@ -1,6 +1,6 @@ | |||
1 | { | 1 | { |
2 | "libraries": [ | 2 | "libraries": [ |
3 | {"name": "Montage", "path": "/node_modules/descriptor.json", "version": "0.7.0.0"}, | 3 | {"name": "Montage", "path": "/node_modules/descriptor.json", "version": "0.7.0.0"}, |
4 | {"name": "RDGE", "path": "/assets/descriptor.json", "version": "0.5.4.0"} | 4 | {"name": "RDGE", "path": "/assets/descriptor.json", "version": "0.5.5.0"} |
5 | ] | 5 | ] |
6 | } \ No newline at end of file | 6 | } \ No newline at end of file |
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js index 1073c2db..218dcfa6 100755 --- a/js/lib/geom/circle.js +++ b/js/lib/geom/circle.js | |||
@@ -457,9 +457,9 @@ var Circle = function GLCircle() { | |||
457 | if(this._fillColor.gradientMode) { | 457 | if(this._fillColor.gradientMode) { |
458 | if(this._fillColor.gradientMode === "radial") { | 458 | if(this._fillColor.gradientMode === "radial") { |
459 | gradient = ctx.createRadialGradient(xCtr, yCtr, 0, | 459 | gradient = ctx.createRadialGradient(xCtr, yCtr, 0, |
460 | xCtr, yCtr, Math.max(yScale, xScale)); | 460 | xCtr, yCtr, Math.max(this._width, this._height)/2); |
461 | } else { | 461 | } else { |
462 | gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); | 462 | gradient = ctx.createLinearGradient(lineWidth/2, this._height/2, this._width-lineWidth, this._height/2); |
463 | } | 463 | } |
464 | colors = this._fillColor.color; | 464 | colors = this._fillColor.color; |
465 | 465 | ||
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index 91b1d426..fcd1c1bd 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js | |||
@@ -356,7 +356,9 @@ var Rectangle = function GLRectangle() { | |||
356 | // various declarations | 356 | // various declarations |
357 | var pt, rad, ctr, startPt, bPts; | 357 | var pt, rad, ctr, startPt, bPts; |
358 | var width = Math.round(this.getWidth()), | 358 | var width = Math.round(this.getWidth()), |
359 | height = Math.round(this.getHeight()); | 359 | height = Math.round(this.getHeight()), |
360 | hw = 0.5*width, | ||
361 | hh = 0.5*height; | ||
360 | 362 | ||
361 | pt = [inset, inset]; // top left corner | 363 | pt = [inset, inset]; // top left corner |
362 | 364 | ||
@@ -364,6 +366,12 @@ var Rectangle = function GLRectangle() { | |||
364 | var trRad = this._trRadius; | 366 | var trRad = this._trRadius; |
365 | var blRad = this._blRadius; | 367 | var blRad = this._blRadius; |
366 | var brRad = this._brRadius; | 368 | var brRad = this._brRadius; |
369 | // limit the radii to half the rectangle dimension | ||
370 | var minDimen = hw < hh ? hw : hh; | ||
371 | if (tlRad > minDimen) tlRad = minDimen; | ||
372 | if (blRad > minDimen) blRad = minDimen; | ||
373 | if (brRad > minDimen) brRad = minDimen; | ||
374 | if (trRad > minDimen) trRad = minDimen; | ||
367 | 375 | ||
368 | if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0)) { | 376 | if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0)) { |
369 | ctx.rect(pt[0], pt[1], width - 2*inset, height - 2*inset); | 377 | ctx.rect(pt[0], pt[1], width - 2*inset, height - 2*inset); |
@@ -452,13 +460,13 @@ var Rectangle = function GLRectangle() { | |||
452 | // render the fill | 460 | // render the fill |
453 | ctx.beginPath(); | 461 | ctx.beginPath(); |
454 | if (this._fillColor) { | 462 | if (this._fillColor) { |
455 | inset = Math.ceil( lw ) + 0.5; | 463 | inset = Math.ceil( lw ) - 0.5; |
456 | 464 | ||
457 | if(this._fillColor.gradientMode) { | 465 | if(this._fillColor.gradientMode) { |
458 | if(this._fillColor.gradientMode === "radial") { | 466 | if(this._fillColor.gradientMode === "radial") { |
459 | gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w/2, h/2)-inset); | 467 | gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w, h)/2); |
460 | } else { | 468 | } else { |
461 | gradient = ctx.createLinearGradient(inset, h/2, w-2*inset, h/2); | 469 | gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2); |
462 | } | 470 | } |
463 | colors = this._fillColor.color; | 471 | colors = this._fillColor.color; |
464 | 472 | ||
@@ -486,11 +494,11 @@ var Rectangle = function GLRectangle() { | |||
486 | // render the stroke | 494 | // render the stroke |
487 | ctx.beginPath(); | 495 | ctx.beginPath(); |
488 | if (this._strokeColor) { | 496 | if (this._strokeColor) { |
489 | inset = Math.ceil( 0.5*lw ) + 0.5; | 497 | inset = Math.ceil( 0.5*lw ) - 0.5; |
490 | 498 | ||
491 | if(this._strokeColor.gradientMode) { | 499 | if(this._strokeColor.gradientMode) { |
492 | if(this._strokeColor.gradientMode === "radial") { | 500 | if(this._strokeColor.gradientMode === "radial") { |
493 | gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h/2, w/2)-inset, w/2, h/2, Math.max(h/2, w/2)); | 501 | gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h, w)/2-inset, w/2, h/2, Math.max(h, w)/2); |
494 | } else { | 502 | } else { |
495 | gradient = ctx.createLinearGradient(0, h/2, w, h/2); | 503 | gradient = ctx.createLinearGradient(0, h/2, w, h/2); |
496 | } | 504 | } |
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js index bbccf45d..bd10f7a5 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.js +++ b/js/panels/Materials/materials-popup.reel/materials-popup.js | |||
@@ -214,10 +214,9 @@ exports.MaterialsPopup = Montage.create(Component, { | |||
214 | enumerable: true, | 214 | enumerable: true, |
215 | value: function(materialID) | 215 | value: function(materialID) |
216 | { | 216 | { |
217 | // Note that setting Array.length = 0 will empty arrays, | 217 | //TODO - Hack to force repetition to draw. Setting .length = 0 did not work. |
218 | // which is fine if you use getMaterialData to get a new array, but not for the | 218 | this.materialsData = []; |
219 | // dummyData arrays. | 219 | |
220 | this._materialsData.length = 0; | ||
221 | this._materialName = materialID; | 220 | this._materialName = materialID; |
222 | if( | 221 | if( |
223 | (materialID === "UberMaterial") || | 222 | (materialID === "UberMaterial") || |
@@ -231,16 +230,14 @@ exports.MaterialsPopup = Montage.create(Component, { | |||
231 | if (material) | 230 | if (material) |
232 | { | 231 | { |
233 | this._material = material; | 232 | this._material = material; |
234 | var matData = this.getMaterialData( material ); | 233 | this.materialsData = this.getMaterialData( material ); |
235 | this.materialsData = matData; | ||
236 |