itmar-block-packages/build/cjs/DraggableBox.js

Common React components for WordPress custom blocks, now fully TypeScript-ready.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var i18n = require('@wordpress/i18n');
var components = require('@wordpress/components');
var element = require('@wordpress/element');

const useDraggingMove = (isMovable, blockRef, // ReactのRef型を指定
position, onPositionChange) => {
    const elmposition = element.useRef({ x: 0, y: 0 });
    const isDragging = element.useRef(false);
    const mousePosition = element.useRef({ x: 0, y: 0 });
    element.useEffect(() => {
        const element = blockRef.current;
        if (!element)
            return;
        if (!isMovable) {
            if (element) {
                element.classList.remove("itmar_isDraggable"); //移動カーソル表示クラス削除
            }
            return; // 移動許可がある場合のみ、後続のロジックを実行
        }
        //positionの変化に合わせて現在位置を変更
        const pos_value_x = position.x.match(/(-?\d+)([%a-zA-Z]+)/);
        const pos_value_y = position.y.match(/(-?\d+)([%a-zA-Z]+)/);
        if (pos_value_x && pos_value_y) {
            elmposition.current = {
                x: parseInt(pos_value_x[1], 10),
                y: parseInt(pos_value_y[1], 10),
            };
        }
        //イベントハンドラ
        const handleMouseDown = (event) => {
            // 移動カーソル表示クラス名を追加します。
            element.classList.add("itmar_isDraggable");
            //ドラッグの開始フラグオン
            isDragging.current = true;
            //ドラッグ開始の絶対位置
            mousePosition.current = { x: event.clientX, y: event.clientY };
        };
        const handleMouseMove = (event) => {
            if (!isDragging.current)
                return; //ドラッグ中でなければ処理を中止
            const dx = event.clientX - mousePosition.current.x;
            const dy = event.clientY - mousePosition.current.y;
            //ドラッグ後の位置を保存
            const newPosition = {
                x: elmposition.current.x + dx,
                y: elmposition.current.y + dy,
            };
            elmposition.current = newPosition;
            mousePosition.current = { x: event.clientX, y: event.clientY }; //マウス位置の保存
            //ドラッグによるブロックの一時的移動
            element.style.transform = `translate(${elmposition.current.x}px, ${elmposition.current.y}px)`;
        };
        const handleMouseUp = () => {
            if (!isDragging.current)
                return;
            isDragging.current = false;
            element.style.transform = ""; // null ではなく空文字が推奨
            //呼出しもとに要素の位置を返す
            onPositionChange({
                x: `${elmposition.current.x}px`,
                y: `${elmposition.current.y}px`,
            });
        };
        const handleMouseLeave = () => {
            isDragging.current = false;
        };
        if (element) {
            // クラス名を追加します。
            element.classList.add("itmar_isDraggable");
        }
        // イベントハンドラを追加します。
        element.addEventListener("mousedown", handleMouseDown);
        element.addEventListener("mousemove", handleMouseMove);
        element.addEventListener("mouseup", handleMouseUp);
        element.addEventListener("mouseleave", handleMouseLeave);
        // イベントリスナーを削除するクリーンアップ関数を返します。
        return () => {
            element.removeEventListener("mousedown", handleMouseDown);
            element.removeEventListener("mousemove", handleMouseMove);
            element.removeEventListener("mouseup", handleMouseUp);
            element.removeEventListener("mouseleave", handleMouseLeave);
            element.style.transform = "";
        };
    }, [isMovable, blockRef, position, onPositionChange]); // 依存配列に isMovable を含めます
};
function DraggableBox({ attributes, onPositionChange, }) {
    const position = attributes;
    //インスペクター内のコントロールからの移動操作
    const chagePosition = (value, cordinate) => {
        if (value !== undefined) {
            const newPos = { ...position, [cordinate]: value };
            onPositionChange(newPos);
        }
    };
    const resetPos = () => {
        onPositionChange({ x: "0px", y: "0px" });
    };
    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(components.PanelBody, { title: i18n.__("Position Setting", "block-collections"), initialOpen: true, children: [jsxRuntime.jsxs(components.PanelRow, { className: "distance_row", children: [jsxRuntime.jsx(components.__experimentalUnitControl, { dragDirection: "e", onChange: (value) => chagePosition(value, "x"), label: i18n.__("Vertical", "block-collections"), value: position?.x || 0 }), jsxRuntime.jsx(components.__experimentalUnitControl, { dragDirection: "e", onChange: (value) => chagePosition(value, "y"), label: i18n.__("Horizen", "block-collections"), value: position?.y || 0 })] }), jsxRuntime.jsx(components.PanelRow, { className: "reset_row", children: jsxRuntime.jsx(components.Button, { variant: "secondary", onClick: () => resetPos(), children: i18n.__("Reset", "block-collections") }) })] }) }));
}

exports.default = DraggableBox;
exports.useDraggingMove = useDraggingMove;
//# sourceMappingURL=DraggableBox.js.map