x4js 1.4.2

package/lib/button.js

@@ -0,0 +1,235 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file button.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 { EvClick, EvChange } from './x4_events';
+import { Icon } from './icon';
+import { Label } from './label';
+import { Menu } from './menu';
+import { isFunction } from './tools';
+/**
+ * Base button
+ */
+export class BaseButton extends Component {
+    constructor(props) {
+        super(props);
+        this.setProp('tag', 'button');
+        this.setDomEvent('click', (e) => this._handleClick(e));
+        this.setDomEvent('mousedown', () => { this._startAutoRep(true); });
+        this.setDomEvent('mouseup', () => { this._startAutoRep(false); });
+        this.setDomEvent('keydown', (e) => this._handleKeyDown(e));
+        this.mapPropEvents(props, 'click');
+    }
+    render(props) {
+        let icon = props.icon ? new Icon({ icon: props.icon, cls: 'left', ref: 'l_icon' }) : null;
+        let label = new Label({ flex: 1, text: props.text ?? '', align: props.align, ref: 'label' });
+        let ricon = props.rightIcon ? new Icon({ icon: props.rightIcon, cls: 'right', ref: 'r_icon' }) : null;
+        this.setContent([icon, label, ricon]);
+        this._setTabIndex(props.tabIndex);
+    }
+    /**
+     * starts/stops the autorepeat
+     */
+    _startAutoRep(start) {
+        if (!this.m_props.autoRepeat) {
+            return;
+        }
+        if (start) {
+            // 1st timer 1s
+            this.startTimer('repeat', 700, false, () => {
+                // auto click
+                this.startTimer('repeat', this.m_props.autoRepeat, true, this._sendClick);
+            });
+        }
+        else {
+            this.stopTimer('repeat');
+        }
+    }
+    /**
+     *
+     */
+    _handleKeyDown(ev) {
+        if (!ev.ctrlKey && !ev.shiftKey && !ev.altKey) {
+            if (ev.key == 'Enter' || ev.key == ' ') {
+                this._sendClick();
+                ev.preventDefault();
+                ev.stopPropagation();
+            }
+        }
+    }
+    /**
+     * called by the system on click event
+     */
+    _handleClick(ev) {
+        if (this.m_props.menu) {
+            let menu = new Menu({
+                items: isFunction(this.m_props.menu) ? this.m_props.menu() : this.m_props.menu
+            });
+            let rc = this.getBoundingRect();
+            menu.displayAt(rc.left, rc.bottom, 'tl');
+        }
+        else {
+            this._sendClick();
+        }
+        ev.preventDefault();
+        ev.stopPropagation();
+    }
+    /**
+     * sends a click to the observers
+     */
+    _sendClick() {
+        if (this.m_props.menu) {
+            let menu = new Menu({
+                items: isFunction(this.m_props.menu) ? this.m_props.menu() : this.m_props.menu
+            });
+            let rc = this.getBoundingRect();
+            menu.displayAt(rc.left, rc.bottom, 'tl');
+        }
+        else {
+            this.emit('click', EvClick());
+        }
+    }
+    /**
+     * change the button text
+     * @example
+     * ```ts
+     * let btn = new Button( {
+     * 	text: 'hello'
+     * });
+     *
+     * btn.text = 'world';
+     * ```
+     */
+    set text(text) {
+        this.m_props.text = text;
+        let label = this.itemWithRef('label');
+        if (label) {
+            label.text = text;
+        }
+    }
+    get text() {
+        let label = this.itemWithRef('label');
+        return label?.text;
+    }
+    /**
+     * change the button icon
+     * todo: do nothing if no icon defined at startup
+     *
+     * @example
+     * ```ts
+     * let btn = new Button( {
+     * 	text: 'hello',
+     *  icon: 'close'
+     * });
+     * btn.setIcon( 'open' );
+     * ```
+     */
+    set icon(icon) {
+        this.m_props.icon = icon;
+        let ico = this.itemWithRef('l_icon');
+        if (ico) {
+            ico.icon = icon;
+        }
+        else {
+            this.update();
+        }
+    }
+    get icon() {
+        let ico = this.itemWithRef('l_icon');
+        return ico?.icon;
+    }
+    /**
+     * change the button right icon
+     * todo: do nothing if no icon defined at startup
+     *
+     * @example
+     * ```ts
+     * let btn = new Button( {
+     * 	text: 'hello',
+     *  icon: 'close'
+     * });
+     * btn.setIcon( 'open' );
+     * ```
+     */
+    set rightIcon(icon) {
+        this.m_props.rightIcon = icon;
+        let ico = this.itemWithRef('r_icon');
+        if (ico) {
+            ico.icon = icon;
+        }
+    }
+    get rightIcon() {
+        let ico = this.itemWithRef('l_icon');
+        return ico?.icon;
+    }
+    /**
+     *
+     */
+    set menu(items) {
+        this.m_props.menu = items;
+    }
+}
+// :: BUTTON ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+/**
+ *
+ */
+export class Button extends BaseButton {
+}
+/**
+ *
+ */
+export class ToggleButton extends BaseButton {
+    constructor(props) {
+        super(props);
+    }
+    /**
+     *
+     */
+    render(props) {
+        super.render(props);
+        if (props.checked) {
+            this.addClass('checked');
+            this._updateIcon();
+        }
+    }
+    /**
+     *
+     */
+    _sendClick() {
+        super._sendClick();
+        this.m_props.checked = !this.m_props.checked;
+        this.setClass('checked', this.m_props.checked);
+        this.emit('change', EvChange(this.m_props.checked));
+        this._updateIcon();
+    }
+    _updateIcon() {
+        if (this.m_props.checkedIcon) {
+            const ic = this.m_props.checked ? this.m_props.checkedIcon : this.m_props.icon;
+            let ico = this.itemWithRef('l_icon');
+            if (ico) {
+                ico.icon = ic;
+            }
+        }
+    }
+}

