x4js 1.4.4 → 1.4.7

package/lib/colorpicker.js

@@ -1,3 +1,4 @@
+"use strict";
 /**
 *  ___  ___ __
 *  \  \/  /  / _
@@ -22,16 +23,18 @@
 *
 * 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 { Container, Component } from './component';
-import { CheckBox } from './checkbox';
-import { Dialog } from './dialog';
-import { EvChange } from './x4_events';
-import { VLayout, HLayout } from './layout';
-import { Label } from './label';
-import { Color } from './color';
-import { isString, getMousePos, clamp, classNames } from './tools';
-import { TextEdit } from './textedit';
-import { Menu, MenuItem } from './menu';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorPickerEditor = exports.ColorPickerBox = exports.ColorPicker = void 0;
+const component_1 = require("./component");
+const checkbox_1 = require("./checkbox");
+const dialog_1 = require("./dialog");
+const x4_events_1 = require("./x4_events");
+const layout_1 = require("./layout");
+const label_1 = require("./label");
+const color_1 = require("./color");
+const tools_1 = require("./tools");
+const textedit_1 = require("./textedit");
+const menu_1 = require("./menu");
 const pal_colors = {
     blue: [0x0e5a8a, 0x106ba3, 0x137cbd, 0x2b95d6, 0x48aff0,],
     green: [0x0a6640, 0x0d8050, 0x0f9960, 0x15b371, 0x3dcc91,],
@@ -49,7 +52,7 @@ const pal_colors = {
     sepia: [0x63411e, 0x7d5125, 0x96622d, 0xb07b46, 0xc99765,],
     bw: [0x000000, 0x444444, 0x666666, 0xcccccc, 0xffffff,],
 };
-export class ColorPicker extends Container {
+class ColorPicker extends component_1.Container {
     m_colorSel;
     m_colorHue;
     m_colorAlpha;
@@ -69,9 +72,9 @@ export class ColorPicker extends Container {
         this.setDomEvent('contextmenu', (e) => this._showCtx(e));
     }
     _showCtx(e) {
-        const menu = new Menu({
+        const menu = new menu_1.Menu({
             items: [
-                new MenuItem({
+                new menu_1.MenuItem({
                     text: 'Palette', checked: this.m_palmode, click: () => {
                         this.m_palmode = !this.m_palmode;
                         ColorPicker.last_palmode = this.m_palmode;
@@ -80,12 +83,12 @@ export class ColorPicker extends Container {
                 })
             ]
         });
-        let pt = getMousePos(e, true);
+        let pt = (0, tools_1.getMousePos)(e, true);
         menu.displayAt(pt.x, pt.y);
     }
     render(props) {
         this.m_baseColor = props.color;
-        this.m_baseHSV = Color.toHSV(this.m_baseColor);
+        this.m_baseHSV = color_1.Color.toHSV(this.m_baseColor);
         if (this.m_palmode) {
             this.addClass("pal-mode");
             let selector = null;
@@ -98,16 +101,16 @@ export class ColorPicker extends Container {
                 let selected = color === ccolor;
                 if (!selected) {
                     selected = mc.variations.some(c => {
-                        const cc = new Color(c.hex).value();
+                        const cc = new color_1.Color(c.hex).value();
                         if (cc === ccolor) {
                             return true;
                         }
                     });
                 }
-                let cls = classNames('clr-box xbox', { selected });
-                let el = new Component({
+                let cls = (0, tools_1.classNames)('clr-box xbox', { selected });
+                let el = new component_1.Component({
                     cls,
-                    style: { backgroundColor: new Color(color).toHex() },
+                    style: { backgroundColor: new color_1.Color(color).toHex() },
                     data: { color, main: mc.variations }
                 });
                 if (selected) {
@@ -118,12 +121,12 @@ export class ColorPicker extends Container {
             function fillSubs(colors) {
                 sub_sel = [];
                 colors.forEach(mc => {
-                    let clr = new Color(mc.hex);
+                    let clr = new color_1.Color(mc.hex);
                     const selected = clr.value() == ccolor;
-                    let cls = classNames('hclr-box xbox', { selected });
-                    let el = new Component({
+                    let cls = (0, tools_1.classNames)('hclr-box xbox', { selected });
+                    let el = new component_1.Component({
                         cls,
-                        style: { backgroundColor: clr.toHex(), color: Color.contrastColor(clr).toHex() },
+                        style: { backgroundColor: clr.toHex(), color: color_1.Color.contrastColor(clr).toHex() },
                         data: { color: clr.value() },
                         content: clr.toHex()
                     });
@@ -136,13 +139,13 @@ export class ColorPicker extends Container {
                     selector.itemWithId('vsel').setContent(sub_sel);
                 }
             }
-            selector = new VLayout({
+            selector = new layout_1.VLayout({
                 content: [
-                    new HLayout({
+                    new layout_1.HLayout({
                         id: 'hsel',
                         content: main_sel
                     }),
-                    new VLayout({
+                    new layout_1.VLayout({
                         id: 'vsel',
                         flex: 1,
                         content: sub_sel
@@ -193,22 +196,22 @@ export class ColorPicker extends Container {
                 ]
             });
             */
