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

WebComponents UI implementation

"use strict";
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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ContextBar = void 0;
const lit_1 = require("lit");
const decorators_js_1 = require("lit/decorators.js");
const when_js_1 = require("lit/directives/when.js");
const context_1 = require("@lit/context");
const ecs_1 = require("@infinite-canvas-tutorial/ecs");
const context_2 = require("../context");
const infinite_canvas_1 = require("./infinite-canvas");
const event_1 = require("../event");
const CONTEXT_BAR_MARGIN_BOTTOM = 16;
let ContextBar = class ContextBar extends lit_1.LitElement {
    constructor() {
        super(...arguments);
        this.binded = false;
        this.handleTransformableStatusChanged = (event) => {
            const { status } = event.detail;
            if (status === ecs_1.TransformableStatus.MOVING ||
                status === ecs_1.TransformableStatus.RESIZING ||
                status === ecs_1.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(ecs_1.Canvas);
        const { topbarVisible } = this.appState;
        const entity = this.api.getEntity(node);
        if (!entity.has(ecs_1.ComputedBounds)) {
            return [0, 0];
        }
        const { renderWorldBounds } = entity.read(ecs_1.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 ? infinite_canvas_1.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_1.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_1.Event.TRANSFORMABLE_STATUS_CHANGED, this.handleTransformableStatusChanged);
        }
        const { layersSelected, layersCropping, contextBarVisible } = this.appState;
        return (0, lit_1.html) `${(0, when_js_1.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 (0, lit_1.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')) ||
                        (0, ecs_1.isDataUrl)(node.fill));
                const isHTML = node.type === 'html';
                const isEmbed = node.type === 'embed';
                if (isHTML || isEmbed) {
                    return (0, lit_1.html) ``;
                }
                const isEditing = node.isEditing;
                const [left, top] = this.calculatePosition(node);
                return (0, lit_1.html) `<div
          class="wrapper"
          style="left: ${left}px; top: ${top}px;"
        >
          <div class="bar">
            ${(0, when_js_1.when)(isImage && isEditing, () => (0, lit_1.html) `<ic-spectrum-context-image-edit-bar .node=${node} />`, () => (0, lit_1.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 (0, lit_1.html) ``;
            }
        })}`;
    }
};
exports.ContextBar = ContextBar;
ContextBar.styles = (0, lit_1.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([
    (0, context_1.consume)({ context: context_2.appStateContext, subscribe: true })
], ContextBar.prototype, "appState", void 0);
__decorate([
    (0, context_1.consume)({ context: context_2.apiContext, subscribe: true })
], ContextBar.prototype, "api", void 0);
exports.ContextBar = ContextBar = __decorate([
    (0, decorators_js_1.customElement)('ic-spectrum-context-bar')
], ContextBar);
//# sourceMappingURL=context-bar.js.map