package/lib/calendar.d.ts

@@ -0,0 +1,77 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file calendar.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 { Popup } from './popup';
+import { CProps, ContainerEventMap } from './component';
+import { EvChange, EventCallback } from './x4_events';
+import { VLayout } from './layout';
+interface CalendarEventMap extends ContainerEventMap {
+    change?: EvChange;
+}
+interface CalendarProps extends CProps<CalendarEventMap> {
+    date?: Date;
+    minDate?: Date;
+    maxDate?: Date;
+    change?: EventCallback<EvChange>;
+}
+/**
+ * default calendar control
+ *
+ * fires:
+ * 	EventChange ( value = Date )
+ */
+export declare class Calendar extends VLayout<CalendarProps, CalendarEventMap> {
+    private m_date;
+    constructor(props: CalendarProps);
+    /** @ignore */
+    render(props: CalendarProps): void;
+    /**
+     * select the given date
+     * @param date
+     */
+    private select;
+    /**
+     *
+     */
+    private _next;
+    /**
+     *
+     */
+    private _choose;
+    get date(): Date;
+    set date(date: Date);
+}
+/**
+ * default popup calendar
+ */
+export declare class PopupCalendar extends Popup {
+    m_cal: Calendar;
+    constructor(props: CalendarProps);
+    private _handleClick;
+    /** @ignore */
+    show(modal?: boolean): void;
+    /** @ignore */
+    close(): void;
+}
+export {};

package/lib/calendar.js

