x4js 1.4.2

package/lib/tooltips.d.ts

@@ -0,0 +1,42 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file tooltips.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 { Component } from './component';
+/**
+ *
+ */
+export declare class Tooltip extends Component {
+    private m_text;
+    set text(text: any);
+    /** @ignore */
+    render(): void;
+    /**
+    * display the menu at a specific position
+    * @param x
+    * @param y
+    */
+    displayAt(x: number, y: number, align?: string): void;
+}
+export declare type TooltipHandler = (text: string) => void;
+export declare function initTooltips(cb?: TooltipHandler): void;

package/lib/tooltips.js

@@ -0,0 +1,148 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file tooltips.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 { Component } from './component';
+import { Label } from './label';
+import { Icon } from './icon';
+import { isTouchDevice } from './tools';
+let tipTmo;
+let tooltip;
+/**
+ *
+ */
+export class Tooltip extends Component {
+    m_text;
+    set text(text) {
+        this.m_text.text = text;
+    }
+    /** @ignore */
+    render() {
+        this.setClass('@non-maskable', true);
+        this.setContent([
+            new Icon({ icon: 'cls(far fa-circle-info)' }),
+            this.m_text = new Label({ text: 'help' })
+        ]);
+    }
+    /**
+    * display the menu at a specific position
+    * @param x
+    * @param y
+    */
+    displayAt(x, y, align = 'top left') {
+        this.show();
+        let halign = 'l', valign = 't';
+        if (align.indexOf('right') >= 0) {
+            halign = 'r';
+        }
+        if (align.indexOf('bottom') >= 0) {
+            valign = 'b';
+        }
+        // @TODO: this is a minimal overflow problem solution
+        let rc = document.body.getBoundingClientRect(), rm = this.getBoundingRect();
+        if (halign == 'r') {
+            x -= rm.width;
+        }
+        if (valign == 'b') {
+            y -= rm.height;
+        }
+        if ((x + rm.width) > rc.right) {
+            x = rc.right - rm.width;
+        }
+        if ((y + rm.height) > rc.bottom) {
+            y = rc.bottom - rm.height - 17; // default cursor height
+        }
+        this.setStyle({ left: x, top: y });
+    }
+}
+export function initTooltips(cb) {
+    if (isTouchDevice()) {
+        return;
+    }
+    let tipTarget = {
+        target: null,
+        x: 0,
+        y: 0
+    };
+    function handle_mpos(event) {
+        tipTarget.x = event.pageX;
+        tipTarget.y = event.pageY;
+    }
+    function handle_mouse(event) {
+        let target = event.target;
+        let tip = null;
+        tipTarget.x = event.pageX + 10;
+        tipTarget.y = event.pageY + 15;
+        while (target) {
+            tip = target.getAttribute('tip');
+            if (tip) {
+                break;
+            }
+            target = target.parentElement;
+        }
+        if (target == tipTarget.target || (tooltip && target == tooltip.dom)) {
+            return;
+        }
+        if (!target || !tip) {
+            tipTarget.target = null;
+            if (cb) {
+                cb(null);
+            }
+            else {
+                _hideTip();
+            }
+            return;
+        }
+        tipTarget.target = target;
+        if (cb) {
+            cb(null);
+        }
+        else {
+            _hideTip();
+        }
+        if (cb) {
+            cb(tip);
+        }
+        else {
+            tipTmo = setTimeout(() => {
+                if (tooltip === undefined) {
+                    tooltip = new Tooltip({});
+                    document.body.appendChild(tooltip._build());
+                }
+                tooltip.text = tip;
+                tooltip.displayAt(tipTarget.x + 17, tipTarget.y + 17, 'top left');
+            }, 700);
+        }
+    }
+    function _hideTip() {
+        if (tipTmo) {
+            clearTimeout(tipTmo);
+        }
+        if (tooltip) {
+            tooltip.hide();
+        }
+    }
+    document.body.addEventListener('mouseover', handle_mouse);
+    document.body.addEventListener('mouseout', handle_mouse);
+    document.body.addEventListener('mousemove', handle_mpos);
+}

package/lib/treeview.d.ts

@@ -0,0 +1,128 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file treeview.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 { Component, Container, ContainerEventMap, ContainerProps, EvDblClick, EventHandler } from './component';
+import { HtmlString } from './tools';
+import { IconID } from './icon';
+import { VLayout } from './layout';
+import { EvClick, BasicEvent, EvDrag, EvSelectionChange, EvContextMenu } from './x4_events';
+export interface EvExpand extends BasicEvent {
+    node: TreeNode;
+}
+export interface HierarchicalNode {
+    id: number;
+    parent: number;
+    name: string;
+    leaf: boolean;
+}
+export interface TreeNode {
+    id: any;
+    text?: string | HtmlString;
+    icon?: IconID;
+    children?: TreeNode[];
+    open?: boolean;
+    data?: any;
+    parent?: number;
+    cls?: string;
+}
+interface TreeViewEventMap extends ContainerEventMap {
+    click: EvClick;
+    dblclick: EvDblClick;
+    expand: EvExpand;
+    drag: EvDrag;
+    selectionchange: EvSelectionChange;
+    contextMenu: EvContextMenu;
+}
+export interface TreeViewProps extends ContainerProps<TreeViewEventMap> {
+    root: TreeNode;
+    indent?: number;
+    gadgets?: Component[];
+    sort?: boolean;
+    canDragItems?: boolean;
+    renderItem?: (itm: TreeNode) => Component;
+    dblclick?: EventHandler<EvDblClick>;
+    selectionchange?: EventHandler<EvSelectionChange>;
+    drag?: EventHandler<EvDrag>;
+    contextMenu?: EventHandler<EvContextMenu>;
+}
+/**
+ *
+ */
+export declare class TreeView extends VLayout<TreeViewProps, TreeViewEventMap> {
+    m_view: Container;
+    m_container: Container;
+    m_selection: {
+        id: any;
+        el: Component;
+    };
+    constructor(props: TreeViewProps);
+    private _dragEnter;
+    private _dragLeave;
+    private _drop;
+    render(): void;
+    private __update;
+    updateElement(id: any): void;
+    set root(root: TreeNode);
+    /**
+     * same as root = xxx but keep elements open
+     */
+    refreshRoot(root: TreeNode): void;
+    private _buildBranch;
+    private _renderDef;
+    private _makeNode;
+    /**
+     *
+     */
+    forEach(cb: (node: any) => boolean): any;
+    ensureVisible(id: any): void;
+    set selection(id: any);
+    private _getNode;
+    get selection(): any;
+    getNodeWithId(id: any): TreeNode;
+    /**
+     *
+     */
+    private _click;
+    private _handleCtxMenu;
+    /**
+     * constructs a tree node from an array of strings
+     * elements are organized like folders (separator = /)
+     * @example
+     * let root = TreeView.buildFromString( [
+     * 	'this/is/a/final/file'
+     *  'this/is/another/file'
+     * ] );
+     */
+    static buildFromStrings(paths: string[], separator?: string): TreeNode;
+    /**
+     * constructs a tree node from an array of nodes like
+     * node {
+     * 	id: number,
+     *  parent: number,
+     *  name: string
+     * }
+     */
+    static buildFromHierarchy(nodes: HierarchicalNode[], cb?: (node: TreeNode) => void): TreeNode;
+}
+export {};