@thebigcrunch/sdk/src/renderers/common.js

The big crunch SDK library

import { contentTypes, CELL_HEIGHT, CELL_WIDTH, types } from "../constants";

const defaultOptions = {
    fit: "cellaspect"
};

export const getOptions = function getOptions(options) {
    return Object.assign({}, defaultOptions, options);
};

export const setFullHeightWidth = function setFullHeightWidth(element) {
    element.style.width = "99%";
    element.style.height = "100%";
};

export const getFullscreenSize = function getFullscreenSize() {
    return { width: screen.width, height: screen.height };
};

export const canvasSize = function canvasSize(ctx) {
    return { canvasWidth: ctx.canvas.width, canvasHeight: ctx.canvas.height };
};

const elementSize = function elementSize(element) {
    const box = element.getBoundingClientRect();
    return { width: box.width, height: box.height };
};

export const findDrawingArea = function findDrawingArea({ x, y }, w, h) {
    const actualX = (x + 1) * CELL_WIDTH;
    const actualY = (y + 1) * CELL_HEIGHT;
    // Set proposed width to the canvas width
    let width = w;
    // Calculate the height at the aspect ratio
    let height = (width * actualY) / actualX;

    // If the height is too high for the canvas
    if (height > h) {
        // Set the height to the canvas height
        height = h;
        // Calculate the width at the aspect ratio
        width = (height * actualX) / actualY;
    }
    return { width, height };
};

const validateCellSize = function validateCellSize(cellSize) {
    let size = cellSize;
    if (!cellSize) {
        size = { x: 0, y: 0 };
    }
    return size;
};

export const findDrawingAreaElement = function findDrawingAreaElement(
    { cellSize },
    element,
    options
) {
    const size = validateCellSize(cellSize);
    const { width, height } = options.fullscreen
        ? getFullscreenSize()
        : elementSize(element);
    return findDrawingArea(size, width, height);
};

export const findDrawingAreaCanvas = function findDrawingAreaCanvas(
    { cellSize },
    ctx,
    options = {}
) {
    const size = validateCellSize(cellSize);
    if (options.fullscreen) {
        const { height, width } = getFullscreenSize();
        return findDrawingArea(size, width, height);
    }
    const { canvasWidth, canvasHeight } = canvasSize(ctx);
    return findDrawingArea(size, canvasWidth, canvasHeight);
};

export const findCentredDrawingArea = function findCentredDrawingArea(
    width,
    height,
    ctx
) {
    const { canvasWidth, canvasHeight } = canvasSize(ctx);
    return { x: (canvasWidth - width) / 2, y: (canvasHeight - height) / 2 };
};

export const setElementToSpaceRatio = function setElementToSpaceRatio(
    space,
    element,
    options
) {
    const { width, height } = findDrawingAreaElement(space, element, options);
    element.style.width = `${width}px`;
    element.style.height = `${height}px`;
};

export const setElementToParentSize = function setElementToParentSize(
    child,
    parent,
    options
) {
    const parentBox = parent.getBoundingClientRect();
    const fullScreenSize = getFullscreenSize();
    if (child.nodeName === "CANVAS") {
        if (options && options.fullscreen) {
            child.width = fullScreenSize.width;
            child.height = fullScreenSize.height;
        } else if (parentBox.width !== 0 || parentBox.height !== 0) {
            child.width = parentBox.width;
            child.height = parentBox.height;
        }
        // If we can't get the size of the canvas we're out of luck for now. It draws at the default size 300px x 150px.
        // We could check the size of the space the turtle is in then calculate the x and y which is a painnnnnn - FLASH 17/07/2018
    } else if (options && options.fullscreen) {
        child.style.width = `${fullScreenSize.width}px`;
        child.style.height = `${fullScreenSize.height}px`;
    } else {
        child.style.width = `${parentBox.width}px`;
        child.style.height = `${parentBox.height}px`;
    }
};

const createLayerCanvas = function createLayerCanvas(parentElement) {
    const canvas = document.createElement("canvas");
    if (parentElement) {
        setElementToParentSize(canvas, parentElement);
    }
    return canvas;
};

const createLayerDiv = function createLayerDiv() {
    const div = document.createElement("div");
    setFullHeightWidth(div);

    return div;
};

export const createElementForSpace = function createElementForSpace(
    space,
    layerDiv
) {
    if (space.type === types.visualisation) {
        return createLayerDiv();
    }

    switch (space.contentType) {
        case contentTypes.textText:
            return createLayerCanvas(layerDiv);
        default:
            return createLayerDiv();
    }
};