@@ -0,0 +1,236 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file calendar.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 { Button } from './button';
+import { Popup } from './popup';
+import { Component, Flex } from './component';
+import { EvChange } from './x4_events';
+import { _tr } from './i18n';
+import { Label } from './label';
+import { HLayout, VLayout } from './layout';
+import { date_hash, date_clone, formatIntlDate } from './tools';
+import { Menu, MenuItem } from './menu';
+/**
+ * default calendar control
+ *
+ * fires:
+ * 	EventChange ( value = Date )
+ */
+export class Calendar extends VLayout {
+    m_date;
+    constructor(props) {
+        super(props);
+        this.mapPropEvents(props, 'change');
+        this.m_date = props.date?.clone() ?? new Date();
+    }
+    /** @ignore */
+    render(props) {
+        let month_start = date_clone(this.m_date);
+        month_start.setDate(1);
+        let day = month_start.getDay();
+        if (day == 0) {
+            day = 7;
+        }
+        month_start.setDate(-day + 1 + 1);
+        let dte = date_clone(month_start);
+        let today = this.m_date.hash();
+        let month_end = date_clone(this.m_date);
+        month_end.setDate(1);
+        month_end.setMonth(month_end.getMonth() + 1);
+        month_end.setDate(0);
+        let end_of_month = date_hash(month_end);
+        let rows = [];
+        // month selector
+        let header = new HLayout({
+            cls: 'month-sel',
+            content: [
+                new Label({
+                    cls: 'month',
+                    text: formatIntlDate(this.m_date, 'O'),
+                    dom_events: {
+                        click: () => this._choose('month')
+                    }
+                }),
+                new Label({
+                    cls: 'year',
+                    text: formatIntlDate(this.m_date, 'Y'),
+                    dom_events: {
+                        click: () => this._choose('year')
+                    }
+                }),
+                new Flex(),
+                new Button({ text: '<', click: () => this._next(false) }),
+                new Button({ text: '>', click: () => this._next(true) })
+            ]
+        });
+        rows.push(header);
+        // calendar part
+        let day_names = [];
+        // day names
+        // empty week num
+        day_names.push(new HLayout({
+            cls: 'weeknum cell',
+        }));
+        for (let d = 0; d < 7; d++) {
+            day_names.push(new Label({
+                cls: 'cell',
+                flex: 1,
+                text: _tr.global.day_short[(d + 1) % 7]
+            }));
+        }
+        rows.push(new HLayout({
+            cls: 'week header',
+            content: day_names
+        }));
+        let cmonth = this.m_date.getMonth();
+        // weeks
+        let first = true;
+        while (date_hash(dte) <= end_of_month) {
+            let days = [
+                new HLayout({ cls: 'weeknum cell', content: new Component({ tag: 'span', content: formatIntlDate(dte, 'w') }) })
+            ];
+            // days
+            for (let d = 0; d < 7; d++) {
+                let cls = 'cell day';
+                if (dte.hash() == today) {
+                    cls += ' today';
+                }
+                if (dte.getMonth() != cmonth) {
+                    cls += ' out';
+                }
+                days.push(new HLayout({
+                    cls,
+                    flex: 1,
+                    content: new Component({
+                        tag: 'span',
+                        content: formatIntlDate(dte, 'd'),
+                    }),
+                    dom_events: {
+                        click: () => this.select(dte.clone())
+                    }
+                }));
+                dte.setDate(dte.getDate() + 1);
+                first = false;
+            }
+            rows.push(new HLayout({
+                cls: 'week',
+                flex: 1,
+                content: days
+            }));
+        }
+        this.setContent(rows);
+    }
+    /**
+     * select the given date
+     * @param date
+     */
+    select(date) {
+        this.m_date = date;
+        this.emit('change', EvChange(date));
+        this.update();
+    }
+    /**
+     *
+     */
+    _next(n) {
+        this.m_date.setMonth(this.m_date.getMonth() + (n ? 1 : -1));
+        this.update();
+    }
+    /**
+     *
+     */
+    _choose(type) {
+        let items = [];
+        if (type == 'month') {
+            for (let m = 0; m < 12; m++) {
+                items.push(new MenuItem({
+                    text: _tr.global.month_long[m],
+                    click: () => { this.m_date.setMonth(m); this.update(); }
+                }));
+            }
+        }
+        else if (type == 'year') {
+            let min = this.m_props.minDate?.getFullYear() ?? 1900;
+            let max = this.m_props.maxDate?.getFullYear() ?? 2037;
+            for (let m = min; m < max; m++) {
+                items.push(new MenuItem({
+                    text: '' + m,
+                    click: () => { this.m_date.setFullYear(m); this.update(); }
+                }));
+            }
+        }
+        let menu = new Menu({
+            items
+        });
+        let rc = this.getBoundingRect();
+        menu.displayAt(rc.left, rc.top);
+    }
+    get date() {
+        return this.m_date;
+    }
+    set date(date) {
+        this.m_date = date;
+        this.update();
+    }
+}
+/**
+ * default popup calendar
+ */
+export class PopupCalendar extends Popup {
+    m_cal;
+    constructor(props) {
+        super({ tabIndex: 1 });
+        this.enableMask(false);
+        this.m_cal = new Calendar(props);
+        this.m_cal.addClass('@fit');
+        this.setContent(this.m_cal);
+    }
+    // binded
+    _handleClick = (e) => {
+        if (!this.dom) {
+            return;
+        }
+        let newfocus = e.target;
+        // child of this: ok
+        if (this.dom.contains(newfocus)) {
+            return;
+        }
+        // menu: ok
+        let dest = Component.getElement(newfocus, MenuItem);
+        if (dest) {
+            return;
+        }
+        this.close();
+    };
+    /** @ignore */
+    show(modal) {
+        document.addEventListener('mousedown', this._handleClick);
+        super.show(modal);
+    }
+    /** @ignore */
+    close() {
+        document.removeEventListener('mousedown', this._handleClick);
+        super.close();
+    }
+}

