x4js 1.4.2

package/lib/svgcomponent.js

@@ -0,0 +1,350 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file svgcomponent.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';
+// degrees to radian
+function d2r(d) {
+    return d * Math.PI / 180.0;
+}
+// polar to cartesian
+function p2c(x, y, r, deg) {
+    const rad = d2r(deg);
+    return {
+        x: x + r * Math.cos(rad),
+        y: y + r * Math.sin(rad)
+    };
+}
+function num(x) {
+    return Math.round(x * 1000) / 1000;
+}
+function clean(a, ...b) {
+    // just round number values to 3 digits
+    b = b.map(v => {
+        if (typeof v === 'number' && isFinite(v)) {
+            return num(v);
+        }
+        return v;
+    });
+    return String.raw(a, ...b);
+}
+/**
+ *
+ */
+class SVGItem {
+    m_tag;
+    m_attrs;
+    constructor(tag) {
+        this.m_tag = tag;
+        this.m_attrs = new Map();
+    }
+    /**
+     * render the item
+     * @returns
+     */
+    render() {
+        return `<${this.m_tag} ${this.renderAttrs()}>${this.renderContent()}</${this.m_tag}>`;
+    }
+    /**
+     * change the stroke color
+     * @param color
+     */
+    stroke(color) {
+        this.attr('stroke', color);
+        return this;
+    }
+    /**
+     * change the stroke width
+     * @param width
+     */
+    strokeWidth(width) {
+        this.attr('stroke-width', width + 'px');
+        return this;
+    }
+    /**
+     * change the fill color
+     * @param color
+     */
+    fill(color) {
+        this.attr('fill', color);
+        return this;
+    }
+    /**
+     * define a new attribute
+     * @param name attibute name
+     * @param value attribute value
+     * @returns this
+     */
+    attr(name, value) {
+        this.m_attrs.set(name, value);
+        return this;
+    }
+    /**
+     * add a class
+     * @param name class name to add
+     */
+    class(name) {
+        let c = this.m_attrs.get('class');
+        this.m_attrs.set('class', (c ?? '' + ' ' + name).trim());
+        return this;
+    }
+    /**
+     *
+     */
+    renderAttrs() {
+        let result = '';
+        this.m_attrs.forEach((v, k) => {
+            result += ` ${k} = "${v}"`;
+        });
+        return result;
+    }
+    renderContent() {
+        return '';
+    }
+}
+/**
+ *
+ */
+class SVGPath extends SVGItem {
+    m_path;
+    constructor() {
+        super('path');
+        this.m_path = '';
+    }
+    renderAttrs() {
+        this.attr('d', this.m_path);
+        return super.renderAttrs();
+    }
+    /**
+     * move the current pos
+     * @param x new pos x
+     * @param y new pos y
+     * @returns this
+     */
+    moveTo(x, y) {
+        this.m_path += clean `M${x},${y}`;
+        return this;
+    }
+    /**
+     * draw aline to the given point
+     * @param x end x
+     * @param y end y
+     * @returns this
+     */
+    lineTo(x, y) {
+        this.m_path += clean `L${x},${y}`;
+        return this;
+    }
+    /**
+     * close the currentPath
+     */
+    closePath() {
+        this.m_path += 'Z';
+        return this;
+    }
+    /**
+     * draw an arc
+     * @param x center x
+     * @param y center y
+     * @param r radius
+     * @param start angle start in degrees
+     * @param end angle end in degrees
+     * @returns this
+     */
+    arc(x, y, r, start, end) {
+        const st = p2c(x, y, r, start - 90);
+        const en = p2c(x, y, r, end - 90);
+        const flag = end - start <= 180 ? "0" : "1";
+        this.m_path += clean `M${st.x},${st.y}A${r},${r} 0 ${flag} 1 ${en.x},${en.y}`;
+        return this;
+    }
+}
+/**
+ *
+ */
+class SVGText extends SVGItem {
+    m_text;
+    constructor(x, y, txt) {
+        super('text');
+        this.m_text = txt;
+        this.attr('x', num(x) + '');
+        this.attr('y', num(y) + '');
+    }
+    font(font) {
+        this.attr('font-family', font);
+        return this;
+    }
+    fontSize(size) {
+        this.attr('font-size', size + '');
+        return this;
+    }
+    fontWeight(weight) {
+        this.attr('font-weight', weight);
+        return this;
+    }
+    textAlign(align) {
+        let al;
+        switch (align) {
+            case 'left':
+                al = 'start';
+                break;
+            case 'center':
+                al = 'middle';
+                break;
+            case 'right':
+                al = 'end';
+                break;
+            default: return this;
+        }
+        this.attr('text-anchor', al);
+        return this;
+    }
+    verticalAlign(align) {
+        let al;
+        switch (align) {
+            case 'top':
+                al = 'hanging';
+                break;
+            case 'center':
+                al = 'middle';
+                break;
+            case 'bottom':
+                al = 'baseline';
+                break;
+            default: return;
+        }
+        this.attr('alignment-baseline', al);
+        return this;
+    }
+    renderContent() {
+        return this.m_text;
+    }
+}
+/**
+ *
+ */
+class SVGShape extends SVGItem {
+    constructor(tag) {
+        super(tag);
+    }
+}
+/**
+ *
+ */
+class SVGGradient extends SVGItem {
+    static g_id = 1;
+    m_id;
+    m_stops;
+    constructor(x1, y1, x2, y2) {
+        super('linearGradient');
+        this.m_id = 'gx-' + SVGGradient.g_id;
+        this.attr('id', this.m_id);
+        this.attr('x1', num(x1) + '');
+        this.attr('x2', num(x2) + '');
+        this.attr('y1', num(y1) + '');
+        this.attr('y2', num(y2) + '');
+        this.m_stops = [];
+        SVGGradient.g_id++;
+    }
+    get id() {
+        return 'url(#' + this.m_id + ')';
+    }
+    addStop(offset, color) {
+        this.m_stops.push({ offset, color });
+        return this;
+    }
+    renderContent() {
+        const result = [];
+        this.m_stops.forEach(s => {
+            result.push(`<stop offset="${s.offset}%" stop-color="${s.color}"></stop>`);
+        });
+        return result.join('\n');
+    }
+}
+/**
+ *
+ */
+export class SVGPathBuilder {
+    m_items;
+    constructor() {
+        this.m_items = [];
+    }
+    path() {
+        const path = new SVGPath();
+        this.m_items.push(path);
+        return path;
+    }
+    text(x, y, txt) {
+        const text = new SVGText(x, y, txt);
+        this.m_items.push(text);
+        return text;
+    }
+    ellipse(x, y, r1, r2 = r1) {
+        const shape = new SVGShape('ellipse');
+        shape.attr('cx', num(x) + '');
+        shape.attr('cy', num(y) + '');
+        shape.attr('rx', num(r1) + '');
+        shape.attr('ry', num(r2) + '');
+        this.m_items.push(shape);
+        return shape;
+    }
+    rect(x, y, w, h) {
+        const shape = new SVGShape('rect');
+        shape.attr('x', num(x) + '');
+        shape.attr('y', num(y) + '');
+        shape.attr('width', num(w) + '');
+        shape.attr('height', num(h) + '');
+        this.m_items.push(shape);
+        return shape;
+    }
+    gradient(x1, y1, x2, y2) {
+        const grad = new SVGGradient(x1, y1, x2, y2);
+        this.m_items.push(grad);
+        return grad;
+    }
+    /**
+     * clear
+     */
+    clear() {
+        this.m_items = [];
+    }
+    render() {
+        let result = [];
+        this.m_items.forEach(i => {
+            result.push(i.render());
+        });
+        return result.join('\n');
+    }
+}
+export class SVGComponent extends Component {
+    constructor(props) {
+        super(props);
+        this.setProp('tag', 'svg');
+        this.setProp('ns', 'http://www.w3.org/2000/svg');
+        this.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+        this.setAttributes({
+            viewBox: props.viewBox,
+        });
+        this.setContent(props.path);
+    }
+}

