@thebigcrunch/sdk/src/tbc.js

The big crunch SDK library

//
// The Big Crunch Vizzy SDK
//
import { listenToVizzy } from "./vizzy";
import Renderers from "./renderers/";
import { types, contentTypes, BIG_CRUNCH_URL } from "./constants";
import { crunch, crunchBySpaceName, crunchWithSectorId } from "./crunch";
import editor from "./editor";

// public

// Intialise client as a vizzy. Options:
// - spaceId: register for updates to the specified space ID. Defaults to `id` from query paramters.
// - selector: element will be injected with native values.
// - onConfig: function will be invoked with vizzy custom config if available.
// - onChange: function will be invoked with cell data, including value and inputs.

const addWindowEvents = () => {
    window.addEventListener("mousedown", event => {
        parent.postMessage({ type: "vizzyMouseDown" }, "*");
    });

    window.addEventListener("mouseup", event => {
        parent.postMessage({ type: "vizzyMouseUp" }, "*");
    });

    window.addEventListener("mouseout", event => {
        parent.postMessage({ type: "vizzyMouseout" }, "*");
    });

    window.addEventListener("dragstart", event => {
        parent.postMessage({ type: "vizzyMouseDown" }, "*");
    });

    window.addEventListener("dragend", event => {
        parent.postMessage({ type: "vizzyMouseUp" }, "*");
    });

    window.addEventListener("mouseout", event => {
        parent.postMessage({ type: "vizzyMouseout" }, "*");
    });

    window.addEventListener("mouseout", event => {
        parent.postMessage({ type: "vizzyMouseout" }, "*");
    });

    document.addEventListener("copy", event => {
        event.preventDefault();
        event.clipboardData.setData("application/tbc-range", "vizzy-range");
        parent.postMessage({ type: "vizzyCopy" }, "*");
    });

    window.addEventListener("keyup", event => {
        switch (event.key) {
            case "Shift":
                parent.postMessage({ type: "vizzyShiftUp" }, "*");
                break;
        }
    });

    window.addEventListener("keydown", event => {
        switch (event.key) {
            case "ArrowLeft":
                parent.postMessage({ type: "vizzyLeft" }, "*");
                break;
            case "ArrowRight":
                parent.postMessage({ type: "vizzyRight" }, "*");
                break;
            case "ArrowDown":
                parent.postMessage({ type: "vizzyDown" }, "*");
                break;
            case "ArrowUp":
                parent.postMessage({ type: "vizzyUp" }, "*");
                break;
            case "1":
                parent.postMessage({ type: "vizzyOne" }, "*");
                break;
            case "2":
                parent.postMessage({ type: "vizzyTwo" }, "*");
                break;
            case "Enter":
                if (event.metaKey || event.ctrlKey) {
                    parent.postMessage({ type: "vizzyCtrlEnter" }, "*");
                } else {
                    // TODO: how to find the target origin
                    parent.postMessage({ type: "vizzyEnter" }, "*");
                }
                break;
            case "m":
                if (event.metaKey || event.ctrlKey) {
                    parent.postMessage({ type: "vizzyMerge" }, "*");
                }
                e.preventDefault();
                e.stopPropagation();
                break;
            case "u":
                if (event.metaKey || event.ctrlKey) {
                    parent.postMessage({ type: "vizzyUnMerge" }, "*");
                }
                e.preventDefault();
                e.stopPropagation();
                break;
            case "+":
                parent.postMessage({ type: "vizzyFormula" }, "*");
                break;
            case "Delete":
            case "Backspace":
                parent.postMessage({ type: "vizzyClear" }, "*");
                break;
            case "Shift":
                parent.postMessage({ type: "vizzyShiftDown" }, "*");
                break;
        }
    });

    window.addEventListener("dblclick", event => {
        parent.postMessage({ type: "vizzyDblClick" }, "*");
    });

    window.addEventListener("mousemove", event => {
        if (event.buttons === 1 && (event.ctrlKey || event.metaKey)) {
            parent.postMessage(
                {
                    type: "vizzyPan",
                    event: {
                        clientX: event.clientX,
                        clientY: event.clientY,
                        ctrlKey: event.ctrlKey,
                        metaKey: event.metaKey
                    }
                },
                "*"
            );
        }
        if (event.buttons === 1) {
            parent.postMessage(
                {
                    type: "vizzyMousemove",
                    event: {
                        clientX: event.clientX,
                        clientY: event.clientY,
                        shiftKey: event.shiftKey
                    }
                },
                "*"
            );
        }
    });

    function scroll(event) {
        parent.postMessage(
            {
                type: "vizzyScroll",
                event: {
                    deltaX: event.deltaX,
                    deltaY: event.deltaY,
                    deltaMode: event.deltaMode,
                    wheelDeltaX: event.wheelDeltaX,
                    wheelDeltaY: event.wheelDeltaY
                }
            },
            "*"
        );
        event.preventDefault();
        event.stopPropagation();
        return false;
    }

    window.addEventListener("DOMMouseScroll", scroll, { passive: false });
    window.addEventListener("wheel", scroll, { passive: false });
};

const addUniverseEventListeners = function addUniverseEventListeners() {
    if (!window.TBCAddedEvents) {
        window.TBCAddedEvents = true;
        addWindowEvents();
    }
};

const vizzy = (options = {}) => {
    listenToVizzy(options);

    if (window.location.href.indexOf("universe=true") > -1) {
        addUniverseEventListeners();
    }
};

const messageHandlers = {
    zoomFactorChanged: ({ zoomFactor }) => {
        const scaleOnZoom = queryParams.get("scaleOnZoom");

        if (scaleOnZoom) {
            document.body.style.zoom = zoomFactor;
        }
    }
};

window.addEventListener("message", e => {
    if (e && e.data && e.data.type && e.data.data) {
        const { type, data } = e.data;
        const handler = type ? messageHandlers[type] : null;
        if (handler) handler(data); // Note: webpack sends messages too, so ignore them.
    }
});

const tbc = {
    vizzy,
    crunch,
    crunchBySpaceName,
    crunchWithSectorId,
    renderImageToCanvas: Renderers.renderImageToCanvas,
    renderTextToElement: Renderers.renderTextToElement,
    renderVisualisationToElement: Renderers.renderVisualisationToElement,
    renderLayersToElement: Renderers.renderLayersToElement,
    renderGifToElement: Renderers.renderGifToElement,
    renderTextToCanvas: Renderers.renderTextToCanvas,
    renderCellToElement: Renderers.renderCellToElement,
    types,
    contentTypes,
    BIG_CRUNCH_URL,
    editor,
    edit: editor.edit
};

export default tbc;