@infinite-canvas-tutorial/webcomponents/esm/spectrum/context-bar.js

WebComponents UI implementation

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { html, css, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { when } from 'lit/directives/when.js';
import { consume } from '@lit/context';
import { Canvas, ComputedBounds, TransformableStatus, isDataUrl, } from '@infinite-canvas-tutorial/ecs';
import { apiContext, appStateContext } from '../context';
import { TOP_NAVBAR_HEIGHT } from './infinite-canvas';
import { Event } from '../event';
const CONTEXT_BAR_MARGIN_BOTTOM = 16;
let ContextBar = class ContextBar extends LitElement {
    constructor() {
        super(...arguments);
        this.binded = false;
        this.handleTransformableStatusChanged = (event) => {
            const { status } = event.detail;
            if (status === TransformableStatus.MOVING ||
                status === TransformableStatus.RESIZING ||
                status === TransformableStatus.ROTATING) {
                this.style.display = 'none';
            }
            else {
                this.style.display = 'block';
            }
        };
    }
    calculatePosition(node) {
        if (!node) {
            return [0, 0];
        }
        const { width, height } = this.api.getCanvas().read(Canvas);
        const { topbarVisible } = this.appState;
        const entity = this.api.getEntity(node);
        if (!entity.has(ComputedBounds)) {
            return [0, 0];
        }
        const { renderWorldBounds } = entity.read(ComputedBounds);
        const { minX, minY, maxX, maxY } = renderWorldBounds;
        const tl = this.api.canvas2Viewport({ x: minX, y: minY });
        const br = this.api.canvas2Viewport({ x: maxX, y: maxY });
        return [
            Math.min(width, Math.max(0, tl.x + (br.x - tl.x) / 2)),
            Math.min(height, Math.max(0, tl.y +
                (br.y - tl.y) +
                (topbarVisible ? TOP_NAVBAR_HEIGHT : 0) +
                CONTEXT_BAR_MARGIN_BOTTOM)),
        ];
    }
    disconnectedCallback() {
        var _a, _b;
        super.disconnectedCallback();
        (_b = (_a = this.api) === null || _a === void 0 ? void 0 : _a.element) === null || _b === void 0 ? void 0 : _b.removeEventListener(Event.TRANSFORMABLE_STATUS_CHANGED, this.handleTransformableStatusChanged);
    }
    render() {
        var _a;
        // FIXME: wait for the element to be ready.
        if (((_a = this.api) === null || _a === void 0 ? void 0 : _a.element) && !this.binded) {
            this.api.element.addEventListener(Event.TRANSFORMABLE_STATUS_CHANGED, this.handleTransformableStatusChanged);
        }
        const { layersSelected, layersCropping, contextBarVisible } = this.appState;
        return html `${when(contextBarVisible, () => {
            var _a, _b, _c;
            if (layersSelected.length === 1 && layersCropping.length === 0) {
                const node = layersSelected[0] && this.api.getNodeById(layersSelected[0]);
                if (!node) {
                    return html ``;
                }
                const isImage = node.type === 'rect' &&
                    (((_a = node.fill) === null || _a === void 0 ? void 0 : _a.endsWith('.jpg')) ||
                        ((_b = node.fill) === null || _b === void 0 ? void 0 : _b.endsWith('.jpeg')) ||
                        ((_c = node.fill) === null || _c === void 0 ? void 0 : _c.endsWith('.png')) ||
                        isDataUrl(node.fill));
                const isHTML = node.type === 'html';
                const isEmbed = node.type === 'embed';
                if (isHTML || isEmbed) {
                    return html ``;
                }
                const isEditing = node.isEditing;
                const [left, top] = this.calculatePosition(node);
                return html `<div
          class="wrapper"
          style="left: ${left}px; top: ${top}px;"
        >
          <div class="bar">
            ${when(isImage && isEditing, () => html `<ic-spectrum-context-image-edit-bar .node=${node} />`, () => html `<ic-spectrum-context-common-bar .node=${node} />`)}
          </div>
        </div>`;
            }
            else {
                // Image edit bar
                // if (layersSelected.some(id => this.api.getNodeById(id)?.type === 'image')) {
                return html ``;
            }
        })}`;
    }
};
ContextBar.styles = css `
    .wrapper {
      position: absolute;
      top: 0;
      left: 0;
    }

    .bar {
      transform: translateX(-50%);
      position: absolute;
      left: -50%;

      display: flex;
      justify-content: center;

      background: var(--spectrum-gray-100);
      border-radius: var(--spectrum-corner-radius-200);

      padding: var(--spectrum-global-dimension-size-100);
      margin: 4px;

      filter: drop-shadow(
        var(--spectrum-drop-shadow-color) 0px var(--spectrum-drop-shadow-y)
          var(--spectrum-drop-shadow-blur)
      );
    }
  `;
__decorate([
    consume({ context: appStateContext, subscribe: true })
], ContextBar.prototype, "appState", void 0);
__decorate([
    consume({ context: apiContext, subscribe: true })
], ContextBar.prototype, "api", void 0);
ContextBar = __decorate([
    customElement('ic-spectrum-context-bar')
], ContextBar);
export { ContextBar };
//# sourceMappingURL=context-bar.js.map