x4js 1.4.52 → 1.4.53

package/lib/esm/drawtext.js

@@ -0,0 +1,271 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file drawtext.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 { Point, roundTo } from './tools';
+// adapted & modified from Canvas-txt: 
+// https://github.com/geongeorge/Canvas-Txt/blob/master/src/index.js
+// Hair space character for precise justification
+const SPACE = '\u200a';
+const defStyle = {
+    align: 'center',
+    vAlign: 'middle',
+    fontSize: 14,
+    fontWeight: null,
+    fontStyle: '',
+    fontVariant: '',
+    fontFamily: 'Arial',
+    lineHeight: 0,
+    clip: true,
+    columns: 1,
+    columnGap: 0,
+    lineBreak: true,
+};
+export function drawText(ctx, input_Text, rc, drawStyle) {
+    if (rc.width <= 0 || rc.height <= 0) {
+        //width or height or font size cannot be 0
+        return;
+    }
+    //console.time( 'drawtext' );
+    drawStyle = { ...defStyle, ...drawStyle };
+    ctx.save();
+    if (drawStyle.clip) {
+        ctx.beginPath();
+        ctx.rect(rc.left, rc.top, rc.width, rc.height);
+        ctx.clip();
+    }
+    if (drawStyle.rotation) {
+        const center = new Point(rc.left + rc.width / 2, rc.top + rc.height / 2);
+        const rad = drawStyle.rotation / 180 * Math.PI;
+        ctx.translate(center.x, center.y);
+        ctx.rotate(rad);
+        ctx.translate(-center.x, -center.y);
+        //ctx.beginPath();
+        //ctx.rect( rc.left, rc.top, rc.width, rc.height );
+        //ctx.stroke( );
+    }
+    ctx.textBaseline = 'bottom';
+    // End points
+    let fontSize = roundTo(drawStyle.fontSize, 2) ?? 12;
+    //let style = `${drawStyle.fontStyle ?? ''} ${drawStyle.fontVariant ?? ''} ${drawStyle.fontWeight ?? ''} ${fontSize}px ${drawStyle.fontFamily ?? 'arial'}`;
+    let style = '';
+    if (drawStyle.fontStyle) {
+        style += drawStyle.fontStyle + ' ';
+    }
+    if (drawStyle.fontVariant) {
+        style += drawStyle.fontVariant + ' ';
+    }
+    if (drawStyle.fontWeight) {
+        style += drawStyle.fontWeight + ' ';
+    }
+    style += fontSize + 'px ';
+    let family = drawStyle.fontFamily ?? 'sans-serif';
+    if (family.indexOf('.') > 0) {
+        family = '"' + family + '"';
+    }
+    style += family;
+    ctx.font = style.trim();
+    let textarray = [];
+    let lines = input_Text.split('\n');
+    const columns = drawStyle.columns < 1 ? 1 : drawStyle.columns;
+    const gap = drawStyle.columnGap;
+    let col_width = (rc.width - gap * (columns - 1)) / columns;
+    let col_left = rc.left;
+    let hlimit = col_width;
+    if (!drawStyle.lineBreak) {
+        hlimit = 99999999;
+    }
+    const spaceW = _measureText(ctx, ' ');
+    lines.forEach((text) => {
+        let line = { width: 0, words: [], space: 0 };
+        // fit in width ?
+        let lwidth = _measureText(ctx, text);
+        if (lwidth < hlimit) {
+            line.width = lwidth;
+            line.words.push({ width: lwidth, text });
+            textarray.push(line);
+        }
+        // break line to fit in width
+        else {
+            // make word list & measure them
+            let twords = text.split(/\s/).filter(w => w !== '');
+            let words = twords.map(w => {
+                const wwidth = _measureText(ctx, w);
+                const word = {
+                    width: wwidth,
+                    text: w
+                };
+                return word;
+            });
+            // then compute lines 
+            let n = 0;
+            let e = 0;
+            while (n < words.length) {
+                const word = words[n];
+                let test = line.width;
+                if (test) {
+                    test += spaceW;
+                }
+                test += word.width;
+                //console.log( word, test, col_width );
+                if (test > col_width && e > 0) {
+                    textarray.push(line);
+                    // restart
+                    e = 0;
+                    lwidth = 0;
+                    line = { width: 0, words: [], space: 0 };
+                }
+                else {
+                    line.words.push(word);
+                    line.width = test;
+                    n++;
+                    e++;
+                }
+            }
+            if (e) {
+                textarray.push(line);
+                line.last = true;
+            }
+        }
+    });
+    const textSize = _calcTextHeight(ctx, "Ag");
+    let lineHeight = (drawStyle.lineHeight ?? 1.3) * textSize; // * 1.2 = map to pdf 
+    const nlines = textarray.length;
+    // calc vertical Align
+    let col_top = rc.top;
+    if (columns == 1) {
+        let fullHeight = lineHeight * nlines;
+        if (nlines == 1) {
+            lineHeight = textSize;
+            fullHeight = textSize;
+        }
+        if (drawStyle.vAlign === 'middle') {
+            col_top = rc.top + rc.height / 2 - fullHeight / 2;
+            col_top += lineHeight / 2;
+            ctx.textBaseline = 'middle';
+        }
+        else if (drawStyle.vAlign === 'bottom') {
+            if (fullHeight < rc.height) {
+                col_top = rc.top + rc.height - fullHeight + lineHeight;
+            }
+        }
+        else {
+            col_top = rc.top;
+            ctx.textBaseline = 'top';
+        }
+    }
+    else {
+        // always top, cannot justify multi-columns vertically
+        // todo: for now
+        col_top += textSize;
+    }
+    const justify = drawStyle.align == 'justify';
+    let column = columns;
+    let y = col_top;
+    let align = 0;
+    // faster test..
+    switch (drawStyle.align) {
+        case 'right':
+            align = 1;
+            break;
+        case 'center':
+            align = 2;
+            break;
+    }
+    //print all lines of text
+    //let idx = 1, yy = 0;
+    let maxw = 0;
+    textarray.some(line => {
+        //console.log( idx++, yy );
+        line.space = spaceW;
+        if (justify && !line.last) {
+            _justify(line, col_width, spaceW);
+        }
+        let x = col_left;
+        let cw = 0;
+        if (align == 1) {
+            x += col_width - line.width;
+        }
+        else if (align == 2) {
+            x += col_width / 2 - line.width / 2;
+        }
+        // ...debug
+        /*ctx.lineWidth = 1;
+        ctx.beginPath( );
+        ctx.moveTo( rc.left, y );
+        ctx.lineTo( rc.right, y );
+        ctx.strokeStyle = 'white';
+        ctx.stroke( );*/
+        line.words.forEach(w => {
+            /*ctx.beginPath( );
+            ctx.moveTo( x, y );
+            ctx.lineTo( x, y-40 );
+            ctx.strokeStyle = 'red';
+            ctx.stroke( );*/
+            /*ctx.beginPath( );
+            ctx.moveTo( x+w.width, y );
+            ctx.lineTo( x+w.width, y-40 );
+            ctx.strokeStyle = 'green';
+            ctx.stroke( );*/
+            ctx.fillText(w.text, x, y);
+            x += w.width + line.space;
+            cw += w.width + line.space;
+        });
+        y += lineHeight;
+        //yy += lineHeight;
+        if (maxw < cw) {
+            maxw = cw;
+        }
+        if (y > (rc.bottom + lineHeight)) {
+            y = col_top;
+            col_left += col_width + gap;
+            if (--column == 0) {
+                return true;
+            }
+        }
+    });
+    ctx.restore();
+    //console.timeEnd( 'drawtext' );
+    // todo autogrow + multi-columns
+    return { width: maxw, height: (textarray.length + 0.3) * lineHeight };
+}
+// Calculate Height of the font
+function _calcTextHeight(ctx, text) {
+    const size = ctx.measureText(text);
+    return size.actualBoundingBoxAscent + size.actualBoundingBoxDescent;
+}
+function _measureText(ctx, text) {
+    return roundTo(ctx.measureText(text).width, 2);
+}
+function _justify(line, width, spaceW) {
+    let delta = (width - line.width) / (line.words.length - 1) + spaceW;
+    if (delta <= 0) {
+        return;
+    }
+    line.width = width;
+    line.space = delta;
+}

