@nodeject/ui-components
Version:
UI library for non-trivial components
129 lines (128 loc) • 4.43 kB
JavaScript
;
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);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.usePanzoom = void 0;
var panzoom_1 = require("panzoom");
var React = require("react");
var react_1 = require("react");
/**
* HTML / SVG panzoom React hook
* @param panzoomOptions
*/
var usePanzoom = function (panzoomOptions) {
var panzoomRef = react_1.useRef(null);
var _a = react_1.useState(false), isPanzoomEnabled = _a[0], setIsPanzoomEnabled = _a[1];
var _b = react_1.useState(false), isPanzoomPaused = _b[0], setIsPanzoomPaused = _b[1];
var _c = react_1.useState(null), element = _c[0], setElement = _c[1];
var _d = react_1.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
react_1.useEffect(function () {
if (panzoomRef) {
startPanzoom(panzoomRef.current);
setIsPanzoomEnabled(true);
}
}, [panzoomRef]);
// Cleaning
react_1.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(panzoom_1.default(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
};
};
exports.usePanzoom = usePanzoom;
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));
};