x4js 1.4.2

package/lib/styles.d.ts

@@ -0,0 +1,81 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file styles.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/>.
+**/
+/**
+ *  -- [ @STYLESHEET ] -----------------------------------------------------------------
+ */
+export declare class Stylesheet {
+    private m_sheet;
+    private m_rules;
+    constructor();
+    /**
+     * add a new rule to the style sheet
+     * @param {string} name - internal rule name
+     * @param {string} definition - css definition of the rule
+     * @example
+     * setRule('xbody', "body { background-color: #ff0000; }" );
+     */
+    setRule(name: string, definition: any): void;
+    /**
+     * return the style variable value
+     * @param name - variable name without '--'
+     * @example
+     * ```
+     * let color = Component.getCss( ).getVar( 'button-color' );
+     * ```
+     */
+    static getVar(name: string): any;
+    static guid: number;
+    static doc_style: CSSStyleDeclaration;
+}
+/**
+ *  -- [ @CSSPARSER ] -----------------------------------------------------------------
+ *
+ * adaptation of jss-for-node-js
+ */
+export declare class CSSParser {
+    private result;
+    parse(css: any): string;
+    static mk_string(rules: any): string;
+    private parse_json;
+    private makePropertyName;
+    private makeSelectorName;
+    addProperty(scope: string, property: string, value: any): void;
+}
+export declare class ComputedStyle {
+    m_style: CSSStyleDeclaration;
+    constructor(style: CSSStyleDeclaration);
+    /**
+     * return the raw value
+     */
+    value(name: string): string;
+    /**
+     * return the interpreted value
+     */
+    parse(name: string): number;
+    /**
+     *
+     */
+    get style(): CSSStyleDeclaration;
+}

package/lib/styles.js

