Allow to unlock components inside a locked one

src/canvas/view/FrameView.ts

@@ -423,6 +423,10 @@ export default class FrameView extends ModuleView<Frame, HTMLIFrameElement> {
         pointer-events: none;
       }
 
+      .${ppfx}pointer-init {
+        pointer-events: initial;
+      }
+
       .${ppfx}plh-image {
         background: #f5f5f5;
         border: none;

src/dom_components/model/Component.ts

@@ -94,7 +94,7 @@ export const keyUpdateInside = `${keyUpdate}-inside`;
  * @property {Boolean} [layerable=true] Set to `false` if you need to hide the component inside Layers. Default: `true`
  * @property {Boolean} [selectable=true] Allow component to be selected when clicked. Default: `true`
  * @property {Boolean} [hoverable=true] Shows a highlight outline when hovering on the element if `true`. Default: `true`
- * @property {Boolean} [locked=false] Disable the selection of the component and its children in the canvas. Default: `false`
+ * @property {Boolean} [locked] Disable the selection of the component and its children in the canvas. You can unlock a children by setting its locked property to `false`. Default: `undefined`
  * @property {Boolean} [void=false] This property is used by the HTML exporter as void elements don't have closing tags, eg. `<br/>`, `<hr/>`, etc. Default: `false`
  * @property {Object} [style={}] Component default style, eg. `{ width: '100px', height: '100px', 'background-color': 'red' }`
  * @property {String} [styles=''] Component related styles, eg. `.my-component-class { color: red }`
@@ -139,7 +139,6 @@ export default class Component extends StyleableModel<ComponentProperties> {
       layerable: true,
       selectable: true,
       hoverable: true,
-      locked: false,
       void: false,
       state: '', // Indicates if the component is in some CSS state like ':hover', ':active', etc.
       status: '', // State, eg. 'selected'
@@ -189,6 +188,10 @@ export default class Component extends StyleableModel<ComponentProperties> {
     return this.get('delegate');
   }
 
+  get locked() {
+    return this.get('locked');
+  }
+
   /**
    * Hook method, called once the model is created
    */

src/dom_components/view/ComponentView.ts

@@ -1,4 +1,4 @@
-import { each, isEmpty, keys, result } from 'underscore';
+import { each, isBoolean, isEmpty, keys, result } from 'underscore';
 import { CanvasSpotBuiltInTypes } from '../../canvas/model/CanvasSpot';
 import FrameView from '../../canvas/view/FrameView';
 import { DisableOptions, ExtractMethods, ObjectAny, View } from '../../common';
@@ -238,6 +238,7 @@ TComp> {
     const freezedCls = `${ppfx}freezed`;
     const hoveredCls = `${ppfx}hovered`;
     const noPointerCls = `${ppfx}no-pointer`;
+    const pointerInitCls = `${ppfx}pointer-init`;
     const toRemove = [selectedCls, selectedParentCls, freezedCls, hoveredCls, noPointerCls];
     const selCls = extHl && !opts.noExtHl ? '' : selectedCls;
     this.$el.removeClass(toRemove.join(' '));
@@ -265,7 +266,9 @@ TComp> {
         break;
     }
 
-    model.get('locked') && cls.push(noPointerCls);
+    if (isBoolean(model.locked)) {
+      cls.push(model.locked ? noPointerCls : pointerInitCls);
+    }
 
     const clsStr = cls.filter(Boolean).join(' ');
     clsStr && el.setAttribute('class', clsStr);