x4js 1.5.18 → 1.5.20

package/lib/esm/dialog.js

@@ -1,490 +0,0 @@
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|
-*  /__/\__\   |_|
-*
-* @file dialog.ts
-* @author Etienne Cochard
-*
-* Copyright (c) 2019-2022 R-libre ingenierie
-*
-* Permission is hereby granted, free of charge, to any person obtaining a copy
-* of this software and associated documentation files (the "Software"), to deal
-* in the Software without restriction, including without limitation the rights
-* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
-* of the Software, and to permit persons to whom the Software is furnished to do so,
-* subject to the following conditions:
-* The above copyright notice and this permission notice shall be included in all copies
-* or substantial portions of the Software.
-*
-* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
-* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
-* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
-* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
-* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-**/
-import { x4document } from './x4dom';
-import { Popup, EvMove } from './popup';
-import { Icon } from './icon';
-import { HLayout } from './layout';
-import { Label } from './label';
-import { Form } from './form';
-import { Component, EvSize, flyWrap } from './component';
-import { BasicEvent } from './x4events';
-import { Rect, getMousePos, isFunction, isTouchDevice } from './tools';
-export function EvBtnClick(button) {
-    return BasicEvent({ button });
-}
-/**
- * Standard dialog class
- */
-export class Dialog extends Popup {
-    m_icon;
-    m_title;
-    m_form;
-    m_buttons;
-    m_closable;
-    m_movable;
-    m_maximized;
-    m_minimized;
-    m_maximizable;
-    m_minimizable;
-    m_minFormSize;
-    m_rc_max;
-    m_rc_min;
-    m_el_title;
-    m_last_down;
-    m_auto_close;
-    m_ui_title;
-    m_form_cb;
-    constructor(props) {
-        let content = props.content;
-        props.content = null;
-        let width = props.width;
-        let height = props.height;
-        props.width = undefined;
-        props.height = undefined;
-        super(props);
-        this.m_minFormSize = { width, height };
-        this.enableMask(true);
-        if (props.form) {
-            if (!isFunction(props.form)) {
-                this.m_form = props.form;
-                this.m_form.on('btnClick', (e) => this._handleClick(e));
-            }
-            else {
-                this.m_form_cb = props.form;
-            }
-        }
-        else {
-            this.m_form = new Form({
-                content,
-                buttons: props.buttons,
-                disableSuggestions: props.disableSuggestions,
-                btnClick: (e) => this._handleClick(e)
-            });
-        }
-        this.m_movable = props.movable;
-        this.m_auto_close = props.autoClose ?? true;
-        this.m_icon = props.icon;
-        this.m_title = props.title;
-        this.m_buttons = props.buttons ?? null;
-        this.m_closable = props.closable ?? false;
-        this.m_last_down = 0;
-        this.on('size', (ev) => {
-            this.addClass('@resized');
-            this.m_form.setStyleValue('width', null);
-            this.m_form.setStyleValue('height', null);
-        });
-        this.m_maximized = false;
-        this.m_minimized = false;
-        this.m_maximizable = false;
-        this.m_minimizable = false;
-        if (props.maximizable !== undefined) {
-            this.m_maximizable = props.maximizable;
-        }
-        if (props.minimizable !== undefined) {
-            this.m_minimizable = props.minimizable;
-        }
-        if (props.maximized == true) {
-            this.m_maximizable = true;
-        }
-        if (props.btnClick) {
-            this.on('btnClick', props.btnClick);
-        }
-    }
-    /**
-     *
-     */
-    componentCreated() {
-        super.componentCreated();
-        if (this.m_minFormSize.width) {
-            this.m_form.setStyle({
-                minWidth: this.m_minFormSize.width,
-                width: this.m_minFormSize.width
-            });
-        }
-        if (this.m_minFormSize.height) {
-            this.m_form.setStyle({
-                minHeight: this.m_minFormSize.height,
-                height: this.m_minFormSize.height
-            });
-        }
-        const rc = this.getBoundingRect();
-        this.setStyleValue('min-width', rc.width);
-        this.setStyleValue('min-height', rc.height);
-        this.setStyleValue('width', rc.width);
-        this.setStyleValue('height', rc.height);
-        if (this.m_props.dlgWidth) {
-            this.setStyleValue('width', this.m_props.dlgWidth + '%');
-        }
-        if (this.m_props.dlgHeight) {
-            this.setStyleValue('height', this.m_props.dlgHeight + '%');
-        }
-        this.addClass('@resized');
-        if (this.m_el_title) {
-            this.m_el_title.setStyleValue("width", "auto");
-        }
-        if (this.m_props.maximized) {
-            this._maximize();
-            this.emit('size', EvSize(null));
-        }
-        else {
-            this.centerOnScreen();
-        }
-    }
-    /**
-     *
-     */
-    _handleClick(ev) {
-        this.emit('btnClick', ev);
-        if (!ev.defaultPrevented) {
-            this.close();
-        }
-    }
-    /**
-     * restore the geometry
-     */
-    setGeometry(geom) {
-        if (geom.minimized && this.m_minimizable) {
-            this._minimize(false);
-            this.m_rc_min = new Rect(geom.left, geom.top, geom.width, geom.height);
-            this.displayAt(geom.left, geom.top, 'top-left');
-        }
-        else if (geom.maximized && this.m_maximizable) {
-            this._maximize(false);
-            this.m_rc_max = new Rect(geom.left, geom.top, geom.width, geom.height);
-        }
-        else {
-            this.setSize(geom.width, geom.height);
-            this.displayAt(geom.left, geom.top, 'top-left');
-        }
-    }
-    /**
-     * return the geometry (usefull to save state)
-     */
-    getGeometry() {
-        if (this.m_minimized) {
-            return {
-                left: this.m_rc_min.left,
-                top: this.m_rc_min.top,
-                width: this.m_rc_min.width,
-                height: this.m_rc_min.height,
-                minimized: true,
-                maximized: false
-            };
-        }
-        else if (this.m_maximized) {
-            return {
-                left: this.m_rc_max.left,
-                top: this.m_rc_max.top,
-                width: this.m_rc_max.width,
-                height: this.m_rc_max.height,
-                minimized: false,
-                maximized: true
-            };
-        }
-        let rc = this.getBoundingRect();
-        return {
-            left: rc.left,
-            top: rc.top,
-            width: rc.width,
-            height: rc.height,
-            minimized: false,
-            maximized: false
-        };
-    }
-    /**
-     * resize the dialog
-     * @param width
-     * @param height
-     */
-    setSize(width, height) {
-        this.setStyle({ width, height });
-        this.emit('size', EvSize({ width, height }));
-    }
-    /** @ignore */
-    render() {
-        if (this.m_form_cb) {
-            this.m_form = this.m_form_cb();
-            this.m_form.on('btnClick', (e) => this._handleClick(e));
-            this.m_form_cb = null;
-        }
-        let hasTitle = this.m_icon !== undefined || this.m_closable || this.m_title !== undefined || this.m_movable;
-        this.m_el_title = null;
-        if (hasTitle) {
-            this.m_el_title = new HLayout({
-                cls: 'title',
-                content: [
-                    this.m_icon ? new Icon({ icon: this.m_icon }) : null,
-                    this.m_ui_title = new Label({ flex: 1, text: this.m_title }),
-                    this.m_minimizable ? new Icon({ cls: 'min-btn', icon: 'var( --x4-icon-window-minimize )', dom_events: { click: () => this._toggleMin() } }) : null,
-                    this.m_maximizable ? new Icon({ cls: 'max-btn', icon: 'var( --x4-icon-window-maximize )', dom_events: { click: () => this._toggleMax() } }) : null,
-                    this.m_maximizable ? new Icon({ cls: 'res-btn', icon: 'var( --x4-icon-window-restore )', dom_events: { click: () => this._toggleMax() } }) : null,
-                    this.m_closable ? new Icon({ cls: 'close-btn', icon: 'var( --x4-icon-rectangle-times )', dom_events: { click: () => this.close() } }) : null,
-                ]
-            });
-            if (this.m_movable) {
-                if (isTouchDevice()) {
-                    this.m_el_title.setDomEvent('touchstart', (e) => this._mouseDown(e));
-                }
-                else {
-                    this.m_el_title.setDomEvent('mousedown', (e) => this._mouseDown(e));
-                }
-            }
-        }
-        super.setContent([
-            this.m_el_title,
-            this.m_form
-        ]);
-    }
-    /**
-     * change the dialog content
-     * @param els
-     * @param refreshAll
-     */
-    setContent(els, refreshAll = true) {
-        this.m_form.setContent(els, refreshAll);
-    }
-    /**
-     * change the dialog buttons
-     * @param buttons
-     */
-    setButtons(buttons) {
-        this.m_form.setButtons(buttons);
-    }
-    /**
-     * return the dialog form
-     */
-    get form() {
-        return this.m_form;
-    }
-    /**
-     * close the dialog
-     */
-    close() {
-        this.emit('close', {});
-        super.close();
-    }
-    /**
-     *
-     */
-    _toggleMax() {
-        if (!this.m_maximizable) {
-            return;
-        }
-        if (this.m_maximized) {
-            this.removeClass('maximized');
-            this.setStyle({
-                left: this.m_rc_max.left,
-                top: this.m_rc_max.top,
-                width: this.m_rc_max.width,
-                height: this.m_rc_max.height,
-            });
-            this.m_maximized = false;
-            this.emit('size', EvSize(null, 'restore'));
-        }
-        else {
-            this._maximize();
-            this.emit('size', EvSize(null, 'maximize'));
-        }
-    }
-    /**
-     *
-     */
-    _toggleMin() {
-        if (!this.m_minimizable) {
-            return;
-        }
-        if (this.m_minimized) {
-            this.removeClass('minimized');
-            this.setStyle({
-                //left: 	this.m_rc_min.left,
-                //top: 	this.m_rc_min.top,
-                width: this.m_rc_min.width,
-                height: this.m_rc_min.height,
-            });
-            this.m_minimized = false;
-            this.emit('size', EvSize(null, 'restore'));
-        }
-        else {
-            this._minimize();
-            this.emit('size', EvSize(null, 'minimize'));
-        }
-    }
-    /**
-     *
-     */
-    _mouseDown(event) {
-        let { x, y } = getMousePos(event, true);
-        let wrc = flyWrap(x4document.body).getBoundingRect();
-        let rc = this.getBoundingRect(true);
-        ///let trc = this.m_el_title.getBoundingRect();
-        let dx = x - rc.left, dy = y - rc.top;
-        //let cstyle = this.getComputedStyle();
-        //let topw = cstyle.parse('marginTop') + cstyle.parse('paddingTop') + cstyle.parse('borderTopWidth');
-        //let botw = cstyle.parse('marginBottom') + cstyle.parse('paddingBottom') + cstyle.parse('borderBottomWidth');
-        //let lftw = cstyle.parse('marginLeft') + cstyle.parse('paddingLeft') + cstyle.parse('borderLeftWidth');
-        //let rgtw = cstyle.parse('marginRight') + cstyle.parse('paddingRight') + cstyle.parse('borderRightWidth');
-        //wrc.top += topw - trc.height;
-        //wrc.height -= topw + botw - trc.height;
-        //wrc.left += lftw;
-        //wrc.width -= lftw + rgtw;
-        // custom handling double click
-        const now = Date.now();
-        const delta = now - this.m_last_down;
-        if (this.m_maximizable && delta < 700) {
-            this._toggleMax();
-            return;
-        }
-        this.m_last_down = now;
-        if (this.m_maximized) {
-            // cannot move in max state
-            return;
-        }
-        let __move = (ex, ey) => {
-            if (ex > wrc.right) {
-                ex = wrc.right;
-            }
-            else if (ex < wrc.left) {
-                ex = wrc.left;
-            }
-            if (ey > wrc.bottom) {
-                ey = wrc.bottom;
-            }
-            else if (ey < wrc.top) {
-                ey = wrc.top;
-            }
-            let x = ex - dx, y = ey - dy;
-            //if (x + rc.width < wrc.left) {
-            //	x = wrc.left - rc.width;
-            //}
-            //else if (x > wrc.right) {
-            //	x = wrc.right;
-            //}
-            //
-            //if (y < wrc.top) { // title grip is on top
-            //	y = wrc.top;
-            //}
-            //else if (y > wrc.bottom) {
-            //	y = wrc.bottom;
-            //}
-            this.setStyle({
-                left: x,
-                top: y
-            });
-        };
-        Component.setCapture(this, (ev) => {
-            if (ev.type == 'mousemove') {
-                let mev = ev;
-                __move(mev.clientX, mev.clientY);
-            }
-            else if (ev.type == 'touchmove') {
-                let tev = ev;
-                if (tev.touches.length == 1) {
-                    __move(tev.touches[0].clientX, tev.touches[0].clientY);
-                }
-            }
-            else if (ev.type == 'mouseup' || ev.type == 'touchend') {
-                Component.releaseCapture();
-                this.emit('move', EvMove(null));
-            }
-            else if (ev.type == 'mousedown' || ev.type == 'touchstart') {
-            }
-        });
-    }
-    /**
-     * maximize the dialog
-     */
-    maximize() {
-        if (!this.m_maximizable || this.m_maximized) {
-            return;
-        }
-        this._maximize();
-        this.emit('size', EvSize(null));
-    }
-    /**
-     *
-     */
-    _maximize(saveRect = true) {
-        if (saveRect) {
-            this.m_rc_max = this.getBoundingRect(false);
-        }
-        this.addClass('maximized');
-        this.m_maximized = true;
-        this.setStyle({
-            left: undefined,
-            top: undefined,
-            width: undefined,
-            height: undefined,
-        });
-    }
-    /**
-     * minimize the dialog
-     */
-    minimize() {
-        if (!this.m_minimizable || this.m_minimized) {
-            return;
-        }
-        this._minimize();
-        this.emit('size', EvSize(null));
-    }
-    /**
-     *
-     */
-    _minimize(saveRect = true) {
-        if (saveRect) {
-            this.m_rc_min = this.getBoundingRect(false);
-        }
-        this.addClass('minimized');
-        this.m_minimized = true;
-        this.setStyle({
-            //left: undefined,
-            //top: undefined,
-            width: undefined,
-            height: undefined,
-        });
-    }
-    /**
-     * change the dialog title
-     */
-    set title(title) {
-        this.m_title = title;
-        if (this.m_ui_title) {
-            this.m_ui_title.text = title;
-        }
-    }
-    itemWithName(name) {
-        let result = this.dom.querySelector(`[name="${name}"]`);
-        return result ? Component.getElement(result) : null;
-    }
-    getValues() {
-        return this.m_form.getValues();
-    }
-    validate() {
-        return this.m_form.validate();
-    }
-}

