x4js 1.4.4 → 1.4.7

package/lib/menu.js

@@ -0,0 +1,284 @@
+"use strict";
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file menu.ts
+* @author Etienne Cochard
+* @license
+* Copyright (c) 2019-2021 R-libre ingenierie
+*
+* This program is free software; you can redistribute it and/or modify
+* it under the terms of the GNU General Public License as published by
+* the Free Software Foundation; either version 3 of the License, or
+* (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU General Public License for more details.
+*
+* You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
+**/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuBar = exports.MenuItem = exports.Menu = exports.MenuTitle = exports.MenuSeparator = void 0;
+const component_1 = require("./component");
+const x4_events_1 = require("./x4_events");
+const popup_1 = require("./popup");
+const icon_1 = require("./icon");
+const label_1 = require("./label");
+const layout_1 = require("./layout");
+const tools_1 = require("./tools");
+// ============================================================================
+// [MENU]
+// ============================================================================
+class MenuSeparator extends component_1.Component {
+}
+exports.MenuSeparator = MenuSeparator;
+class MenuTitle extends label_1.Label {
+}
+exports.MenuTitle = MenuTitle;
+class Menu extends popup_1.Popup {
+    static watchCount = 0;
+    static rootMenu = null;
+    m_subMenu;
+    m_opener;
+    m_virtual;
+    m_lock;
+    constructor(props, opener) {
+        super(props);
+        this.addClass('@shadow');
+        this.m_opener = opener;
+        this.m_virtual = false;
+        this.m_lock = 0;
+        this.enableMask(false);
+    }
+    lock(yes) {
+        this.m_lock += yes ? 1 : -1;
+    }
+    setVirtual() {
+        this.m_virtual = true;
+    }
+    setSubMenu(menu) {
+        this.m_subMenu = menu;
+    }
+    hideSubMenu() {
+        if (this.m_subMenu) {
+            this.m_subMenu.m_opener._close();
+            this.m_subMenu.hide();
+            this.m_subMenu = null;
+        }
+    }
+    /** @ignore */
+    render(props) {
+        this.setContent(props.items);
+    }
+    /**
+    *
+    */
+    show() {
+        if (!this.m_virtual) {
+            Menu._addMenu(this);
+        }
+        super.show();
+    }
+    /**
+     *
+    */
+    close() {
+        if (!this.dom && !this.m_virtual) {
+            return;
+        }
+        if (this.m_opener) {
+            this.m_opener._close();
+        }
+        if (this.m_subMenu) {
+            this.m_subMenu.close();
+            this.m_subMenu = null;
+        }
+        super.close();
+        Menu._removeMenu();
+    }
+    /**
+     *
+     */
+    clear() {
+        this.m_props.items = [];
+    }
+    /**
+    * @internal
+    */
+    static _addMenu(menu) {
+        //console.log( 'addmenu' );
+        if (Menu.watchCount == 0) {
+            Menu.rootMenu = menu;
+            document.addEventListener('mousedown', Menu._mouseWatcher);
+        }
+        Menu.watchCount++;
+    }
+    static _removeMenu() {
+        //console.log( 'removemenu' );
+        console.assert(Menu.watchCount > 0);
+        Menu.watchCount--;
+        if (Menu.watchCount == 0) {
+            document.removeEventListener('mousedown', Menu._mouseWatcher);
+        }
+    }
+    static _mouseWatcher(ev) {
+        if (ev.defaultPrevented) {
+            return;
+        }
+        let elOn = ev.target;
+        while (elOn) {
+            // is mouse on a menu
+            let mouseon = component_1.Component.getElement(elOn);
+            if (mouseon && (mouseon instanceof Menu /*|| elOn.$el instanceof Menubar*/)) {
+                return;
+            }
+            elOn = elOn.parentElement;
+        }
+        Menu._discardAll();
+    }
+    /**
+    * hide all the visible menus
+    */
+    static _discardAll() {
+        if (Menu.rootMenu) {
+            Menu.rootMenu.close();
+            Menu.rootMenu = null;
+        }
+    }
+    displayAt(...args) {
+        if (!this.m_lock) {
+            Menu._discardAll();
+        }
+        let x, y, align, offset;
+        if (args.length == 1) {
+            ({ x, y } = (0, tools_1.getMousePos)(args[0], true));
+        }
+        else {
+            [x, y, align, offset] = args;
+        }
+        if (!align) {
+            align = 'top left';
+        }
+        super.displayAt(x, y, align, offset);
+    }
+}
+exports.Menu = Menu;
+class MenuItem extends component_1.Component {
+    m_menu;
+    m_isOpen;
+    constructor(a, b) {
+        if ((0, tools_1.isString)(a)) {
+            super({
+                text: a,
+                click: b
+            });
+        }
+        else {
+            super(a);
+        }
+        this.mapPropEvents(this.m_props, 'click');
+        this.m_menu = null;
+        this.m_isOpen = false;
+        this.setDomEvent('mousedown', (e) => this._mousedown(e));
+        this.setDomEvent('click', (e) => this._click(e));
+    }
+    /** @ignore */
+    render(props) {
+        let icon = props.icon ?? 0x20;
+        let text = props.text;
+        if (props.checked !== undefined) {
+            icon = props.checked ? 'cls(far fa-check)' : 0; //todo: use stylesheet
+        }
+        if (this.isPopup) {
+            this.addClass('@popup-menu-item');
+        }
+        if (!text && !icon) {
+            this.addClass('@separator');
+        }
+        if (props.cls) {
+            this.addClass(props.cls);
+        }
+        this.setProp('tag', 'a');
+        //@bug: do not kill focus on click 
+        //	this.setAttribute( 'tabindex', '0' );
+        this.setContent([
+            icon < 0 ? null : new icon_1.Icon({ icon }),
+            new label_1.Label({ flex: 1, text })
+        ]);
+    }
+    get id() {
+        return this.m_props.itemId;
+    }
+    get text() {
+        return this.m_props.text;
+    }
+    get isPopup() {
+        return !!this.m_props.items;
+    }
+    _close() {
+        this.removeClass('@opened');
+        this.m_isOpen = false;
+    }
+    _click(ev) {
+        if (!this.isPopup) {
+            this.emit('click', (0, x4_events_1.EvClick)());
+            Menu._discardAll();
+        }
+    }
+    _mousedown(ev) {
+        if (this.isPopup) {
+            if (!this.m_menu) {
+                this.m_menu = new Menu({ items: this.m_props.items }, this);
+            }
+            let doClose = this.m_isOpen;
+            // if parent menu has an opened sub menu, close it
+            let parent_menu = component_1.Component.getElement(this.dom, Menu);
+            if (parent_menu) {
+                parent_menu.hideSubMenu();
+            }
+            if (!doClose) {
+                if (parent_menu) {
+                    parent_menu.setSubMenu(this.m_menu);
+                }
+                this.m_isOpen = true;
+                let rc = this.getBoundingRect();
+                this.m_menu.lock(true);
+                if (parent_menu) {
+                    // standard menu
+                    this.m_menu.displayAt(rc.right, rc.top);
+                }
+                else {
+                    // menubar / menubutton
+                    this.m_menu.displayAt(rc.left, rc.bottom);
+                }
+                this.m_menu.lock(false);
+                this.addClass('@opened');
+            }
+            ev.preventDefault();
+        }
+    }
+}
+exports.MenuItem = MenuItem;
+/**
+ *
+ */
+class MenuBar extends layout_1.HLayout {
+    m_items;
+    constructor(props, opener) {
+        super(props);
+        console.assert(false, 'not imp');
+        this.addClass('@shadow');
+        this.m_items = props.items;
+    }
+    /** @ignore */
+    render() {
+        this.setContent(this.m_items);
+    }
+}
+exports.MenuBar = MenuBar;

package/lib/messagebox.js

@@ -1,3 +1,4 @@
+"use strict";
 /**
 *  ___   ___ __
 *  \  \_/  /  / _
@@ -22,13 +23,15 @@
 *
 * You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
 **/
-import { Dialog } from './dialog';
-import { asap, isHtmlString, isString } from './tools';
-import { HLayout } from './layout';
-import { Icon } from './icon';
-import { Label } from './label';
-import { TextEdit } from './textedit';
-export class MessageBox extends Dialog {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PromptDialogBox = exports.MessageBox = void 0;
+const dialog_1 = require("./dialog");
+const tools_1 = require("./tools");
+const layout_1 = require("./layout");
+const icon_1 = require("./icon");
+const label_1 = require("./label");
+const textedit_1 = require("./textedit");
+class MessageBox extends dialog_1.Dialog {
     m_label;
     constructor(props) {
         // remove overloaded elements from DialogBoxProps
@@ -38,11 +41,11 @@ export class MessageBox extends Dialog {
         props.buttons = undefined;
         super(props);
         let msg = props.message;
-        this.form.updateContent(new HLayout({
+        this.form.updateContent(new layout_1.HLayout({
             style: { padding: 8 },
             content: [
-                new Icon({ cls: 'icon', icon }),
-                this.m_label = new Label({ cls: 'text', text: msg, multiline: true })
+                new icon_1.Icon({ cls: 'icon', icon }),
+                this.m_label = new label_1.Label({ cls: 'text', text: msg, multiline: true })
             ]
         }), buttons);
         this.on('btnClick', (ev) => {
@@ -50,7 +53,7 @@ export class MessageBox extends Dialog {
             if (!this.m_props.click) {
                 return;
             }
-            asap(() => {
+            (0, tools_1.asap)(() => {
                 this.m_props.click(ev.button);
             });
         });
@@ -63,7 +66,7 @@ export class MessageBox extends Dialog {
      */
     static show(props) {
         let msg;
-        if (isString(props) || isHtmlString(props)) {
+        if ((0, tools_1.isString)(props) || (0, tools_1.isHtmlString)(props)) {
             msg = new MessageBox({ message: props, click: () => { } });
         }
         else {
@@ -85,7 +88,8 @@ export class MessageBox extends Dialog {
         }).show();
     }
 }
-export class PromptDialogBox extends Dialog {
+exports.MessageBox = MessageBox;
+class PromptDialogBox extends dialog_1.Dialog {
     m_edit;
     constructor(props) {
         // remove overloaded elements from DialogBoxProps
@@ -94,14 +98,14 @@ export class PromptDialogBox extends Dialog {
         props.buttons = undefined;
         props.width = props.width ?? 500;
         super(props);
-        this.form.updateContent(new HLayout({
+        this.form.updateContent(new layout_1.HLayout({
             cls: 'panel',
             content: [
                 //icon ? new Icon({
                 //	cls: 'icon',
                 //	icon: icon
                 //}) : null,
-                this.m_edit = new TextEdit({
+                this.m_edit = new textedit_1.TextEdit({
                     flex: 1,
                     autoFocus: true,
                     label: props.message,
@@ -114,7 +118,7 @@ export class PromptDialogBox extends Dialog {
                 if (ev.button === 'ok') {
                     // no prevent default -> always close the messagebox
                     // asap to allow
-                    asap(() => {
+                    (0, tools_1.asap)(() => {
                         this.m_props.click(this.m_edit.value);
                     });
                 }
@@ -129,7 +133,7 @@ export class PromptDialogBox extends Dialog {
      */
     static show(props, inputCallback) {
         let msg;
-        if (isString(props) || isHtmlString(props)) {
+        if ((0, tools_1.isString)(props) || (0, tools_1.isHtmlString)(props)) {
             msg = new PromptDialogBox({ message: props, click: inputCallback });
         }
         else {
@@ -139,3 +143,4 @@ export class PromptDialogBox extends Dialog {
         return msg;
     }
 }
+exports.PromptDialogBox = PromptDialogBox;

package/lib/panel.js

@@ -1,3 +1,4 @@
+"use strict";
 /**
 *  ___   ___ __
 *  \  \_/  /  / _
@@ -22,26 +23,28 @@
 *
 * You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
 **/
-import { Component } from './component';
-import { VLayout, HLayout } from './layout';
-import { Label } from './label';
-import { Icon } from './icon';
-export class Panel extends VLayout {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Panel = void 0;
+const component_1 = require("./component");
+const layout_1 = require("./layout");
+const label_1 = require("./label");
+const icon_1 = require("./icon");
+class Panel extends layout_1.VLayout {
     m_ui_title;
     m_ui_body;
     constructor(props) {
         super(props);
         const sens = props?.sens == 'horizontal' ? '@hlayout' : '@vlayout';
         //todo: cannot be called twice do to content overload
-        this.m_ui_title = new Label({ cls: 'title', text: this.m_props.title });
-        this.m_ui_body = new Component({ cls: 'body ' + sens, content: this.m_props.content });
+        this.m_ui_title = new label_1.Label({ cls: 'title', text: this.m_props.title });
+        this.m_ui_body = new component_1.Component({ cls: 'body ' + sens, content: this.m_props.content });
     }
     /** @ignore */
     render() {
         const gadgets = this.m_props.gadgets ?? [];
-        const icon = this.m_props.icon ? new Icon({ icon: this.m_props.icon }) : null;
+        const icon = this.m_props.icon ? new icon_1.Icon({ icon: this.m_props.icon }) : null;
         super.setContent([
-            new HLayout({
+            new layout_1.HLayout({
                 cls: 'title',
                 content: [
                     icon,
@@ -59,3 +62,4 @@ export class Panel extends VLayout {
         this.m_ui_title.text = text;
     }
 }
+exports.Panel = Panel;

package/lib/popup.d.ts

@@ -0,0 +1,71 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file popup.ts
+* @author Etienne Cochard
+* @license
+* Copyright (c) 2019-2021 R-libre ingenierie
+*
+* This program is free software; you can redistribute it and/or modify
+* it under the terms of the GNU General Public License as published by
+* the Free Software Foundation; either version 3 of the License, or
+* (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU General Public License for more details.
+*
+* You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
+**/
+import { Container, CProps, ContainerEventMap, EvSize } from './component';
+import { Point } from './tools';
+import { BasicEvent } from './x4_events';
+export interface EvMove extends BasicEvent {
+    pos: Point;
+}
+export declare function EvMove(pos: Point): EvMove;
+export interface PopupEventMap extends ContainerEventMap {
+    size: EvSize;
+    move: EvMove;
+}
+export interface PopupProps<E extends PopupEventMap = PopupEventMap> extends CProps<E> {
+    sizable?: boolean;
+}
+/**
+ * base class for all popup elements
+ */
+export declare class Popup<P extends PopupProps = PopupProps, E extends PopupEventMap = PopupEventMap> extends Container<P, E> {
+    protected m_ui_mask: HTMLElement;
+    private m_hasMask;
+    static modal_stack: HTMLElement[];
+    constructor(props: P);
+    enableMask(enable?: boolean): void;
+    /**
+     * display the popup on screen
+     */
+    show(modal?: boolean): void;
+    centerOnScreen(): void;
+    /**
+    * display the popup at a specific position
+    * @param x
+    * @param y
+    */
+    displayAt(x: number, y: number, align?: string, offset?: {
+        x: any;
+        y: any;
+    }): void;
+    /**
+     * close the popup
+     */
+    close(): void;
+    componentCreated(): void;
+    /**
+     * resize for 'all' resize attribute
+     */
+    private _mouseResize;
+}