@@ -0,0 +1,262 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file styles.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 { pascalCase, isString, isArray } from "./tools";
+/**
+ *  -- [ @STYLESHEET ] -----------------------------------------------------------------
+ */
+export class Stylesheet {
+    m_sheet;
+    m_rules = new Map();
+    constructor() {
+        function getStyleSheet(name) {
+            for (let i = 0; i < document.styleSheets.length; i++) {
+                let sheet = document.styleSheets[i];
+                if (sheet.title === name) {
+                    return sheet;
+                }
+            }
+        }
+        this.m_sheet = getStyleSheet('@dynamic-css');
+        if (!this.m_sheet) {
+            let dom = document.createElement('style');
+            dom.setAttribute('id', '@dynamic-css');
+            document.head.appendChild(dom);
+            this.m_sheet = dom.sheet;
+        }
+    }
+    /**
+     * add a new rule to the style sheet
+     * @param {string} name - internal rule name
+     * @param {string} definition - css definition of the rule
+     * @example
+     * setRule('xbody', "body { background-color: #ff0000; }" );
+     */
+    setRule(name, definition) {
+        if (isString(definition)) {
+            let index = this.m_rules.get(name);
+            if (index !== undefined) {
+                this.m_sheet.deleteRule(index);
+            }
+            else {
+                index = this.m_sheet.cssRules.length;
+            }
+            this.m_rules.set(name, this.m_sheet.insertRule(definition, index));
+        }
+        else {
+            let idx = 1;
+            for (let r in definition) {
+                let rule = r + " { ", css = definition[r];
+                for (let i in css) {
+                    let values = css[i]; // this is an array !
+                    for (let j = 0; j < values.length; j++) {
+                        rule += i + ": " + values[j] + "; ";
+                    }
+                }
+                rule += '}';
+                console.log(rule);
+                this.setRule(name + '--' + idx, rule);
+                idx++;
+            }
+        }
+    }
+    /**
+     * return the style variable value
+     * @param name - variable name without '--'
+     * @example
+     * ```
+     * let color = Component.getCss( ).getVar( 'button-color' );
+     * ```
+     */
+    static getVar(name) {
+        if (!Stylesheet.doc_style) {
+            Stylesheet.doc_style = getComputedStyle(document.documentElement);
+        }
+        return Stylesheet.doc_style.getPropertyValue('--' + name); // #999999
+    }
+    static guid = 1;
+    static doc_style;
+}
+/**
+ *  -- [ @CSSPARSER ] -----------------------------------------------------------------
+ *
+ * adaptation of jss-for-node-js
+ */
+export class CSSParser {
+    result = {};
+    parse(css) {
+        this.result = {};
+        this.parse_json('', css);
+        return CSSParser.mk_string(this.result);
+    }
+    static mk_string(rules) {
+        // output result:	
+        let ret = '';
+        for (let a in rules) {
+            let css = rules[a];
+            ret += a + " { ";
+            for (let i in css) {
+                let values = css[i]; // this is an array !
+                for (let j = 0; j < values.length; j++) {
+                    ret += i + ": " + values[j] + "; ";
+                }
+            }
+            ret += "}\n";
+        }
+        return ret;
+    }
+    parse_json(scope, css) {
+        if (scope && !this.result[scope]) {
+            this.result[scope] = {};
+        }
+        for (let property in css) {
+            let value = css[property];
+            if (isArray(value)) {
+                let values = value;
+                for (let i = 0; i < values.length; i++) {
+                    this.addProperty(scope, property, values[i]);
+                }
+            }
+            /*else if (value instanceof Color) {
+                this.addProperty(scope, property, value.toString());
+            }*/
+            else {
+                switch (typeof (value)) {
+                    case "number": {
+                        this.addProperty(scope, property, value);
+                        break;
+                    }
+                    case "string": {
+                        this.addProperty(scope, property, value);
+                        break;
+                    }
+                    case "object": {
+                        this.parse_json(this.makeSelectorName(scope, property), value);
+                        break;
+                    }
+                    default: {
+                        console.error("ignoring unknown type " + typeof (value) + " in property " + property);
+                        break;
+                    }
+                }
+            }
+        }
+    }
+    makePropertyName(n) {
+        return pascalCase(n);
+    }
+    makeSelectorName(scope, name) {
+        let snames = [];
+        let names = name.split(/\s*,\s*/);
+        let scopes = scope.split(/\s*,\s*/);
+        for (let s = 0; s < scopes.length; s++) {
+            let scope = scopes[s];
+            for (let i = 0; i < names.length; i++) {
+                let name = names[i], sub = false;
+                if (name.charAt(0) == "&") {
+                    name = name.substr(1);
+                    sub = true;
+                }
+                if (name.charAt(0) === '%') {
+                    name = '.o-' + name.substr(1);
+                }
+                if (sub) {
+                    snames.push(scope + name);
+                }
+                else {
+                    snames.push(scope ? scope + " " + name : name);
+                }
+            }
+        }
+        return snames.join(", ");
+    }
+    addProperty(scope, property, value) {
+        let properties = property.split(/\s*,\s*/);
+        for (let i = 0; i < properties.length; i++) {
+            let property = this.makePropertyName(properties[i]);
+            if (this.result[scope][property]) {
+                this.result[scope][property].push(value);
+            }
+            else {
+                this.result[scope][property] = [value];
+            }
+            let specials = {
+                "box-shadow": [
+                    "-moz-box-shadow",
+                    "-webkit-box-shadow"
+                ],
+                "border-radius": [
+                    "-moz-border-radius",
+                    "-webkit-border-radius"
+                ],
+                "border-radius-topleft": [
+                    "-moz-border-radius-topleft",
+                    "-webkit-border-top-left-radius"
+                ],
+                "border-radius-topright": [
+                    "-moz-border-radius-topright",
+                    "-webkit-border-top-right-radius"
+                ],
+                "border-radius-bottomleft": [
+                    "-moz-border-radius-bottomleft",
+                    "-webkit-border-bottom-left-radius"
+                ],
+                "border-radius-bottomright": [
+                    "-moz-border-radius-bottomright",
+                    "-webkit-border-bottom-right-radius"
+                ]
+            };
+            let browser_specials = specials[property];
+            for (let j = 0; browser_specials && j < browser_specials.length; j++) {
+                this.addProperty(scope, browser_specials[j], value);
+            }
+        }
+    }
+}
+export class ComputedStyle {
+    m_style;
+    constructor(style) {
+        this.m_style = style;
+    }
+    /**
+     * return the raw value
+     */
+    value(name) {
+        name = pascalCase(name);
+        return this.m_style[name];
+    }
+    /**
+     * return the interpreted value
+     */
+    parse(name) {
+        name = pascalCase(name);
+        return parseInt(this.m_style[name]);
+    }
+    /**
+     *
+     */
+    get style() {
+        return this.m_style;
+    }
+}