package/lib/esm/drag_manager.js

@@ -1,147 +0,0 @@
-/**
-*  ___   ___ __
-*  \  \_/  /  / _
-*   \     /  /_| |_
-*   /  _  \____   _|
-*  /__/ \__\   |_|
-*
-* @file drag_manager.ts
-* @author Etienne Cochard
-*
-* Copyright (c) 2019-2022 R-libre ingenierie
-*
-* Permission is hereby granted, free of charge, to any person obtaining a copy
-* of this software and associated documentation files (the "Software"), to deal
-* in the Software without restriction, including without limitation the rights
-* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
-* of the Software, and to permit persons to whom the Software is furnished to do so,
-* subject to the following conditions:
-* The above copyright notice and this permission notice shall be included in all copies
-* or substantial portions of the Software.
-*
-* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
-* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
-* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
-* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
-* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-**/
-import { x4document } from './x4dom';
-const x_drag_cb = Symbol('x-drag-cb');
-/**
- *
- */
-class DragManager {
-    dragSource;
-    dragGhost;
-    dropTarget;
-    notified;
-    timer;
-    /**
-     *
-     */
-    registerDraggableElement(el) {
-        el.setDomEvent('dragstart', (ev) => {
-            this.dragSource = el;
-            this.dragGhost = el.dom.cloneNode(true);
-            this.dragGhost.classList.add('dragged');
-            x4document.body.appendChild(this.dragGhost);
-            el.addClass('dragging');
-            ev.dataTransfer.setData('text/string', '1');
-            ev.dataTransfer.setDragImage(new Image(), 0, 0);
-            ev.stopPropagation();
-        });
-        el.setDomEvent('drag', (ev) => {
-            this.dragGhost.style.left = ev.pageX + "px";
-            this.dragGhost.style.top = ev.pageY + "px";
-        });
-        el.setDomEvent('dragend', (ev) => {
-            el.removeClass('dragging');
-            this.dragGhost.remove();
-        });
-        el.setAttribute('draggable', "true");
-    }
-    /**
-     *
-     */
-    registerDropTarget(el, cb, filterCB) {
-        const dragEnter = (ev) => {
-            if (!filterCB(this.dragSource)) {
-                console.log('reject ', el);
-                ev.dataTransfer.dropEffect = 'none';
-                return;
-            }
-            console.log('accepted ', el);
-            ev.preventDefault();
-            ev.dataTransfer.dropEffect = 'copy';
-        };
-        const dragOver = (ev) => {
-            //console.log( "dragover", ev.target );
-            if (!filterCB(this.dragSource)) {
-                console.log('reject ', el);
-                ev.dataTransfer.dropEffect = 'none';
-                return;
-            }
-            ev.preventDefault();
-            if (this.dropTarget != el) {
-                this.dropTarget = el;
-                this._startCheck();
-            }
-            if (this.dropTarget) {
-                cb('drag', this.dragSource, { x: ev.pageX, y: ev.pageY });
-            }
-            ev.dataTransfer.dropEffect = 'copy';
-        };
-        const dragLeave = (ev) => {
-            //console.log( "dragleave", ev.target );
-            this.dropTarget = null;
-            ev.preventDefault();
-        };
-        const drop = (ev) => {
-            cb('drop', this.dragSource, { x: ev.pageX, y: ev.pageY });
-            this.dropTarget = null;
-            el.removeClass('drop-over');
-        };
-        el.setDomEvent('dragenter', dragEnter);
-        el.setDomEvent('dragover', dragOver);
-        el.setDomEvent('dragleave', dragLeave);
-        el.setDomEvent('drop', drop);
-        el.setData(x_drag_cb, cb);
-    }
-    _startCheck() {
-        if (this.timer) {
-            clearInterval(this.timer);
-            this._check();
-        }
-        this.timer = setInterval(() => this._check(), 300);
-    }
-    _check() {
-        const leaving = (x) => {
-            x.removeClass('drop-over');
-            const cb = x.getData(x_drag_cb);
-            cb('leave', this.dragSource);
-        };
-        const entering = (x) => {
-            x.addClass('drop-over');
-            const cb = x.getData(x_drag_cb);
-            cb('enter', this.dragSource);
-        };
-        if (this.dropTarget) {
-            if (!this.notified || this.notified != this.dropTarget) {
-                if (this.notified) {
-                    leaving(this.notified);
-                }
-                this.notified = this.dropTarget;
-                entering(this.notified);
-            }
-        }
-        else {
-            if (this.notified) {
-                leaving(this.notified);
-                this.notified = null;
-                clearInterval(this.timer);
-            }
-        }
-    }
-}
-export const dragManager = new DragManager();