@infinite-canvas-tutorial/webcomponents/lib/spectrum/infinite-canvas.d.ts

WebComponents UI implementation

import { LitElement, TemplateResult } from 'lit';
import { ContextProvider } from '@lit/context';
import { SerializedNode, AppState } from '@infinite-canvas-tutorial/ecs';
import '@spectrum-web-components/theme/sp-theme.js';
import '@spectrum-web-components/theme/src/themes.js';
import '@spectrum-web-components/accordion/sp-accordion.js';
import '@spectrum-web-components/accordion/sp-accordion-item.js';
import '@spectrum-web-components/action-group/sp-action-group.js';
import '@spectrum-web-components/action-menu/sp-action-menu.js';
import '@spectrum-web-components/alert-banner/sp-alert-banner.js';
import '@spectrum-web-components/color-slider/sp-color-slider.js';
import '@spectrum-web-components/color-area/sp-color-area.js';
import '@spectrum-web-components/color-field/sp-color-field.js';
import '@spectrum-web-components/color-wheel/sp-color-wheel.js';
import '@spectrum-web-components/menu/sp-menu-item.js';
import '@spectrum-web-components/menu/sp-menu-divider.js';
import '@spectrum-web-components/menu/sp-menu-group.js';
import '@spectrum-web-components/number-field/sp-number-field.js';
import '@spectrum-web-components/slider/sp-slider.js';
import '@spectrum-web-components/swatch/sp-swatch.js';
import '@spectrum-web-components/swatch/sp-swatch-group.js';
import '@spectrum-web-components/switch/sp-switch.js';
import '@spectrum-web-components/overlay/sp-overlay.js';
import '@spectrum-web-components/progress-circle/sp-progress-circle.js';
import '@spectrum-web-components/textfield/sp-textfield.js';
import '@spectrum-web-components/thumbnail/sp-thumbnail.js';
import '@spectrum-web-components/tooltip/sp-tooltip.js';
import '@spectrum-web-components/picker/sp-picker.js';
import '@spectrum-web-components/popover/sp-popover.js';
import '@spectrum-web-components/overlay/overlay-trigger.js';
import '@spectrum-web-components/divider/sp-divider.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-add.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-add-to.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-delete.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-remove.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-text.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-visibility.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-visibility-off.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-properties.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-close.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-chevron-down.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-chevron-right.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-layers.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-properties.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-stroke-width.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-hand.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-select.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-shapes.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-undo.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-redo.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-lock-closed.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-lock-open.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-text-bold.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-text-italic.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-text-underline.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-text-align-left.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-text-align-center.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-text-align-right.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-layers-backward.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-layers-forward.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-layers-bring-to-front.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-layers-send-to-back.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-show-all-layers.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-copy.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-cut.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-paste.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-rectangle.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-ellipse.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-line.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-annotate-pen.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-code.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-brush.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-rect-select.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-image.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-arrow-up-right.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-send.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-find-and-replace.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-polygon-select.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-comment.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-image-auto-mode.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-vector-draw.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-region-select.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-crop.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-cancel.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-group.js';
export declare const TOP_NAVBAR_HEIGHT = 48;
export declare class InfiniteCanvas extends LitElement {
    static styles: import("lit").CSSResult;
    renderer: 'webgl' | 'webgpu';
    shaderCompilerPath: string;
    theme: 'dark' | 'light';
    appState: AppState;
    nodes: SerializedNode[];
    appStateProvider: ContextProvider<{
        __context__: AppState;
    }, this>;
    nodesProvider: ContextProvider<{
        __context__: SerializedNode[];
    }, this>;
    apiProvider: ContextProvider<{
        __context__: import("../API").ExtendedAPI;
    }, this>;
    private resizeObserver;
    connectedCallback(): void;
    disconnectedCallback(): void;
    private handleResize;
    private initCanvas;
    render(): TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'ic-spectrum-canvas': InfiniteCanvas;
    }
}