package/lib/svgcomponent.d.ts

@@ -0,0 +1,165 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @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, CProps } from './component';
+/**
+ *
+ */
+declare abstract class SVGItem {
+    private m_tag;
+    private m_attrs;
+    constructor(tag: string);
+    /**
+     * render the item
+     * @returns
+     */
+    render(): string;
+    /**
+     * change the stroke color
+     * @param color
+     */
+    stroke(color: string): this;
+    /**
+     * change the stroke width
+     * @param width
+     */
+    strokeWidth(width: number): this;
+    /**
+     * change the fill color
+     * @param color
+     */
+    fill(color: string): this;
+    /**
+     * define a new attribute
+     * @param name attibute name
+     * @param value attribute value
+     * @returns this
+     */
+    attr(name: string, value: string): this;
+    /**
+     * add a class
+     * @param name class name to add
+     */
+    class(name: string): this;
+    /**
+     *
+     */
+    renderAttrs(): string;
+    renderContent(): string;
+}
+/**
+ *
+ */
+declare class SVGPath extends SVGItem {
+    private m_path;
+    constructor();
+    renderAttrs(): string;
+    /**
+     * move the current pos
+     * @param x new pos x
+     * @param y new pos y
+     * @returns this
+     */
+    moveTo(x: number, y: number): this;
+    /**
+     * draw aline to the given point
+     * @param x end x
+     * @param y end y
+     * @returns this
+     */
+    lineTo(x: number, y: number): this;
+    /**
+     * close the currentPath
+     */
+    closePath(): 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: number, y: number, r: number, start: number, end: number): this;
+}
+/**
+ *
+ */
+declare class SVGText extends SVGItem {
+    private m_text;
+    constructor(x: number, y: number, txt: string);
+    font(font: string): this;
+    fontSize(size: number | string): this;
+    fontWeight(weight: 'light' | 'normal' | 'bold'): this;
+    textAlign(align: 'left' | 'center' | 'right'): this;
+    verticalAlign(align: 'top' | 'center' | 'bottom'): this;
+    renderContent(): any;
+}
+/**
+ *
+ */
+declare class SVGShape extends SVGItem {
+    constructor(tag: string);
+}
+/**
+ *
+ */
+declare class SVGGradient extends SVGItem {
+    private static g_id;
+    private m_id;
+    private m_stops;
+    constructor(x1: number, y1: number, x2: number, y2: number);
+    get id(): string;
+    addStop(offset: number, color: string): this;
+    renderContent(): string;
+}
+/**
+ *
+ */
+export declare class SVGPathBuilder {
+    private m_items;
+    constructor();
+    path(): SVGPath;
+    text(x: any, y: any, txt: any): SVGText;
+    ellipse(x: any, y: any, r1: any, r2?: any): SVGShape;
+    rect(x: any, y: any, w: any, h: any): SVGShape;
+    gradient(x1: any, y1: any, x2: any, y2: any): SVGGradient;
+    /**
+     * clear
+     */
+    clear(): void;
+    render(): string;
+}
+/**
+ *
+ */
+export interface SVGProps extends CProps {
+    viewBox?: string;
+    path?: string;
+}
+export declare class SVGComponent<P extends SVGProps = SVGProps> extends Component<P> {
+    constructor(props: P);
+}
+export {};