Canvas entity properties and broken Create app support

libraries/entities/src/CanvasEntityItem.cpp.in

@@ -33,7 +33,7 @@ void CanvasEntityItem::debugDump() const {
     qCDebug(entities) << "    editedAgo:" << debugTime(getLastEdited(), usecTimestampNow());
     qCDebug(entities) << "    pointer:" << this;
 
-    @Base_ENTITY_DEBUG@
+@Base_ENTITY_DEBUG@
 
 }
 
@@ -47,7 +47,7 @@ void CanvasEntityItem::appendSubclassData(OctreePacketData* packetData, EncodeBi
 
     bool successPropertyFits = true;
 
-    @Canvas_ENTITY_APPEND@
+@Canvas_ENTITY_APPEND@
 
 }
 
@@ -58,7 +58,7 @@ int CanvasEntityItem::readEntitySubclassDataFromBuffer(const unsigned char* data
     int bytesRead = 0;
     const unsigned char* dataAt = data;
 
-    @Canvas_ENTITY_READ@
+@Canvas_ENTITY_READ@
 
     return bytesRead;
 }
@@ -66,7 +66,7 @@ int CanvasEntityItem::readEntitySubclassDataFromBuffer(const unsigned char* data
 EntityPropertyFlags CanvasEntityItem::getEntityProperties(EncodeBitstreamParams& params) const {
     EntityPropertyFlags requestedProperties = EntityItem::getEntityProperties(params);
 
-    @Canvas_REQUESTED_PROPS@
+@Canvas_REQUESTED_PROPS@
 
     return requestedProperties;
 }
@@ -74,7 +74,7 @@ EntityPropertyFlags CanvasEntityItem::getEntityProperties(EncodeBitstreamParams&
 bool CanvasEntityItem::setSubClassProperties(const EntityItemProperties& properties) {
     bool somethingChanged = false;
 
-    @Canvas_ENTITY_SET_FROM@
+@Canvas_ENTITY_SET_FROM@
 
     return somethingChanged;
 }
@@ -82,7 +82,7 @@ bool CanvasEntityItem::setSubClassProperties(const EntityItemProperties& propert
 EntityItemProperties CanvasEntityItem::getProperties(const EntityPropertyFlags& desiredProperties, bool allowEmptyDesiredProperties) const {
     EntityItemProperties properties = EntityItem::getProperties(desiredProperties, allowEmptyDesiredProperties); // get the properties from our base class
 
-    @Canvas_ENTITY_COPY_TO@
+@Canvas_ENTITY_COPY_TO@
 
     return properties;
 }

libraries/entities/src/CanvasEntityItem.h.in

@@ -24,15 +24,9 @@ public:
     ALLOW_INSTANTIATION // This class can be instantiated
     ENTITY_PROPERTY_SUBCLASS_METHODS
 
-    int getWidth() { return width; }
-    int getHeight() { return height; }
-    uint32_t getClearColor() { return clearColor; }
-
 protected:
 @Canvas_ENTITY_PROPS@
 
-    int width, height;
-    uint32_t clearColor;
 };
 
 #endif // hifi_CanvasEntityItem_h

libraries/entities/src/EntityItemProperties.txt

@@ -267,3 +267,7 @@ enum:SOUND_LOOP prop:loop type:bool default:true,
 enum:SOUND_POSITIONAL prop:positional type:bool default:true,
 enum:SOUND_LOCAL_ONLY prop:localOnly type:bool default:false,
 Canvas
+enum:CANVAS_WIDTH prop:width type:uint16_t default:300 basicProp,
+enum:CANVAS_HEIGHT prop:height type:uint16_t default:150 basicProp,
+enum:CANVAS_BG_COLOR prop:bgColor type:u8vec3Color default:ENTITY_ITEM_DEFAULT_COLOR basicProp,
+enum:CANVAS_BG_ALPHA prop:bgAlpha type:float default:1.0f min:0.0f max:1.0f basicProp,

scripts/system/create/edit.js

@@ -96,8 +96,9 @@
     var ZONE_URL = Script.resolvePath("assets/images/icon-zone.svg");
     var MATERIAL_URL = Script.resolvePath("assets/images/icon-material.svg");
     var SOUND_URL = Script.resolvePath("assets/images/icon-sound.svg");
+    var CANVAS_URL = Script.resolvePath("assets/images/icon-sound.svg");
 
-    var entityIconOverlayManager = new EntityIconOverlayManager(["Light", "ParticleEffect", "ProceduralParticleEffect", "Zone", "Material", "Sound"], function(entityID) {
+    var entityIconOverlayManager = new EntityIconOverlayManager(["Light", "ParticleEffect", "ProceduralParticleEffect", "Zone", "Material", "Sound", "Canvas"], function(entityID) {
         var properties = Entities.getEntityProperties(entityID, ["type", "isSpotlight", "parentID", "name"]);
         if (properties.type === "Light") {
             return {
@@ -113,6 +114,8 @@
             }
         } else if (properties.type === "Sound") {
             return { imageURL: SOUND_URL, rotation: Quat.fromPitchYawRollDegrees(0, 0, 0) };
+        } else if (properties.type === "Canvas") {
+            return { imageURL: CANVAS_URL, rotation: Quat.fromPitchYawRollDegrees(0, 0, 0) };
         } else {
             return { imageURL: PARTICLE_SYSTEM_URL };
         }
@@ -541,6 +544,12 @@
             positional: true,
             localOnly: false
         },
+        Canvas: {
+            width: 300,
+            height: 150,
+            bgColor: { red: 255, green: 255, blue: 255 },
+            bgAlpha: 1,
+        },
     };
 
     var toolBar = (function () {
@@ -2127,7 +2136,7 @@
                     var entityParentIDs = [];
 
                     var propType = Entities.getEntityProperties(pastedEntityIDs[0], ["type"]).type;
-                    var NO_ADJUST_ENTITY_TYPES = ["Zone", "Light", "ParticleEffect", "ProceduralParticleEffect", "Sound"];
+                    var NO_ADJUST_ENTITY_TYPES = ["Zone", "Light", "ParticleEffect", "ProceduralParticleEffect", "Sound", "Canvas"];
                     if (NO_ADJUST_ENTITY_TYPES.indexOf(propType) === -1) {
                         var targetDirection;
                         if (Camera.mode === "entity" || Camera.mode === "independent") {

scripts/system/create/entityList/html/js/entityList.js

@@ -181,6 +181,7 @@ const FILTER_TYPES = [
     "Text",
     "Grid",
     "Sound",
+    "Canvas",
 ];
 
 const DOUBLE_CLICK_TIMEOUT = 300; // ms

scripts/system/create/entityProperties/html/js/entityProperties.js

@@ -1692,6 +1692,38 @@ const GROUPS = [
             }
         ]
     },
+    {
+        id: "canvas",
+        label: "CANVAS",
+        properties: [
+            {
+                label: "Width",
+                type: "number-draggable",
+                propertyID: "width",
+            },
+            {
+                label: "Height",
+                type: "number-draggable",
+                propertyID: "height",
+            },
+            {
+                label: "Background color",
+                type: "color",
+                propertyID: "bgColor",
+                propertyName: "bgColor", // actual entity property name
+            },
+            {
+                label: "Background alpha",
+                type: "number-draggable",
+                min: 0,
+                max: 1,
+                step: 0.01,
+                decimals: 2,
+                propertyID: "bgAlpha",
+                propertyName: "bgAlpha",
+            },
+        ]
+    },
     {
         id: "spatial",
         label: "SPATIAL",
@@ -2177,6 +2209,7 @@ const GROUPS_PER_TYPE = {
   PolyVox: [ 'base', 'polyvox', 'spatial', 'behavior', 'grabAndEquip', 'scripts', 'collision', 'physics' ],
   Grid: [ 'base', 'grid', 'spatial', 'behavior', 'grabAndEquip', 'scripts', 'physics' ],
   Sound: [ 'base', 'sound', 'spatial', 'behavior', 'grabAndEquip', 'scripts', 'physics' ],
+  Canvas: [ 'base', 'canvas', 'spatial', 'behavior', 'grabAndEquip', 'scripts', 'physics' ],
   Multiple: [ 'base', 'spatial', 'behavior', 'grabAndEquip', 'scripts', 'collision', 'physics' ],
 };
 

scripts/system/create/entitySelectionTool/entitySelectionTool.js

@@ -2255,7 +2255,7 @@ SelectionDisplay = (function() {
             Entities.editEntity(selectionBox, selectionBoxGeometry);
 
             // UPDATE ICON TRANSLATE HANDLE
-            if (SelectionManager.entityType === "ParticleEffect" || SelectionManager.entityType === "ProceduralParticleEffect" || SelectionManager.entityType === "Light" || SelectionManager.entityType === "Sound") {
+            if (SelectionManager.entityType === "ParticleEffect" || SelectionManager.entityType === "ProceduralParticleEffect" || SelectionManager.entityType === "Light" || SelectionManager.entityType === "Sound" || SelectionManager.entityType === "Canvas") {
                 var iconSelectionBoxGeometry = {
                     position: position,
                     rotation: rotation

scripts/system/html/js/includes.js

@@ -22,6 +22,7 @@ const ENTITY_TYPE_ICON = {
     Shape: "n",
     Sphere: "n",
     Sound: "G",
+    Canvas: "",
     Text: "l",
     Web: "q",
     Zone: "o",