package/lib/tabbar.d.ts

@@ -0,0 +1,41 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file tabbar.ts
+* @author Etienne Cochard
+* @copyright (c) 2021 R-libre ingenierie, all rights reserved.
+*
+* @description Tab
+**/
+import { Component, Container, ContainerEventMap, CProps, EventHandler } from './component';
+import { EvChange } from './x4_events';
+import { IconID } from './icon.js';
+interface TabBarEventMap extends ContainerEventMap {
+    change: EvChange;
+}
+interface TabBarProps extends CProps<TabBarEventMap> {
+    pages?: ITabPage[];
+    default?: string;
+    vertical?: boolean;
+    change: EventHandler<EvChange>;
+}
+export interface ITabPage {
+    id: string;
+    title?: string;
+    icon?: IconID;
+    page: Component;
+}
+export declare class TabBar extends Container<TabBarProps, TabBarEventMap> {
+    private m_pages;
+    private m_curPage;
+    constructor(props: TabBarProps);
+    addPage(page: ITabPage): void;
+    render(): void;
+    select(id: string): void;
+    private _select;
+}
+export {};

package/lib/tabbar.js

@@ -0,0 +1,66 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file tabbar.ts
+* @author Etienne Cochard
+* @copyright (c) 2021 R-libre ingenierie, all rights reserved.
+*
+* @description Tab
+**/
+import { Container } from './component';
+import { Button } from './button';
+import { EvChange } from './x4_events';
+export class TabBar extends Container {
+    m_pages;
+    m_curPage;
+    constructor(props) {
+        super(props);
+        this.m_pages = [];
+        this.m_curPage = null;
+        this.mapPropEvents(props, 'change');
+        if (props.vertical) {
+            this.addClass('@vlayout');
+        }
+        else {
+            this.addClass('@hlayout');
+        }
+        this.m_props.pages?.forEach(p => this.addPage(p));
+        if (this.m_props.default) {
+            this.select(this.m_props.default);
+        }
+    }
+    addPage(page) {
+        this.m_pages.push({ ...page });
+        this._updateContent();
+    }
+    render() {
+        let buttons = [];
+        this.m_pages.forEach(p => {
+            p.btn = new Button({ cls: p === this.m_curPage ? 'selected' : '', text: p.title, icon: p.icon, click: () => this._select(p) });
+            buttons.push(p.btn);
+        });
+        this.setContent(buttons);
+    }
+    select(id) {
+        let page = this.m_pages.find(x => x.id === id);
+        if (page) {
+            this._select(page);
+        }
+    }
+    _select(p) {
+        if (this.dom && this.m_curPage && this.m_curPage.page) {
+            this.m_curPage.btn.removeClass('selected');
+            this.m_curPage.page.hide();
+        }
+        this.m_curPage = p;
+        this.signal('change', EvChange(p ? p.id : null));
+        if (this.dom && this.m_curPage && this.m_curPage.page) {
+            this.m_curPage.btn.addClass('selected');
+            this.m_curPage.page.show();
+        }
+    }
+}

