From 46defc9bd11bf077efd672c72787a3b67da1a178 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Mon, 12 Mar 2012 14:59:08 -0700 Subject: Uber material changes for IO --- .../RDGE/src/core/script/MeshManager.js | 2 +- .../RDGE/src/core/script/run_state.js | 16 +-- js/lib/geom/geom-obj.js | 6 +- js/lib/rdge/materials/flat-material.js | 6 - js/lib/rdge/materials/uber-material.js | 122 ++++++++++++++++++--- 5 files changed, 121 insertions(+), 31 deletions(-) diff --git a/js/helper-classes/RDGE/src/core/script/MeshManager.js b/js/helper-classes/RDGE/src/core/script/MeshManager.js index 43813078..7dfc79d4 100755 --- a/js/helper-classes/RDGE/src/core/script/MeshManager.js +++ b/js/helper-classes/RDGE/src/core/script/MeshManager.js @@ -69,7 +69,7 @@ MeshManager.prototype.deleteMesh = function (name) if (model) { g_Engine.ctxMan.forEach(function(context) - { + { context.renderer.deletePrimitive(model.primitive); }); diff --git a/js/helper-classes/RDGE/src/core/script/run_state.js b/js/helper-classes/RDGE/src/core/script/run_state.js index acdb6797..a5981caa 100755 --- a/js/helper-classes/RDGE/src/core/script/run_state.js +++ b/js/helper-classes/RDGE/src/core/script/run_state.js @@ -30,9 +30,9 @@ RunState.prototype.Init = function() this.userRunState.init(); } - if (this.hasUserState && this.userRunState && this.userRunState.onRunState) - this.userRunState.onRunState(); - + if (this.hasUserState && this.userRunState && this.userRunState.onRunState) + this.userRunState.onRunState(); + //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// @@ -97,11 +97,11 @@ RunState.prototype.ReInit = function() if(!this.initialized) { this.Init(); - } - else - { - if (this.hasUserState && this.userRunState && this.userRunState.onRunState) - this.userRunState.onRunState(); + } + else + { + if (this.hasUserState && this.userRunState && this.userRunState.onRunState) + this.userRunState.onRunState(); } } diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js index 1a197832..35ebadb9 100755 --- a/js/lib/geom/geom-obj.js +++ b/js/lib/geom/geom-obj.js @@ -285,9 +285,11 @@ var GeomObj = function GLGeomObj() { if (mat) mat.import( importStr ); - var endIndex = importStr.indexOf( "endMaterial\n" ); + // pull off the end of the material + var endMat = "endMaterial\n"; + var endIndex = importStr.indexOf( endMat ); if (endIndex < 0) break; - importStr = importStr.substr( endIndex ); + importStr = importStr.substr( endIndex + endMat.length ); } } diff --git a/js/lib/rdge/materials/flat-material.js b/js/lib/rdge/materials/flat-material.js index 97e4f646..fff0e68e 100755 --- a/js/lib/rdge/materials/flat-material.js +++ b/js/lib/rdge/materials/flat-material.js @@ -102,13 +102,7 @@ var FlatMaterial = function FlatMaterial() { try { var color = eval( "[" + pu.nextValue( "color: " ) + "]" ); - this.setProperty( "color", color); - - var endKey = "endMaterial\n"; - var index = importStr.indexOf( endKey ); - index += endKey.length; - rtnStr = importStr.substr( index ); } catch (e) { diff --git a/js/lib/rdge/materials/uber-material.js b/js/lib/rdge/materials/uber-material.js index 655d8e2a..8ec5b05c 100755 --- a/js/lib/rdge/materials/uber-material.js +++ b/js/lib/rdge/materials/uber-material.js @@ -4,6 +4,7 @@ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ +var MaterialParser = require("js/lib/rdge/materials/material-parser").MaterialParser; var Material = require("js/lib/rdge/materials/material").Material; var UberMaterial = function UberMaterial() { @@ -375,19 +376,111 @@ var UberMaterial = function UberMaterial() { var endKey = "endMaterial\n"; var index = importStr.indexOf( endKey ); index += endKey.length; - importStr = importStr.substr( index ); + importStr = importStr.slice( 0, index ); var pu = new MaterialParser( importStr ); var matProps = pu.nextValue( "materialProps: " ); if (matProps) { - var ambientColor = Number( pu.nextValue( "ambientColor: " )); this.setProperty( "ambientColor", ambientColor ); - var diffuseColor = Number( pu.nextValue( "diffuseColor: " )); this.setProperty( "diffuseColor", diffuseColor ); - var specularColor = Number( pu.nextValue( "specularColor: " )); this.setProperty( "specularColor", specularColor ); - var specularPower = Number( pu.nextValue( "specularPower: " )); this.setProperty( "specularPower", specularPower ); + var ambientColor = eval( "[" + pu.nextValue("ambientColor: ") + ']' ); this.setProperty( "ambientColor", ambientColor ); + var diffuseColor = eval( "[" + pu.nextValue( "diffuseColor: ") + ']' ); this.setProperty( "diffuseColor", diffuseColor ); + var specularColor = eval( "[" + pu.nextValue( "specularColor: ") + ']' ); this.setProperty( "specularColor", specularColor ); + var specularPower = eval( "[" + pu.nextValue( "specularPower: ") + ']' ); this.setProperty( "specularPower", specularPower ); } - var lightProps = pu.nextValue( "theLights" ); + var lightProps = pu.nextValue( "lightProps: " ); + if (lightProps) + { + this._lights = []; + var lightStr; + for (var i=0; i 0) + { + this._ubershaderCaps.lighting = + { + 'light0' : this._lights[0], + 'light1' : this._lights[1], + 'light2' : this._lights[2], + 'light3' : this._lights[3] + } + } + } + + var diffuseMap = pu.nextValue( "diffuseMap: " ) + if(diffuseMap) + this.setProperty( "diffuseMap", diffuseMap ); + + var normalMap = pu.nextValue( "normalMap: " ); + if(normalMap) + this.setProperty( "normalMap", normalMap ); + + var specularMap = pu.nextValue( "specularMap: " ); + if(specularMap) + this.setProperty( "specularMap", specularMap ); + + var environmentMap = pu.nextValue( "environmentMap: " ); + if(environmentMap) + { + this.setProperty( "environmentMap", environmentMap ); + this.setProperty( "environmentAmount", Number( pu.nextValue( "envReflection" ) ) ); + } + + this.rebuildShader(); } this.export = function() @@ -428,20 +521,18 @@ var UberMaterial = function UberMaterial() { else if (light.type === 'spot') { exportStr += 'light' + i + 'Pos: ' + light['position'] + '\n'; - - var deg2Rad = Math.PI / 180; - exportStr += 'light' + i + 'Spot: ' + [ Math.cos( ( light['spotInnerCutoff'] || 45.0 ) * deg2Rad ), - Math.cos( ( light['spotOuterCutoff'] || 90.0 ) * deg2Rad )] + '\n'; + exportStr += 'light' + i + 'SpotInnerCutoff: ' + light['spotInnerCutoff'] + '\n'; + exportStr += 'light' + i + 'SpotOuterCutoff: ' + light['spotOuterCutoff'] + '\n'; } else // light.type === 'point' { - exportStr += 'light' + i + 'Pos: ' + (light['position'] || [ 0, 0, 0 ]) ; - exportStr += 'light' + i + 'Attenuation: ' + (light['attenuation'] || [ 1, 0, 0 ]) ; + exportStr += 'light' + i + 'Pos: ' + (light['position'] || [ 0, 0, 0 ]) + '\n'; + exportStr += 'light' + i + 'Attenuation: ' + (light['attenuation'] || [ 1, 0, 0 ]) + '\n'; } // common to all lights - exportStr += 'light' + i + 'Color: ' + light['diffuseColor'] || [ 1,1,1,1 ] + '\n'; - exportStr += 'light' + i + 'SpecularColor: ' + light['specularColor'] || [ 1, 1, 1, 1 ] + '\n'; + exportStr += 'light' + i + 'Color: ' + (light['diffuseColor'] || [ 1,1,1,1 ]) + '\n'; + exportStr += 'light' + i + 'SpecularColor: ' + (light['specularColor'] || [ 1, 1, 1, 1 ]) + '\n'; exportStr += "endlight\n"; } @@ -466,7 +557,10 @@ var UberMaterial = function UberMaterial() { exportStr += "specularMap: " + caps.specularMap.texture + "\n"; if(typeof caps.environmentMap != 'undefined') + { exportStr += "environmentMap: " + caps.environmentMap.texture + "\n"; + exportStr += "envReflection: " + caps.environmentMap.envReflection + "\n"; + } // every material needs to terminate like this exportStr += "endMaterial\n"; -- cgit v1.2.3 From 9b40878fcc82d3ec08361e30d2029de261f0f80e Mon Sep 17 00:00:00 2001 From: hwc487 Date: Tue, 13 Mar 2012 16:32:46 -0700 Subject: Fixed BumpMetal material --- assets/canvas-runtime.js | 58 ++++++++++++++++++++++++++------ js/document/html-document.js | 12 +++++-- js/helper-classes/3D/vec-utils.js | 71 ++++++++++++++++++++++++++++++++++++++- 3 files changed, 127 insertions(+), 14 deletions(-) diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js index 655e52fa..51c1de1f 100644 --- a/assets/canvas-runtime.js +++ b/assets/canvas-runtime.js @@ -4,6 +4,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ + + /////////////////////////////////////////////////////////////////////// //Loading webGL/canvas data function initWebGl (rootElement, directory) { @@ -27,7 +29,8 @@ function CanvasDataManager() { this.loadGLData = function(root, valueArray, assetPath ) { - this._assetPath = assetPath.slice(); + if (assetPath) + this._assetPath = assetPath.slice(); var value = valueArray; var nWorlds = value.length; @@ -118,17 +121,22 @@ function GLRuntime( canvas, importStr, assetPath ) this._zFar = 100.0; this._viewDist = 5.0; + this.elapsed = 0; + this._aspect = canvas.width/canvas.height; - this._geomRoot; + this._geomRoot = null; // all "live" materials this._materials = []; // provide the mapping for the asset directory - this._assetPath = assetPath.slice(); - if (this._assetPath[this._assetPath.length-1] != '/') - this._assetPath += '/'; + if (assetPath) + { + this._assetPath = assetPath.slice(); + if (this._assetPath[this._assetPath.length-1] != '/') + this._assetPath += '/'; + } /////////////////////////////////////////////////////////////////////// // accessors @@ -166,6 +174,7 @@ function GLRuntime( canvas, importStr, assetPath ) this.importObjects( importStr ); this.linkMaterials( this._geomRoot ); this.initMaterials(); + this.linkLights(); } else { @@ -221,8 +230,8 @@ function GLRuntime( canvas, importStr, assetPath ) rdgeGlobalParameters.u_light0Pos.set( [5*Math.cos(this.elapsed), 5*Math.sin(this.elapsed), 20]); // orbit the light nodes around the boxes - //this.light.setPosition([1.2*Math.cos(this.elapsed*2.0), 1.2*Math.sin(this.elapsed*2.0), 1.2*Math.cos(this.elapsed*2.0)]); - //this.light2.setPosition([-1.2*Math.cos(this.elapsed*2.0), 1.2*Math.sin(this.elapsed*2.0), -1.2*Math.cos(this.elapsed)]); + if (this.light ) this.light.setPosition([1.2*Math.cos(this.elapsed*2.0), 1.2*Math.sin(this.elapsed*2.0), 1.2*Math.cos(this.elapsed*2.0)]); + if (this.light2) this.light2.setPosition([-1.2*Math.cos(this.elapsed*2.0), 1.2*Math.sin(this.elapsed*2.0), -1.2*Math.cos(this.elapsed)]); this.updateMaterials(); @@ -344,6 +353,16 @@ function GLRuntime( canvas, importStr, assetPath ) parent.addChild( obj ); } + this.linkLights = function() + { + var matNode = this.findMaterialNode( "lights", this.myScene.scene ); + if (matNode) + { + this.light = matNode.lightChannel[1]; + this.light2 = matNode.lightChannel[2]; + } + } + this.linkMaterials = function( obj ) { if (!obj) return; @@ -377,6 +396,7 @@ function GLRuntime( canvas, importStr, assetPath ) this.remapAssetFolder = function( url ) { + /* var searchStr = "assets/"; var index = url.indexOf( searchStr ); var rtnPath = url; @@ -386,6 +406,8 @@ function GLRuntime( canvas, importStr, assetPath ) rtnPath = this._assetPath + rtnPath; } return rtnPath; + */ + return url; } this.findMaterialNode = function( nodeName, node ) @@ -1080,7 +1102,7 @@ function RuntimeMaterial( world ) /////////////////////////////////////////////////////////////////////// // Methods /////////////////////////////////////////////////////////////////////// - this.init = function() + this.init = function( world ) { } @@ -1127,7 +1149,7 @@ function RuntimeFlatMaterial() }; - this.init = function() + this.init = function( world ) { if (this._shader) { @@ -1302,7 +1324,7 @@ function RuntimeBumpMetalMaterial() this._normalTexture = this.getPropertyFromString( "normalMap: ", importStr ); } - this.init = function() + this.init = function( world ) { var material = this._materialNode; if (material) @@ -1322,7 +1344,6 @@ function RuntimeBumpMetalMaterial() this._diffuseTexture = world.remapAssetFolder( this._diffuseTexture ); tex = renderer.getTextureByName(this._diffuseTexture, wrap, mips ); if (tex) technique.u_colMap.set( tex ); - } if (this._normalTexture) { @@ -1344,6 +1365,21 @@ function RuntimeBumpMetalMaterial() function RuntimeUberMaterial() { + // inherit the members of RuntimeMaterial + this.inheritedFrom = RuntimeMaterial; + this.inheritedFrom(); + + this.init = function( ) + { + } + + this.update = function( time ) + { + } + + this.import = function( importStr ) + { + } } function RuntimePlasmaMaterial() diff --git a/js/document/html-document.js b/js/document/html-document.js index 051490f5..f4ec3184 100755 --- a/js/document/html-document.js +++ b/js/document/html-document.js @@ -207,9 +207,17 @@ exports.HTMLDocument = Montage.create(TextDocument, { }, set: function(value) { var elt = this.documentRoot; - if (elt) { + if (elt) + { var nWorlds= value.length; - for (var i=0; i= 0) { diff --git a/js/helper-classes/3D/vec-utils.js b/js/helper-classes/3D/vec-utils.js index 3db95ab7..e6db4a8d 100755 --- a/js/helper-classes/3D/vec-utils.js +++ b/js/helper-classes/3D/vec-utils.js @@ -191,5 +191,74 @@ var VecUtils = exports.VecUtils = Object.create(Object.prototype, return vec; } - } + }, + + matI : + { + value: function(dimen) + { + var mat = []; + for (var i=0; i --- assets/canvas-runtime.js | 1376 ++++++++++++++++ assets/descriptor.json | 41 +- assets/rdge-compiled.js | 90 +- assets/shaders/plasma.frag.glsl | 4 +- images/cursors/penAdd.png | Bin 0 -> 3043 bytes images/picker/FileType-DirectoryOpen.png | Bin 0 -> 1827 bytes images/picker/css_file.png | Bin 3184 -> 2300 bytes images/picker/doc_file.png | Bin 11398 -> 2315 bytes images/picker/file.png | Bin 27869 -> 1551 bytes images/picker/folder.png | Bin 276680 -> 1622 bytes images/picker/html_file.png | Bin 3677 -> 2293 bytes images/picker/js_file.png | Bin 3080 -> 2088 bytes images/picker/json_file.png | Bin 0 -> 2299 bytes images/picker/php_file.png | Bin 5182 -> 2280 bytes images/picker/pl_file.png | Bin 0 -> 2094 bytes images/picker/py_file.png | Bin 0 -> 2067 bytes images/picker/rb_file.png | Bin 0 -> 2301 bytes images/picker/txt_file.png | Bin 13898 -> 2198 bytes .../gradientpicker.reel/gradientpicker.js | 22 +- .../brush-properties.reel/brush-properties.html | 56 +- .../brush-properties.reel/brush-properties.js | 26 +- .../treeview/ninja-leaf.reel/ninja-leaf.css | 14 +- js/components/ui/icon-list-basic/icon.reel/icon.js | 14 +- .../ui/tree-basic/treeItem.reel/treeItem.js | 14 +- js/controllers/document-controller.js | 50 +- js/controllers/elements/element-controller.js | 32 +- js/controllers/elements/shapes-controller.js | 140 +- js/controllers/selection-controller.js | 19 +- js/controllers/styles-controller.js | 10 +- js/data/menu-data.js | 6 + js/document/html-document.js | 149 +- js/helper-classes/3D/draw-utils.js | 140 +- js/helper-classes/3D/math-utils.js | 5 +- js/helper-classes/3D/snap-manager.js | 12 +- js/helper-classes/RDGE/rdge-compiled.js | 64 +- .../RDGE/runtime/CanvasDataManager.js | 98 -- js/helper-classes/RDGE/runtime/GLRuntime.js | 159 -- js/helper-classes/RDGE/src/core/script/engine.js | 15 + js/helper-classes/RDGE/src/core/script/fx/ssao.js | 2 +- .../RDGE/src/core/script/init_state.js | 12 +- js/helper-classes/RDGE/src/core/script/jshader.js | 8 +- js/helper-classes/RDGE/src/core/script/renderer.js | 1 + .../RDGE/src/core/script/scenegraphNodes.js | 2 +- .../RDGE/src/core/script/utilities.js | 4 +- js/helper-classes/RDGE/src/tools/rdge-compiled.js | 64 +- js/helper-classes/backup-delete/GLBrushStroke.js | 174 +- js/helper-classes/backup-delete/GLCircle.js | 3 +- js/helper-classes/backup-delete/GLGeomObj.js | 46 + js/helper-classes/backup-delete/GLRectangle.js | 2 + js/helper-classes/backup-delete/GLSubpath.js | 147 +- js/helper-classes/backup-delete/GLWorld.js | 71 +- .../backup-delete/Materials/BumpMetalMaterial.js | 39 +- .../backup-delete/Materials/DeformMaterial.js | 2 +- .../backup-delete/Materials/FlatMaterial.js | 34 +- .../backup-delete/Materials/FlyMaterial.js | 2 +- .../backup-delete/Materials/JuliaMaterial.js | 2 +- .../Materials/KeleidoscopeMaterial.js | 2 +- .../Materials/LinearGradientMaterial.js | 2 +- .../backup-delete/Materials/MandelMaterial.js | 2 +- .../backup-delete/Materials/PlasmaMaterial.js | 2 +- .../backup-delete/Materials/PulseMaterial.js | 5 +- .../backup-delete/Materials/RadialBlurMaterial.js | 2 +- .../Materials/RadialGradientMaterial.js | 6 +- .../Materials/ReliefTunnelMaterial.js | 2 +- .../Materials/SquareTunnelMaterial.js | 2 +- .../backup-delete/Materials/StarMaterial.js | 2 +- .../backup-delete/Materials/TaperMaterial.js | 4 +- .../backup-delete/Materials/TunnelMaterial.js | 2 +- .../backup-delete/Materials/TwistMaterial.js | 2 +- .../backup-delete/Materials/TwistVertMaterial.js | 2 +- .../backup-delete/Materials/UberMaterial.js | 73 +- .../backup-delete/Materials/WaterMaterial.js | 4 +- .../backup-delete/Materials/ZInvertMaterial.js | 2 +- js/io/system/ninjalibrary.js | 10 +- js/io/system/ninjalibrary.json | 2 +- js/io/ui/file-picker/file-picker-controller.js | 2 +- js/io/ui/file-picker/file-picker-model.js | 6 + .../picker-navigator.reel/picker-navigator.js | 7 +- js/io/ui/save-as-dialog.reel/save-as-dialog.js | 4 +- js/lib/NJUtils.js | 34 +- js/lib/drawing/world.js | 102 +- js/lib/geom/brush-stroke.js | 329 ++-- js/lib/geom/circle.js | 103 +- js/lib/geom/geom-obj.js | 210 ++- js/lib/geom/line.js | 57 +- js/lib/geom/rectangle.js | 111 +- js/lib/geom/sub-path.js | 86 +- js/lib/rdge/materials/bump-metal-material.js | 10 +- js/lib/rdge/materials/deform-material.js | 2 +- js/lib/rdge/materials/flat-material.js | 41 +- js/lib/rdge/materials/fly-material.js | 2 +- js/lib/rdge/materials/julia-material.js | 2 +- js/lib/rdge/materials/keleidoscope-material.js | 2 +- js/lib/rdge/materials/linear-gradient-material.js | 2 +- js/lib/rdge/materials/mandel-material.js | 2 +- js/lib/rdge/materials/plasma-material.js | 37 +- js/lib/rdge/materials/pulse-material.js | 11 +- js/lib/rdge/materials/radial-blur-material.js | 9 +- js/lib/rdge/materials/radial-gradient-material.js | 7 +- js/lib/rdge/materials/relief-tunnel-material.js | 2 +- js/lib/rdge/materials/square-tunnel-material.js | 2 +- js/lib/rdge/materials/star-material.js | 2 +- js/lib/rdge/materials/taper-material.js | 8 +- js/lib/rdge/materials/tunnel-material.js | 2 +- js/lib/rdge/materials/twist-material.js | 2 +- js/lib/rdge/materials/twist-vert-material.js | 6 +- js/lib/rdge/materials/uber-material.js | 109 +- js/lib/rdge/materials/water-material.js | 2 +- js/lib/rdge/materials/z-invert-material.js | 2 +- js/mediators/element-mediator.js | 15 +- js/mediators/io-mediator.js | 93 +- js/models/color-model.js | 3 + js/panels/Color/colorbutton-manager.js | 44 - .../ColorPanelPopup.scssc | Bin 15335 -> 0 bytes .../ColorPanelPopup.scssc | Bin 17879 -> 0 bytes .../ColorPanelBase.scssc | Bin 23592 -> 0 bytes .../Color/colorchippopup.reel/colorchippopup.html | 63 - .../Color/colorchippopup.reel/colorchippopup.js | 590 ------- js/panels/Color/colorchippopup.reel/config.rb | 9 - .../colorchippopup.reel/css/colorchippopup.css | 239 --- .../colorchippopup.reel/css/colorchippopup.scss | 240 --- .../Color/colorchippopup.reel/img/icon_bitmap.png | Bin 3072 -> 0 bytes .../colorchippopup.reel/img/icon_colorwheel.png | Bin 3420 -> 0 bytes .../colorchippopup.reel/img/icon_gradient.png | Bin 2815 -> 0 bytes .../Color/colorchippopup.reel/img/icon_nofill.png | Bin 2951 -> 0 bytes js/panels/Color/colorchippopup.reel/img/knob.png | Bin 1036 -> 0 bytes js/panels/Color/colorpanel.js | 53 - .../Color/colorpanelbase.reel/colorpanelbase.html | 76 - .../Color/colorpanelbase.reel/colorpanelbase.js | 1654 -------------------- js/panels/Color/colorpanelbase.reel/config.rb | 9 - .../colorpanelbase.reel/css/colorpanelbase.css | 332 ---- .../colorpanelbase.reel/css/colorpanelbase.scss | 339 ---- .../Color/colorpanelbase.reel/img/icon_default.png | Bin 3011 -> 0 bytes .../Color/colorpanelbase.reel/img/icon_nocolor.png | Bin 3036 -> 0 bytes .../Color/colorpanelbase.reel/img/icon_swap.png | Bin 2961 -> 0 bytes js/panels/Color/colorpanelbase.reel/img/knob.png | Bin 1036 -> 0 bytes .../colorpanelpopup.reel/colorpanelpopup.html | 68 - .../Color/colorpanelpopup.reel/colorpanelpopup.js | 466 ------ js/panels/Color/colorpanelpopup.reel/config.rb | 9 - .../colorpanelpopup.reel/css/colorpanelpopup.css | 239 --- .../colorpanelpopup.reel/css/colorpanelpopup.scss | 240 --- .../Color/colorpanelpopup.reel/img/icon_bitmap.png | Bin 3072 -> 0 bytes .../colorpanelpopup.reel/img/icon_colorwheel.png | Bin 3420 -> 0 bytes .../colorpanelpopup.reel/img/icon_gradient.png | Bin 2815 -> 0 bytes .../Color/colorpanelpopup.reel/img/icon_nofill.png | Bin 2951 -> 0 bytes js/panels/Color/colorpanelpopup.reel/img/knob.png | Bin 1036 -> 0 bytes js/panels/Color/colorpopup-manager.js | 529 ------- .../Color/colortoolbar.reel/colortoolbar.html | 54 - js/panels/Color/colortoolbar.reel/colortoolbar.js | 138 -- js/panels/Color/colortoolbar.reel/config.rb | 9 - .../Color/colortoolbar.reel/css/colortoolbar.css | 45 - .../Color/colortoolbar.reel/css/colortoolbar.scss | 52 - js/panels/color/colorbutton-manager.js | 44 + .../color/colorchippopup.reel/colorchippopup.html | 63 + .../color/colorchippopup.reel/colorchippopup.js | 590 +++++++ js/panels/color/colorchippopup.reel/config.rb | 9 + .../colorchippopup.reel/css/colorchippopup.css | 239 +++ .../colorchippopup.reel/css/colorchippopup.scss | 240 +++ .../color/colorchippopup.reel/img/icon_bitmap.png | Bin 0 -> 3072 bytes .../colorchippopup.reel/img/icon_colorwheel.png | Bin 0 -> 3420 bytes .../colorchippopup.reel/img/icon_gradient.png | Bin 0 -> 2815 bytes .../color/colorchippopup.reel/img/icon_nofill.png | Bin 0 -> 2951 bytes js/panels/color/colorchippopup.reel/img/knob.png | Bin 0 -> 1036 bytes js/panels/color/colorpanel.js | 53 + .../color/colorpanelbase.reel/colorpanelbase.html | 76 + .../color/colorpanelbase.reel/colorpanelbase.js | 1654 ++++++++++++++++++++ js/panels/color/colorpanelbase.reel/config.rb | 9 + .../colorpanelbase.reel/css/colorpanelbase.css | 332 ++++ .../colorpanelbase.reel/css/colorpanelbase.scss | 339 ++++ .../color/colorpanelbase.reel/img/icon_default.png | Bin 0 -> 3011 bytes .../color/colorpanelbase.reel/img/icon_nocolor.png | Bin 0 -> 3036 bytes .../color/colorpanelbase.reel/img/icon_swap.png | Bin 0 -> 2961 bytes js/panels/color/colorpanelbase.reel/img/knob.png | Bin 0 -> 1036 bytes .../colorpanelpopup.reel/colorpanelpopup.html | 68 + .../color/colorpanelpopup.reel/colorpanelpopup.js | 466 ++++++ js/panels/color/colorpanelpopup.reel/config.rb | 9 + .../colorpanelpopup.reel/css/colorpanelpopup.css | 239 +++ .../colorpanelpopup.reel/css/colorpanelpopup.scss | 240 +++ .../color/colorpanelpopup.reel/img/icon_bitmap.png | Bin 0 -> 3072 bytes .../colorpanelpopup.reel/img/icon_colorwheel.png | Bin 0 -> 3420 bytes .../colorpanelpopup.reel/img/icon_gradient.png | Bin 0 -> 2815 bytes .../color/colorpanelpopup.reel/img/icon_nofill.png | Bin 0 -> 2951 bytes js/panels/color/colorpanelpopup.reel/img/knob.png | Bin 0 -> 1036 bytes js/panels/color/colorpopup-manager.js | 529 +++++++ .../color/colortoolbar.reel/colortoolbar.html | 54 + js/panels/color/colortoolbar.reel/colortoolbar.js | 138 ++ js/panels/color/colortoolbar.reel/config.rb | 9 + .../color/colortoolbar.reel/css/colortoolbar.css | 45 + .../color/colortoolbar.reel/css/colortoolbar.scss | 52 + js/panels/presets/content.reel/content.css | 4 +- js/panels/properties.reel/properties.js | 4 +- js/preloader/Preloader.js | 2 + js/stage/layout.js | 10 +- js/stage/stage-view.reel/stage-view.js | 5 +- js/tools/BrushTool.js | 41 +- js/tools/EyedropperTool.js | 133 +- js/tools/PenTool.js | 18 +- js/tools/SelectionTool.js | 28 +- js/tools/Translate3DToolBase.js | 1 - js/tools/TranslateObject3DTool.js | 2 +- js/tools/modifier-tool-base.js | 12 +- 201 files changed, 9370 insertions(+), 6609 deletions(-) create mode 100644 assets/canvas-runtime.js create mode 100644 images/cursors/penAdd.png create mode 100755 images/picker/FileType-DirectoryOpen.png create mode 100755 images/picker/json_file.png create mode 100755 images/picker/pl_file.png create mode 100755 images/picker/py_file.png create mode 100755 images/picker/rb_file.png delete mode 100644 js/helper-classes/RDGE/runtime/CanvasDataManager.js delete mode 100644 js/helper-classes/RDGE/runtime/GLRuntime.js delete mode 100755 js/panels/Color/colorbutton-manager.js delete mode 100755 js/panels/Color/colorchippopup.reel/.sass-cache/2fbca323ccf38cf180e7675ba0d8d3e07adeffea/ColorPanelPopup.scssc delete mode 100755 js/panels/Color/colorchippopup.reel/.sass-cache/6f8390f69a31f1a976968b9c18d0824d78460db2/ColorPanelPopup.scssc delete mode 100755 js/panels/Color/colorchippopup.reel/.sass-cache/de22270a8ac487505e8876f1cd16286e094a5127/ColorPanelBase.scssc delete mode 100755 js/panels/Color/colorchippopup.reel/colorchippopup.html delete mode 100755 js/panels/Color/colorchippopup.reel/colorchippopup.js delete mode 100755 js/panels/Color/colorchippopup.reel/config.rb delete mode 100755 js/panels/Color/colorchippopup.reel/css/colorchippopup.css delete mode 100755 js/panels/Color/colorchippopup.reel/css/colorchippopup.scss delete mode 100755 js/panels/Color/colorchippopup.reel/img/icon_bitmap.png delete mode 100755 js/panels/Color/colorchippopup.reel/img/icon_colorwheel.png delete mode 100755 js/panels/Color/colorchippopup.reel/img/icon_gradient.png delete mode 100755 js/panels/Color/colorchippopup.reel/img/icon_nofill.png delete mode 100755 js/panels/Color/colorchippopup.reel/img/knob.png delete mode 100755 js/panels/Color/colorpanel.js delete mode 100755 js/panels/Color/colorpanelbase.reel/colorpanelbase.html delete mode 100755 js/panels/Color/colorpanelbase.reel/colorpanelbase.js delete mode 100755 js/panels/Color/colorpanelbase.reel/config.rb delete mode 100755 js/panels/Color/colorpanelbase.reel/css/colorpanelbase.css delete mode 100755 js/panels/Color/colorpanelbase.reel/css/colorpanelbase.scss delete mode 100755 js/panels/Color/colorpanelbase.reel/img/icon_default.png delete mode 100755 js/panels/Color/colorpanelbase.reel/img/icon_nocolor.png delete mode 100755 js/panels/Color/colorpanelbase.reel/img/icon_swap.png delete mode 100755 js/panels/Color/colorpanelbase.reel/img/knob.png delete mode 100755 js/panels/Color/colorpanelpopup.reel/colorpanelpopup.html delete mode 100755 js/panels/Color/colorpanelpopup.reel/colorpanelpopup.js delete mode 100755 js/panels/Color/colorpanelpopup.reel/config.rb delete mode 100755 js/panels/Color/colorpanelpopup.reel/css/colorpanelpopup.css delete mode 100755 js/panels/Color/colorpanelpopup.reel/css/colorpanelpopup.scss delete mode 100755 js/panels/Color/colorpanelpopup.reel/img/icon_bitmap.png delete mode 100755 js/panels/Color/colorpanelpopup.reel/img/icon_colorwheel.png delete mode 100755 js/panels/Color/colorpanelpopup.reel/img/icon_gradient.png delete mode 100755 js/panels/Color/colorpanelpopup.reel/img/icon_nofill.png delete mode 100755 js/panels/Color/colorpanelpopup.reel/img/knob.png delete mode 100755 js/panels/Color/colorpopup-manager.js delete mode 100755 js/panels/Color/colortoolbar.reel/colortoolbar.html delete mode 100755 js/panels/Color/colortoolbar.reel/colortoolbar.js delete mode 100755 js/panels/Color/colortoolbar.reel/config.rb delete mode 100755 js/panels/Color/colortoolbar.reel/css/colortoolbar.css delete mode 100755 js/panels/Color/colortoolbar.reel/css/colortoolbar.scss create mode 100755 js/panels/color/colorbutton-manager.js create mode 100755 js/panels/color/colorchippopup.reel/colorchippopup.html create mode 100755 js/panels/color/colorchippopup.reel/colorchippopup.js create mode 100755 js/panels/color/colorchippopup.reel/config.rb create mode 100755 js/panels/color/colorchippopup.reel/css/colorchippopup.css create mode 100755 js/panels/color/colorchippopup.reel/css/colorchippopup.scss create mode 100755 js/panels/color/colorchippopup.reel/img/icon_bitmap.png create mode 100755 js/panels/color/colorchippopup.reel/img/icon_colorwheel.png create mode 100755 js/panels/color/colorchippopup.reel/img/icon_gradient.png create mode 100755 js/panels/color/colorchippopup.reel/img/icon_nofill.png create mode 100755 js/panels/color/colorchippopup.reel/img/knob.png create mode 100755 js/panels/color/colorpanel.js create mode 100755 js/panels/color/colorpanelbase.reel/colorpanelbase.html create mode 100755 js/panels/color/colorpanelbase.reel/colorpanelbase.js create mode 100755 js/panels/color/colorpanelbase.reel/config.rb create mode 100755 js/panels/color/colorpanelbase.reel/css/colorpanelbase.css create mode 100755 js/panels/color/colorpanelbase.reel/css/colorpanelbase.scss create mode 100755 js/panels/color/colorpanelbase.reel/img/icon_default.png create mode 100755 js/panels/color/colorpanelbase.reel/img/icon_nocolor.png create mode 100755 js/panels/color/colorpanelbase.reel/img/icon_swap.png create mode 100755 js/panels/color/colorpanelbase.reel/img/knob.png create mode 100755 js/panels/color/colorpanelpopup.reel/colorpanelpopup.html create mode 100755 js/panels/color/colorpanelpopup.reel/colorpanelpopup.js create mode 100755 js/panels/color/colorpanelpopup.reel/config.rb create mode 100755 js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.css create mode 100755 js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.scss create mode 100755 js/panels/color/colorpanelpopup.reel/img/icon_bitmap.png create mode 100755 js/panels/color/colorpanelpopup.reel/img/icon_colorwheel.png create mode 100755 js/panels/color/colorpanelpopup.reel/img/icon_gradient.png create mode 100755 js/panels/color/colorpanelpopup.reel/img/icon_nofill.png create mode 100755 js/panels/color/colorpanelpopup.reel/img/knob.png create mode 100755 js/panels/color/colorpopup-manager.js create mode 100755 js/panels/color/colortoolbar.reel/colortoolbar.html create mode 100755 js/panels/color/colortoolbar.reel/colortoolbar.js create mode 100755 js/panels/color/colortoolbar.reel/config.rb create mode 100755 js/panels/color/colortoolbar.reel/css/colortoolbar.css create mode 100755 js/panels/color/colortoolbar.reel/css/colortoolbar.scss diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js new file mode 100644 index 00000000..655e52fa --- /dev/null +++ b/assets/canvas-runtime.js @@ -0,0 +1,1376 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +/////////////////////////////////////////////////////////////////////// +//Loading webGL/canvas data +function initWebGl (rootElement, directory) { + var cvsDataMngr, ninjaWebGlData = JSON.parse((document.querySelectorAll(['script[data-ninja-webgl]'])[0].innerHTML.replace('(', '')).replace(')', '')); + if (ninjaWebGlData && ninjaWebGlData.data) { + for (var n=0; ninjaWebGlData.data[n]; n++) { + ninjaWebGlData.data[n] = unescape(ninjaWebGlData.data[n]); + } + } + //Creating data manager + cvsDataMngr = new CanvasDataManager(); + //Loading data to canvas(es) + cvsDataMngr.loadGLData(rootElement, ninjaWebGlData.data, directory); +} + +/////////////////////////////////////////////////////////////////////// +// Class ShapeRuntime +// Manages runtime shape display +/////////////////////////////////////////////////////////////////////// +function CanvasDataManager() +{ + this.loadGLData = function(root, valueArray, assetPath ) + { + this._assetPath = assetPath.slice(); + + var value = valueArray; + var nWorlds = value.length; + for (var i=0; i= 0) + { + var endIndex = importStr.indexOf( "\n", startIndex ); + if (endIndex > 0) + { + var id = importStr.substring( startIndex+4, endIndex ); + var canvas = this.findCanvasWithID( id, root ); + if (canvas) + { + var rt = new GLRuntime( canvas, importStr, assetPath ); + } + } + } + } + } + + this.collectGLData = function( elt, dataArray ) + { + if (elt.elementModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld) + { + var data = elt.elementModel.shapeModel.GLWorld.export( true ); + dataArray.push( data ); + } + + if (elt.children) + { + var nKids = elt.children.length; + for (var i=0; i= 0) + { + this._useWebGL = true; + + var rdgeStr = importStr.substr( index+11 ); + var endIndex = rdgeStr.indexOf( "endscene\n" ); + if (endIndex < 0) throw new Error( "ill-formed WebGL data" ); + var len = endIndex - index + 11; + rdgeStr = rdgeStr.substr( 0, endIndex ); + + this.myScene.importJSON( rdgeStr ); + this.importObjects( importStr ); + this.linkMaterials( this._geomRoot ); + this.initMaterials(); + } + else + { + this._context = this._canvas.getContext( "2d" ); + this.importObjects( importStr ); + this.render(); + } + } + + this.init = function() + { + var ctx1 = g_Engine.ctxMan.handleToObject(this._canvas.rdgeCtxHandle), + ctx2 = g_Engine.getContext(); + if (ctx1 != ctx2) console.log( "***** different contexts *****" ); + this.renderer = ctx1.renderer; + + // create a camera, set its perspective, and then point it at the origin + var cam = new camera(); + this._camera = cam; + cam.setPerspective(this.getFOV(), this.getAspect(), this.getZNear(), this.getZFar()); + cam.setLookAt([0, 0, this.getViewDistance()], [0, 0, 0], vec3.up()); + + // make this camera the active camera + this.renderer.cameraManager().setActiveCamera(cam); + + // change clear color + this.renderer.setClearColor([1.0, 1.0, 1.0, 0.0]); + + // create an empty scene graph + this.myScene = new SceneGraph(); + + // load the scene graph data + this.loadScene(); + + // Add the scene to the engine - necessary if you want the engine to draw for you + var name = "myScene" + this._canvas.getAttribute( "data-RDGE-id" ); + g_Engine.AddScene(name, this.myScene); + + this._initialized = true; + } + + // main code for handling user interaction and updating the scene + this.update = function(dt) + { + if (this._initialized) + { + if (!dt) dt = 0.2; + + dt = 0.01; // use our own internal throttle + this.elapsed += dt; + + // changed the global position uniform of light 0, another way to change behavior of a light + rdgeGlobalParameters.u_light0Pos.set( [5*Math.cos(this.elapsed), 5*Math.sin(this.elapsed), 20]); + + // orbit the light nodes around the boxes + //this.light.setPosition([1.2*Math.cos(this.elapsed*2.0), 1.2*Math.sin(this.elapsed*2.0), 1.2*Math.cos(this.elapsed*2.0)]); + //this.light2.setPosition([-1.2*Math.cos(this.elapsed*2.0), 1.2*Math.sin(this.elapsed*2.0), -1.2*Math.cos(this.elapsed)]); + + this.updateMaterials(); + + // now update all the nodes in the scene + this.myScene.update(dt); + } + } + + this.updateMaterials = function() + { + var nMats = this._materials.length; + for (var i=0; i= 0) + { + // update the string to the current object + importStr = importStr.substr( index+7 ); + + // read the next object + var obj = this.importObject( importStr, parent ); + + // determine if we have children + var endIndex = importStr.indexOf( "ENDOBJECT\n" ), + childIndex = importStr.indexOf( "OBJECT\n" ); + if (endIndex < 0) throw new Error( "ill-formed object data" ); + if ((childIndex >= 0) && (childIndex < endIndex)) + { + importStr = importStr.substr( childIndex + 7 ); + importStr = this.importObjects( importStr, obj ); + endIndex = importStr.indexOf( "ENDOBJECT\n" ) + } + + // remove the string for the object(s) just created + importStr = importStr.substr( endIndex ); + + // get the location of the next object + index = importStr.indexOf( "OBJECT\n", endIndex ); + } + + return importStr; + } + + this.importObject = function( objStr, parent ) + { + var type = Number( getPropertyFromString( "type: ", objStr ) ); + + var obj; + switch (type) + { + case 1: + obj = new RuntimeRectangle(); + obj.import( objStr, parent ); + break; + + case 2: // circle + obj = new RuntimeOval(); + obj.import( objStr, parent ); + break; + + case 3: // line + obj = new RuntimeLine(); + obj.import( objStr, parent ); + break; + + default: + throw new Error( "Attempting to load unrecognized object type: " + type ); + break; + } + + if (obj) + this.addObject( obj ); + + return obj; + } + + this.addObject = function( obj, parent ) + { + if (!obj) return; + obj.setWorld( this ); + + if (parent == null) + this._geomRoot = obj; + else + parent.addChild( obj ); + } + + this.linkMaterials = function( obj ) + { + if (!obj) return; + + // get the array of materials from the object + var matArray = obj._materials; + var nMats = matArray.length; + for (var i=0; i= 0) + { + rtnPath = url.substr( index + searchStr.length ); + rtnPath = this._assetPath + rtnPath; + } + return rtnPath; + } + + this.findMaterialNode = function( nodeName, node ) + { + if (node.transformNode) + node = node.transformNode; + + if (node.materialNode) + { + if (nodeName === node.materialNode.name) return node.materialNode; + } + + if (node.children) + { + var nKids = node.children.length; + for (var i=0; i= 0); + if (this._useWebGL) + { + var id = canvas.getAttribute( "data-RDGE-id" ); + canvas.rdgeid = id; + g_Engine.registerCanvas(canvas, this); + RDGEStart( canvas ); + } + else + { + this.loadScene(); + } +} + +/////////////////////////////////////////////////////////////////////// +// Class RuntimeGeomObj +// Super class for all geometry classes +/////////////////////////////////////////////////////////////////////// +function RuntimeGeomObj() +{ + /////////////////////////////////////////////////////////////////////// + // Constants + /////////////////////////////////////////////////////////////////////// + this.GEOM_TYPE_RECTANGLE = 1; + this.GEOM_TYPE_CIRCLE = 2; + this.GEOM_TYPE_LINE = 3; + this.GEOM_TYPE_PATH = 4; + this.GEOM_TYPE_CUBIC_BEZIER = 5; + this.GEOM_TYPE_UNDEFINED = -1; + + /////////////////////////////////////////////////////////////////////// + // Instance variables + /////////////////////////////////////////////////////////////////////// + this._children; + + // stroke and fill colors + this._strokeColor = [0,0,0,0]; + this._fillColor = [0,0,0,0]; + + // array of materials + this._materials = []; + + /////////////////////////////////////////////////////////////////////// + // Property accessors + /////////////////////////////////////////////////////////////////////// + + this.geomType = function() { return this.GEOM_TYPE_UNDEFINED; } + + this.setWorld = function(w) { this._world = w; } + this.getWorld = function() { return this._world; } + + /////////////////////////////////////////////////////////////////////// + // Methods + /////////////////////////////////////////////////////////////////////// + this.makeStrokeMaterial = function() + { + } + + this.makeFillMaterial = function() + { + } + + + this.render = function() + { + } + + this.addChild = function( child ) + { + if (!this._children) this._children = []; + this._children.push( child ); + } + + this.import = function() + { + } + + this.importMaterials = function(importStr) + { + var nMaterials = Number( getPropertyFromString( "nMaterials: ", importStr ) ); + for (var i=0; i= 0.001) + { + var scale = len/sum; + rtnVec = []; + for (var i=0; i= 0) + rtnStr = rtnStr.substr(0, index); + + return rtnStr; +} + +/////////////////////////////////////////////////////////////////////// +// Class RuntimeRectangle +/////////////////////////////////////////////////////////////////////// +function RuntimeRectangle() +{ + // inherit the members of RuntimeGeomObj + this.inheritedFrom = RuntimeGeomObj; + this.inheritedFrom(); + + this.import = function( importStr ) + { + this._xOffset = Number( getPropertyFromString( "xoff: ", importStr ) ); + this._yOffset = Number( getPropertyFromString( "yoff: ", importStr ) ); + this._width = Number( getPropertyFromString( "width: ", importStr ) ); + this._height = Number( getPropertyFromString( "height: ", importStr ) ); + this._strokeWidth = Number( getPropertyFromString( "strokeWidth: ", importStr ) ); + this._innerRadius = Number( getPropertyFromString( "innerRadius: ", importStr ) ); + this._strokeStyle = Number( getPropertyFromString( "strokeStyle: ", importStr ) ); + var strokeMaterialName = getPropertyFromString( "strokeMat: ", importStr ); + var fillMaterialName = getPropertyFromString( "fillMat: ", importStr ); + this._strokeStyle = getPropertyFromString( "strokeStyle: ", importStr ); + this._fillColor = eval( "[" + getPropertyFromString( "fillColor: ", importStr ) + "]" ); + this._strokeColor = eval( "[" + getPropertyFromString( "strokeColor: ", importStr ) + "]" ); + this._tlRadius = Number( getPropertyFromString( "tlRadius: ", importStr ) ); + this._trRadius = Number( getPropertyFromString( "trRadius: ", importStr ) ); + this._blRadius = Number( getPropertyFromString( "blRadius: ", importStr ) ); + this._brRadius = Number( getPropertyFromString( "brRadius: ", importStr ) ); + + this.importMaterials( importStr ); + } + + this.renderPath = function( inset, ctx ) + { + // various declarations + var pt, rad, ctr, startPt, bPts; + var width = Math.round(this._width), + height = Math.round(this._height); + + pt = [inset, inset]; // top left corner + + var tlRad = this._tlRadius; //top-left radius + var trRad = this._trRadius; + var blRad = this._blRadius; + var brRad = this._brRadius; + + if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0)) + { + ctx.rect(pt[0], pt[1], width - 2*inset, height - 2*inset); + } + else + { + // get the top left point + rad = tlRad - inset; + if (rad < 0) rad = 0; + pt[1] += rad; + if (Math.abs(rad) < 0.001) pt[1] = inset; + ctx.moveTo( pt[0], pt[1] ); + + // get the bottom left point + pt = [inset, height - inset]; + rad = blRad - inset; + if (rad < 0) rad = 0; + pt[1] -= rad; + ctx.lineTo( pt[0], pt[1] ); + + // get the bottom left curve + if (rad > 0.001) + ctx.quadraticCurveTo( inset, height-inset, inset+rad, height-inset ); + + // do the bottom of the rectangle + pt = [width - inset, height - inset]; + rad = brRad - inset; + if (rad < 0) rad = 0; + pt[0] -= rad; + ctx.lineTo( pt[0], pt[1] ); + + // get the bottom right arc + if (rad > 0.001) + ctx.quadraticCurveTo( width-inset, height-inset, width-inset, height-inset-rad ); + + // get the right of the rectangle + pt = [width - inset, inset]; + rad = trRad - inset; + if (rad < 0) rad = 0; + pt[1] += rad; + ctx.lineTo( pt[0], pt[1] ); + + // do the top right corner + if (rad > 0.001) + ctx.quadraticCurveTo( width-inset, inset, width-inset-rad, inset ); + + // do the top of the rectangle + pt = [inset, inset] + rad = tlRad - inset; + if (rad < 0) rad = 0; + pt[0] += rad; + ctx.lineTo( pt[0], pt[1] ); + + // do the top left corner + if (rad > 0.001) + ctx.quadraticCurveTo( inset, inset, inset, inset+rad ); + else + ctx.lineTo( inset, 2*inset ); + } + } + + this.render = function() + { + // get the world + var world = this.getWorld(); + if (!world) throw( "null world in rectangle render" ); + + // get the context + var ctx = world.get2DContext(); + if (!ctx) return; + + // get some dimensions + var lw = this._strokeWidth; + var w = world.getViewportWidth(), + h = world.getViewportHeight(); + + // render the fill + ctx.beginPath(); + if (this._fillColor) + { + var c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; + ctx.fillStyle = c; + + ctx.lineWidth = lw; + var inset = Math.ceil( lw ) + 0.5; + this.renderPath( inset, ctx ); + ctx.fill(); + ctx.closePath(); + } + + // render the stroke + ctx.beginPath(); + if (this._strokeColor) + { + var c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; + ctx.strokeStyle = c; + + ctx.lineWidth = lw; + var inset = Math.ceil( 0.5*lw ) + 0.5; + this.renderPath( inset, ctx ); + ctx.stroke(); + ctx.closePath(); + } + } +} + +/////////////////////////////////////////////////////////////////////// +// Class RuntimeOval +/////////////////////////////////////////////////////////////////////// +function RuntimeOval() +{ + // inherit the members of RuntimeGeomObj + this.inheritedFrom = RuntimeGeomObj; + this.inheritedFrom(); + + this.import = function( importStr ) + { + this._xOffset = Number( getPropertyFromString( "xoff: ", importStr ) ); + this._yOffset = Number( getPropertyFromString( "yoff: ", importStr ) ); + this._width = Number( getPropertyFromString( "width: ", importStr ) ); + this._height = Number( getPropertyFromString( "height: ", importStr ) ); + this._strokeWidth = Number( getPropertyFromString( "strokeWidth: ", importStr ) ); + this._innerRadius = Number( getPropertyFromString( "innerRadius: ", importStr ) ); + this._strokeStyle = getPropertyFromString( "strokeStyle: ", importStr ); + var strokeMaterialName = getPropertyFromString( "strokeMat: ", importStr ); + var fillMaterialName = getPropertyFromString( "fillMat: ", importStr ); + this._fillColor = eval( "[" + getPropertyFromString( "fillColor: ", importStr ) + "]" ); + this._strokeColor = eval( "[" + getPropertyFromString( "strokeColor: ", importStr ) + "]" ); + + this.importMaterials( importStr ); + } + + this.render = function() + { + // get the world + var world = this.getWorld(); + if (!world) throw( "null world in buildBuffers" ); + + // get the context + var ctx = world.get2DContext(); + if (!ctx) return; + + // declare some variables + var p0, p1; + var x0, y1, x1, y1; + + // create the matrix + var lineWidth = this._strokeWidth; + var innerRad = this._innerRadius; + var xScale = 0.5*this._width - lineWidth, + yScale = 0.5*this._height - lineWidth; + + // translate + var xCtr = 0.5*world.getViewportWidth() + this._xOffset, + yCtr = 0.5*world.getViewportHeight() + this._yOffset; + var mat = [ + [ xScale, 0.0, 0.0, xCtr], + [ 0.0, yScale, 0.0, yCtr], + [ 0.0, 0.0, 1.0, 0.0], + [ 0.0, 0.0, 0.0, 1.0] + ]; + + // get a bezier representation of the circle + var bezPts = this.circularArcToBezier( [0,0,0], [1,0,0], 2.0*Math.PI ); + if (bezPts) + { + var n = bezPts.length; + + // set up the fill style + ctx.beginPath(); + ctx.lineWidth = 0; + if (this._fillColor) + { + var c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; + ctx.fillStyle = c; + + // draw the fill + ctx.beginPath(); + var p = this.transformPoint( bezPts[0], mat ); + ctx.moveTo( p[0], p[1] ); + var index = 1; + while (index < n) + { + p0 = this.transformPoint( bezPts[index], mat ); + p1 = this.transformPoint( bezPts[index+1], mat ); + + x0 = p0[0]; y0 = p0[1]; + x1 = p1[0]; y1 = p1[1]; + ctx.quadraticCurveTo( x0, y0, x1, y1 ); + index += 2; + } + + if ( innerRad > 0.001) + { + xScale = 0.5*innerRad*this._width; + yScale = 0.5*innerRad*this._height; + mat[0] = xScale; + mat[5] = yScale; + + // get the bezier points + var bezPts = this.circularArcToBezier( Vector.create([0,0,0]), Vector.create([1,0,0]), -2.0*Math.PI ); + if (bezPts) + { + var n = bezPts.length; + p = this.transformPoint( bezPts[0], mat ); + ctx.moveTo( p[0], p[1] ); + index = 1; + while (index < n) + { + p0 = this.transformPoint( bezPts[index], mat ); + p1 = this.transformPoint( bezPts[index+1], mat ); + + var x0 = p0[0], y0 = p0[1], + x1 = p1[0], y1 = p1[1]; + ctx.quadraticCurveTo( x0, y0, x1, y1 ); + index += 2; + } + } + } + + // fill the path + ctx.fill(); + } + + // calculate the stroke matrix + xScale = 0.5*this._width - 0.5*lineWidth; + yScale = 0.5*this._height - 0.5*lineWidth; + mat[0] = xScale; + mat[5] = yScale; + + // set up the stroke style + ctx.beginPath(); + ctx.lineWidth = lineWidth; + if (this._strokeColor) + { + var c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; + ctx.strokeStyle = c; + + // draw the stroke + p = this.transformPoint( bezPts[0], mat ); + ctx.moveTo( p[0], p[1] ); + index = 1; + while (index < n) + { + var p0 = this.transformPoint( bezPts[index], mat ); + var p1 = this.transformPoint( bezPts[index+1], mat ); + + var x0 = p0[0], y0 = p0[1], + x1 = p1[0], y1 = p1[1]; + ctx.quadraticCurveTo( x0, y0, x1, y1 ); + index += 2; + } + + if (innerRad > 0.01) + { + // calculate the stroke matrix + xScale = 0.5*innerRad*this._width - 0.5*lineWidth; + yScale = 0.5*innerRad*this._height - 0.5*lineWidth; + mat[0] = xScale; + mat[5] = yScale; + + // dra