gem-panel/lib/store.js

A custom element <gem-panel>, let you easily create layout similar to Adobe After Effects.

import { createStore, updateStore } from '@mantou/gem';
import { DROP_DETECTION_DELAY, WINDOW_HOVER_DETECT_BORDER, WINDOW_HOVER_DETECT_HEADER_HEIGHT } from './const';
import { Layout } from './layout';
import { detectPosition } from './utils';
export const store = createStore({
    layout: new Layout(),
    panels: {},
    windowPanTimer: 0,
    hoverWindow: null,
    hoverWindowPosition: 'center',
    panWindow: null,
});
export function updateAppState(state) {
    updateStore(store, state);
}
export function addHiddenPanel(panel) {
    store.panels[panel.name] = panel;
}
export function deleteHiddenPanel(panelName) {
    delete store.panels[panelName];
}
export function deletePanelFromWindow(window, panelName) {
    store.layout.closePanel(window, panelName);
    deleteHiddenPanel(panelName);
    updateStore(store);
}
export function openHiddenPanel(panelName) {
    store.layout.openHiddenPanel(panelName);
    updateStore(store);
}
export function activePanel(window, panelName) {
    store.layout.activePanel(window, panelName);
    updateStore(store);
}
export function openPanelInWindow(window, panelName, side) {
    store.layout.openPanelInWindow(window, panelName, side);
    updateStore(store);
}
export function loadContentInPanel(panelName, content) {
    const panel = store.panels[panelName];
    if (!panel)
        return;
    panel.detail.content = content;
    updateStore(store);
}
export function independentPanel(window, panelName, rect) {
    const newWindow = store.layout.createIndependentWindow(window, panelName, rect);
    updateStore(store);
    return newWindow;
}
export function setWindowPanTimeout(ele, currentPanWindow, [clientX, clientY]) {
    const detectHoverWindow = () => {
        const gemPanelShadowRoot = ele.getRootNode();
        const windowEles = gemPanelShadowRoot
            .elementsFromPoint(clientX, clientY)
            .filter((e) => 'window' in e);
        const currentWindowEle = windowEles.find((e) => e.window === currentPanWindow);
        const hoverWindowEle = windowEles.find((e) => e !== currentWindowEle && e.window !== (currentWindowEle === null || currentWindowEle === void 0 ? void 0 : currentWindowEle.window));
        if (hoverWindowEle) {
            const { x, y, width, height } = hoverWindowEle.getBoundingClientRect();
            const headerHeight = hoverWindowEle.window.engross ? 0 : WINDOW_HOVER_DETECT_HEADER_HEIGHT;
            const isCenterPostion = !hoverWindowEle.window.isGridWindow() ||
                width < 4 * WINDOW_HOVER_DETECT_BORDER ||
                height < 3 * WINDOW_HOVER_DETECT_BORDER + 2 * headerHeight;
            const isHeader = clientY > y && clientY < y + headerHeight;
            const hoverWindowPosition = isCenterPostion
                ? 'center'
                : isHeader
                    ? 'header'
                    : detectPosition([x, y + headerHeight, width, height - headerHeight], [clientX, clientY], WINDOW_HOVER_DETECT_BORDER);
            if ((hoverWindowPosition === 'center' || hoverWindowPosition === 'header') && hoverWindowEle.window.engross) {
                cancelHandleWindow();
            }
            else {
                updateStore(store, {
                    hoverWindow: hoverWindowEle.window,
                    panWindow: currentPanWindow,
                    hoverWindowPosition,
                });
            }
        }
        else {
            cancelHandleWindow();
        }
    };
    if (store.hoverWindow) {
        detectHoverWindow();
    }
    else {
        updateStore(store, { windowPanTimer: window.setTimeout(detectHoverWindow, DROP_DETECTION_DELAY) });
    }
}
export function cancelHandleWindow() {
    updateStore(store, { hoverWindow: null, panWindow: null });
}
export function dropHandleWindow(window) {
    clearTimeout(store.windowPanTimer);
    if (store.hoverWindow) {
        if (store.hoverWindowPosition === 'center' || store.hoverWindowPosition === 'header') {
            store.layout.mergeWindow(window, store.hoverWindow);
        }
        else {
            store.layout.convertGridWindow(window, store.hoverWindow, store.hoverWindowPosition);
        }
        cancelHandleWindow();
    }
}
export function updateCurrentPanel(window, panelName) {
    window.changeCurrent(window.panels.findIndex((p) => p === panelName));
    updateStore(store);
}
export function updatePanelSort(window, p1, p2) {
    window.changePanelSort(p1, p2);
    updateStore(store);
}
export function updateWindowPosition(window, movement) {
    store.layout.moveWindow(window, movement);
    updateStore(store);
}
export function updateWindowRect(window, movement) {
    store.layout.changeWindowRect(window, movement);
    updateStore(store);
}
export function updateWindowZIndex(window) {
    store.layout.focusWindow(window);
    updateStore(store);
}
export function updateWindowType(window, { x, y, width, height }) {
    store.layout.removeWindow(window, [x, y, width, height]);
    updateStore(store);
}
export function closePanel(window, panelName) {
    store.layout.closePanel(window, panelName);
    updateStore(store);
}
export function closeWindow(window) {
    store.layout.removeWindow(window);
    updateStore(store);
}
export function moveSide(window, side, args) {
    store.layout.moveSide(window, side, args);
    updateStore(store);
}
//# sourceMappingURL=store.js.map