From f9f8fdc3000042ba5b4504d91870dc9a32ef25eb Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 16 May 2012 01:00:22 -0700 Subject: Squashed master into dom-architecture Signed-off-by: Valerio Virgillito --- js/controllers/styles-controller.js | 4 +- js/controllers/tree-controller.js | 185 --- js/document/templates/banner/package.json | 3 +- js/io/system/ninjalibrary.js | 28 +- js/io/system/ninjalibrary.json | 4 +- js/lib/drawing/world.js | 6 +- js/lib/geom/brush-stroke.js | 2 +- js/lib/geom/circle.js | 1433 ++++++++++---------- js/lib/geom/geom-obj.js | 852 ++++++------ js/lib/geom/line.js | 914 +++++++------ js/lib/geom/rectangle.js | 1409 ++++++++++--------- js/lib/geom/sub-path.js | 2 +- .../materials-library-panel.html | 2 +- .../animations-presets.html | 5 +- .../presets/style-presets.reel/style-presets.html | 2 +- .../transitions-presets.html | 5 +- js/tools/LineTool.js | 3 +- js/tools/OvalTool.js | 2 +- js/tools/RectTool.js | 2 +- js/tools/TextTool.js | 40 +- 20 files changed, 2438 insertions(+), 2465 deletions(-) delete mode 100644 js/controllers/tree-controller.js (limited to 'js') diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index 7707a826..26485508 100755 --- a/js/controllers/styles-controller.js +++ b/js/controllers/styles-controller.js @@ -795,7 +795,9 @@ var stylesController = exports.StylesController = Montage.create(Component, { ///// method to apply/test the new value dec.setProperty(property, value, priority); - this.styleSheetModified(rule.parentStyleSheet); + if(rule.parentStyleSheet) { + this.styleSheetModified(rule.parentStyleSheet); + } ///// Return browser value for value we just set return dec.getPropertyValue(property); diff --git a/js/controllers/tree-controller.js b/js/controllers/tree-controller.js deleted file mode 100644 index 2b2e910c..00000000 --- a/js/controllers/tree-controller.js +++ /dev/null @@ -1,185 +0,0 @@ -/* - 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. - */ -/** - @module montage/ui/controller/tree-controller - @requires montage/core/core - @requires montage/ui/controller/object-controller - @requires montage/core/event/mutable-event - */ -var Montage = require("montage").Montage, - ObjectController = require("montage/ui/controller/object-controller").ObjectController, - ArrayController = require("montage/ui/controller/array-controller").ArrayController, - MutableEvent = require("montage/core/event/mutable-event").MutableEvent; -/** - TODO: Write description like the array controllers: The ArrayController helps with organizing a hierarchical - collection of objects, and managing user selection within that collection. - You can assign a TreeController instance as the contentProvider property for a TreeView object. - @class module:montage/ui/controller/tree-controller.TreeController - @classdesc - @extends module:montage/ui/controller/object-controller.ObjectController -*/ -var TreeController = exports.TreeController = Montage.create(ObjectController, /** @lends module:montage/ui/controller/tree-controller.TreeController# */ { - - rootKey : { - value: null - }, - - branchKey : { - value: 'children' - }, - - _root : { - value : null - }, - root : { - get: function() { - return this._root; - }, - set: function(value) { - this._root = value; - - this.initArrayControllers(); - } - }, - - rootController: { - value: null - }, - - initArrayControllers : { - value: function() { - var self = this; - - ///// Recursive function that finds all branch nodes and initializes - ///// sets the tree node type to "branch" or "leaf" - - function walk(node, init, depth) { - var branch = node[self.branchKey]; - - if(branch) { - branch.forEach(function(node) { - walk(node, init, ++depth); - }); - - node['treeNodeType'] = 'branch'; - } else { - node['treeNodeType'] = 'leaf'; - } - } - - walk(this._root, 0); - - } - }, - - /** - @private - */ - _selectedIndexes: { - value: null, - enumerable: false - }, - - /** - Description TODO - @type {Function} - @default null - */ - selectedIndexes: { - get: function() { - - }, - set: function(value) { - - } - }, - - branchControllers: { - value: [] - }, - - addBranchController : { - value: function(controller) { - if(this.delegate) { - controller.delegate = this.delegate; - } - - this.branchControllers.push(controller); - } - }, - - /** - @private - */ - _content: { - enumerable: false, - value: null - }, - /** - The content managed by the TreeController. - @type {Function} - @default {String} null - */ - content: { - get: function() { - return this._content; - }, - set: function(value) { - if (this._content === value) { - return; - } - - this._content = value; - - this.selectedObjects = null; - - if (this.rootKey) { - if (value[this.rootKey]) { - this.root = value[this.rootKey]; - } else { - console.log('No root key found in content data'); - } - } else { - this.root = value; - } - - } - }, - - addObjects : { - value: function() { - - var objects = Array.prototype.slice.call(arguments), - i, - objectCount = objects.length, - selectedContentIndexes, firstIndex; - - for (i = 0; i < objectCount; i++) { - this.content.push(objects[i]); - } - - if (this.selectObjectsOnAddition) { - selectedContentIndexes = []; - firstIndex = this.content.length-objectCount; - for (i = 0; i < objectCount; i++) { - selectedContentIndexes[i] = firstIndex++; - } - this.selectedContentIndexes = selectedContentIndexes; - this.selectedObjects = objects; - } - - if (this.clearFilterFunctionOnAddition) { - this.filterFunction = null; - } - - if (this.automaticallyOrganizeObjects) { - this.organizeObjects(); - } - - } - } - -}); diff --git a/js/document/templates/banner/package.json b/js/document/templates/banner/package.json index c8bc02fb..d1e839dc 100755 --- a/js/document/templates/banner/package.json +++ b/js/document/templates/banner/package.json @@ -3,6 +3,7 @@ "lib": "" }, "mappings": { - "montage": "../../../../node_modules/montage/" + "montage": "../../../../node_modules/montage/", + "montage-google": "../../../../node_modules/montage-google/" } } \ No newline at end of file diff --git a/js/io/system/ninjalibrary.js b/js/io/system/ninjalibrary.js index 78bdbe53..3de5fb69 100644 --- a/js/io/system/ninjalibrary.js +++ b/js/io/system/ninjalibrary.js @@ -152,7 +152,8 @@ exports.NinjaLibrary = Montage.create(Object.prototype, { // this.chromeApi = chrome; // - var i, l, libs, libjson, xhr = new XMLHttpRequest(), tocopylibs = [], copied; +// debugger; + var i, l, libs, libjson, xhr = new XMLHttpRequest(), tocopylibs = []; //Getting known json list of libraries to copy to chrome xhr.open("GET", '/js/io/system/ninjalibrary.json', false); xhr.send(); @@ -166,23 +167,18 @@ exports.NinjaLibrary = Montage.create(Object.prototype, { if (chromeLibs.length > 0) { // for (i=0; chromeLibs[i]; i++) { - copied = false; for (var j in libs.libraries) { if (String(libs.libraries[j].name+libs.libraries[j].version).toLowerCase() === chromeLibs[i]) { - copied = true; - } - } - // - if (!copied) { - if (libs.libraries[j].file) { - tocopylibs.push({name: String(libs.libraries[j].name+libs.libraries[j].version).toLowerCase(), path: libs.libraries[j].path, file: libs.libraries[j].file}); - } else { - tocopylibs.push({name: String(libs.libraries[j].name+libs.libraries[j].version).toLowerCase(), path: libs.libraries[j].path}); - } - } else { - //TODO: Remove, currently manually removing copied libraries - //this.chromeApi.directoryDelete(chromeLibs[i]); - } + //TODO: Remove, currently manually removing copied libraries + // //this.chromeApi.directoryDelete(chromeLibs[i]); + } else { + if (libs.libraries[j].file) { + tocopylibs.push({name: String(libs.libraries[j].name+libs.libraries[j].version).toLowerCase(), path: libs.libraries[j].path, file: libs.libraries[j].file}); + } else { + tocopylibs.push({name: String(libs.libraries[j].name+libs.libraries[j].version).toLowerCase(), path: libs.libraries[j].path}); + } + } + } } } else { diff --git a/js/io/system/ninjalibrary.json b/js/io/system/ninjalibrary.json index e236f2e0..feced079 100644 --- a/js/io/system/ninjalibrary.json +++ b/js/io/system/ninjalibrary.json @@ -1,6 +1,6 @@ { "libraries": [ - {"name": "Montage", "path": "/node_modules/descriptor.json", "version": "0.7.0.0"}, - {"name": "RDGE", "path": "/assets/descriptor.json", "version": "0.5.5.0"} + {"name": "Montage", "path": "/node_modules/descriptor.json", "version": "0.8.0.0"}, + {"name": "RDGE", "path": "/assets/descriptor.json", "version": "0.5.6.0"} ] } \ No newline at end of file diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js index 7ce23921..0dde9af4 100755 --- a/js/lib/drawing/world.js +++ b/js/lib/drawing/world.js @@ -874,17 +874,17 @@ World.prototype.importObjectJSON = function( jObj, parentGeomObj ) switch (type) { case 1: - obj = new Rectangle(); + obj = Object.create(Rectangle, {}); obj.importJSON( jObj ); break; case 2: // circle - obj = new Circle(); + obj = Object.create(Circle, {}); obj.importJSON( jObj ); break; case 3: // line - obj = new Line(); + obj = Object.create(Line, {}); obj.importJSON( jObj ); break; diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js index 1fae0c1d..6facdd5d 100755 --- a/js/lib/geom/brush-stroke.js +++ b/js/lib/geom/brush-stroke.js @@ -768,7 +768,7 @@ var BrushStroke = function GLBrushStroke() { }; //function BrushStroke ...class definition -BrushStroke.prototype = new GeomObj(); +BrushStroke.prototype = Object.create(GeomObj, {}); BrushStroke.prototype._CatmullRomSplineInterpolate = function(ctrlPts, t) { diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js index 0f1f49a9..425b869a 100755 --- a/js/lib/geom/circle.js +++ b/js/lib/geom/circle.js @@ -4,9 +4,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ -var GeomObj = require("js/lib/geom/geom-obj").GeomObj; -var ShapePrimitive = require("js/lib/geom/shape-primitive").ShapePrimitive; -var MaterialsModel = require("js/models/materials-model").MaterialsModel; +var GeomObj = require("js/lib/geom/geom-obj").GeomObj; +var ShapePrimitive = require("js/lib/geom/shape-primitive").ShapePrimitive; +var MaterialsModel = require("js/models/materials-model").MaterialsModel; var drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils; var vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils; @@ -16,744 +16,790 @@ var vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils; // Derived from class GLGeomObj // The position and dimensions of the stroke, fill, and inner Radius should be in pixels /////////////////////////////////////////////////////////////////////// -var Circle = function GLCircle() { - - this.init = function( world, xOffset, yOffset, width, height, strokeSize, strokeColor, fillColor, innerRadius, strokeMaterial, fillMaterial, strokeStyle) { - /////////////////////////////////////////////////////////////////////// - // Instance variables - /////////////////////////////////////////////////////////////////////// - this._width = 2.0; - this._height = 2.0; - this._xOffset = 0; - this._yOffset = 0; - - this._radius = 2.0; - this._strokeWidth = 0.25; - this._innerRadius = 0; - - this._ovalHeight = this._ovalHeight = 2.0 * this._radius; - - this._strokeStyle = "Solid"; - - this._aspectRatio = 1.0; - - if (arguments.length > 0) { - this._width = width; - this._height = height; - this._xOffset = xOffset; - this._yOffset = yOffset; - - this._strokeWidth = strokeSize; - this._innerRadius = innerRadius; - this._strokeColor = strokeColor; - this._fillColor = fillColor; - - this._strokeStyle = strokeStyle; - - this._matrix = Matrix.I(4); - //this._matrix[12] = xOffset; - //this._matrix[13] = yOffset; - } - - this.m_world = world; - - if(strokeMaterial){ - this._strokeMaterial = strokeMaterial; - } else { - this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ); - } +exports.Circle = Object.create(GeomObj, { + + /////////////////////////////////////////////////////////////////////// + // Instance variables + /////////////////////////////////////////////////////////////////////// + _width: { value : 2.0, writable: true }, + _height: { value : 2.0, writable: true }, + _xOffset: { value : 0, writable: true }, + _yOffset: { value : 0, writable: true }, + + _radius: { value : 2.0, writable: true }, + _strokeWidth: { value : 0.25, writable: true }, + _innerRadius: { value : 0, writable: true }, + _ovalHeight: { value : 4.0, writable: true }, + _strokeStyle: { value : "Solid", writable: true }, + _aspectRatio: { value : 1.0, writable: true }, + + init: { + value: function(world, xOffset, yOffset, width, height, strokeSize, strokeColor, fillColor, innerRadius, strokeMaterial, fillMaterial, strokeStyle) { + if(arguments.length > 0) { + this._width = width; + this._height = height; + this._xOffset = xOffset; + this._yOffset = yOffset; + this._ovalHeight = 2.0 * this._radius; + + this._strokeWidth = strokeSize; + this._innerRadius = innerRadius; + this._strokeColor = strokeColor; + this._fillColor = fillColor; + + this._strokeStyle = strokeStyle; + + this._matrix = Matrix.I(4); + //this._matrix[12] = xOffset; + //this._matrix[13] = yOffset; + } + + this.m_world = world; - if(fillMaterial) { - this._fillMaterial = fillMaterial; - } else { - this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ); + if(strokeMaterial) { + this._strokeMaterial = strokeMaterial; + } else { + this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ); + } + + if(fillMaterial) { + this._fillMaterial = fillMaterial; + } else { + this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ); + } } - }; + }, /////////////////////////////////////////////////////////////////////// // Property Accessors /////////////////////////////////////////////////////////////////////// - this.getStrokeWidth = function() { - return this._strokeWidth; - }; - - this.setStrokeWidth = function(w) { - this._strokeWidth = w; - }; - - this.getStrokeMaterial = function() { - return this._strokeMaterial; - }; + // TODO - Use getters/setters in the future + getStrokeWidth: { + value: function() { + return this._strokeWidth; + } + }, - this.setStrokeMaterial = function(m) { - this._strokeMaterial = m; - }; + setStrokeWidth: { + value: function(w) { + this._strokeWidth = w; + } + }, - this.getFillMaterial = function() { - return this._fillMaterial; - }; + getStrokeMaterial: { + value: function() { + return this._strokeMaterial; + } + }, - this.setFillMaterial = function(m) { - this._fillMaterial = m; - }; + setStrokeMaterial: { + value: function(m) { + this._strokeMaterial = m; + } + }, - this.getRadius = function() { - return this._radius; - }; + getFillMaterial: { + value: function() { + return this._fillMaterial; + } + }, - this.setRadius = function(r) { - this._radius = r; - }; + setFillMaterial: { + value: function(m) { + this._fillMaterial = m; + } + }, - this.getWorld = function() { - return this._world; - }; + getRadius: { + value: function() { + return this._radius; + } + }, - this.setWorld = function(w) { - this._world = w; - }; + setRadius: { + value: function(r) { + this._radius = r; + } + }, - this.getInnerRadius = function() { - return this._innerRadius; - }; + getInnerRadius: { + value: function() { + return this._innerRadius; + } + }, - this.setInnerRadius = function(r) { - this._innerRadius = r; - }; + setInnerRadius: { + value: function(r) { + this._innerRadius = r; + } + }, - this.getStrokeStyle = function() { - return this._strokeStyle; - }; - this.setStrokeStyle = function(s) { - this._strokeStyle = s; - }; + getStrokeStyle: { + value: function() { + return this._strokeStyle; + } + }, - this.getWidth = function() { - return this._width; - }; + setStrokeStyle: { + value: function(s) { + this._strokeStyle = s; + } + }, - this.setWidth = function(w) { - this._width = w; - }; + getWidth: { + value: function() { + return this._width; + } + }, - this.getHeight = function() { - return this._height; - }; + setWidth: { + value: function(w) { + this._width = w; + } + }, - this.setHeight = function(h) { - this._height = h; - }; + getHeight: { + value: function() { + return this._height; + } + }, - this.geomType = function() { - return this.GEOM_TYPE_CIRCLE; - }; + setHeight: { + value: function(h) { + this._height = h; + } + }, - /////////////////////////////////////////////////////////////////////// - // Methods - /////////////////////////////////////////////////////////////////////// + geomType: { + value: function() { + return this.GEOM_TYPE_CIRCLE; + } + }, /////////////////////////////////////////////////////////////////////// // update the "color of the material - this.getFillColor = function() - { - return this._fillColor; - } - -// this.setFillColor = function(c) -// { -// this._fillColor = c; -// } - - this.getStrokeColor = function() - { - return this._strokeColor; - } - -// this.setStrokeColor = function(c) -// { -// this._strokeColor = c; -// } - /////////////////////////////////////////////////////////////////////// - - this.buildBuffers = function() { - // get the world - var world = this.getWorld(); - if (!world) throw( "null world in buildBuffers" ); - - if (!world._useWebGL) return; - - // make sure RDGE has the correct context - RDGE.globals.engine.setContext( world.getCanvas().rdgeid ); + getFillColor: { + value: function() { + return this._fillColor; + } + }, - // create the gl buffer - var gl = world.getGLContext(); +// setFillColor: { +// value: function(c) { +// this._fillColor = c; +// } +// }, - // determine the number of triangles to generate - var nTriangles = 60; // yes, we will do better than this + getStrokeColor: { + value: function() { + return this._strokeColor; + } + }, - // get the normalized device coordinates (NDC) for - // all position and dimensions. - var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); - var xNDC = 2*this._xOffset/vpw, yNDC = -2*this._yOffset/vph, - xRadNDC = this._width/vpw, yRadNDC = this._height/vph, - xStrokeNDC = 2*this._strokeWidth/vpw, yStrokeNDC = 2*this._strokeWidth/vph, - xInnRadNDC = this._innerRadius*xRadNDC, yInnRadNDC = this._innerRadius*yRadNDC; +// setStrokeColor: { +// value: function(c) { +// this._strokeColor = c; +// } +// }, + /////////////////////////////////////////////////////////////////////// - var aspect = world.getAspect(); - var zn = world.getZNear(), zf = world.getZFar(); - var t = zn * Math.tan(world.getFOV() * Math.PI / 360.0), - b = -t, - r = aspect*t, - l = -r; + /////////////////////////////////////////////////////////////////////// + // Methods + /////////////////////////////////////////////////////////////////////// + buildBuffers: { + value: function() { + // get the world + var world = this.getWorld(); + if (!world) throw( "null world in buildBuffers" ); + + if (!world._useWebGL) return; + + // make sure RDGE has the correct context + RDGE.globals.engine.setContext( world.getCanvas().rdgeid ); + + // create the gl buffer + var gl = world.getGLContext(); + + // determine the number of triangles to generate + var nTriangles = 60; // yes, we will do better than this + + // get the normalized device coordinates (NDC) for + // all position and dimensions. + var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); + var xNDC = 2*this._xOffset/vpw, yNDC = -2*this._yOffset/vph, + xRadNDC = this._width/vpw, yRadNDC = this._height/vph, + xStrokeNDC = 2*this._strokeWidth/vpw, yStrokeNDC = 2*this._strokeWidth/vph, + xInnRadNDC = this._innerRadius*xRadNDC, yInnRadNDC = this._innerRadius*yRadNDC; + + var aspect = world.getAspect(); + var zn = world.getZNear(), zf = world.getZFar(); + var t = zn * Math.tan(world.getFOV() * Math.PI / 360.0), + b = -t, + r = aspect*t, + l = -r; + + // calculate the object coordinates from their NDC coordinates + var z = -world.getViewDistance(); + + // get the position of the origin + var x = -z*(r-l)/(2.0*zn)*xNDC, + y = -z*(t-b)/(2.0*zn)*yNDC; + + // get the x and y radii + var xRad = -z*(r-l)/(2.0*zn)*xRadNDC, + yRad = -z*(t-b)/(2.0*zn)*yRadNDC; + + // save the overall dimensions to be used in the uv calculations + this._ovalWidth = xRad; this._ovalHeight = yRad; + + // get the x & y stroke size + var xStroke = -z*(r-l)/(2.0*zn)*xStrokeNDC, + yStroke = -z*(t-b)/(2.0*zn)*yStrokeNDC; + + // get the inner radius + var xInnRad = -z*(r-l)/(2.0*zn)*xInnRadNDC, + yInnRad = -z*(t-b)/(2.0*zn)*yInnRadNDC; + + // get a matrix to rotate a point around the circle + var angle = 2.0 * Math.PI/Number(nTriangles); + var mat = Matrix.RotationZ( angle ); + var reverseRotMat = Matrix.RotationZ( -angle ); + + // calculate matrices to scale the circle and stroke to fit the bounds of the ellipse + var strokeScaleMat = Matrix.I(4); + strokeScaleMat[0] = xRad; + strokeScaleMat[5] = yRad; + + var fillScaleMat = Matrix.I(4); + fillScaleMat[0] = xRad - xStroke; + fillScaleMat[5] = yRad - yStroke; + + var innerRadiusScaleMat = Matrix.I(4); + innerRadiusScaleMat[0] = xInnRad; + innerRadiusScaleMat[5] = yInnRad; + + var innerStrokeScaleMat = Matrix.I(4); + innerStrokeScaleMat[0] = xInnRad - xStroke; + innerStrokeScaleMat[5] = yInnRad - yStroke; + + var fillPrim, strokePrim0, strokePrim1; + var fillMaterial, strokeMaterial0, strokeMaterial2; + + this._primArray = []; + this._materialArray = []; + this._materialTypeArray = []; + this._materialNodeArray = []; + + ///////////////////////////////////////////////////////////// + // Strokes + if(this._strokeWidth > 0) { + var numStrokes = 1; + if(this._innerRadius !== 0) { + strokePrim0 = this.generateOvalRing(x, y, reverseRotMat, innerStrokeScaleMat, innerRadiusScaleMat, nTriangles); + } - // calculate the object coordinates from their NDC coordinates - var z = -world.getViewDistance(); + strokePrim1 = this.generateOvalRing(x, y, reverseRotMat, fillScaleMat, strokeScaleMat, nTriangles); + } - // get the position of the origin - var x = -z*(r-l)/(2.0*zn)*xNDC, - y = -z*(t-b)/(2.0*zn)*yNDC; - - // get the x and y radii - var xRad = -z*(r-l)/(2.0*zn)*xRadNDC, - yRad = -z*(t-b)/(2.0*zn)*yRadNDC; - - // save the overall dimensions to be used in the uv calculations - this._ovalWidth = xRad; this._ovalHeight = yRad; - - // get the x & y stroke size - var xStroke = -z*(r-l)/(2.0*zn)*xStrokeNDC, - yStroke = -z*(t-b)/(2.0*zn)*yStrokeNDC; - - // get the inner radius - var xInnRad = -z*(r-l)/(2.0*zn)*xInnRadNDC, - yInnRad = -z*(t-b)/(2.0*zn)*yInnRadNDC; - - // get a matrix to rotate a point around the circle - var angle = 2.0 * Math.PI/Number(nTriangles); - var mat = Matrix.RotationZ( angle ); - var reverseRotMat = Matrix.RotationZ( -angle ); - - // calculate matrices to scale the circle and stroke to fit the bounds of the ellipse - var strokeScaleMat = Matrix.I(4); - strokeScaleMat[0] = xRad; - strokeScaleMat[5] = yRad; - - var fillScaleMat = Matrix.I(4); - fillScaleMat[0] = xRad - xStroke; - fillScaleMat[5] = yRad - yStroke; - - var innerRadiusScaleMat = Matrix.I(4); - innerRadiusScaleMat[0] = xInnRad; - innerRadiusScaleMat[5] = yInnRad; - - var innerStrokeScaleMat = Matrix.I(4); - innerStrokeScaleMat[0] = xInnRad - xStroke; - innerStrokeScaleMat[5] = yInnRad - yStroke; - - var fillPrim, strokePrim0, strokePrim1; - var fillMaterial, strokeMaterial0, strokeMaterial2; - - this._primArray = []; - this._materialArray = []; - this._materialTypeArray = []; - this._materialNodeArray = []; - - ///////////////////////////////////////////////////////////// - // Strokes - if(this._strokeWidth > 0) { - var numStrokes = 1; - if(this._innerRadius !== 0) { - strokePrim0 = this.generateOvalRing(x, y, reverseRotMat, innerStrokeScaleMat, innerRadiusScaleMat, nTriangles); + ///////////////////////////////////////////////////////////// + // Fill + if(this._innerRadius === 0) { + fillPrim = this.generateOval(x, y, mat, fillScaleMat, nTriangles); + } else { + fillPrim = this.generateOvalRing(x, y, reverseRotMat, innerRadiusScaleMat, fillScaleMat, nTriangles); } - strokePrim1 = this.generateOvalRing(x, y, reverseRotMat, fillScaleMat, strokeScaleMat, nTriangles); - } - - ///////////////////////////////////////////////////////////// - // Fill - if(this._innerRadius === 0) { - fillPrim = this.generateOval(x, y, mat, fillScaleMat, nTriangles); - } else { - fillPrim = this.generateOvalRing(x, y, reverseRotMat, innerRadiusScaleMat, fillScaleMat, nTriangles); - } + if (fillPrim) { + fillMaterial = this.makeFillMaterial(); - if (fillPrim) { - fillMaterial = this.makeFillMaterial(); + this._primArray.push( fillPrim ); + this._materialNodeArray.push( fillMaterial.getMaterialNode() ); + } - this._primArray.push( fillPrim ); - this._materialNodeArray.push( fillMaterial.getMaterialNode() ); - } + if (strokePrim0) { + strokeMaterial0 = this.makeStrokeMaterial(); - if (strokePrim0) { - strokeMaterial0 = this.makeStrokeMaterial(); + this._primArray.push( strokePrim0 ); + this._materialNodeArray.push( strokeMaterial0.getMaterialNode() ); + } - this._primArray.push( strokePrim0 ); - this._materialNodeArray.push( strokeMaterial0.getMaterialNode() ); - } + if (strokePrim1) { + strokeMaterial2 = this.makeStrokeMaterial(); - if (strokePrim1) { - strokeMaterial2 = this.makeStrokeMaterial(); + this._primArray.push( strokePrim1 ); + this._materialNodeArray.push( strokeMaterial2.getMaterialNode() ); + } - this._primArray.push( strokePrim1 ); - this._materialNodeArray.push( strokeMaterial2.getMaterialNode() ); - } + world.updateObject(this); + } + }, + + generateOval: { + value: function(xOff, yOff, rotationMat, scaleMat, nTriangles) { + var pt = [1.0, 0.0, 0.0]; + //var pts = scaleMat.multiply(pt); + var pts = glmat4.multiplyVec3( scaleMat, pt, []); + var x = pts[0], y = pts[1], z = 0; + var xs = scaleMat[0], ys = scaleMat[4]; + + var vrts = [], nrms = [], uvs = [], indices = []; + var index = 0; + for (var i=0; i 0) { + xScale = 0.5*innerRad*this._width; + yScale = 0.5*innerRad*this._height; + mat[0] = xScale; + mat[5] = yScale; + + // get the bezier points + var bezPts = MathUtils.circularArcToBezier( [0,0,0], [1,0,0], -2.0*Math.PI ); + if (bezPts) { + var n = bezPts.length; + p = MathUtils.transformPoint( bezPts[0], mat ); + ctx.moveTo( p[0], p[1] ); + index = 1; + while (index < n) { + p0 = MathUtils.transformPoint( bezPts[index], mat ); + p1 = MathUtils.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; + } + } + } - } else { - c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; - ctx.fillStyle = c; + // fill the path + ctx.fill(); } - // draw the fill -// ctx.beginPath(); - var p = MathUtils.transformPoint( bezPts[0], mat ); - ctx.moveTo( p[0], p[1] ); - var index = 1; - while (index < n) { - p0 = MathUtils.transformPoint( bezPts[index], mat ); - p1 = MathUtils.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 (MathUtils.fpSign(innerRad) > 0) { - xScale = 0.5*innerRad*this._width; - yScale = 0.5*innerRad*this._height; - mat[0] = xScale; - mat[5] = yScale; - - // get the bezier points - var bezPts = MathUtils.circularArcToBezier( [0,0,0], [1,0,0], -2.0*Math.PI ); - if (bezPts) { - var n = bezPts.length; - p = MathUtils.transformPoint( bezPts[0], mat ); - ctx.moveTo( p[0], p[1] ); - index = 1; - while (index < n) { - p0 = MathUtils.transformPoint( bezPts[index], mat ); - p1 = MathUtils.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) { - if(this._strokeColor.gradientMode) { - if(this._strokeColor.gradientMode === "radial") { - gradient = ctx.createRadialGradient(xCtr, yCtr, Math.min(xScale, yScale), - xCtr, yCtr, 0.5*Math.max(this._height, this._width)); - } else { - gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); - } - colors = this._strokeColor.color; - len = colors.length; + // 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) { + if(this._strokeColor.gradientMode) { + if(this._strokeColor.gradientMode === "radial") { + gradient = ctx.createRadialGradient(xCtr, yCtr, Math.min(xScale, yScale), + xCtr, yCtr, 0.5*Math.max(this._height, this._width)); + } else { + gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); + } + colors = this._strokeColor.color; + + len = colors.length; + + for(j=0; j 0) { + // 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; + + // draw the stroke + p = MathUtils.transformPoint( bezPts[0], mat ); + ctx.moveTo( p[0], p[1] ); + index = 1; + while (index < n) { + var p0 = MathUtils.transformPoint( bezPts[index], mat ); + var p1 = MathUtils.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; + } + } - } else { - c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; - ctx.strokeStyle = c; + // render the stroke + ctx.stroke(); } - // draw the stroke - p = MathUtils.transformPoint( bezPts[0], mat ); - ctx.moveTo( p[0], p[1] ); - index = 1; - while (index < n) { - var p0 = MathUtils.transformPoint( bezPts[index], mat ); - var p1 = MathUtils.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 (MathUtils.fpSign(innerRad) > 0) { - // 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; - - // draw the stroke - p = MathUtils.transformPoint( bezPts[0], mat ); - ctx.moveTo( p[0], p[1] ); - index = 1; - while (index < n) { - var p0 = MathUtils.transformPoint( bezPts[index], mat ); - var p1 = MathUtils.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; - } - } - - // render the stroke - ctx.stroke(); - } - } - }; - - this.exportJSON = function() - { - var jObj = - { - 'type' : this.geomType(), - 'xoff' : this._xOffset, - 'yoff' : this._yOffset, - 'width' : this._width, - 'height' : this._height, - 'strokeWidth' : this._strokeWidth, - 'strokeColor' : this._strokeColor, - 'fillColor' : this._fillColor, - 'innerRadius' : this._innerRadius, - 'strokeStyle' : this._strokeStyle, - 'strokeMat' : this._strokeMaterial ? this._strokeMaterial.getName() : MaterialsModel.getDefaultMaterialName(), - 'fillMat' : this._fillMaterial ? this._fillMaterial.getName() : MaterialsModel.getDefaultMaterialName(), - 'materials' : this.exportMaterialsJSON() - }; - - return jObj; - }; - - this.importJSON = function( jObj ) - { - 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; - - var strokeMat = MaterialsModel.getMaterial( strokeMaterialName ); - if (!strokeMat) { - console.log( "object material not found in library: " + strokeMaterialName ); - strokeMat = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ); + } } - this._strokeMaterial = strokeMat; - - var fillMat = MaterialsModel.getMaterial( fillMaterialName ); - if (!fillMat) { - console.log( "object material not found in library: " + fillMaterialName ); - fillMat = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ); + }, + + exportJSON: { + value: function() { + var jObj = + { + 'type' : this.geomType(), + 'xoff' : this._xOffset, + 'yoff' : this._yOffset, + 'width' : this._width, + 'height' : this._height, + 'strokeWidth' : this._strokeWidth, + 'strokeColor' : this._strokeColor, + 'fillColor' : this._fillColor, + 'innerRadius' : this._innerRadius, + 'strokeStyle' : this._strokeStyle, + 'strokeMat' : this._strokeMaterial ? this._strokeMaterial.getName() : MaterialsModel.getDefaultMaterialName(), + 'fillMat' : this._fillMaterial ? this._fillMaterial.getName() : MaterialsModel.getDefaultMaterialName(), + 'materials' : this.exportMaterialsJSON() + }; + + return jObj; } - this._fillMaterial = fillMat; + }, + + importJSON: { + value: function(jObj) { + 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; + + var strokeMat = MaterialsModel.getMaterial( strokeMaterialName ); + if (!strokeMat) { + console.log( "object material not found in library: " + strokeMaterialName ); + strokeMat = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ); + } + this._strokeMaterial = strokeMat; - this.importMaterialsJSON( jObj.materials ); - }; + var fillMat = MaterialsModel.getMaterial( fillMaterialName ); + if (!fillMat) { + console.log( "object material not found in library: " + fillMaterialName ); + fillMat = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ); + } + this._fillMaterial = fillMat; - this.collidesWithPoint = function( x, y ) { + this.importMaterialsJSON( jObj.materials ); + } + }, + + collidesWithPoint: { + value: function(x, y) { // if(x < this._xOffset) return false; // if(x > (this._xOffset + this._width)) return false; // if(y < this._yOffset) return false; // if(y > (this._yOffset + this._height)) return false; return true; - }; - - this.containsPoint = function( pt, dir ) { - var world = this.getWorld(); - if (!world) throw( "null world in containsPoint" ); - - // get a point on the plane of the circle - // the point is in NDC, as is the input parameters - var mat = this.getMatrix(); - var plane = [0,0,1,0]; - plane = MathUtils.transformPlane( plane, mat ); - var projPt = MathUtils.vecIntersectPlane ( pt, dir, plane ); - - // transform the projected point back to the XY plane - //var invMat = mat.inverse(); - var invMat = glmat4.inverse( mat, [] ); - var planePt = MathUtils.transformPoint( projPt, invMat ); - - // get the normalized device coordinates (NDC) for - // the position and radii. - var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); - var xNDC = 2*this._xOffset/vpw, yNDC = 2*this._yOffset/vph, - xRadNDC = this._width/vpw, yRadNDC = this._height/vph; - var projMat = world.makePerspectiveMatrix(); - var z = -world.getViewDistance(); - var planePtNDC = planePt.slice(0); - planePtNDC[2] = z; - planePtNDC = MathUtils.transformHomogeneousPoint( planePtNDC, projMat ); - planePtNDC = MathUtils.applyHomogeneousCoordinate( planePtNDC ); - - // get the gl coordinates - var aspect = world.getAspect(); - var zn = world.getZNear(), zf = world.getZFar(); - var t = zn * Math.tan(world.getFOV() * Math.PI / 360.0), - b = -t, - r = aspect*t, - l = -r; - - var angle = Math.atan2( planePtNDC[1] - yNDC, planePtNDC[0] - xNDC ); - var degrees = angle*180.0/Math.PI; - var objPtNDC = [Math.cos(angle)*xRadNDC + xNDC, Math.sin(angle)*yRadNDC + yNDC, 0]; - - var ctrNDC = [xNDC, yNDC]; - - var distToBoundary = VecUtils.vecDist( 2, ctrNDC, objPtNDC ), - distToPt = VecUtils.vecDist( 2, ctrNDC, planePtNDC ); - - return (MathUtils.fpCmp(distToPt,distToBoundary) <= 0); - }; - - this.getNearPoint = function( pt, dir ) - { - var world = this.getWorld(); - if (!world) throw( "null world in getNearPoint" ); - - // the input point and direction are in GL space - // project to the z == 0 plane - var mat = this.getMatrix(); - var plane = [0,0,1,0]; - plane = MathUtils.transformPlane( plane, mat ); - var projPt = MathUtils.vecIntersectPlane ( pt, dir, plane ); - - // get the center of the circle in GL space - var ctr = this.getGLCenter(); - - // transform the projected point to the plane of the circle - var planePt = MathUtils.transformPoint( projPt, mat ); - - // get a matrix mapping the circle to a 2D coordinate system - var normal = [ mat[8], mat[9], mat[10] ]; - var planeMat = drawUtils.getPlaneToWorldMatrix(normal, ctr); - var planeMatInv = glmat4.inverse( planeMat, [] ); - var planePt2D = MathUtils.transformPoint( planePt, planeMatInv ); - - // get 2 points on the axes of the oval - var wPt = this.preViewToGL( [this._xOffset + 0.5*this.getWidth(), this._yOffset, 0] ), - hPt = this.preViewToGL( [this._xOffset, this._yOffset + 0.5*this.getHeight(), 0] ); - var w = vecUtils.vecDist( 2, wPt, ctr ), - h = vecUtils.vecDist( 2, hPt, ctr ); - var aspect = w/h; - - // get the angle of the projected point relative to the circle - var angle = Math.atan2( planePt2D[1], planePt2D[0]/aspect ); - var degrees = angle*180.0/Math.PI; - - // get the corresponding point on the object - var pt = [ Math.cos(angle)*w, Math.sin(angle)*h, 0 ]; - var glPt = MathUtils.transformPoint( pt, planeMat ); - - return glPt; - } + } + }, + + containsPoint: { + value: function(pt, dir) { + var world = this.getWorld(); + if (!world) throw( "null world in containsPoint" ); + + // get a point on the plane of the circle + // the point is in NDC, as is the input parameters + var mat = this.getMatrix(); + var plane = [0,0,1,0]; + plane = MathUtils.transformPlane( plane, mat ); + var projPt = MathUtils.vecIntersectPlane ( pt, dir, plane ); + + // transform the projected point back to the XY plane + //var invMat = mat.inverse(); + var invMat = glmat4.inverse( mat, [] ); + var planePt = MathUtils.transformPoint( projPt, invMat ); + + // get the normalized device coordinates (NDC) for + // the position and radii. + var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); + var xNDC = 2*this._xOffset/vpw, yNDC = 2*this._yOffset/vph, + xRadNDC = this._width/vpw, yRadNDC = this._height/vph; + var projMat = world.makePerspectiveMatrix(); + var z = -world.getViewDistance(); + var planePtNDC = planePt.slice(0); + planePtNDC[2] = z; + planePtNDC = MathUtils.transformHomogeneousPoint( planePtNDC, projMat ); + planePtNDC = MathUtils.applyHomogeneousCoordinate( planePtNDC ); + + // get the gl coordinates + var aspect = world.getAspect(); + var zn = world.getZNear(), zf = world.getZFar(); + var t = zn * Math.tan(world.getFOV() * Math.PI / 360.0), + b = -t, + r = aspect*t, + l = -r; + + var angle = Math.atan2( planePtNDC[1] - yNDC, planePtNDC[0] - xNDC ); + var degrees = angle*180.0/Math.PI; + var objPtNDC = [Math.cos(angle)*xRadNDC + xNDC, Math.sin(angle)*yRadNDC + yNDC, 0]