Add logic for adding AOI objects to canvas screens

Author: FelixHenninger

packages/builder/src/components/ComponentOptions/components/Content/Canvas/components/fabric/index.js

@@ -68,6 +68,21 @@ fabric.Image.fromObject = function(_object, callback) {
   })
 }
 
+// Add AOI object type ---------------------------------------------------------
+
+// (apparently fabric requires camelcased constructors)
+fabric.Aoi = fabric.util.createClass(fabric.Rect, {
+  type: 'aoi',
+  initialize: function(options={}) {
+    options.fill = 'rgba(0, 0, 0, 0.2)'
+    this.callSuper('initialize', options)
+  },
+})
+
+fabric.Aoi.fromObject = function(object, callback, forceAsync) {
+  return fabric.Object._fromObject('Aoi', object, callback, forceAsync);
+}
+
 // Canvas component ------------------------------------------------------------
 
 const handlePadding = 6
@@ -354,6 +369,11 @@ export default class FabricCanvas extends Component {
             ...defaults,
             ...options,
           })
+        case 'aoi':
+          return new fabric.Aoi({
+            width: 50, height: 50,
+            ...defaults,
+          })
         default:
           return undefined
       }

packages/builder/src/components/ComponentOptions/components/Content/Canvas/components/form/AddDropDown.js

@@ -80,6 +80,13 @@ const AddDropDown = (
             Image
           </DropdownItem>
           <DropdownItem divider />
+          <DropdownItem header>Interaction</DropdownItem>
+          <DropdownItem
+            onClick={ () => addHandler('aoi') }
+          >
+            AOI
+          </DropdownItem>
+          <DropdownItem divider />
           <DropdownItem header>From selected</DropdownItem>
           <DropdownItem
             onClick={ cloneHandler }

packages/builder/src/components/ComponentOptions/components/Content/Canvas/components/form/Style.js

@@ -17,7 +17,7 @@ export default ({ selection, changeHandler }) =>
       model=".strokeWidth"
       component={ StrokeWidthDropdown }
       controlProps={{
-        disabled: ['image', undefined].includes(selection.type),
+        disabled: ['image', 'aoi', undefined].includes(selection.type),
       }}
     />
     <Control
@@ -26,7 +26,7 @@ export default ({ selection, changeHandler }) =>
       controlProps={{
         icon: 'circle',
         iconFallbackWeight: 'r',
-        disabled: ['image', undefined].includes(selection.type),
+        disabled: ['image', 'aoi', undefined].includes(selection.type),
       }}
     />
     <Control
@@ -35,7 +35,7 @@ export default ({ selection, changeHandler }) =>
       controlProps={{
         icon: 'circle',
         iconWeight: 's',
-        disabled: ['line', 'image', undefined].includes(selection.type),
+        disabled: ['line', 'image', 'aoi', undefined].includes(selection.type),
       }}
     />
   </ButtonGroup>