- EntityShapeVisualizer.updateSelection -> EntityShapeVisualizer.setEntities (for a more generic use)

- GridPattern -> Material
- Replaced stringified compare with deep compare
- Copied+modified zone icon (consistent color, removed sharp edges)

scripts/system/assets/images/icon-zone.svg

@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 512 512"
+   style="enable-background:new 0 0 512 512;"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="icon-zone.svg"><metadata
+     id="metadata4211"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs4209" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2560"
+     inkscape:window-height="1377"
+     id="namedview4207"
+     showgrid="false"
+     inkscape:zoom="2"
+     inkscape:cx="228.01796"
+     inkscape:cy="376.88605"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g4191" /><style
+     type="text/css"
+     id="style4189">
+	.st0{fill:none;stroke:#000000;stroke-width:18;stroke-miterlimit:10;}
+	.st1{fill:none;stroke:#000000;stroke-width:18;stroke-linecap:round;stroke-miterlimit:10;}
+	.st2{fill:none;stroke:#000000;stroke-width:19;stroke-linecap:round;stroke-miterlimit:10;}
+</style><g
+     id="g4191"><path
+       d="M 380.7,139.8 C 378,133.2 371.5,129 364.4,129 l -72.4,0 0,34 29.9,0 -162.9,163.1 0,-36.1 -36,0 0,79 0.006,0.024 c 0.1,2 0.5,4.1 1.3,5.9 C 127.00564,381.52397 134.7,386 141.8,386 l 83.2,0 0,-35 -40.8,0 161.8,-161.3 0,25.3 36.125,0.125 -0.19692,-62.65758 C 382.08839,148.14645 382.4,144 380.7,139.8 Z"
+       id="path4193"
+       style="fill:#333333;fill-opacity:1"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cscccccccccscccccccc" /><path
+       d="M338.4,437.6c0-12,9.7-21.7,21.7-21.7l0,0c12,0,21.7,9.7,21.7,21.7l0,0c0,12-9.7,21.7-21.7,21.7l0,0   C348.1,459.3,338.4,449.6,338.4,437.6z M266.9,437.6c0-12,9.7-21.7,21.7-21.7l0,0c12,0,21.7,9.7,21.7,21.7l0,0   c0,12-9.7,21.7-21.7,21.7l0,0C276.6,459.3,266.9,449.6,266.9,437.6z M195.4,437.6c0-12,9.7-21.7,21.7-21.7l0,0   c12,0,21.7,9.7,21.7,21.7l0,0c0,12-9.7,21.7-21.7,21.7l0,0C205.1,459.3,195.4,449.6,195.4,437.6z M123.9,437.6   c0-12,9.7-21.7,21.7-21.7l0,0c12,0,21.7,9.7,21.7,21.7l0,0c0,12-9.7,21.7-21.7,21.7l0,0C133.6,459.3,123.9,449.6,123.9,437.6z"
+       id="path4195"
+       style="fill:#333333;fill-opacity:1" /><path
+       d="M74.1,459.3c-5.7,0-11.3-2.3-15.4-6.4c-4-4-6.4-9.6-6.4-15.3c0-5.7,2.3-11.3,6.4-15.3c4-4,9.6-6.4,15.4-6.4   c5.7,0,11.3,2.3,15.3,6.4c4,4,6.4,9.6,6.4,15.3c0,5.7-2.3,11.3-6.4,15.3C85.4,457,79.8,459.3,74.1,459.3z"
+       id="path4197"
+       style="fill:#333333;fill-opacity:1" /><path
+       d="M52.4,366.1c0-12,9.7-21.7,21.7-21.7l0,0c12,0,21.7,9.7,21.7,21.7l0,0c0,12-9.7,21.7-21.7,21.7l0,0   C62.1,387.8,52.4,378,52.4,366.1z M52.4,294.6c0-12,9.7-21.7,21.7-21.7l0,0c12,0,21.7,9.7,21.7,21.7l0,0c0,12-9.7,21.7-21.7,21.7   l0,0C62.1,316.3,52.4,306.5,52.4,294.6z M52.4,223.1c0-12,9.7-21.7,21.7-21.7l0,0c12,0,21.7,9.7,21.7,21.7l0,0   c0,12-9.7,21.7-21.7,21.7l0,0C62.1,244.8,52.4,235,52.4,223.1z M52.4,151.5c0-12,9.7-21.7,21.7-21.7l0,0c12,0,21.7,9.7,21.7,21.7   l0,0c0,12-9.7,21.7-21.7,21.7l0,0C62.1,173.2,52.4,163.5,52.4,151.5z"
+       id="path4199"
+       style="fill:#333333;fill-opacity:1" /><path
+       d="M338.4,80c0-12,9.7-21.7,21.7-21.7l0,0c12,0,21.7,9.7,21.7,21.7l0,0c0,12-9.7,21.7-21.7,21.7l0,0   C348.1,101.7,338.4,92,338.4,80z M266.9,80c0-12,9.7-21.7,21.7-21.7l0,0c12,0,21.7,9.7,21.7,21.7l0,0c0,12-9.7,21.7-21.7,21.7l0,0   C276.6,101.7,266.9,92,266.9,80z M195.4,80c0-12,9.7-21.7,21.7-21.7l0,0c12,0,21.7,9.7,21.7,21.7l0,0c0,12-9.7,21.7-21.7,21.7l0,0   C205.1,101.7,195.4,92,195.4,80z M123.9,80c0-12,9.7-21.7,21.7-21.7l0,0c12,0,21.7,9.7,21.7,21.7l0,0c0,12-9.7,21.7-21.7,21.7l0,0   C133.6,101.7,123.9,92,123.9,80z"
+       id="path4201"
+       style="fill:#333333;fill-opacity:1" /><path
+       d="M431.6,101.7c-5.7,0-11.3-2.3-15.3-6.4c-4-4-6.4-9.6-6.4-15.3c0-5.7,2.3-11.3,6.4-15.3c4-4,9.6-6.4,15.3-6.4   s11.3,2.3,15.3,6.4c4,4,6.4,9.6,6.4,15.3c0,5.7-2.3,11.3-6.4,15.3C442.9,99.4,437.4,101.7,431.6,101.7z"
+       id="path4203"
+       style="fill:#333333;fill-opacity:1" /><path
+       d="M409.9,366.1c0-12,9.7-21.7,21.7-21.7l0,0c12,0,21.7,9.7,21.7,21.7l0,0c0,12-9.7,21.7-21.7,21.7l0,0   C419.7,387.8,409.9,378.1,409.9,366.1z M409.9,294.6c0-12,9.7-21.7,21.7-21.7l0,0c12,0,21.7,9.7,21.7,21.7l0,0   c0,12-9.7,21.7-21.7,21.7l0,0C419.7,316.3,409.9,306.5,409.9,294.6z M409.9,223.1c0-12,9.7-21.7,21.7-21.7l0,0   c12,0,21.7,9.7,21.7,21.7l0,0c0,12-9.7,21.7-21.7,21.7l0,0C419.7,244.7,409.9,235,409.9,223.1z M409.9,151.5   c0-12,9.7-21.7,21.7-21.7l0,0c12,0,21.7,9.7,21.7,21.7l0,0c0,12-9.7,21.7-21.7,21.7l0,0C419.7,173.2,409.9,163.5,409.9,151.5z"
+       id="path4205"
+       style="fill:#333333;fill-opacity:1" /></g></svg>

scripts/system/assets/images/materials/GridPattern.json

@@ -0,0 +1,13 @@
+{
+    "materialVersion": 1,
+    "materials": {
+        "albedo": [
+            0.0,
+            0.0,
+            7.0
+        ],
+        "unlit": true,
+        "opacity": 0.4,
+        "albedoMap": "GridPattern.png"
+    }
+}

scripts/system/edit.js

@@ -82,7 +82,7 @@ var selectionManager = SelectionManager;
 var PARTICLE_SYSTEM_URL = Script.resolvePath("assets/images/icon-particles.svg");
 var POINT_LIGHT_URL = Script.resolvePath("assets/images/icon-point-light.svg");
 var SPOT_LIGHT_URL = Script.resolvePath("assets/images/icon-spot-light.svg");
-var ZONE_URL = Script.resourcesPath() + "icons/create-icons/23-zone-01.svg";
+var ZONE_URL = Script.resolvePath("assets/images/icon-zone.svg");
 
 var entityIconOverlayManager = new EntityIconOverlayManager(['Light', 'ParticleEffect', 'Zone'], function(entityID) {
     var properties = Entities.getEntityProperties(entityID, ['type', 'isSpotlight']);
@@ -119,7 +119,7 @@ var entityListTool = new EntityListTool(shouldUseEditTabletApp);
 selectionManager.addEventListener(function () {
     selectionDisplay.updateHandles();
     entityIconOverlayManager.updatePositions();
-    entityShapeVisualizer.updateSelection(selectionManager.selections);
+    entityShapeVisualizer.setEntities(selectionManager.selections);
 });
 
 var DEGREES_TO_RADIANS = Math.PI / 180.0;

scripts/system/modules/entityShapeVisualizer.js

@@ -16,6 +16,10 @@ var SHAPETYPE_TO_SHAPE = {
     "cylinder-y": "Cylinder",
 };
 
+var REQUESTED_ENTITY_SHAPE_PROPERTIES = [
+    'type', 'shapeType', 'compoundShapeURL', 'localDimensions'
+];
+
 function getEntityShapePropertiesForType(properties) {
     switch (properties.type) {
         case "Zone":
@@ -51,27 +55,80 @@ function getEntityShapePropertiesForType(properties) {
     };
 }
 
-function getStringifiedEntityShapePropertiesForType(properties) {
+function deepEqual(a, b) {
-    return JSON.stringify(getEntityShapePropertiesForType(properties));
+    if (a === b) {
+        return true;
+    }
+
+    if (typeof(a) !== "object" || typeof(b) !== "object") {
+        return false;
+    }
+
+    if (Object.keys(a).length !== Object.keys(b).length) {
+        return false;
+    }
+
+    for (var property in a) {
+        if (!a.hasOwnProperty(property)) {
+            continue;
+        }
+        if (!b.hasOwnProperty(property)) {
+            return false;
+        }
+        if (!deepEqual(a[property], b[property])) {
+            return false;
+        }
+    }
+    return true;
 }
 
-var REQUESTED_ENTITY_SHAPE_PROPERTIES = [
+/**
-    'type', 'shapeType', 'compoundShapeURL', 'localDimensions'
+ * Returns an array of property names which are different in comparison.
-];
+ * @param propertiesA
+ * @param propertiesB
+ * @returns {Array} - array of different property names
+ */
+function compareEntityProperties(propertiesA, propertiesB) {
+    var differentProperties = [],
+        property;
+
+    for (property in propertiesA) {
+        if (!propertiesA.hasOwnProperty(property)) {
+            continue;
+        }
+        if (!propertiesB.hasOwnProperty(property) || !deepEqual(propertiesA[property], propertiesB[property])) {
+            differentProperties.push(property);
+        }
+    }
+    for (property in propertiesB) {
+        if (!propertiesB.hasOwnProperty(property)) {
+            continue;
+        }
+        if (!propertiesA.hasOwnProperty(property)) {
+            differentProperties.push(property);
+        }
+    }
+
+    return differentProperties;
+}
+
+function deepCopy(v) {
+    return JSON.parse(JSON.stringify(v));
+}
 
 function EntityShape(entityID) {
     this.entityID = entityID;
-    var properties = Entities.getEntityProperties(entityID, REQUESTED_ENTITY_SHAPE_PROPERTIES);
+    var propertiesForType = getEntityShapePropertiesForType(Entities.getEntityProperties(entityID, REQUESTED_ENTITY_SHAPE_PROPERTIES));
 
-    this.previousPropertiesForTypeStringified = getStringifiedEntityShapePropertiesForType(properties);
+    this.previousPropertiesForType = propertiesForType;
 
-    this.initialize(properties, this.previousPropertiesForTypeStringified);
+    this.initialize(propertiesForType);
 }
 
 EntityShape.prototype = {
-    initialize: function(properties, propertiesForTypeStringified) {
+    initialize: function(properties) {
         // Create new instance of JS object:
-        var overlayProperties = JSON.parse(propertiesForTypeStringified);
+        var overlayProperties = deepCopy(properties);
 
         overlayProperties.localPosition = Vec3.ZERO;
         overlayProperties.localRotation = Quat.IDENTITY;
@@ -88,29 +145,23 @@ EntityShape.prototype = {
             parentID: this.entity,
             priority: 1,
             materialMappingMode: PROJECTED_MATERIALS ? "projected" : "uv",
-            materialURL: "materialData",
+            materialURL: Script.resolvePath("../assets/images/materials/GridPattern.json"),
-            materialData: JSON.stringify({
-                materialVersion: 1,
-                materials: {
-                    albedo: [0.0, 0.0, 7.0],
-                    unlit: true,
-                    opacity: 0.4,
-                    albedoMap: Script.resolvePath("../assets/images/materials/boxgridpatterncreatezonew.png")
-                }
-            }),
         }, "local");
     },
     update: function() {
-        var properties = Entities.getEntityProperties(this.entityID, REQUESTED_ENTITY_SHAPE_PROPERTIES);
+        var propertiesForType = getEntityShapePropertiesForType(Entities.getEntityProperties(this.entityID, REQUESTED_ENTITY_SHAPE_PROPERTIES));
-        var propertiesForTypeStringified = getStringifiedEntityShapePropertiesForType(properties);
+
-        if (propertiesForTypeStringified !== this.previousPropertiesForTypeStringified) {
+        var difference = compareEntityProperties(propertiesForType, this.previousPropertiesForType);
-            this.previousPropertiesForTypeStringified = propertiesForTypeStringified;
+
-            this.clear();
+        if (deepEqual(difference, ['localDimensions'])) {
-            this.initialize(properties, propertiesForTypeStringified);
+            this.previousPropertiesForType = propertiesForType;
-        } else {
             Entities.editEntity(this.entity, {
-                localDimensions: JSON.parse(propertiesForTypeStringified).localDimensions,
+                localDimensions: propertiesForType.localDimensions,
             });
+        } else if (difference.length > 0) {
+            this.previousPropertiesForType = propertiesForType;
+            this.clear();
+            this.initialize(propertiesForType);
         }
     },
     clear: function() {
@@ -128,7 +179,7 @@ function EntityShapeVisualizer(visualizedTypes) {
 }
 
 EntityShapeVisualizer.prototype = {
-    addEntity: function(entityID, properties) {
+    addEntity: function(entityID) {
         if (this.entityShapes[entityID]) {
             return;
         }
@@ -154,8 +205,8 @@ EntityShapeVisualizer.prototype = {
         }, this);
         this.entityShapes = {};
     },
-    updateSelection: function(selection) {
+    setEntities: function(entities) {
-        var qualifiedSelection = selection.filter(function(entityID) {
+        var qualifiedEntities = entities.filter(function(entityID) {
             if (this.acceptedEntities.indexOf(entityID) !== -1) {
                 return true;
             }
@@ -175,7 +226,7 @@ EntityShapeVisualizer.prototype = {
         var updateEntries = [];
 
         var currentEntries = Object.keys(this.entityShapes);
-        qualifiedSelection.forEach(function(entityID) {
+        qualifiedEntities.forEach(function(entityID) {
             if (currentEntries.indexOf(entityID) !== -1) {
                 updateEntries.push(entityID);
             } else {