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

Extract Activator binder and convert it to valid OCE mono pacakge

import { html } from '@polymer/lit-element';
import { FusionBase } from '../../base';
import {
  applyMixins, BorderedElement, SlideComponent, ElementsAligner,
} from '../../mixins';
import { getValueObject, intersectMap } from '../../utils';

class FusionGroup extends applyMixins(FusionBase, [SlideComponent, BorderedElement, ElementsAligner]) {
  static get properties() {
    const { top, left, ...borderedProps } = super.properties;
    return {
      top,
      left,
      width: {
        type: String,
        fieldType: 'Number',
        value: '400px',
      },
      height: {
        type: String,
        fieldType: 'Number',
        value: '400px',
      },
      'background-color': {
        type: String,
        fieldType: 'ColorPicker',
        value: 'rgba(255, 255, 255, 0)',
      },
      ...borderedProps,
    };
  }

  static get options() {
    return {
      componentName: 'fusion-group',
      componentUIName: 'Group Container',
      componentScope: 'standard',
      componentType: 'static',
      componentCategory: 'UI',
      componentDescription: 'Group components and other elements in order to move and copy/paste together',
      componentDomain: 'slide',
      isRootNested: true,
      isTextEdit: false,
      nestedTypes: ['*'],
      nestedComponents: ['*'],
      defaultTemplate: '',
      resizable: 'all',
      draggable: 'xy',
      rotatable: true,
      sortable: false,
      ...super.options,
    };
  }

  update(changedProps) {
    super.update(changedProps);
    if (this.isRendered) {
      this.borderChanges(changedProps);
    }
  }

  borderChanges(props) {
    if (FusionGroup.isBorderChanged(props)) {
      this.constructor.sizeTriggers.forEach(prop => this.setSize(prop));
    }
  }

  checkSizes(changedProps) {
    const properties = intersectMap(changedProps, this.constructor.sizeTriggers);
    Array.from(properties.keys()).forEach(prop => this.setSize(prop));
  }

  setSize(prop) {
    const { num } = getValueObject(this[prop]);
    const size = this.getSizeByBorder(num);
    this.setElementProp(prop, size);
    this.setAttribute(prop, size);
  }

  static getStyle() {
    const styleRoot = super.getStyle();
    return `
      ${styleRoot}
      :host {
        display: block;
      }
      .fusion-group {
        width: 100%;
        height: 100%;
        background-color: var(--background-color);
        border: var(--border-width) var(--border-style) var(--border-color);
        border-radius: var(--border-radius);
        box-sizing: border-box;
      }
    `;
  }

  render() {
    super.render();
    return html`
      <style>
      ${FusionGroup.getStyle()}
      </style>
      <div class='fusion-group'>
        <slot></slot>
       ${FusionGroup.getSystemSlotTemplate()}
      </div>
    `;
  }
}

export { FusionGroup };