package/lib/tabview.d.ts

@@ -0,0 +1,45 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file tabview.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 { CardView, CardViewProps, ICardViewItem } from './cardview';
+import { MenuItem } from './menu';
+interface TabProps extends CardViewProps {
+    tab_selector?: boolean;
+    menu?: MenuItem;
+}
+/**
+ * Standard TabView class
+ */
+export declare class TabView extends CardView<TabProps> {
+    protected m_tab_selector: boolean;
+    protected m_menu: MenuItem;
+    constructor(props: TabProps);
+    /** @ignore */
+    render(): void;
+    protected _updateSelector(): void;
+    protected _prepareSelector(card: ICardViewItem): Component;
+    protected _preparePage(page: Component): void;
+}
+export {};

package/lib/tabview.js

@@ -0,0 +1,79 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file tabview.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 { HLayout } from './layout';
+import { Button } from './button';
+import { CardView } from './cardview';
+/**
+ * Standard TabView class
+ */
+export class TabView extends CardView {
+    m_tab_selector;
+    m_menu;
+    constructor(props) {
+        super(props);
+        this.m_tab_selector = props.tab_selector ? true : false;
+        this.m_menu = props.menu;
+        this.addClass('@vlayout');
+    }
+    /** @ignore */
+    render() {
+        let tabs = [];
+        let pages = [];
+        if (this.m_menu) {
+            this.m_menu.addClass('@button @tab-btn');
+            this.m_menu.removeClass('@menu-item');
+            tabs.push(this.m_menu);
+        }
+        this.m_cards.forEach((p) => {
+            tabs.push(p.selector);
+            if (!(p.page instanceof Function)) {
+                pages.push(p.page);
+            }
+        });
+        if (this.m_tab_selector) {
+            pages.unshift(new HLayout({
+                cls: '@tab-switch',
+                content: tabs
+            }));
+        }
+        this.setContent(pages);
+    }
+    _updateSelector() {
+    }
+    _prepareSelector(card) {
+        return new Button({
+            cls: '@tab-btn',
+            text: card.title,
+            icon: card.icon,
+            click: () => { this.switchTo(card.name); }
+        });
+    }
+    _preparePage(page) {
+        super._preparePage(page);
+        if (!page.dom) {
+            this.appendChild(page);
+        }
+    }
+}

package/lib/textarea.d.ts

@@ -0,0 +1,59 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file textarea.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, CProps, CEventMap } from './component';
+import { EvChange, EventCallback } from './x4_events';
+interface TextAreaEventMap extends CEventMap {
+    change: EvChange;
+}
+export interface TextAreaProps extends CProps {
+    text?: string;
+    readOnly?: boolean;
+    tabIndex?: number;
+    placeHolder?: string;
+    name?: string;
+    rows?: number;
+    autoGrow?: boolean;
+    autoFocus?: boolean;
+    spellcheck?: boolean;
+    change?: EventCallback<EvChange>;
+}
+export declare class TextArea extends Component<TextAreaProps, TextAreaEventMap> {
+    constructor(props: TextAreaProps);
+    /** @ignore */
+    render(props: TextAreaProps): void;
+    private _change;
+    componentCreated(): void;
+    get value(): string;
+    set value(t: string);
+    private _calcHeight;
+    private _updateHeight;
+    /**
+     * insert text at cursor position
+     */
+    insertText(text: any): void;
+    getStoreValue(): any;
+    setStoreValue(value: any): void;
+}
+export {};