-            this.m_colorEdit = new TextEdit({
+            this.m_colorEdit = new textedit_1.TextEdit({
                 cls: 'hexv',
                 value: '',
                 attrs: {
                     spellcheck: false,
                 },
                 change: (ev) => {
-                    const clr = new Color(ev.value);
+                    const clr = new color_1.Color(ev.value);
                     if (clr) {
                         this.m_baseColor = clr;
-                        this.m_baseHSV = Color.toHSV(clr);
+                        this.m_baseHSV = color_1.Color.toHSV(clr);
                         this._updateColor(false);
                     }
                 }
             });
-            this.m_transpCk = new CheckBox({
+            this.m_transpCk = new checkbox_1.CheckBox({
                 cls: 'transp',
                 text: 'transparent',
                 change: (ev) => {
@@ -223,16 +226,16 @@ export class ColorPicker extends Container {
                     cur.removeClass('selected');
                     cur = null;
                 }
-                let cell = Component.getElement(ev.target, 'xbox');
+                let cell = component_1.Component.getElement(ev.target, 'xbox');
                 if (cell) {
                     const subs = cell.getData('main');
                     if (subs) {
                         fillSubs(subs);
                     }
                     else {
-                        const clr = new Color(cell.getData('color'));
+                        const clr = new color_1.Color(cell.getData('color'));
                         this.m_baseColor = clr;
-                        this.m_baseHSV = Color.toHSV(clr);
+                        this.m_baseHSV = color_1.Color.toHSV(clr);
                         this._updateColor();
                         cur = cell;
                         cell.addClass('selected');
@@ -242,37 +245,37 @@ export class ColorPicker extends Container {
         }
         else {
             this.removeClass("pal-mode");
-            this.m_selMark = new Component({ cls: 'marker' });
-            this.m_colorSel = new Component({
+            this.m_selMark = new component_1.Component({ cls: 'marker' });
+            this.m_colorSel = new component_1.Component({
                 cls: 'sel',
                 content: [
-                    new Component({ cls: '@fit light' }),
-                    new Component({ cls: '@fit dark' }),
+                    new component_1.Component({ cls: '@fit light' }),
+                    new component_1.Component({ cls: '@fit dark' }),
                     this.m_selMark,
                 ]
             });
-            this.m_hueMark = new Component({ cls: 'marker' });
-            this.m_colorHue = new Component({
+            this.m_hueMark = new component_1.Component({ cls: 'marker' });
+            this.m_colorHue = new component_1.Component({
                 cls: 'hue',
                 content: [
                     this.m_hueMark
                 ]
             });
-            this.m_sample = new Component({ cls: 'sample' });
+            this.m_sample = new component_1.Component({ cls: 'sample' });
             if (props.hasAlpha) {
                 this.addClass('with-alpha');
-                this.m_alphaMark = new Component({ cls: 'marker' });
-                this.m_colorAlpha = new Component({
+                this.m_alphaMark = new component_1.Component({ cls: 'marker' });
+                this.m_colorAlpha = new component_1.Component({
                     cls: 'alpha',
                     content: [
-                        new Component({ cls: 'bk @fit', ref: 'color' }),
+                        new component_1.Component({ cls: 'bk @fit', ref: 'color' }),
                         this.m_alphaMark
                     ]
                 });
             }
             else {
                 this.removeClass('with-alpha');
-                this.m_transpCk = new CheckBox({
+                this.m_transpCk = new checkbox_1.CheckBox({
                     cls: 'transp',
                     text: 'transparent',
                     change: (ev) => {
@@ -281,17 +284,17 @@ export class ColorPicker extends Container {
                     }
                 });
             }
-            this.m_colorEdit = new TextEdit({
+            this.m_colorEdit = new textedit_1.TextEdit({
                 cls: 'hexv',
                 value: '',
                 attrs: {
                     spellcheck: false,
                 },
                 change: (ev) => {
-                    const clr = new Color(ev.value);
+                    const clr = new color_1.Color(ev.value);
                     if (clr) {
                         this.m_baseColor = clr;
-                        this.m_baseHSV = Color.toHSV(clr);
+                        this.m_baseHSV = color_1.Color.toHSV(clr);
                         this._updateColor(false);
                     }
                 }
@@ -305,14 +308,14 @@ export class ColorPicker extends Container {
                 this.m_sample,
             ]);
             this.m_colorSel.setDomEvent('mousedown', (ev) => {
-                Component.setCapture(this, (e) => this._selChange(e));
+                component_1.Component.setCapture(this, (e) => this._selChange(e));
             });
             this.m_colorHue.setDomEvent('mousedown', (ev) => {
-                Component.setCapture(this, (e) => this._hueChange(e));
+                component_1.Component.setCapture(this, (e) => this._hueChange(e));
             });
             if (props.hasAlpha) {
                 this.m_colorAlpha.setDomEvent('mousedown', (ev) => {
-                    Component.setCapture(this, (e) => this._alphaChange(e));
+                    component_1.Component.setCapture(this, (e) => this._alphaChange(e));
                 });
             }
             this._updateColor();
@@ -320,50 +323,50 @@ export class ColorPicker extends Container {
     }
     set color(clr) {
         this.m_baseColor = clr;
-        this.m_baseHSV = Color.toHSV(this.m_baseColor);
+        this.m_baseHSV = color_1.Color.toHSV(this.m_baseColor);
         this._updateColor();
     }
     get color() {
         return this.m_baseColor;
     }
     _selChange(ev) {
-        let pt = getMousePos(ev, true);
+        let pt = (0, tools_1.getMousePos)(ev, true);
         console.log(pt);
         let rc = this.m_colorSel.getBoundingRect();
         if (!this.m_props.hasAlpha) {
             this.m_baseHSV.a = 1;
         }
-        this.m_baseHSV.s = clamp((pt.x - rc.left) / rc.width, 0, 1);
-        this.m_baseHSV.v = 1 - clamp((pt.y - rc.top) / rc.height, 0, 1);
+        this.m_baseHSV.s = (0, tools_1.clamp)((pt.x - rc.left) / rc.width, 0, 1);
+        this.m_baseHSV.v = 1 - (0, tools_1.clamp)((pt.y - rc.top) / rc.height, 0, 1);
         this._updateColor();
         if (ev.type == 'mouseup' || ev.type == 'touchend') {
-            Component.releaseCapture();
+            component_1.Component.releaseCapture();
         }
     }
     _hueChange(ev) {
-        let pt = getMousePos(ev, true);
+        let pt = (0, tools_1.getMousePos)(ev, true);
         let rc = this.m_colorHue.getBoundingRect();
-        this.m_baseHSV.h = clamp((pt.y - rc.top) / rc.height, 0, 1);
+        this.m_baseHSV.h = (0, tools_1.clamp)((pt.y - rc.top) / rc.height, 0, 1);
         this._updateColor();
         if (ev.type == 'mouseup' || ev.type == 'touchend') {
-            Component.releaseCapture();
+            component_1.Component.releaseCapture();
         }
     }
     _alphaChange(ev) {
-        let pt = getMousePos(ev, true);
+        let pt = (0, tools_1.getMousePos)(ev, true);
         let rc = this.m_colorAlpha.getBoundingRect();
-        this.m_baseHSV.a = clamp((pt.x - rc.left) / rc.width, 0, 1);
+        this.m_baseHSV.a = (0, tools_1.clamp)((pt.x - rc.left) / rc.width, 0, 1);
         this._updateColor();
         if (ev.type == 'mouseup' || ev.type == 'touchend') {
-            Component.releaseCapture();
+            component_1.Component.releaseCapture();
         }
     }
     _updateColor(edit = true) {
         let color;
         if (!this.m_palmode) {
-            color = Color.fromHSV(this.m_baseHSV.h, 1, 1, 1);
+            color = color_1.Color.fromHSV(this.m_baseHSV.h, 1, 1, 1);
             this.m_colorSel.setStyleValue('backgroundColor', color.toString());
-            color = Color.fromHSV(this.m_baseHSV.h, this.m_baseHSV.s, this.m_baseHSV.v, 1);
+            color = color_1.Color.fromHSV(this.m_baseHSV.h, this.m_baseHSV.s, this.m_baseHSV.v, 1);
             this.m_sample.setStyleValue('backgroundColor', color.toString());
             if (this.m_props.hasAlpha) {
                 let gradient = `linear-gradient(to right, rgba(0,0,0,0) 0%, ${color.toString()} 100%)`;
@@ -388,7 +391,7 @@ export class ColorPicker extends Container {
         else {
             this.m_transpCk.check = this.m_baseHSV.a == 0;
         }
-        color = Color.fromHSV(this.m_baseHSV.h, this.m_baseHSV.s, this.m_baseHSV.v, this.m_baseHSV.a);
+        color = color_1.Color.fromHSV(this.m_baseHSV.h, this.m_baseHSV.s, this.m_baseHSV.v, this.m_baseHSV.a);
         this.m_baseColor = color;
         if (edit) {
             this.m_colorEdit.value = color.alpha() == 1 ? color.toHex() : color.toString(); //color.toHex();
@@ -396,10 +399,11 @@ export class ColorPicker extends Container {
         this._change();
     }
     _change() {
-        this.emit('change', EvChange(this.m_baseColor));
+        this.emit('change', (0, x4_events_1.EvChange)(this.m_baseColor));
     }
 }
-export class ColorPickerBox extends Dialog {
+exports.ColorPicker = ColorPicker;
+class ColorPickerBox extends dialog_1.Dialog {
     m_picker;
     constructor(props) {
         props.icon = undefined;
@@ -415,7 +419,7 @@ export class ColorPickerBox extends Dialog {
         });
         let customs = this._makeCustoms(props.cust_colors);
         this.form.updateContent([
-            new VLayout({
+            new layout_1.VLayout({
                 content: [
                     this.m_picker,
                     customs
@@ -424,7 +428,7 @@ export class ColorPickerBox extends Dialog {
         ], ['ok', 'cancel']);
         this.on('btnClick', (ev) => {
             if (ev.button == 'ok') {
-                this.emit('change', EvChange(this.m_picker.color));
+                this.emit('change', (0, x4_events_1.EvChange)(this.m_picker.color));
             }
         });
     }
@@ -436,7 +440,7 @@ export class ColorPickerBox extends Dialog {
                 let lne = [];
                 for (let j = 0; j < 8; j++) {
                     let idx = i + j, clr = cc[idx];
-                    lne.push(new Label({
+                    lne.push(new label_1.Label({
                         cls: 'cust-cc',
                         text: '',
                         flex: 1,
@@ -448,16 +452,16 @@ export class ColorPickerBox extends Dialog {
                             click: () => {
                                 if (clr) {
                                     this.m_picker.color = clr;
-                                    this.emit('change', EvChange(clr));
+                                    this.emit('change', (0, x4_events_1.EvChange)(clr));
                                     this.close();
                                 }
                             }
                         }
                     }));
                 }
-                els.push(new HLayout({ cls: 'line', content: lne }));
+                els.push(new layout_1.HLayout({ cls: 'line', content: lne }));
             }
-            custom = new VLayout({ cls: 'customs', content: els });
+            custom = new layout_1.VLayout({ cls: 'customs', content: els });
         }
         return custom;
     }
@@ -472,8 +476,8 @@ export class ColorPickerBox extends Dialog {
      */
     static show(props) {
         let msg;
-        if (isString(props)) {
-            msg = new ColorPickerBox({ color: new Color(props) });
+        if ((0, tools_1.isString)(props)) {
+            msg = new ColorPickerBox({ color: new color_1.Color(props) });
         }
         else {
             msg = new ColorPickerBox(props);
@@ -482,7 +486,8 @@ export class ColorPickerBox extends Dialog {
         return msg;
     }
 }
-export class ColorPickerEditor extends HLayout {
+exports.ColorPickerBox = ColorPickerBox;
+class ColorPickerEditor extends layout_1.HLayout {
     constructor(props) {
         super(props);
         this.mapPropEvents(props, 'change');
@@ -491,20 +496,20 @@ export class ColorPickerEditor extends HLayout {
         let color = props.color;
         let tcolor;
         if (this._isTransp(color)) {
-            color = Color.NONE;
+            color = color_1.Color.NONE;
             tcolor = 'black';
         }
         else {
-            tcolor = Color.contrastColor(color).toString();
+            tcolor = color_1.Color.contrastColor(color).toString();
         }
         this.setContent([
-            props.label ? new Label({
+            props.label ? new label_1.Label({
                 cls: 'label',
                 text: props.label,
                 flex: props.labelWidth < 0 ? -props.labelWidth : undefined,
                 width: props.labelWidth >= 0 ? props.labelWidth : undefined,
             }) : null,
-            new Label({
+            new label_1.Label({
                 cls: 'value',
                 flex: 1,
                 text: color.toHex(),
@@ -546,12 +551,13 @@ export class ColorPickerEditor extends HLayout {
         dlg.displayAt(rc.left, rc.bottom, 'tl');
     }
     _change() {
-        this.emit('change', EvChange(this.m_props.color));
+        this.emit('change', (0, x4_events_1.EvChange)(this.m_props.color));
     }
     _isTransp(color) {
         return !color.alpha();
     }
 }
+exports.ColorPickerEditor = ColorPickerEditor;
 // :: Material colors scheme ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 const materialColors = [
     {

package/lib/combobox.js

@@ -1,3 +1,4 @@
+"use strict";
 /**
 *  ___  ___ __
 *  \  \/  /  / _
@@ -22,22 +23,24 @@
 *
 * You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
 **/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComboBox = void 0;
 /**
  * TODO: replace custom combo list by listview or gridview
  */
-import { Component } from './component';
-import { EvChange, EvSelectionChange } from './x4_events';
-import { Input } from './input';
-import { Label } from './label';
-import { Button } from './button';
-import { HLayout } from './layout';
-import { PopupListView } from './listview';
-import { DataStore } from './datastore';
-import { isFunction } from './tools';
+const component_1 = require("./component");
+const x4_events_1 = require("./x4_events");
+const input_1 = require("./input");
+const label_1 = require("./label");
+const button_1 = require("./button");
+const layout_1 = require("./layout");
+const listview_1 = require("./listview");
+const datastore_1 = require("./datastore");
+const tools_1 = require("./tools");
 /**
  * @review use textedit
  */
-export class ComboBox extends HLayout {
+class ComboBox extends layout_1.HLayout {
     m_ui_input;
     m_ui_button;
     m_popup;
@@ -58,7 +61,7 @@ export class ComboBox extends HLayout {
     /** @ignore */
     render(props) {
         if (!props.renderer) {
-            this.m_ui_input = new Input({
+            this.m_ui_input = new input_1.Input({
                 flex: 1,
                 readOnly: true,
                 tabIndex: 0,
@@ -70,7 +73,7 @@ export class ComboBox extends HLayout {
             });
         }
         else {
-            this.m_ui_input = new Component({
+            this.m_ui_input = new component_1.Component({
                 flex: 1,
                 cls: '@fake-input @hlayout',
                 tabIndex: 1
@@ -86,18 +89,18 @@ export class ComboBox extends HLayout {
         }
         this.setContent([
             // todo: why 'label1' class name
-            new Label({
+            new label_1.Label({
                 cls: 'label1' + (props.label ? '' : ' @hidden'),
                 text: props.label,
                 width,
                 flex,
                 align: props.labelAlign
             }),
-            new HLayout({
+            new layout_1.HLayout({
                 flex: 1,
                 content: [
                     this.m_ui_input,
-                    this.m_ui_button = new Button({
+                    this.m_ui_button = new button_1.Button({
                         cls: 'gadget',
                         icon: 'cls(far fa-angle-down)',
                         tabIndex: false,
@@ -133,7 +136,7 @@ export class ComboBox extends HLayout {
             let fontFamily = cstyle.value('fontFamily');
             let fontSize = cstyle.value('fontSize');
             // prepare the combo listview
-            this.m_popup = new PopupListView({
+            this.m_popup = new listview_1.PopupListView({
                 cls: '@combo-popup',
                 items: props.items,
                 populate: props.populate,
@@ -167,8 +170,8 @@ export class ComboBox extends HLayout {
             id: item.id,
             text: item.text
         };
-        this.emit('selectionChange', EvSelectionChange(item));
-        this.emit('change', EvChange(item.id));
+        this.emit('selectionChange', (0, x4_events_1.EvSelectionChange)(item));
+        this.emit('change', (0, x4_events_1.EvChange)(item.id));
         this.m_ui_input.focus();
         this.m_popup.hide();
     }
@@ -178,7 +181,7 @@ export class ComboBox extends HLayout {
     _setInput(item, fireEv = false) {
         if (item) {
             if (this.m_ui_input) {
-                if (this.m_ui_input instanceof Input) {
+                if (this.m_ui_input instanceof input_1.Input) {
                     this.m_ui_input.value = item.text;
                     // fires a change event
                     if (fireEv) {
@@ -208,7 +211,7 @@ export class ComboBox extends HLayout {
      */
     set value(id) {
         let items = this.m_props.items;
-        if (isFunction(items)) {
+        if ((0, tools_1.isFunction)(items)) {
             items = items();
         }
         items.some((v) => {
@@ -220,10 +223,10 @@ export class ComboBox extends HLayout {
         });
     }
     get input() {
-        return this.m_ui_input instanceof Input ? this.m_ui_input : null;
+        return this.m_ui_input instanceof input_1.Input ? this.m_ui_input : null;
     }
     static storeProxy(props) {
-        let view = props.store instanceof DataStore ? props.store.createView() : props.store;
+        let view = props.store instanceof datastore_1.DataStore ? props.store.createView() : props.store;
         return () => {
             let result = new Array(props.store.count);
             props.store.forEach((rec, index) => {
@@ -236,6 +239,7 @@ export class ComboBox extends HLayout {
         };
     }
 }
+exports.ComboBox = ComboBox;
 /*
  export type CBComboBoxRenderer = ( rec: Record ) => string;
 export interface ComboBoxStore {