package/lib/canvas.d.ts

@@ -0,0 +1,88 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file canvas.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 { BasicEvent, EventCallback } from './x4_events';
+interface EvPaint extends BasicEvent {
+    ctx: CanvasPainter;
+}
+declare function EvPaint(ctx: CanvasPainter): EvPaint;
+interface CanvasEventMap extends CEventMap {
+    paint: EvPaint;
+}
+interface CanvasProps extends CProps<CanvasEventMap> {
+    autoClear?: boolean;
+    painter?: PaintHandler;
+    paint: EventCallback<EvPaint>;
+}
+export interface CanvasPainter extends CanvasRenderingContext2D {
+    width: number;
+    height: number;
+    smoothLine(points: any[], path: CanvasPath, move: boolean): void;
+    smoothLineEx(_points: any[], tension: number, numOfSeg: number, path: CanvasPath, move?: boolean, close?: boolean): void;
+    line(x1: number, y1: number, x2: number, y2: number, color: string, lineWidth: number): void;
+    roundRect(x: number, y: number, width: number, height: number, radius: number): void;
+    calcTextSize(text: string, rounded: boolean): {
+        width: number;
+        height: number;
+    };
+    setFontSize(fs: number): void;
+    circle(x: number, y: number, radius: number): void;
+}
+declare type PaintHandler = (ctx: CanvasPainter) => any;
+/**
+ *
+ */
+/**
+ * Standard Canvas
+ */
+export declare class Canvas extends Component<CanvasProps, CanvasEventMap> {
+    private m_iwidth;
+    private m_iheight;
+    private m_scale;
+    private m_canvas;
+    constructor(props: CanvasProps);
+    /** @ignore */
+    render(): void;
+    update(delay?: number): void;
+    /**
+     * scale the whole canvas
+     */
+    scale(scale: number): void;
+    /**
+     * return the internal canvas
+     */
+    get canvas(): Component;
+    /**
+     * redraw the canvas (force a paint)
+     */
+    private $update_rep;
+    redraw(wait?: number): void;
+    /**
+     *
+     */
+    private _paint;
+    protected paint(ctx: CanvasPainter): void;
+}
+export {};