- + +

diff --git a/js/components/tools-properties/rect-properties.reel/rect-properties.js b/js/components/tools-properties/rect-properties.reel/rect-properties.js index b2de6ff7..cc99cca6 100755 --- a/js/components/tools-properties/rect-properties.reel/rect-properties.js +++ b/js/components/tools-properties/rect-properties.reel/rect-properties.js @@ -19,7 +19,8 @@ exports.RectProperties = Montage.create(ToolProperties, { _subPrepare: { value: function() { - this.lockButton.addEventListener("click", this, false); + this.lockButton.identifier = "lockButton"; + this.lockButton.addEventListener("action", this, false); this._setBindings([this.TRRadiusControl, this.BLRadiusControl, this.BRRadiusControl]); this._setCap([this.TLRadiusControl,this.TRRadiusControl, this.BLRadiusControl, this.BRRadiusControl]); @@ -27,21 +28,16 @@ exports.RectProperties = Montage.create(ToolProperties, { } }, - handleClick: { + handleLockButtonAction: { value: function(event) { - this._unlocked = !this._unlocked; + this.TRRadiusControl.enabled = this.BLRadiusControl.enabled = this.BRRadiusControl.enabled = this.lockButton.pressed; - this.TRRadiusControl.enabled = this.BLRadiusControl.enabled = this.BRRadiusControl.enabled = this._unlocked; - - if(this._unlocked) { - this.lockButton.classList.remove("LockToolUp"); - this.lockButton.classList.add("UnLockToolUp"); - this._removeBindings([this.TRRadiusControl, this.BLRadiusControl, this.BRRadiusControl]); - } else { - this.lockButton.classList.remove("UnLockToolUp"); - this.lockButton.classList.add("LockToolUp"); + if(this.lockButton.pressed) { this._setBindings([this.TRRadiusControl, this.BLRadiusControl, this.BRRadiusControl]); + } else { + this._removeBindings([this.TRRadiusControl, this.BLRadiusControl, this.BRRadiusControl]); } + } }, -- cgit v1.2.3 From fdeed8051c3af538d28ca3bc599121cea483c22c Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 22 Mar 2012 15:47:56 -0700 Subject: Squashed commit of the following GL integration Signed-off-by: Valerio Virgillito --- assets/canvas-runtime.js | 529 ++++++++++++--------- assets/descriptor.json | 4 + assets/images/paris.png | Bin 0 -> 4108 bytes assets/images/powderblue.png | Bin 0 -> 176 bytes assets/images/raiders.png | Bin 0 -> 5674 bytes assets/rdge-compiled.js | 6 +- assets/shaders/Paris.frag.glsl | 68 +++ .../ui/tree-basic/treeItem.reel/treeItem.js | 35 +- js/controllers/selection-controller.js | 9 + js/document/html-document.js | 108 +++-- js/helper-classes/RDGE/rdge-compiled.js | 6 +- js/helper-classes/RDGE/src/core/script/engine.js | 7 +- js/io/system/ninjalibrary.json | 2 +- js/lib/drawing/world.js | 147 ++++++ js/lib/geom/circle.js | 54 ++- js/lib/geom/geom-obj.js | 154 ++++-- js/lib/geom/line.js | 44 +- js/lib/geom/rectangle.js | 63 ++- js/lib/rdge/materials/bump-metal-material.js | 40 ++ js/lib/rdge/materials/cloud-material.js | 300 ++++++++++++ js/lib/rdge/materials/flat-material.js | 21 + js/lib/rdge/materials/julia-material.js | 6 +- js/lib/rdge/materials/linear-gradient-material.js | 53 +++ js/lib/rdge/materials/mandel-material.js | 6 +- js/lib/rdge/materials/plasma-material.js | 18 + js/lib/rdge/materials/pulse-material.js | 44 +- js/lib/rdge/materials/radial-blur-material.js | 57 ++- js/lib/rdge/materials/radial-gradient-material.js | 54 ++- js/lib/rdge/materials/taper-material.js | 27 ++ js/lib/rdge/materials/twist-vert-material.js | 28 ++ js/lib/rdge/materials/uber-material.js | 180 ++++++- js/lib/rdge/materials/water-material.js | 103 ++++ js/models/materials-model.js | 90 +++- 33 files changed, 1877 insertions(+), 386 deletions(-) create mode 100644 assets/images/paris.png create mode 100644 assets/images/powderblue.png create mode 100644 assets/images/raiders.png create mode 100644 assets/shaders/Paris.frag.glsl create mode 100644 js/lib/rdge/materials/cloud-material.js diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js index fd823f35..dd909e26 100644 --- a/assets/canvas-runtime.js +++ b/assets/canvas-runtime.js @@ -37,17 +37,24 @@ function CanvasDataManager() for (var i=0; i= 0) + + // there should be some version information in + // the form of 'v0.0;' Pull that off. (the trailing ';' should + // be in the first 24 characters). + var index = importStr.indexOf( ';' ); + if ((importStr[0] === 'v') && (index < 24)) { - var endIndex = importStr.indexOf( "\n", startIndex ); - if (endIndex > 0) + // JSON format. pull off the version info + importStr = importStr.substr( index+1 ); + + var jObj = JSON.parse( importStr ); + var id = jObj.id; + if (id) { - var id = importStr.substring( startIndex+4, endIndex ); var canvas = this.findCanvasWithID( id, root ); if (canvas) { - var rt = new GLRuntime( canvas, importStr, assetPath ); + new GLRuntime( canvas, jObj, assetPath ); } } } @@ -95,14 +102,15 @@ function CanvasDataManager() // Class GLRuntime // Manages runtime fora WebGL canvas /////////////////////////////////////////////////////////////////////// -function GLRuntime( canvas, importStr, assetPath ) +function GLRuntime( canvas, jObj, assetPath ) { /////////////////////////////////////////////////////////////////////// // Instance variables /////////////////////////////////////////////////////////////////////// this._canvas = canvas; this._context = null; - this._importStr = importStr; + //this._importStr = importStr; + this._jObj = jObj; this.renderer = null; this.myScene = null; @@ -157,21 +165,19 @@ function GLRuntime( canvas, importStr, assetPath ) /////////////////////////////////////////////////////////////////////// this.loadScene = function() { + var jObj = this._jObj; + if (!jObj.children || (jObj.children.length != 1)) + throw new Error( "ill-formed JSON for runtime load: " + jObj ); + var root = jObj.children[0]; + // parse the data - // the GL runtime must start with a "sceneData: " - var index = importStr.indexOf( "scenedata: " ); - if (index >= 0) + if (jObj.scenedata) { 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 ); - + var rdgeStr = jObj.scenedata; this.myScene.importJSON( rdgeStr ); - this.importObjects( importStr ); + this.importObjects( root ); this.linkMaterials( this._geomRoot ); this.initMaterials(); this.linkLights(); @@ -179,7 +185,7 @@ function GLRuntime( canvas, importStr, assetPath ) else { this._context = this._canvas.getContext( "2d" ); - this.importObjects( importStr ); + this.importObjects( root ); this.render(); } } @@ -277,58 +283,42 @@ function GLRuntime( canvas, importStr, assetPath ) } } - this.importObjects = function( importStr, parent ) + this.importObjects = function( jObj, parent ) { - var index = importStr.indexOf( "OBJECT\n", 0 ); - while (index >= 0) - { - // update the string to the current object - importStr = importStr.substr( index+7 ); - - // read the next object - var obj = this.importObject( importStr, parent ); + // read the next object + var gObj = this.importObject( jObj, 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)) + // load the children + if (jObj.children) + { + var nKids = jObj.children.length; + for (var i=0; i= 0) - { - rtnPath = url.substr( index + searchStr.length ); - rtnPath = this._assetPath + rtnPath; - } - return rtnPath; - */ +// var searchStr = "assets/"; +// var index = url.indexOf( searchStr ); +// var rtnPath = url; +// if (index >= 0) +// { +// rtnPath = url.substr( index + searchStr.length ); +// rtnPath = this._assetPath + rtnPath; +// } +// return rtnPath; + return url; } @@ -450,8 +439,7 @@ function GLRuntime( canvas, importStr, assetPath ) } // start RDGE or load Canvas 2D objects - var index = importStr.indexOf( "scenedata: " ); - this._useWebGL = (index >= 0); + if (jObj.scenedata) this._useWebGL = true; if (this._useWebGL) { var id = canvas.getAttribute( "data-RDGE-id" ); @@ -515,16 +503,19 @@ function RuntimeGeomObj() { } - this.importMaterials = function(importStr) + this.importMaterials = function(jObj) { - var nMaterials = Number( getPropertyFromString( "nMaterials: ", importStr ) ); + if (!jObj || !jObj.materials) return; + + var nMaterials = jObj.nMaterials; + var matArray = jObj.materials; for (var i=0; i= 0) - rtnStr = rtnStr.substr(0, index); + return mat; + }; - return rtnStr; } /////////////////////////////////////////////////////////////////////// @@ -685,26 +690,24 @@ function RuntimeRectangle() this.inheritedFrom = RuntimeGeomObj; this.inheritedFrom(); - this.import = function( importStr ) + this.import = function( jObj ) { - 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._xOffset = jObj.xoff; + this._yOffset = jObj.yoff; + this._width = jObj.width; + this._height = jObj.height; + this._strokeWidth = jObj.strokeWidth; + this._strokeColor = jObj.strokeColor; + this._fillColor = jObj.fillColor; + this._tlRadius = jObj.tlRadius; + this._trRadius = jObj.trRadius; + this._blRadius = jObj.blRadius; + this._brRadius = jObj.brRadius; + this._innerRadius = jObj.innerRadius; + this._strokeStyle = jObj.strokeStyle; + var strokeMaterialName = jObj.strokeMat; + var fillMaterialName = jObj.fillMat; + this.importMaterials( jObj.materials ); } this.renderPath = function( inset, ctx ) @@ -827,6 +830,103 @@ function RuntimeRectangle() } } +/////////////////////////////////////////////////////////////////////// +// Class RuntimeLine +/////////////////////////////////////////////////////////////////////// +function RuntimeLine() +{ + this.inheritedFrom = RuntimeGeomObj; + this.inheritedFrom(); + + this.import = function( jObj ) + { + this._xOffset = jObj.xoff; + this._yOffset = jObj.yoff; + this._width = jObj.width; + this._height = jObj.height; + this._xAdj = jObj.xAdj; + this._yAdj = jObj.yAdj; + this._strokeWidth = jObj.strokeWidth; + this._slope = jObj.slope; + this._strokeStyle = jObj.strokeStyle; + this._strokeColor = jObj.strokeColor; + var strokeMaterialName = jObj.strokeMat; + this.importMaterials( jObj.materials ); + } + + 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; + + // set up the stroke style + var lineWidth = this._strokeWidth, + w = this._width, + h = this._height; + + var c, + gradient, + colors, + len, + n, + position, + cs; + + ctx.beginPath(); + ctx.lineWidth = lineWidth; + if (this._strokeColor) { + if(this._strokeColor.gradientMode) { + if(this._strokeColor.gradientMode === "radial") { + gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w/2, h/2)); + } else { + gradient = ctx.createLinearGradient(0, h/2, w, h/2); + } + colors = this._strokeColor.color; + + len = colors.length; + + for(n=0; n 0) { + p0 = [this._xAdj, this._yAdj]; + p1 = [w - this._xAdj, h - this._yAdj]; + } else { + p0 = [this._xAdj, h - this._yAdj]; + p1 = [w - this._xAdj, this._yAdj]; + } + + // draw the line + ctx.moveTo( p0[0], p0[1] ); + ctx.lineTo( p1[0], p1[1] ); + ctx.stroke(); + } + } +} + /////////////////////////////////////////////////////////////////////// // Class RuntimeOval /////////////////////////////////////////////////////////////////////// @@ -836,21 +936,20 @@ function RuntimeOval() this.inheritedFrom = RuntimeGeomObj; this.inheritedFrom(); - this.import = function( importStr ) + this.import = function( jObj ) { - 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._xOffset = jObj.xoff; + this._yOffset = jObj.yoff; + this._width = jObj.width; + this._height = jObj.height; + this._strokeWidth = jObj.strokeWidth; + this._strokeColor = jObj.strokeColor; + this._fillColor = jObj.fillColor; + this._innerRadius = jObj.innerRadius; + this._strokeStyle = jObj.strokeStyle; + var strokeMaterialName = jObj.strokeMat; + var fillMaterialName = jObj.fillMat; + this.importMaterials( jObj.materials ); } this.render = function() @@ -876,12 +975,17 @@ function RuntimeOval() // translate var xCtr = 0.5*world.getViewportWidth() + this._xOffset, yCtr = 0.5*world.getViewportHeight() + this._yOffset; + var mat = this.MatrixIdentity( 4 ); + mat[0] = xScale; mat[12] = xCtr; + mat[5] = yScale; mat[13] = yCtr; + /* 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 ); @@ -1037,7 +1141,7 @@ function RuntimeOval() var d = rad*cs + h; var rtnPts = [ this.vecAdd(dimen, pt, ctr) ]; - var rotMat = Matrix.RotationZ( dAngle ); + var rotMat = this.MatrixRotationZ( dAngle ); for ( var i=0; i= 0) - rtnStr = rtnStr.substr(0, index); - - return rtnStr; - } - } function RuntimeFlatMaterial() @@ -1129,14 +1219,11 @@ function RuntimeFlatMaterial() // assign a default color this._color = [1,0,0,1]; - this.import = function( importStr ) + this.import = function( jObj ) { - var colorStr = this.getPropertyFromString( "color: ", importStr ); - if (colorStr) - this._color = eval( "[" + colorStr + "]" ); + this._color = jObj.color; }; - this.init = function( world ) { if (this._shader) @@ -1160,9 +1247,10 @@ function RuntimePulseMaterial() this.isAnimated = function() { return true; } - this.import = function( importStr ) + this.import = function( jObj ) { - this._texMap = this.getPropertyFromString( "texture: ", importStr ); + this._texMap = jObj.texture; + if (jObj.dTime) this._dTime = jObj.dTime; } this.init = function( world ) @@ -1254,25 +1342,19 @@ function RuntimeRadialGradientMaterial() } } - this.import = function( importStr ) + this.import = function( jObj ) { - var colorStr; - colorStr = this.getPropertyFromString( "color1: ", importStr ); - this._color1 = eval( "[" + colorStr + "]" ); - colorStr = this.getPropertyFromString( "color2: ", importStr ); - this._color2 = eval( "[" + colorStr + "]" ); - colorStr = this.getPropertyFromString( "color3: ", importStr ); - this._color3 = eval( "[" + colorStr + "]" ); - colorStr = this.getPropertyFromString( "color4: ", importStr ); - this._color4 = eval( "[" + colorStr + "]" ); - - this._colorStop1 = Number( this.getPropertyFromString( "colorStop1: ", importStr ) ); - this._colorStop2 = Number( this.getPropertyFromString( "colorStop2: ", importStr ) ); - this._colorStop3 = Number( this.getPropertyFromString( "colorStop3: ", importStr ) ); - this._colorStop4 = Number( this.getPropertyFromString( "colorStop4: ", importStr ) ); + this._color1 = jObj.color1, + this._color2 = jObj.color2, + this._color3 = jObj.color3, + this._color4 = jObj.color4, + this._colorStop1 = jObj.colorStop1, + this._colorStop2 = jObj.colorStop2, + this._colorStop3 = jObj.colorStop3, + this._colorStop4 = jObj.colorStop4; if (this._angle !== undefined) - this._angle = this.getPropertyFromString( "angle: ", importStr ); + this._angle = jObj.angle; } } @@ -1304,12 +1386,12 @@ function RuntimeBumpMetalMaterial() this._specularTexture = "assets/images/silver.png"; this._normalTexture = "assets/images/normalMap.png"; - this.import = function( importStr ) + this.import = function( jObj ) { - this._lightDiff = eval( "[" + this.getPropertyFromString( "lightDiff: ", importStr ) + "]" ); - this._diffuseTexture = this.getPropertyFromString( "diffuseTexture: ", importStr ); - this._specularTexture = this.getPropertyFromString( "specularTexture: ", importStr ); - this._normalTexture = this.getPropertyFromString( "normalMap: ", importStr ); + this._lightDiff = jObj.lightDiff; + this._diffuseTexture = jObj.diffuseTexture; + this._specularTexture = jObj.specularTexture; + this._normalTexture = jObj.normalMap; } this.init = function( world ) @@ -1445,91 +1527,70 @@ function RuntimeUberMaterial() { } - this.import = function( importStr ) + this.import = function( jObj ) { - // limit the key searches to this material - var endKey = "endMaterial\n"; - var index = importStr.indexOf( endKey ); - index += endKey.length; - importStr = importStr.slice( 0, index ); - - var matProps = getPropertyFromString( "materialProps: ", importStr ); - if (matProps) + if (jObj.materialProps) { - this._ambientColor = eval( "[" + getPropertyFromString("ambientColor: ", importStr) + ']' ); - this._diffuseColor = eval( "[" + getPropertyFromString( "diffuseColor: ", importStr) + ']' ); - this._specularColor = eval( "[" + getPropertyFromString( "specularColor: ", importStr) + ']' ); - this._specularPower = Number( getPropertyFromString( "specularPower: ", importStr) ); + this._ambientColor = jObj.materialProps.ambientColor; + this._diffuseColor = jObj.materialProps.diffuseColor; + this._specularColor = jObj.materialProps.specularColor; + this._specularPower = jObj.materialProps.specularPower; } - var lightProps = getPropertyFromString( "lightProps: ", importStr ); - if (lightProps) + var lightArray = jObj.lights; + if (lightArray) { this._lights = []; - var lightStr; for (var i=0; i0?this.stateTop-1:0;this.stateStack[this.stateTop]&&this.stateStack[this.stateTop].ReInit()};this.PopAll=function(){for(;this.stateStack[this.stateTop]!=null;)this.PopState()};this.tick=function(a){this.stateStack[this.stateTop]!=null&&(this.stateStack[this.stateTop].Update(a),this.stateStack[this.stateTop].Resize(),this.stateStack[this.stateTop].Draw())}};g_enableBenchmarks=!0; function Engine(){this._assetPath="assets/";this.sceneMap=[];this.stateTop=void 0;this.lastWindowWidth=window.innerWidth;this.lastWindowHeight=window.innerHeight;this.lightManager=this.defaultContext=null;clearColor=[0,0,0,0];panelObjectManager=new objectManager;this.initializeComplete=!1;this.RDGECanvas=null;this.canvasToRendererMap={};this.canvasNameToStateStack={};this.canvasCtxList=[];invalidObj=/([()]|function)/;isValidObj=function(a){return invalidObj.test(a)?(window.console.error("invalid object name passed to RDGE, "+ a+" - looks like a function"),!1):!0};contextDef=function(){this.startUpState=this.ctxStateManager=this.renderer=this.id=null;this.sceneGraphMap=[];this.currentScene=null;this.getScene=function(){return this.sceneGraphMap[this.currentScene]};this.debug={frameCounter:0,mat4CallCount:0}};this.ctxMan=contextManager=new objectManager;contextManager.currentCtx=null;contextManager._addObject=contextManager.addObject;contextManager.contextMap={};contextManager.addObject=function(a){this.contextMap[a.id]= -a;return this._addObject(a)};contextManager.start=function(){for(var a=this.objects.length,b=0;b=0&&(f=a.substr(b+7),f=this._assetPath+f);return f}} +a;return this._addObject(a)};contextManager.start=function(){for(var a=this.objects.length,b=0;b=0&&(f=a.substr(b+7),f=this._assetPath+f);return f}} Engine.prototype.init=function(a,b,f){this.GlInit(f);globalParamFuncSet=function(a){this.data=a.data;this.type=a.type;this.set=function(a){for(var b=this.data?this.data.length:0,f=0;f" + "Modified date: "+ this.formatTimestamp(this.treeItemData.modifiedDate);} if((this.treeItemData.type === "directory") && (this.expandAfterDraw === true)){ - this.toggleContent(this.treeArrow); + this.expand(this.treeArrow); } if(this.treeItemData.uri === this.highlightedUri){ this.itemName.classList.add("selected"); @@ -171,6 +171,35 @@ exports.TreeItem = Montage.create(Component, { } }, + expand:{ + writable:false, + enumerable:true, + value:function(el){ + //if children already drawn then just hide/show + if(this.element.getElementsByTagName("ul").length > 0){ + var theParent = this.element.getElementsByTagName("ul")[0].parentNode; + if(theParent.classList.contains("hideTree")){//collapsed + theParent.classList.remove("hideTree");//expand + el.innerHTML = "▼"; + } + } + //else send event to draw the children + else{ + var treeClickEvent = document.createEvent("Events"); + treeClickEvent.initEvent("drawTree", false, false); + treeClickEvent.uri = this.treeItemData.uri; + treeClickEvent.uriType = this.treeItemData.type; + var divEl = document.createElement("div"); + this.element.appendChild(divEl); + treeClickEvent.subTreeContainer = divEl; + this.element.dispatchEvent(treeClickEvent); + + el.innerHTML = "▼"; + } + } + }, + + /** * Event Listeners */ diff --git a/js/controllers/selection-controller.js b/js/controllers/selection-controller.js index 9b0e638a..53cca029 100755 --- a/js/controllers/selection-controller.js +++ b/js/controllers/selection-controller.js @@ -112,6 +112,15 @@ exports.SelectionController = Montage.create(Component, { if(!this._isDocument) { if(this.findSelectedElement(event.detail) !== -1) { this.executeSelectElement(); + var element = event.detail; + if (element) { + if (element.elementModel) { + if (element.elementModel.shapeModel) { + if (element.elementModel.shapeModel.GLWorld) + element.elementModel.shapeModel.GLWorld.clearTree(); + } + } + } } } } diff --git a/js/document/html-document.js b/js/document/html-document.js index be1f89e2..aa57d848 100755 --- a/js/document/html-document.js +++ b/js/document/html-document.js @@ -9,7 +9,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Montage = require("montage/core/core").Montage, TextDocument = require("js/document/text-document").TextDocument, NJUtils = require("js/lib/NJUtils").NJUtils, - GLWorld = require("js/lib/drawing/world").World; + GLWorld = require("js/lib/drawing/world").World, + MaterialsModel = require("js/models/materials-model").MaterialsModel; //////////////////////////////////////////////////////////////////////// // exports.HTMLDocument = Montage.create(TextDocument, { @@ -193,12 +194,9 @@ exports.HTMLDocument = Montage.create(TextDocument, { var elt = this.iframe.contentWindow.document.getElementById("UserContent"); // if (elt) { - this._glData = []; - //if (path) { - //this.collectGLData(elt, this._glData, path); - //} else { - this.collectGLData(elt, this._glData ); - //} + var matLib = MaterialsModel.exportMaterials(); + this._glData = [matLib]; + this.collectGLData(elt, this._glData ); } else { this._glData = null } @@ -219,29 +217,74 @@ exports.HTMLDocument = Montage.create(TextDocument, { */ // /* + // get the data for the next canvas var importStr = value[i]; - var startIndex = importStr.indexOf( "id: " ); - if (startIndex >= 0) { - var endIndex = importStr.indexOf( "\n", startIndex ); - if (endIndex > 0) { - var id = importStr.substring( startIndex+4, endIndex ); - if (id) { - var canvas = this.findCanvasWithID( id, elt ); - if (canvas) { - if (!canvas.elementModel) { - NJUtils.makeElementModel(canvas, "Canvas", "shape", true); - } - if (canvas.elementModel) { - if (canvas.elementModel.shapeModel.GLWorld) { - canvas.elementModel.shapeModel.GLWorld.clearTree(); - } - var index = importStr.indexOf( "webGL: " ); - var useWebGL = (index >= 0) - var world = new GLWorld( canvas, useWebGL ); - world.import( importStr ); - this.buildShapeModel( canvas.elementModel, world ); - } + + // determine if it is the new (JSON) or old style format + var id = null; + var jObj = null; + var index = importStr.indexOf( ';' ); + if ((importStr[0] === 'v') && (index < 24)) + { + // JSON format. pull off the + importStr = importStr.substr( index+1 ); + jObj = jObj = JSON.parse( importStr ); + id = jObj.id; + } + else + { + // at this point the data could be either the materials library or + // an old style world. We can determine which by converting the string + // to an object via JSON.parse. That operation will fail if the string + // is an old style world. + var matLibStr = 'materialLibrary;'; + index = importStr.indexOf( matLibStr ); + if (index == 0) + { + importStr = importStr.substr( matLibStr.length ); + var matLibObj = JSON.parse( importStr ); + MaterialsModel.importMaterials( matLibObj ); + } + else + { + var startIndex = importStr.indexOf( "id: " ); + if (startIndex >= 0) { + var endIndex = importStr.indexOf( "\n", startIndex ); + if (endIndex > 0) + id = importStr.substring( startIndex+4, endIndex ); + } + } + } + + if (id != null) + { + var canvas = this.findCanvasWithID( id, elt ); + if (canvas) + { + if (!canvas.elementModel) + { + NJUtils.makeElementModel(canvas, "Canvas", "shape", true); + } + if (canvas.elementModel) + { + if (canvas.elementModel.shapeModel.GLWorld) + canvas.elementModel.shapeModel.GLWorld.clearTree(); + + if (jObj) + { + var useWebGL = jObj.webGL; + var world = new GLWorld( canvas, useWebGL ); + world.importJSON( jObj ); + } + else + { + var index = importStr.indexOf( "webGL: " ); + var useWebGL = (index >= 0); + var world = new GLWorld( canvas, useWebGL ); + world.import( importStr ); } + + this.buildShapeModel( canvas.elementModel, world ); } } } @@ -265,7 +308,7 @@ exports.HTMLDocument = Montage.create(TextDocument, { shapeModel.GLGeomObj = root; shapeModel.strokeSize = root._strokeWidth; shapeModel.stroke = root._strokeColor.slice(); - shapeModel.strokeMaterial = root._strokeMaterial.dup(); + shapeModel.strokeMaterial = root._strikeMaterial ? root._strokeMaterial.dup() : null; shapeModel.strokeStyle = "solid"; //shapeModel.strokeStyleIndex //shapeModel.border @@ -276,7 +319,7 @@ exports.HTMLDocument = Montage.create(TextDocument, { elementModel.selection = "Rectangle"; elementModel.pi = "RectanglePi"; shapeModel.fill = root._fillColor.slice(); - shapeModel.fillMaterial = root._fillMaterial.dup(); + shapeModel.fillMaterial = root._fillMaterial ? root._fillMaterial.dup() : null; shapeModel.tlRadius = root._tlRadius; shapeModel.trRadius = root._trRadius; shapeModel.blRadius = root._blRadius; @@ -287,7 +330,7 @@ exports.HTMLDocument = Montage.create(TextDocument, { elementModel.selection = "Oval"; elementModel.pi = "OvalPi"; shapeModel.fill = root._fillColor.slice(); - shapeModel.fillMaterial = root._fillMaterial.dup(); + shapeModel.fillMaterial = root._fillMaterial ? root._fillMaterial.dup() : null; shapeModel.innerRadius = root._innerRadius; break; @@ -382,7 +425,8 @@ exports.HTMLDocument = Montage.create(TextDocument, { { if (elt.elementModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld) { - var data = elt.elementModel.shapeModel.GLWorld.export(); + var data = elt.elementModel.shapeModel.GLWorld.exportJSON(); + //var data = elt.elementModel.shapeModel.GLWorld.export(); dataArray.push( data ); } diff --git a/js/helper-classes/RDGE/rdge-compiled.js b/js/helper-classes/RDGE/rdge-compiled.js index d1040d73..caf58147 100755 --- a/js/helper-classes/RDGE/rdge-compiled.js +++ b/js/helper-classes/RDGE/rdge-compiled.js @@ -235,15 +235,15 @@ input.onMouseMove=function(a){for(var b=0,f=input.eventHandlers.length;b0?this.stateTop-1:0;this.stateStack[this.stateTop]&&this.stateStack[this.stateTop].ReInit()};this.PopAll=function(){for(;this.stateStack[this.stateTop]!=null;)this.PopState()};this.tick=function(a){this.stateStack[this.stateTop]!=null&&(this.stateStack[this.stateTop].Update(a),this.stateStack[this.stateTop].Resize(),this.stateStack[this.stateTop].Draw())}};g_enableBenchmarks=!0; function Engine(){this._assetPath="assets/";this.sceneMap=[];this.stateTop=void 0;this.lastWindowWidth=window.innerWidth;this.lastWindowHeight=window.innerHeight;this.lightManager=this.defaultContext=null;clearColor=[0,0,0,0];panelObjectManager=new objectManager;this.initializeComplete=!1;this.RDGECanvas=null;this.canvasToRendererMap={};this.canvasNameToStateStack={};this.canvasCtxList=[];invalidObj=/([()]|function)/;isValidObj=function(a){return invalidObj.test(a)?(window.console.error("invalid object name passed to RDGE, "+ a+" - looks like a function"),!1):!0};contextDef=function(){this.startUpState=this.ctxStateManager=this.renderer=this.id=null;this.sceneGraphMap=[];this.currentScene=null;this.getScene=function(){return this.sceneGraphMap[this.currentScene]};this.debug={frameCounter:0,mat4CallCount:0}};this.ctxMan=contextManager=new objectManager;contextManager.currentCtx=null;contextManager._addObject=contextManager.addObject;contextManager.contextMap={};contextManager.addObject=function(a){this.contextMap[a.id]= -a;return this._addObject(a)};contextManager.start=function(){for(var a=this.objects.length,b=0;b=0&&(f=a.substr(b+7),f=this._assetPath+f);return f}} +a;return this._addObject(a)};contextManager.start=function(){for(var a=this.objects.length,b=0;b=0&&(f=a.substr(b+7),f=this._assetPath+f);return f}} Engine.prototype.init=function(a,b,f){this.GlInit(f);globalParamFuncSet=function(a){this.data=a.data;this.type=a.type;this.set=function(a){for(var b=this.data?this.data.length:0,f=0;f