x4js 1.4.51 → 1.4.53

package/lib/esm/styles.js

@@ -0,0 +1,270 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file styles.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 { x4document } from './x4dom';
+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 < x4document.styleSheets.length; i++) {
+                let sheet = x4document.styleSheets[i];
+                if (sheet.title === name) {
+                    return sheet;
+                }
+            }
+        }
+        this.m_sheet = getStyleSheet('@dynamic-css');
+        if (!this.m_sheet) {
+            let dom = x4document.createElement('style');
+            dom.setAttribute('id', '@dynamic-css');
+            x4document.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
+     * @example
+     * ```
+     * let color = Component.getCss( ).getVar( 'button-color' );
+     * ```
+     */
+    static getVar(name) {
+        if (!Stylesheet.doc_style) {
+            Stylesheet.doc_style = getComputedStyle(x4document.documentElement);
+        }
+        if (name[0] != '-') {
+            name = '--' + name;
+        }
+        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/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);
+    }
+}