package/lib/esm/fileupload.js

@@ -0,0 +1,163 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file fileupload.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 { Component } from './component';
+import { HLayout } from './layout';
+import { Input } from './input';
+import { Image } from './image';
+export class FileUpload extends HLayout {
+    constructor(props) {
+        super(props);
+    }
+    clear() {
+        this.m_props.value = '';
+    }
+}
+/**
+ *
+ */
+export class ImageUpload extends FileUpload {
+    m_path;
+    m_ui_img;
+    m_ui_input;
+    /** @ignore */
+    render(props) {
+        let ename = "up" + this.uid;
+        this.setContent([
+            new Component({
+                tag: 'label', attrs: { for: ename }, content: [
+                    this.m_ui_img = new Image({ src: this.m_props.value }),
+                ]
+            }),
+            this.m_ui_input = new Input({
+                cls: '@hidden',
+                id: ename,
+                type: 'file',
+                name: this.m_props.name,
+                value_hook: {
+                    get: () => { return this._get_value(); },
+                    set: (v) => { this._set_value(v); }
+                },
+                attrs: {
+                    accept: 'image/*'
+                },
+                dom_events: {
+                    change: (e) => { this._handleChange(e); }
+                }
+            }),
+        ]);
+    }
+    clear() {
+        super.clear();
+        this.m_ui_input.dom.value = '';
+        this.m_ui_img.setImage(null, false);
+    }
+    _get_value() {
+        return this.m_path;
+    }
+    _set_value(v) {
+        debugger;
+    }
+    _handleChange(e) {
+        let self = this;
+        function createThumbnail(file) {
+            let reader = new FileReader();
+            reader.addEventListener('load', (e) => {
+                self.m_ui_img.setImage(reader.result.toString());
+            });
+            reader.readAsDataURL(file);
+        }
+        const allowedTypes = ['png', 'jpg', 'jpeg', 'gif'];
+        let files = e.target.files, filesLen = files.length;
+        for (let i = 0; i < filesLen; i++) {
+            let imgType = files[i].name.split('.');
+            imgType = imgType[imgType.length - 1];
+            imgType = imgType.toLowerCase();
+            if (allowedTypes.indexOf(imgType) != -1) {
+                createThumbnail(files[i]);
+                this.m_path = files[i];
+                break;
+            }
+        }
+    }
+}
+let g_file_input = null;
+function _createFileInput() {
+    if (!g_file_input) {
+        g_file_input = new Component({
+            tag: 'input',
+            style: {
+                display: 'none',
+                id: 'fileDialog',
+            },
+            attrs: {
+                type: 'file'
+            }
+        });
+        // ajoute un input type:file caché pour pouvoir choir un fichier a ouvrir
+        x4document.body.appendChild(g_file_input._build());
+    }
+    g_file_input.clearDomEvent('change');
+    return g_file_input;
+}
+/**
+ * show openfile dialog
+ * @param extensions - string - ex: '.doc,.docx'
+ * @param cb - callback to call when user select a file
+ */
+export function openFileDialog(extensions, cb, multiple = false) {
+    let fi = _createFileInput();
+    fi.removeAttribute('nwsaveas');
+    fi.setAttribute('accept', extensions);
+    fi.setAttribute('multiple', multiple);
+    // Set up the file chooser for the on change event
+    fi.setDomEvent("change", (evt) => {
+        // When we reach this point, it means the user has selected a file,
+        let files = fi.dom.files;
+        cb(files);
+    });
+    fi.dom.click();
+}
+/**
+ * open saveas dialog
+ * @param defFileName - string - proposed filename
+ * @param cb - callback to call when user choose the destination
+ */
+export function saveFileDialog(defFileName, extensions, cb) {
+    let fi = _createFileInput();
+    fi.setAttribute('nwsaveas', defFileName);
+    fi.setAttribute('accept', extensions);
+    // Set up the file chooser for the on change event
+    fi.setDomEvent("change", (evt) => {
+        // When we reach this point, it means the user has selected a file,
+        let files = fi.dom.files;
+        cb(files[0]);
+    });
+    fi.dom.click();
+}