@yoobic/yobi 8.1.0-39 → 8.1.0-40

package/dist/collection/components/form/form-hotzone-creator/form-hotzone-creator.js

@@ -0,0 +1,378 @@
+import { getCssColor, hexToRgbArray, intersectionObserve, translate, translateMulti } from '@shared/utils';
+import { Component, Element, Event, forceUpdate, h, Host, Prop } from '@stencil/core';
+import { 
+//  Editor factory method
+appendDefaultEditor, 
+// Default image reader and writer
+createDefaultImageReader, createDefaultImageWriter, 
+// User interface and plugin locale objects
+locale_en_gb, 
+// Because we use the annotate plugin we also need
+// to import the markup editor locale and the shape preprocessor
+markup_editor_locale_en_gb, 
+// Plugins we want to use
+plugin_annotate, plugin_annotate_locale_en_gb, 
+// Method used to register the plugins
+setPlugins } from '../image-cropper-dialog/pintura/pintura';
+// This registers the plugins with Pintura Image Editor
+setPlugins(plugin_annotate);
+export class YooFormHotzoneCreatorComponent {
+  constructor() {
+    this.value = {};
+  }
+  componentWillLoad() {
+    this.value.hotspotColor = this.value.hotspotColor || getCssColor('app-color');
+    this.hotspotColorRgb = hexToRgbArray(this.value.hotspotColor);
+    this.value.hotspots = this.value.hotspots || [];
+  }
+  componentDidLoad() {
+    this.value.image && this.initEditor();
+    this.observeVisibility();
+  }
+  disconnectedCallback() {
+    var _b;
+    this.removeIntersectionObserver();
+    (_b = this.editor) === null || _b === void 0 ? void 0 : _b.destroy();
+  }
+  observeVisibility() {
+    this.observer = intersectionObserve(this.host, () => {
+      // Unselect all shapes to prevent editor errors
+      this.selectShape(null);
+    }, {});
+  }
+  removeIntersectionObserver() {
+    if (this.observer) {
+      this.observer.unobserve(this.host);
+      this.observer.disconnect();
+      this.observer = undefined;
+    }
+  }
+  initEditor() {
+    var _b, _c, _d, _e, _f;
+    const locale = {
+      ...locale_en_gb,
+      ...plugin_annotate_locale_en_gb,
+      ...markup_editor_locale_en_gb
+    };
+    this.editor = appendDefaultEditor(this.outerContainer, {
+      src: this.value.image,
+      imageReader: createDefaultImageReader(),
+      imageWriter: createDefaultImageWriter({
+        targetSize: {
+          fit: 'contain',
+          upscale: true
+        }
+      }),
+      locale,
+      util: 'annotate',
+      enableToolbar: false,
+      enableUtils: false,
+      enableButtonClose: false,
+      enableButtonExport: false,
+      enableNavigateHistory: false,
+      // Disable shape controls
+      markupEditorShapeStyleControls: {},
+      annotateActiveTool: 'rectangle',
+      willRenderCanvas: (shapes, _state) => {
+        shapes.annotationShapes.map(s => {
+          s.backgroundColor = [...this.hotspotColorRgb, 0.4];
+          s.strokeColor = this.hotspotColorRgb;
+          s.strokeWidth = 1;
+          s.disableReorder = true;
+        });
+        return {
+          ...shapes
+        };
+      }
+    });
+    (_b = this.editor) === null || _b === void 0 ? void 0 : _b.on('load', (_res) => {
+      this.editorContainer.hidden = !this.value.image;
+      if (!this.value.hotspots) {
+        // Init default first hotzone
+        const newShape = this.createDefaultShape();
+        this.editor.imageAnnotation = [newShape];
+        const newHotspot = this.shapeToHotspot(newShape, null, null);
+        this.value.hotspots = [newHotspot];
+      }
+      else {
+        // Init existing shapes
+        this.value.hotspots.map(h => {
+          const newShape = this.hotspotToShape(h);
+          this.editor.imageAnnotation = [...this.editor.imageAnnotation, newShape];
+        });
+      }
+      this.updateDeletableHotspot();
+      this.onDataChanged();
+    });
+    (_c = this.editor) === null || _c === void 0 ? void 0 : _c.on('addshape', (shape) => {
+      const newHotspot = this.shapeToHotspot(shape, null, null);
+      this.value.hotspots = [...this.value.hotspots, newHotspot];
+      this.selectShape(this.editor.imageAnnotation.length - 1);
+      this.updateDeletableHotspot();
+      this.onDataChanged();
+    });
+    (_d = this.editor) === null || _d === void 0 ? void 0 : _d.on('updateshape', (shape) => {
+      const selectedHotspotIndex = this.value.hotspots.findIndex(h => h.id === shape.id);
+      this.value.hotspots[selectedHotspotIndex].percentRect = new DOMRect(parseFloat(shape.x + ''), parseFloat(shape.y + ''), parseFloat(shape.width + ''), parseFloat(shape.height + '')),
+        this.value.hotspots[selectedHotspotIndex].rotation = shape.rotation;
+      this.onDataChanged();
+    });
+    (_e = this.editor) === null || _e === void 0 ? void 0 : _e.on('removeshape', (shape) => {
+      const selectedHotspotIndex = this.value.hotspots.findIndex(h => h.id === shape.id);
+      this.value.hotspots.splice(selectedHotspotIndex, 1);
+      this.updateDeletableHotspot();
+      this.onDataChanged();
+    });
+    (_f = this.editor) === null || _f === void 0 ? void 0 : _f.on('selectshape', (_shape) => {
+      forceUpdate(this);
+    });
+  }
+  selectShape(index) {
+    var _b, _c;
+    (_c = (_b = this.editor) === null || _b === void 0 ? void 0 : _b.imageAnnotation) === null || _c === void 0 ? void 0 : _c.map((a, i) => {
+      if (i === index) {
+        a.isSelected = !a.isSelected;
+      }
+      else {
+        a.isSelected = false;
+      }
+      return a;
+    });
+    this.refreshShapes();
+    forceUpdate(this);
+  }
+  refreshShapes() {
+    var _b;
+    if (!((_b = this.editor) === null || _b === void 0 ? void 0 : _b.imageAnnotation))
+      return;
+    this.editor.imageAnnotation = [...this.editor.imageAnnotation];
+  }
+  hotspotToShape(hotspot) {
+    var _b;
+    return {
+      id: hotspot.id,
+      x: hotspot.percentRect.x + '%',
+      y: hotspot.percentRect.y + '%',
+      width: hotspot.percentRect.width + '%',
+      height: hotspot.percentRect.height + '%',
+      rotation: (_b = hotspot.rotation) !== null && _b !== void 0 ? _b : 0
+    };
+  }
+  shapeToHotspot(shape, image, description) {
+    var _b;
+    return {
+      id: shape.id,
+      percentRect: new DOMRect(parseFloat(shape.x + ''), parseFloat(shape.y + ''), parseFloat(shape.width + ''), parseFloat(shape.height + '')),
+      rotation: (_b = shape.rotation) !== null && _b !== void 0 ? _b : 0,
+      image: image,
+      description: description
+    };
+  }
+  onDataChanged(event) {
+    forceUpdate(this);
+    if (event)
+      event.stopPropagation();
+    this.inputChanged.emit(this.value);
+  }
+  onBgImageUpdated(ev) {
+    this.value.image = ev.detail;
+    this.editorContainer.hidden = !this.value.image;
+    this.value.hotspots = null;
+    this.initEditor();
+    this.onDataChanged(ev);
+  }
+  onHotspotImageUpdated(ev, index) {
+    this.value.hotspots[index].image = ev.detail;
+    this.onDataChanged(ev);
+  }
+  onHotspotDescriptionUpdated(ev, index) {
+    this.value.hotspots[index].description = ev.detail;
+    this.onDataChanged(ev);
+  }
+  onAddHotspotClicked() {
+    const newShape = this.createDefaultShape();
+    newShape.disableReorder = true;
+    this.editor.imageAnnotation = [...this.editor.imageAnnotation, newShape];
+    const newHotspot = this.shapeToHotspot(newShape, null, null);
+    this.value.hotspots = [...this.value.hotspots, newHotspot];
+    this.selectShape(this.editor.imageAnnotation.length - 1);
+    this.updateDeletableHotspot();
+    this.onDataChanged();
+  }
+  createDefaultShape() {
+    return {
+      x: '30%',
+      y: '30%',
+      width: '40%',
+      height: '40%'
+    };
+  }
+  onDeleteHotspotClicked(index) {
+    this.value.hotspots.splice(index, 1);
+    this.editor.imageAnnotation[index].isSelected = false;
+    this.editor.imageAnnotation.splice(index, 1);
+    this.updateDeletableHotspot();
+    this.onDataChanged();
+  }
+  updateDeletableHotspot() {
+    var _b;
+    const isLastHotspotRemaining = ((_b = this.value.hotspots) === null || _b === void 0 ? void 0 : _b.length) <= 1;
+    this.editor.imageAnnotation.map(a => a.disableRemove = isLastHotspotRemaining);
+  }
+  updateColorPicker(ev) {
+    const color = ev.detail.substring(0, 7); // remove alpha
+    this.value.hotspotColor = color;
+    this.hotspotColorRgb = hexToRgbArray(color);
+    this.onDataChanged(ev);
+    this.refreshShapes();
+  }
+  renderBgImagePicker() {
+    var _b;
+    return (h("div", { class: "image-picker-container" },
+      h("h2", { class: "title" }, translate('IMAGE')),
+      h("yoo-form-capture", { required: true, crop: "custom", allowLibrary: true, allowUnsplash: true, value: (_b = this.value.image) !== null && _b !== void 0 ? _b : null, onInputChanged: (ev) => this.onBgImageUpdated(ev) })));
+  }
+  renderColorPicker() {
+    return (h("div", { class: "color-picker-container" },
+      h("h2", { class: "title" }, translate('HOTSPOTCOLOUR')),
+      h("yoo-form-color-field", { value: this.value.hotspotColor, allowOther: true, rteColors: true, onInputChanged: (ev) => this.updateColorPicker(ev) })));
+  }
+  renderPreview() {
+    return (h("div", { ref: (el) => (this.editorContainer = el), hidden: true },
+      h("h2", { class: "title" }, translate('PREVIEW')),
+      h("div", { class: "preview-container", ref: (el) => (this.outerContainer = el) }),
+      this.renderHotspotEditor()));
+  }
+  renderEditorHeader() {
+    return h("div", { class: "editor-header" },
+      h("yoo-button", { color: "app-color", class: "add-filter", onClick: () => this.onAddHotspotClicked() },
+        h("yoo-icon", { name: "circle-plus", color: "light", slot: "start", size: "small" }),
+        translate('ADDHOTSPOT')),
+      h("yoo-info-text", { icon: "info", text: translate('CLICKONAHOTSPOTTOEDIT') }));
+  }
+  renderHotspotEditor() {
+    var _b, _c;
+    const isLastHotspotRemaining = ((_b = this.value.hotspots) === null || _b === void 0 ? void 0 : _b.length) <= 1;
+    return ([
+      this.renderEditorHeader(),
+      (_c = this.value.hotspots) === null || _c === void 0 ? void 0 : _c.map((_a, i) => {
+        var _b, _c;
+        return [
+          h("yoo-collapsible", { class: "form", collapsed: !((_c = (_b = this.editor) === null || _b === void 0 ? void 0 : _b.imageAnnotation[i]) === null || _c === void 0 ? void 0 : _c.isSelected), onContentShown: () => this.selectShape(i), header: translate('HOTSPOT') + ' ' + (i + 1), isDeletable: isLastHotspotRemaining ? false : true, onDeleteClicked: () => this.onDeleteHotspotClicked(i) },
+            h("div", { class: "collapsible-container" },
+              h("div", { class: "image-container" },
+                h("h2", { class: "title" }, translate('IMAGE')),
+                h("yoo-form-capture", { required: true, allowLibrary: true, allowUnsplash: true, value: this.value.hotspots[i].image, onInputChanged: (ev) => { this.onHotspotImageUpdated(ev, i); } })),
+              h("div", { class: "description-container" },
+                h("div", { class: "description-header" },
+                  h("h2", { class: "title" },
+                    translate('DESCRIPTION'),
+                    h("span", { class: "optional" }, translate('IMAGE'))),
+                  h("yoo-tooltip", { content: translateMulti('HELPERIMAGEMAPDESCRIPTION') },
+                    h("yoo-icon", { name: "help", size: "small", color: "stable-alt" }))),
+                h("yoo-form-text-area", { value: this.value.hotspots[i].description, onInputChanged: (ev) => { this.onHotspotDescriptionUpdated(ev, i); }, onTranslationValueUpdated: (ev) => {
+                    ev.stopImmediatePropagation();
+                    this.translationValueUpdated.emit(ev.detail);
+                  }, translations: this.translations })))),
+          this.value.hotspots[i + 1] && h("div", { class: "divider" })
+        ];
+      })
+    ]);
+  }
+  render() {
+    return (this.value &&
+      h(Host, null,
+        h("div", { class: "container" },
+          this.renderBgImagePicker(),
+          this.renderColorPicker()),
+        !this.disconnected && this.renderPreview()));
+  }
+  static get is() { return "yoo-form-hotzone-creator"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["form-hotzone-creator.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["form-hotzone-creator.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "IHotzoneValue",
+        "resolved": "IHotzoneValue",
+        "references": {
+          "IHotzoneValue": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "{}"
+    },
+    "translations": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "ITranslation[]",
+        "resolved": "ITranslation[]",
+        "references": {
+          "ITranslation": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get events() { return [{
+      "method": "inputChanged",
+      "name": "inputChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "IHotzoneValue",
+        "resolved": "IHotzoneValue",
+        "references": {
+          "IHotzoneValue": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      }
+    }, {
+      "method": "translationValueUpdated",
+      "name": "translationValueUpdated",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{ key: string, value: string }",
+        "resolved": "{ key: string; value: string; }",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+}