x4js 1.4.52 → 1.5.0

package/lib/esm/svgcomponent.js

@@ -0,0 +1,422 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file svgcomponent.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 { Component, _x4_unitless } from './component';
+import { isNumber } from "./tools";
+const reNumber = /^-?\d+(\.\d+)?$/;
+// 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;
+    m_style;
+    constructor(tag) {
+        this.m_tag = tag;
+        this.m_attrs = new Map();
+        this.m_style = new Map();
+    }
+    /**
+     * render the item
+     * @returns
+     */
+    render() {
+        return `<${this.m_tag} ${this.renderAttrs()} ${this.renderStyle()}>${this.renderContent()}</${this.m_tag}>`;
+    }
+    /**
+     * change the stroke color
+     * @param color
+     */
+    stroke(color, width) {
+        this.attr('stroke', color);
+        if (width !== undefined) {
+            this.attr('stroke-width', width + 'px');
+        }
+        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;
+    }
+    style(name, value) {
+        if (value === undefined || value === '' || value === undefined) {
+            this.m_style.delete(name);
+            return;
+        }
+        if (!_x4_unitless[name] && (isNumber(value) || reNumber.test(value))) {
+            value = value + 'px';
+        }
+        this.m_style.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() {
+        if (!this.m_attrs.size) {
+            return "";
+        }
+        let result = '';
+        this.m_attrs.forEach((v, k) => {
+            result += ` ${k} = "${v}"`;
+        });
+        return result;
+    }
+    /**
+     *
+     */
+    renderStyle() {
+        if (!this.m_style.size) {
+            return "";
+        }
+        let result = 'style="';
+        this.m_style.forEach((v, k) => {
+            result += `${k}:${v};`;
+        });
+        return result + '"';
+    }
+    /**
+     *
+     */
+    renderContent() {
+        return '';
+    }
+    /**
+     *
+     */
+    clip(id) {
+        this.attr("clip-path", `url(#${id})`);
+        return this;
+    }
+}
+/**
+ *
+ */
+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');
+    }
+}
+/**
+ *
+ */
+class SVGGroup extends SVGItem {
+    m_items;
+    constructor(tag = "g") {
+        super(tag);
+        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 = [];
+    }
+    renderContent() {
+        let result = [];
+        this.m_items.forEach(i => {
+            result.push(i.render());
+        });
+        return result.join('\n');
+    }
+}
+/**
+ *
+ */
+export class SVGPathBuilder extends SVGGroup {
+    static g_clip_id = 1;
+    constructor() {
+        super('');
+    }
+    addClip(x, y, w, h) {
+        const id = 'c-' + SVGPathBuilder.g_clip_id++;
+        const clip = new SVGGroup('clipPath');
+        clip.attr('id', id);
+        clip.rect(x, y, w, h);
+        this.m_items.push(clip);
+        return id;
+    }
+    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.setTag('svg', '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/esm/tabbar.d.ts

@@ -0,0 +1,58 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file tabbar.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 { Component, Container, ContainerEventMap, CProps, EventHandler } from './component';
+import { EvChange } from './x4events';
+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);
+    componentCreated(): void;
+    addPage(page: ITabPage): void;
+    render(): void;
+    select(id: string | null, notify?: boolean): boolean;
+    private _select;
+    get selection(): Component<CProps<import("./component").CEventMap>, import("./component").CEventMap>;
+}
+export {};

package/lib/esm/tabbar.js

@@ -0,0 +1,107 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file tabbar.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 { Container } from './component';
+import { Button } from './button';
+import { EvChange } from './x4events';
+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));
+    }
+    componentCreated() {
+        if (this.m_props.default) {
+            this.select(this.m_props.default, true);
+        }
+    }
+    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, true) });
+            buttons.push(p.btn);
+        });
+        this.setContent(buttons);
+    }
+    select(id, notify = false) {
+        if (!id) {
+            this._select(null, notify);
+            return true;
+        }
+        else {
+            let page = this.m_pages.find(x => x.id === id);
+            if (page) {
+                this._select(page, notify);
+                return true;
+            }
+            return false;
+        }
+    }
+    _select(p, notify) {
+        if (this.m_curPage == p) {
+            return;
+        }
+        if (!this.dom) {
+            this.m_props.default = p.id;
+            return;
+        }
+        if (this.m_curPage) {
+            this.m_curPage.btn.removeClass('selected');
+            if (this.m_curPage.page) {
+                this.m_curPage.page.hide();
+            }
+        }
+        this.m_curPage = p;
+        if (notify) {
+            this.signal('change', EvChange(p ? p.id : null));
+        }
+        if (this.m_curPage) {
+            this.m_curPage.btn.addClass('selected');
+            if (this.m_curPage.page) {
+                this.m_curPage.page.show();
+            }
+        }
+    }
+    get selection() {
+        return this.m_curPage?.page;
+    }
+}

package/lib/esm/tabview.d.ts

@@ -0,0 +1,49 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file tabview.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 { 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 {};