@nodeject/ui-components/esm/use-panzoom/use-panzoom.js

UI library for non-trivial components

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import createPanZoom from 'panzoom';
import * as React from 'react';
import { useEffect, useRef, useState } from 'react';
/**
 * HTML / SVG panzoom React hook
 * @param panzoomOptions
 */
export var usePanzoom = function (panzoomOptions) {
    var panzoomRef = useRef(null);
    var _a = useState(false), isPanzoomEnabled = _a[0], setIsPanzoomEnabled = _a[1];
    var _b = useState(false), isPanzoomPaused = _b[0], setIsPanzoomPaused = _b[1];
    var _c = useState(null), element = _c[0], setElement = _c[1];
    var _d = useState(null), panzoom = _d[0], setPanzoom = _d[1];
    // const rect = useRect(panzoomRef)
    // const transform = panzoom && panzoom.getTransform()
    // const x = transform ? transform.x : 0
    // const y = transform ? transform.y : 0
    // const scale = transform ? transform.scale : 1
    // const position = {
    //     x,
    //     y,
    //     scale,
    // }
    var setPan = function () { };
    var setZoom = function () { };
    // Mounting ref
    useEffect(function () {
        if (panzoomRef) {
            startPanzoom(panzoomRef.current);
            setIsPanzoomEnabled(true);
        }
    }, [panzoomRef]);
    // Cleaning
    useEffect(function () {
        return function () {
            stopPanzoom();
        };
    }, []);
    var resumePanzoom = function () {
        if (panzoom) {
            panzoom.resume();
            setIsPanzoomPaused(false);
        }
    };
    var pausePanzoom = function () {
        if (panzoom) {
            panzoom.pause();
            setIsPanzoomPaused(true);
        }
    };
    var togglePauseResumePanzoom = function () {
        if (panzoom) {
            isPanzoomPaused ? resumePanzoom() : pausePanzoom();
        }
    };
    var startPanzoom = function (element, options) {
        var combinedOptions = __assign(__assign({}, panzoomOptions), options);
        setElement(element);
        setPanzoom(createPanZoom(element, combinedOptions));
    };
    var stopPanzoom = function () {
        if (panzoom) {
            panzoom.dispose();
            setPanzoom(null);
            setIsPanzoomEnabled(false);
        }
    };
    var toggleStartStopPanzoom = function () {
        panzoom ? stopPanzoom() : startPanzoom(element);
    };
    var resetPanzoom = function (options) {
        stopPanzoom();
        startPanzoom(element, options);
    };
    var centerPanzoom = function () {
        // rect
        resetPanzoom({ autocenter: true });
    };
    var wrapperProps = {
        isPanzoomEnabled: isPanzoomEnabled,
        isPanzoomPaused: isPanzoomPaused
    };
    var resetZoom = function () {
        // panzoom.zoomTo()
    };
    return {
        // rect,
        panzoomRef: panzoomRef,
        centerPanzoom: centerPanzoom,
        panzoom: panzoom,
        PanzoomWrapper: PanzoomWrapper,
        pausePanzoom: pausePanzoom,
        resetPanzoom: resetPanzoom,
        resumePanzoom: resumePanzoom,
        setPan: setPan,
        setZoom: setZoom,
        startPanzoom: startPanzoom,
        stopPanzoom: stopPanzoom,
        togglePauseResumePanzoom: togglePauseResumePanzoom,
        toggleStartStopPanzoom: toggleStartStopPanzoom,
        wrapperProps: wrapperProps
    };
};
var PanzoomWrapper = function (props) {
    var wrapperProps = props.wrapperProps;
    if (!props.wrapperProps) {
        return React.createElement("div", null);
    }
    var isPanzoomEnabled = wrapperProps.isPanzoomEnabled, isPanzoomPaused = wrapperProps.isPanzoomPaused;
    var cursor = isPanzoomEnabled || !isPanzoomPaused ? 'move' : 'auto';
    var style = __assign(__assign({}, props.style), { outline: 'none', cursor: cursor });
    return (React.createElement("div", { className: props.className, style: style }, props.children));
};