@tomino/dynamic-form-semantic-ui/dist/cjs/editor/drag_drop_boundary.js

Semantic UI form renderer based on dynamic form generation

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const mobx_1 = require("mobx");
const editor_helpers_1 = require("./editor_helpers");
const common_1 = require("../common");
const helpers_1 = require("../helpers");
const handle = common_1.css `
  width: 8px;
  height: 8px;
  position: absolute;
  left: -100px;
  top: -100px;
  background-color: #aaa;
  border: solid 1px #222;
  cursor: ew-resize;
  label: handle;
`;
let leftHandle;
let rightHandle;
let hideTimeout;
let hiding = false;
function timeHideHandles() {
    hideTimeout = setTimeout(hideHandles, 10);
}
exports.timeHideHandles = timeHideHandles;
function createHandle() {
    const resizeHandle = document.createElement('div');
    resizeHandle.draggable = true;
    resizeHandle.className = handle;
    resizeHandle.onmouseover = () => clearTimeout(hideTimeout);
    resizeHandle.onmouseout = timeHideHandles;
    document.body.appendChild(resizeHandle);
    return resizeHandle;
}
function showHandles(e, props, context) {
    if (!leftHandle) {
        leftHandle = createHandle();
        rightHandle = createHandle();
    }
    if (hiding) {
        return;
    }
    if (props.formElement.control !== 'EditorCell') {
        clearTimeout(hideTimeout);
        let rect = e.currentTarget.childNodes[0].getBoundingClientRect();
        leftHandle.style.left = rect.left - 4 + window.scrollX + 'px';
        leftHandle.style.top = rect.top + rect.height / 2 + window.scrollY - 4 + 'px';
        rightHandle.style.left = rect.left + rect.width - 4 + window.scrollX + 'px';
        rightHandle.style.top = rect.top + rect.height / 2 + window.scrollY - 4 + 'px';
        const target = e.currentTarget;
        leftHandle.ondragstart = ev => dragElement(ev, props, context, target, props.formElement, 'left');
        leftHandle.setAttribute('data-row', props.formElement.props.row);
        leftHandle.setAttribute('data-column', props.formElement.props.column);
        rightHandle.ondragstart = ev => dragElement(ev, props, context, target, props.formElement, 'right');
        rightHandle.setAttribute('data-row', props.formElement.props.row);
        rightHandle.setAttribute('data-column', props.formElement.props.column);
    }
}
exports.showHandles = showHandles;
function hideHandles() {
    if (leftHandle) {
        rightHandle.style.left = '-100px';
        leftHandle.style.top = '-100px';
    }
    return true;
}
function dragElement(e, props, context, target, element, direction) {
    e.preventDefault();
    e.stopPropagation();
    hiding = true;
    hideHandles();
    let formWidth = helpers_1.getPropValue(props, element, context, 'width');
    const clone = target.cloneNode(true);
    target.classList.remove('content');
    target.style.opacity = '0.1';
    const rect = target.getBoundingClientRect();
    let originalX = direction === 'left' ? rect.left : rect.right;
    let clientWidth = rect.width;
    let widthDivision = clientWidth / formWidth;
    let newWidth = Math.floor(clientWidth / widthDivision);
    let cells = element.parent.elements.filter(e => e.props.row === element.props.row && e !== element);
    document.body.appendChild(clone);
    clone.style.outline = 'dotted 3px blue';
    clone.style.outlineOffset = '-1px';
    clone.style.backgroundColor = 'white';
    clone.style.position = 'absolute';
    clone.style.top = rect.top + window.scrollY + 'px';
    clone.style.left = rect.left + window.scrollX + 'px';
    clone.style.width = rect.width + 'px';
    clone.style.height = rect.height + 'px';
    const closeDragElement = mobx_1.action(() => {
        document.onmouseup = null;
        document.onmousemove = null;
        if (validateDrag() && newFormWidth() > 0) {
            helpers_1.setPropValue(props, element.props, context, newColumn(), 'column');
            helpers_1.setPropValue(props, element.props, context, newFormWidth(), 'width');
        }
        target.style.opacity = '1';
        document.body.removeChild(clone);
        hiding = false;
    });
    e = e || window.event;
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
    function newFormWidth() {
        return Math.ceil(newWidth / widthDivision);
    }
    function newColumn() {
        const col = helpers_1.getPropValue(props, element, context, 'column');
        const width = helpers_1.getPropValue(props, element, context, 'width');
        return direction === 'left' ? col - (newFormWidth() - width) : col;
    }
    function validateDrag() {
        return !editor_helpers_1.findConflict(props, context, cells, newColumn(), newColumn() + newFormWidth() - 1);
    }
    function elementDrag(e) {
        e = e || window.event;
        e.preventDefault();
        if (direction === 'left') {
            newWidth = originalX - e.clientX + clientWidth;
            if (validateDrag()) {
                clone.style.width = newWidth + 'px';
                clone.style.left = e.clientX - 2 + 'px';
            }
        }
        else {
            newWidth = e.clientX - originalX + clientWidth;
            if (validateDrag()) {
                clone.style.width = newWidth + 'px';
            }
        }
    }
}
exports.dragElement = dragElement;
//# sourceMappingURL=drag_drop_boundary.js.map