@remotion/studio
Version:
APIs for interacting with the Remotion Studio
157 lines (156 loc) • 6.69 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.InputDragger = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importStar(require("react"));
const remotion_1 = require("remotion");
const colors_1 = require("../../helpers/colors");
const noop_1 = require("../../helpers/noop");
const input_dragger_click_lock_1 = require("../../state/input-dragger-click-lock");
const z_index_1 = require("../../state/z-index");
const RemInput_1 = require("./RemInput");
const isInt = (num) => {
return num % 1 === 0;
};
const InputDraggerForwardRefFn = ({ onValueChange, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), status, rightAlign, ...props }, ref) => {
const [inputFallback, setInputFallback] = (0, react_1.useState)(false);
const fallbackRef = (0, react_1.useRef)(null);
const style = (0, react_1.useMemo)(() => {
return {
...RemInput_1.inputBaseStyle,
backgroundColor: 'transparent',
borderColor: 'transparent',
};
}, []);
const span = (0, react_1.useMemo)(() => ({
borderBottom: '1px dotted ' + colors_1.BLUE,
paddingBottom: 1,
color: colors_1.BLUE,
cursor: 'ew-resize',
userSelect: 'none',
WebkitUserSelect: 'none',
fontSize: 13,
fontVariantNumeric: 'tabular-nums',
}), []);
const onClick = (0, react_1.useCallback)((e) => {
if (!(0, input_dragger_click_lock_1.getClickLock)()) {
e.stopPropagation();
}
if ((0, input_dragger_click_lock_1.getClickLock)()) {
return;
}
setInputFallback(true);
}, []);
const onEscape = (0, react_1.useCallback)(() => {
setInputFallback(false);
}, []);
const onBlur = (0, react_1.useCallback)(() => {
if (!fallbackRef.current) {
return;
}
const newValue = fallbackRef.current.value;
if (newValue.trim() === '') {
onEscape();
return;
}
if (fallbackRef.current.checkValidity()) {
onTextChange === null || onTextChange === void 0 ? void 0 : onTextChange(newValue);
setInputFallback(false);
}
else {
fallbackRef.current.reportValidity();
}
}, [onEscape, onTextChange]);
const onKeyPress = (0, react_1.useCallback)((e) => {
var _a;
if (e.key === 'Enter') {
(_a = fallbackRef.current) === null || _a === void 0 ? void 0 : _a.blur();
}
}, []);
const roundToStep = (val, stepSize) => {
const factor = 1 / stepSize;
return Math.ceil(val * factor) / factor;
};
const onPointerDown = (0, react_1.useCallback)((e) => {
const { pageX, pageY, button } = e;
if (button !== 0) {
return;
}
const moveListener = (ev) => {
const xDistance = ev.pageX - pageX;
const distanceFromStart = Math.sqrt(xDistance ** 2 + (ev.pageY - pageY) ** 2);
const step = Number(_step !== null && _step !== void 0 ? _step : 1);
const min = Number(_min !== null && _min !== void 0 ? _min : 0);
const max = Number(_max !== null && _max !== void 0 ? _max : Infinity);
if (distanceFromStart > 4) {
(0, input_dragger_click_lock_1.setClickLock)(true);
}
const diff = (0, remotion_1.interpolate)(xDistance, [-5, -4, 0, 4, 5], [-step, 0, 0, 0, step]);
const newValue = Math.min(max, Math.max(min, Number(value) + diff));
const roundedToStep = roundToStep(newValue, step);
onValueChange(roundedToStep);
};
window.addEventListener('mousemove', moveListener);
window.addEventListener('pointerup', () => {
window.removeEventListener('mousemove', moveListener);
setTimeout(() => {
(0, input_dragger_click_lock_1.setClickLock)(false);
}, 2);
}, {
once: true,
});
}, [_step, _min, _max, value, onValueChange]);
(0, react_1.useEffect)(() => {
var _a;
if (inputFallback) {
(_a = fallbackRef.current) === null || _a === void 0 ? void 0 : _a.select();
}
}, [inputFallback]);
const deriveStep = (0, react_1.useMemo)(() => {
if (_step !== undefined) {
return _step;
}
if (typeof _min === 'number' && isInt(_min)) {
return 1;
}
return 0.0001;
}, [_min, _step]);
if (inputFallback) {
return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, min: _min, max: _max, step: deriveStep, defaultValue: value, status: status, pattern: '[0-9]*[.]?[0-9]*', rightAlign: rightAlign, ...props }) }));
}
return ((0, jsx_runtime_1.jsx)("button", { ref: ref, type: "button", style: style, onClick: onClick, onPointerDown: onPointerDown, children: (0, jsx_runtime_1.jsx)("span", { style: span, children: formatter(value) }) }));
};
exports.InputDragger = react_1.default.forwardRef(InputDraggerForwardRefFn);