activator-oce-exporter/test/activator/shared/src/fusion/slide/shape/index.js

Extract Activator binder and convert it to valid OCE mono pacakge

import { html } from '@polymer/lit-element';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { FusionBase } from '../../base';
import { applyMixins, SlideComponent, AspectRatioSwitcher } from '../../mixins';
import { shapes } from '../../../config.json';


const defaultShape = 'circle';

class FusionShape extends applyMixins(FusionBase, [SlideComponent, AspectRatioSwitcher]) {
  static get options() {
    return {
      ...super.options,
      componentName: 'fusion-shape',
      componentType: 'static',
      componentCategory: 'UI',
      componentUIName: 'Shape',
      componentScope: 'standard',
      componentDescription: 'Component for showing shapes',
      componentDomain: 'slide',
      isTextEdit: false,
      isRootNested: true,
      nestedTypes: [],
      nestedComponents: [],
      defaultTemplate: '',
      resizable: 'all',
      draggable: 'xy',
      rotatable: true,
      sortable: false,
      lockAspectRatio: false,
    };
  }

  static get properties() {
    const { top, left, ...other } = super.properties;
    return {
      shape: {
        type: String,
        fieldType: 'Modal',
        assetType: 'Shape',
        value: defaultShape,
        prop: true,
      },
      top,
      left,
      width: {
        type: String,
        fieldType: 'Number',
        value: '100px',
        min: 1,
      },
      height: {
        type: String,
        fieldType: 'Number',
        value: '100px',
        min: 1,
      },
      'background-color': {
        type: String,
        fieldType: 'ColorPicker',
        value: 'rgba(177, 192, 201, 1)',
      },
      ...other,
    };
  }

  static getStyle() {
    const styleRoot = super.getStyle();
    return `
      ${styleRoot}
      :host {
        display: block;
      }
      :host svg {
        position:absolute;
        top: 0;
        left: 0;
      }`;
  }

  isShapeChanged(changedProps) {
    return this.shape && changedProps.has('shape');
  }

  shapeChangeHandler(changedProps) {
    if (this.isShapeChanged(changedProps) && shapes[this.shape].isFit) {
      const viewBoxParams = shapes[this.shape].viewBox.split(' ');
      const [, , boxWidth, boxHeight] = viewBoxParams;
      const ratio = boxWidth / boxHeight;
      this.setAttribute('ratio', ratio);
    }
  }

  update(changedProps) {
    this.shapeChangeHandler(changedProps);
    super.update(changedProps);
  }

  updated(changedProps) {
    if (this.isShapeChanged(changedProps)) {
      this.requestUpdate('width');
    }
  }

  static getPathTransform(type) {
    const htmlEl = this.getPathElem(type);
    const transform = htmlEl.querySelector('path').getAttribute('transform');
    return transform || '';
  }

  static getPathElem(type) {
    const { template } = shapes[type];
    const htmlEl = document.createElement('div');
    htmlEl.innerHTML = template;
    return htmlEl;
  }

  static getPathData(type) {
    const htmlEl = this.getPathElem(type);
    return htmlEl.querySelector('path').getAttribute('d');
  }

  static getViewBox(type) {
    const { viewBox } = shapes[type];
    return viewBox;
  }

  getTemplate() {
    const shape = this.shape || defaultShape;
    return html`
      <svg 
        preserveAspectRatio="${ifDefined(shapes[shape].isFit ? undefined : 'none')}" 
        xmlns='http://www.w3.org/2000/svg' 
        width=${this.width} 
        height=${this.height} 
        viewBox=${this.constructor.getViewBox(shape)}>
        <path 
          fill=${this['background-color']} 
          fill-rule='evenodd' 
          d=${this.constructor.getPathData(shape)} 
          transform=${this.constructor.getPathTransform(shape)}>
      </svg>`;
  }

  render() {
    super.render();
    return html`
      <style>
        ${FusionShape.getStyle()}
      </style>
      ${this.getTemplate()}
      <slot name='mo-system'></slot>
    `;
  }
}

export { FusionShape };