x4js 1.6.0 → 1.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/x4js.js +5 -5
- package/lib/cjs/x4js.js.map +3 -3
- package/lib/esm/x4js.mjs +16 -10
- package/lib/esm/x4js.mjs.map +2 -2
- package/lib/src/application.ts +2 -2
- package/lib/src/calendar.ts +1 -1
- package/lib/src/canvas.ts +8 -3
- package/lib/src/cardview.ts +8 -7
- package/lib/src/color.ts +3 -3
- package/lib/src/colorpicker.ts +17 -7
- package/lib/src/combobox.ts +6 -6
- package/lib/src/component.ts +44 -40
- package/lib/src/dialog.ts +1 -1
- package/lib/src/drag_manager.ts +3 -3
- package/lib/src/fileupload.ts +3 -3
- package/lib/src/form.ts +1 -1
- package/lib/src/svgcomponent.ts +12 -7
- package/lib/src/version.ts +1 -1
- package/lib/src/x4events.ts +9 -9
- package/package.json +1 -1
- package/changelog.txt +0 -23
package/lib/src/application.ts
CHANGED
|
@@ -160,7 +160,7 @@ export class Application<P extends ApplicationProps = ApplicationProps, E extend
|
|
|
160
160
|
return this.m_user_data;
|
|
161
161
|
}
|
|
162
162
|
|
|
163
|
-
public get history( ) {
|
|
163
|
+
public get history( ): null {
|
|
164
164
|
//if( !this.m_history ) {
|
|
165
165
|
// this.m_history = new NavigationHistory( );
|
|
166
166
|
//}
|
|
@@ -247,7 +247,7 @@ export class Application<P extends ApplicationProps = ApplicationProps, E extend
|
|
|
247
247
|
const tch = ev.touches[0];
|
|
248
248
|
let fake: any = {type: "dblclick" };
|
|
249
249
|
for( const n in tch ) {
|
|
250
|
-
fake[n] = tch[n];
|
|
250
|
+
fake[n] = (tch as any)[n];
|
|
251
251
|
}
|
|
252
252
|
|
|
253
253
|
// ignore -> private: dirty x2
|
package/lib/src/calendar.ts
CHANGED
package/lib/src/canvas.ts
CHANGED
|
@@ -30,6 +30,11 @@
|
|
|
30
30
|
import { Component, CProps, CEventMap, html } from './component'
|
|
31
31
|
import { BasicEvent, EventCallback } from './x4events'
|
|
32
32
|
|
|
33
|
+
interface IPoint {
|
|
34
|
+
x: number;
|
|
35
|
+
y: number;
|
|
36
|
+
}
|
|
37
|
+
|
|
33
38
|
interface EvPaint extends BasicEvent {
|
|
34
39
|
ctx: CanvasPainter;
|
|
35
40
|
}
|
|
@@ -108,14 +113,14 @@ function smoothLine( this: CanvasRenderingContext2D, points: any[], path: Canvas
|
|
|
108
113
|
return;
|
|
109
114
|
}
|
|
110
115
|
|
|
111
|
-
function midPointBtw(p1, p2) {
|
|
116
|
+
function midPointBtw(p1: IPoint, p2: IPoint ) {
|
|
112
117
|
return {
|
|
113
118
|
x: p1.x + (p2.x - p1.x) / 2,
|
|
114
119
|
y: p1.y + (p2.y - p1.y) / 2
|
|
115
120
|
};
|
|
116
121
|
}
|
|
117
122
|
|
|
118
|
-
function getQuadraticXY(t, sx, sy, cp1x, cp1y, ex, ey) {
|
|
123
|
+
function getQuadraticXY(t: number, sx: number, sy: number, cp1x: number, cp1y: number, ex: number, ey: number) : IPoint {
|
|
119
124
|
return {
|
|
120
125
|
x: (1 - t) * (1 - t) * sx + 2 * (1 - t) * t * cp1x + t * t * ex,
|
|
121
126
|
y: (1 - t) * (1 - t) * sy + 2 * (1 - t) * t * cp1y + t * t * ey
|
|
@@ -212,7 +217,7 @@ function smoothLineEx(this: CanvasRenderingContext2D, _points: any[], tension: n
|
|
|
212
217
|
parse(pts, cache, 4);
|
|
213
218
|
}
|
|
214
219
|
|
|
215
|
-
function parse(pts, cache, l) {
|
|
220
|
+
function parse(pts: number[], cache: Float32Array, l: number) {
|
|
216
221
|
|
|
217
222
|
for (var i = 2, t; i < l; i += 2) {
|
|
218
223
|
|
package/lib/src/cardview.ts
CHANGED
|
@@ -85,7 +85,7 @@ export class CardView<P extends CardViewProps = CardViewProps, E extends CardVie
|
|
|
85
85
|
/** @ignore */
|
|
86
86
|
render() {
|
|
87
87
|
|
|
88
|
-
let pages = [];
|
|
88
|
+
let pages: any[] = [];
|
|
89
89
|
this.m_cards.forEach((p) => {
|
|
90
90
|
if (p.page) {
|
|
91
91
|
pages.push(p.page);
|
|
@@ -171,7 +171,7 @@ export class CardView<P extends CardViewProps = CardViewProps, E extends CardVie
|
|
|
171
171
|
*
|
|
172
172
|
*/
|
|
173
173
|
|
|
174
|
-
private _initTabs(pages): any {
|
|
174
|
+
private _initTabs(pages: ICardViewItem[] ): any {
|
|
175
175
|
|
|
176
176
|
if (!pages) {
|
|
177
177
|
return;
|
|
@@ -185,10 +185,11 @@ export class CardView<P extends CardViewProps = CardViewProps, E extends CardVie
|
|
|
185
185
|
return;
|
|
186
186
|
}
|
|
187
187
|
|
|
188
|
-
let card: ICardItemEx = {
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
188
|
+
let card: ICardItemEx = {
|
|
189
|
+
...p,
|
|
190
|
+
selector: this._prepareSelector(p),
|
|
191
|
+
active: false
|
|
192
|
+
}
|
|
192
193
|
|
|
193
194
|
this.m_cards.push(card);
|
|
194
195
|
|
|
@@ -196,7 +197,7 @@ export class CardView<P extends CardViewProps = CardViewProps, E extends CardVie
|
|
|
196
197
|
active = p.name;
|
|
197
198
|
}
|
|
198
199
|
|
|
199
|
-
if (
|
|
200
|
+
if (card.active) {
|
|
200
201
|
active = p.name;
|
|
201
202
|
}
|
|
202
203
|
});
|
package/lib/src/color.ts
CHANGED
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
import { Stylesheet } from './styles'
|
|
31
31
|
|
|
32
32
|
|
|
33
|
-
const colorValues = {
|
|
33
|
+
const colorValues: any = {
|
|
34
34
|
'lightsalmon': 0xFFFFA07A,
|
|
35
35
|
'lightseagreen': 0xFF20B2AA,
|
|
36
36
|
'lightskyblue': 0xFF87CEFA,
|
|
@@ -180,7 +180,7 @@ const colorValues = {
|
|
|
180
180
|
export class Color
|
|
181
181
|
{
|
|
182
182
|
private m_value:number;
|
|
183
|
-
private static custom: Color
|
|
183
|
+
private static custom: Record<string,Color> = {};
|
|
184
184
|
|
|
185
185
|
/**
|
|
186
186
|
* @example
|
|
@@ -451,7 +451,7 @@ export class Color
|
|
|
451
451
|
r = g = b = l; // achromatic
|
|
452
452
|
}
|
|
453
453
|
else{
|
|
454
|
-
function hue2rgb(p, q, t){
|
|
454
|
+
function hue2rgb(p: number, q: number, t: number){
|
|
455
455
|
if(t < 0) t += 1.0;
|
|
456
456
|
if(t > 1) t -= 1.0;
|
|
457
457
|
if(t < 1/6) return p + (q - p) * 6 * t;
|
package/lib/src/colorpicker.ts
CHANGED
|
@@ -123,11 +123,11 @@ export class ColorPicker extends Container<ColorPickerProps, ColorPickerEventMap
|
|
|
123
123
|
|
|
124
124
|
this.addClass("pal-mode");
|
|
125
125
|
|
|
126
|
-
let selector = null;
|
|
127
|
-
let cur = null;
|
|
126
|
+
let selector: VLayout = null;
|
|
127
|
+
let cur: Component = null;
|
|
128
128
|
|
|
129
|
-
let main_sel = [];
|
|
130
|
-
let sub_sel = [];
|
|
129
|
+
let main_sel: Component[] = [];
|
|
130
|
+
let sub_sel: Component[] = [];
|
|
131
131
|
|
|
132
132
|
const ccolor = this.m_baseColor.value();
|
|
133
133
|
|
|
@@ -158,7 +158,7 @@ export class ColorPicker extends Container<ColorPickerProps, ColorPickerEventMap
|
|
|
158
158
|
main_sel.push(el);
|
|
159
159
|
});
|
|
160
160
|
|
|
161
|
-
function fillSubs( colors ) {
|
|
161
|
+
function fillSubs( colors: Variation[] ) {
|
|
162
162
|
sub_sel = [];
|
|
163
163
|
colors.forEach(mc => {
|
|
164
164
|
let clr = new Color(mc.hex);
|
|
@@ -550,7 +550,7 @@ export class ColorPickerBox extends Dialog<ColorPickerBoxProps, ColorPickerBoxEv
|
|
|
550
550
|
});
|
|
551
551
|
}
|
|
552
552
|
|
|
553
|
-
private _makeCustoms(cc) {
|
|
553
|
+
private _makeCustoms(cc: Color[] ) {
|
|
554
554
|
|
|
555
555
|
let custom = null;
|
|
556
556
|
|
|
@@ -735,7 +735,17 @@ export class ColorPickerEditor extends HLayout<ColorPickerEditorProps, ColorPick
|
|
|
735
735
|
|
|
736
736
|
// :: Material colors scheme ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
|
|
737
737
|
|
|
738
|
-
|
|
738
|
+
interface Variation {
|
|
739
|
+
weight: number;
|
|
740
|
+
hex: number;
|
|
741
|
+
}
|
|
742
|
+
|
|
743
|
+
interface Variations {
|
|
744
|
+
color: string;
|
|
745
|
+
variations: Variation[];
|
|
746
|
+
};
|
|
747
|
+
|
|
748
|
+
const materialColors: Variations[] = [
|
|
739
749
|
{
|
|
740
750
|
color: "Red",
|
|
741
751
|
variations: [
|
package/lib/src/combobox.ts
CHANGED
|
@@ -87,10 +87,10 @@ export interface ComboBoxProps extends CProps<ComboBoxEventMap> {
|
|
|
87
87
|
}
|
|
88
88
|
|
|
89
89
|
abstract class InputLike extends Component {
|
|
90
|
-
abstract setValue( text: string );
|
|
90
|
+
abstract setValue( text: string ): void;
|
|
91
91
|
abstract getValue( ): string;
|
|
92
|
-
abstract showError( text: string );
|
|
93
|
-
abstract clearError( );
|
|
92
|
+
abstract showError( text: string ): void;
|
|
93
|
+
abstract clearError( ): void;
|
|
94
94
|
}
|
|
95
95
|
|
|
96
96
|
|
|
@@ -131,7 +131,7 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
|
|
|
131
131
|
this.m_lockchg = false;
|
|
132
132
|
}
|
|
133
133
|
|
|
134
|
-
_onKey(e) {
|
|
134
|
+
_onKey(e: KeyboardEvent ) {
|
|
135
135
|
if (this.m_popvis) {
|
|
136
136
|
if (e.key == "ArrowUp" || e.key == "ArrowDown") {
|
|
137
137
|
this.m_lockpop = true;
|
|
@@ -379,12 +379,12 @@ export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
|
|
|
379
379
|
*
|
|
380
380
|
*/
|
|
381
381
|
|
|
382
|
-
private _setInput( item, fireEv = false ) {
|
|
382
|
+
private _setInput( item: ListViewItem, fireEv = false ) {
|
|
383
383
|
|
|
384
384
|
if( item ) {
|
|
385
385
|
if( this.m_ui_input ) {
|
|
386
386
|
if( this.m_ui_input instanceof Input ) {
|
|
387
|
-
this.m_ui_input.value = item.text;
|
|
387
|
+
this.m_ui_input.value = item.text as string;
|
|
388
388
|
// fires a change event
|
|
389
389
|
if( fireEv ) {
|
|
390
390
|
this.m_ui_input.dom.dispatchEvent( new Event('input') );
|
package/lib/src/component.ts
CHANGED
|
@@ -54,6 +54,10 @@ export interface ICaptureInfo {
|
|
|
54
54
|
iframes: NodeListOf<HTMLIFrameElement>;
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
+
type CSSPropertyName = {
|
|
58
|
+
-readonly [K in keyof CSSStyleDeclaration & string]: CSSStyleDeclaration[K];
|
|
59
|
+
};
|
|
60
|
+
|
|
57
61
|
/** @ignore classname prefix for system classes */
|
|
58
62
|
const _x4_ns_prefix = 'x-';
|
|
59
63
|
|
|
@@ -66,7 +70,7 @@ const _x4_el_store = Symbol();
|
|
|
66
70
|
const _x4_el_sym = Symbol();
|
|
67
71
|
|
|
68
72
|
/** @ignore properties without 'px' unit */
|
|
69
|
-
export const _x4_unitless = {
|
|
73
|
+
export const _x4_unitless: Record<string,1> = {
|
|
70
74
|
animationIterationCount: 1, borderImageOutset: 1, borderImageSlice: 1, borderImageWidth: 1, boxFlex: 1, boxFlexGroup: 1,
|
|
71
75
|
boxOrdinalGroup: 1, columnCount: 1, flex: 1, flexGrow: 1, flexPositive: 1, flexShrink: 1, flexNegative: 1, flexOrder: 1,
|
|
72
76
|
gridRow: 1, gridColumn: 1, fontWeight: 1, lineClamp: 1, lineHeight: 1, opacity: 1, order: 1, orphans: 1, tabSize: 1, widows: 1,
|
|
@@ -114,7 +118,7 @@ interface IMap<T> {
|
|
|
114
118
|
export interface EvDblClick extends BasicEvent {
|
|
115
119
|
}
|
|
116
120
|
|
|
117
|
-
export function EvDblClick(context = null) {
|
|
121
|
+
export function EvDblClick(context: any = null) {
|
|
118
122
|
return BasicEvent<EvDblClick>({ context });
|
|
119
123
|
}
|
|
120
124
|
|
|
@@ -127,7 +131,7 @@ export interface EvFocus extends BasicEvent {
|
|
|
127
131
|
readonly focus: boolean;
|
|
128
132
|
}
|
|
129
133
|
|
|
130
|
-
export function EvFocus( focus = true, context = null) {
|
|
134
|
+
export function EvFocus( focus = true, context: any = null) {
|
|
131
135
|
return BasicEvent<EvFocus>({ focus, context });
|
|
132
136
|
}
|
|
133
137
|
|
|
@@ -151,7 +155,7 @@ export interface CProps<T extends CEventMap = CEventMap> extends BaseComponentPr
|
|
|
151
155
|
cls?: string; // elements classes (space separated), prefix class name with @ to make it system wide
|
|
152
156
|
id?: string; // element id
|
|
153
157
|
style?: IMap<string | number>; // element style
|
|
154
|
-
attrs?:
|
|
158
|
+
attrs?: Record<string,string|number|boolean>; // element attributes
|
|
155
159
|
|
|
156
160
|
dom_events?: IDOMEvents; // DOM event handlers
|
|
157
161
|
data?: any; // element user data (you can store everything you need here)
|
|
@@ -191,7 +195,7 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
|
|
|
191
195
|
private m_dom: HTMLElement;
|
|
192
196
|
private m_iprops: CInternalProps;
|
|
193
197
|
|
|
194
|
-
private static __sb_width; // scrollbar width
|
|
198
|
+
private static __sb_width: number; // scrollbar width
|
|
195
199
|
private static __comp_guid = 1000; // component global unique id
|
|
196
200
|
private static __privateEvents: any = {};
|
|
197
201
|
private static __sizeObserver: ResizeObserver; // resize observer
|
|
@@ -199,8 +203,8 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
|
|
|
199
203
|
//private static __intersectionObserver: IntersectionObserver; // visibility observer
|
|
200
204
|
|
|
201
205
|
private static __capture: ICaptureInfo = null;
|
|
202
|
-
private static __capture_mask = null;
|
|
203
|
-
private static __css = null;
|
|
206
|
+
private static __capture_mask: HTMLElement = null;
|
|
207
|
+
private static __css: Stylesheet = null;
|
|
204
208
|
|
|
205
209
|
constructor(props: P = null ) {
|
|
206
210
|
super(props ?? {} as P );
|
|
@@ -262,7 +266,7 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
|
|
|
262
266
|
return;
|
|
263
267
|
}
|
|
264
268
|
|
|
265
|
-
const append = (c) => {
|
|
269
|
+
const append = (c: ComponentOrString) => {
|
|
266
270
|
|
|
267
271
|
if (!this.m_props.content) {
|
|
268
272
|
this.m_props.content = [];
|
|
@@ -409,7 +413,7 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
|
|
|
409
413
|
* el.setStyle( {left:100} );
|
|
410
414
|
*/
|
|
411
415
|
|
|
412
|
-
public setStyle(style:
|
|
416
|
+
public setStyle(style: Record<string,any>) {
|
|
413
417
|
for (let s in style) {
|
|
414
418
|
this.setStyleValue(s, style[s]);
|
|
415
419
|
}
|
|
@@ -432,16 +436,16 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
|
|
|
432
436
|
}
|
|
433
437
|
|
|
434
438
|
private _setDomStyleValue(name: string, value: string | number) {
|
|
435
|
-
if (this.m_dom) {
|
|
436
439
|
|
|
440
|
+
if (this.m_dom) {
|
|
437
441
|
if (value === undefined) {
|
|
438
442
|
value = null;
|
|
439
443
|
}
|
|
440
|
-
else if (!_x4_unitless[name] && (isNumber(value) || reNumber.test(value))) {
|
|
444
|
+
else if (!_x4_unitless[name as string] && (isNumber(value) || reNumber.test(value))) {
|
|
441
445
|
value = value + 'px';
|
|
442
446
|
}
|
|
443
447
|
|
|
444
|
-
this.m_dom.style[name] = value;
|
|
448
|
+
(this.m_dom.style as any)[name] = value;
|
|
445
449
|
}
|
|
446
450
|
}
|
|
447
451
|
|
|
@@ -464,7 +468,7 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
|
|
|
464
468
|
*/
|
|
465
469
|
|
|
466
470
|
public getStyleValue(name: string) {
|
|
467
|
-
return this.getComputedStyle()[name];
|
|
471
|
+
return (this.getComputedStyle() as any)[name];
|
|
468
472
|
}
|
|
469
473
|
|
|
470
474
|
/**
|
|
@@ -549,7 +553,7 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
|
|
|
549
553
|
return this.m_props.id;
|
|
550
554
|
}
|
|
551
555
|
|
|
552
|
-
return this.m_props.attrs ? this.m_props.attrs[name] : undefined;
|
|
556
|
+
return this.m_props.attrs ? this.m_props.attrs[name]+'' : undefined;
|
|
553
557
|
}
|
|
554
558
|
}
|
|
555
559
|
|
|
@@ -591,7 +595,7 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
|
|
|
591
595
|
return;
|
|
592
596
|
}
|
|
593
597
|
|
|
594
|
-
let add = (c) => {
|
|
598
|
+
let add = (c: string) => {
|
|
595
599
|
|
|
596
600
|
if (c === undefined || c === null || c === '') {
|
|
597
601
|
return;
|
|
@@ -633,7 +637,7 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
|
|
|
633
637
|
return;
|
|
634
638
|
}
|
|
635
639
|
|
|
636
|
-
let remove = (c) => {
|
|
640
|
+
let remove = (c: string) => {
|
|
637
641
|
if (c === undefined || c === null || c === '') {
|
|
638
642
|
return;
|
|
639
643
|
}
|
|
@@ -684,7 +688,7 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
|
|
|
684
688
|
|
|
685
689
|
public toggleClass(name: string): void {
|
|
686
690
|
|
|
687
|
-
let toggle = (c) => {
|
|
691
|
+
let toggle = (c: string) => {
|
|
688
692
|
if (c === undefined && c === null && c === '') {
|
|
689
693
|
return;
|
|
690
694
|
}
|
|
@@ -796,7 +800,7 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
|
|
|
796
800
|
// prepare iprops
|
|
797
801
|
if (props.dom_events) {
|
|
798
802
|
for (let ename in props.dom_events) {
|
|
799
|
-
this._setDomEvent(ename, props.dom_events[ename]);
|
|
803
|
+
this._setDomEvent(ename, (props.dom_events as any)[ename]);
|
|
800
804
|
}
|
|
801
805
|
}
|
|
802
806
|
|
|
@@ -813,7 +817,7 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
|
|
|
813
817
|
this.m_dom = x4document.createElement( (props.tag ?? 'div') as any );
|
|
814
818
|
}
|
|
815
819
|
|
|
816
|
-
this.m_dom[_x4_el_sym] = this;
|
|
820
|
+
(this.m_dom as any)[_x4_el_sym] = this;
|
|
817
821
|
|
|
818
822
|
//let me = Object.getPrototypeOf(this);
|
|
819
823
|
//console.log( 'create', this.m_iprops.uid, me.constructor.name );
|
|
@@ -835,7 +839,7 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
|
|
|
835
839
|
for (let a in att) {
|
|
836
840
|
const attr = att[a];
|
|
837
841
|
if( attr!==false && attr!==undefined ) {
|
|
838
|
-
this._setDomAttribute(a, att[a]);
|
|
842
|
+
this._setDomAttribute(a, ''+att[a] );
|
|
839
843
|
}
|
|
840
844
|
}
|
|
841
845
|
}
|
|
@@ -932,7 +936,7 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
|
|
|
932
936
|
for (let i = 0, n = mutation.addedNodes.length; i < n; i++) {
|
|
933
937
|
|
|
934
938
|
let add = mutation.addedNodes[i] as HTMLElement;
|
|
935
|
-
let el = add[_x4_el_sym] as Component;
|
|
939
|
+
let el = (add as any)[_x4_el_sym] as Component;
|
|
936
940
|
|
|
937
941
|
if (el) {
|
|
938
942
|
el.enumChilds((c: Component) => {
|
|
@@ -959,8 +963,8 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
|
|
|
959
963
|
let _dom = this.m_dom;
|
|
960
964
|
|
|
961
965
|
// free attached resources
|
|
962
|
-
delete _dom[_x4_el_sym];
|
|
963
|
-
delete _dom[_x4_el_store];
|
|
966
|
+
delete (_dom as any)[_x4_el_sym];
|
|
967
|
+
delete (_dom as any)[_x4_el_store];
|
|
964
968
|
|
|
965
969
|
//
|
|
966
970
|
if (with_dom) {
|
|
@@ -1155,7 +1159,7 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
|
|
|
1155
1159
|
|
|
1156
1160
|
let _dom = this.m_dom;
|
|
1157
1161
|
if (_dom) {
|
|
1158
|
-
let store = _dom[_x4_el_store];
|
|
1162
|
+
let store = (_dom as any)[_x4_el_store];
|
|
1159
1163
|
if (store) {
|
|
1160
1164
|
delete store[type];
|
|
1161
1165
|
}
|
|
@@ -1171,10 +1175,10 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
|
|
|
1171
1175
|
private _createEvent(name: string, handler: Function, passive?: boolean) {
|
|
1172
1176
|
|
|
1173
1177
|
let _dom = this.m_dom;
|
|
1174
|
-
let store = _dom[_x4_el_store];
|
|
1178
|
+
let store = (_dom as any)[_x4_el_store];
|
|
1175
1179
|
|
|
1176
1180
|
if (!store) {
|
|
1177
|
-
store = _dom[_x4_el_store] = {};
|
|
1181
|
+
store = (_dom as any)[_x4_el_store] = {};
|
|
1178
1182
|
}
|
|
1179
1183
|
|
|
1180
1184
|
if (!store[name]) {
|
|
@@ -1186,14 +1190,14 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
|
|
|
1186
1190
|
store[name].push(handler);
|
|
1187
1191
|
}
|
|
1188
1192
|
|
|
1189
|
-
if (unbubbleEvents[name] === 1) {
|
|
1190
|
-
_dom['on' + name] = Component._dispatchUnbubbleEvent;
|
|
1193
|
+
if ((unbubbleEvents as any)[name] === 1) {
|
|
1194
|
+
(_dom as any)['on' + name] = Component._dispatchUnbubbleEvent;
|
|
1191
1195
|
}
|
|
1192
1196
|
else if (!Component.__privateEvents[name]) {
|
|
1193
1197
|
Component.__privateEvents[name] = true; // todo count it
|
|
1194
1198
|
|
|
1195
1199
|
if( passive===undefined ) {
|
|
1196
|
-
if ( passiveEvents[name] ) {
|
|
1200
|
+
if ( (passiveEvents as any)[name] ) {
|
|
1197
1201
|
x4document.addEventListener(name as any, Component._dispatchEvent, { passive: false, capture: true });
|
|
1198
1202
|
}
|
|
1199
1203
|
else {
|
|
@@ -1222,7 +1226,7 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
|
|
|
1222
1226
|
private static _dispatchEvent(ev: any) {
|
|
1223
1227
|
|
|
1224
1228
|
let target = ev.target,
|
|
1225
|
-
noup = unbubbleEvents[ev.type] === 2;
|
|
1229
|
+
noup = (unbubbleEvents as any)[ev.type] === 2;
|
|
1226
1230
|
|
|
1227
1231
|
while (target) {
|
|
1228
1232
|
if (target[_x4_el_store]) {
|
|
@@ -1317,7 +1321,7 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
|
|
|
1317
1321
|
|
|
1318
1322
|
while (el) {
|
|
1319
1323
|
// get component (if any)
|
|
1320
|
-
let cel = el[_x4_el_sym];
|
|
1324
|
+
let cel = (el as any)[_x4_el_sym];
|
|
1321
1325
|
if (cel) {
|
|
1322
1326
|
cb(cel);
|
|
1323
1327
|
|
|
@@ -1678,7 +1682,7 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
|
|
|
1678
1682
|
const srhCls = isString(classname);
|
|
1679
1683
|
|
|
1680
1684
|
while (dom) {
|
|
1681
|
-
let el: Component = dom[_x4_el_sym];
|
|
1685
|
+
let el: Component = (dom as any)[_x4_el_sym];
|
|
1682
1686
|
|
|
1683
1687
|
if( srhCls ) {
|
|
1684
1688
|
if( el && el.hasClass(classname) ) {
|
|
@@ -1695,7 +1699,7 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
|
|
|
1695
1699
|
return null;
|
|
1696
1700
|
}
|
|
1697
1701
|
else {
|
|
1698
|
-
return dom ? dom[_x4_el_sym] : null;
|
|
1702
|
+
return dom ? (dom as any)[_x4_el_sym] : null;
|
|
1699
1703
|
}
|
|
1700
1704
|
}
|
|
1701
1705
|
|
|
@@ -1747,8 +1751,8 @@ let fly_element: Component = null;
|
|
|
1747
1751
|
|
|
1748
1752
|
export function flyWrap<T extends Component>(dom: HTMLElement | EventTarget): T {
|
|
1749
1753
|
|
|
1750
|
-
if (dom[_x4_el_sym]) {
|
|
1751
|
-
return dom[_x4_el_sym];
|
|
1754
|
+
if ((dom as any)[_x4_el_sym]) {
|
|
1755
|
+
return (dom as any)[_x4_el_sym];
|
|
1752
1756
|
}
|
|
1753
1757
|
|
|
1754
1758
|
let f = fly_element;
|
|
@@ -1801,7 +1805,7 @@ export class Space extends Component {
|
|
|
1801
1805
|
let style = null;
|
|
1802
1806
|
|
|
1803
1807
|
while (dom) {
|
|
1804
|
-
let el: Component = dom[_x4_el_sym];
|
|
1808
|
+
let el: Component = (dom as any)[_x4_el_sym];
|
|
1805
1809
|
if (el.hasClass('@hlayout')) {
|
|
1806
1810
|
style = { width: this.m_size };
|
|
1807
1811
|
break;
|
|
@@ -1833,7 +1837,7 @@ export interface EvSize extends BasicEvent {
|
|
|
1833
1837
|
readonly mode: SizeMode;
|
|
1834
1838
|
}
|
|
1835
1839
|
|
|
1836
|
-
export function EvSize(size: Size, mode: SizeMode = null, context = null ): EvSize {
|
|
1840
|
+
export function EvSize(size: Size, mode: SizeMode = null, context: any = null ): EvSize {
|
|
1837
1841
|
return BasicEvent<EvSize>({ size, mode, context });
|
|
1838
1842
|
}
|
|
1839
1843
|
|
|
@@ -1927,7 +1931,7 @@ export class Separator extends Component<SeparatorProps, SeparatorEventMap> {
|
|
|
1927
1931
|
|
|
1928
1932
|
private _pointerMoved(ev: UIEvent) {
|
|
1929
1933
|
|
|
1930
|
-
let __move = (ex, ey) => {
|
|
1934
|
+
let __move = (ex: number, ey: number) => {
|
|
1931
1935
|
|
|
1932
1936
|
if (this.m_props.orientation == 'horizontal') {
|
|
1933
1937
|
|
|
@@ -2121,7 +2125,7 @@ export class SizerOverlay extends Component<SizerOverlayProps, SizerOverlayEvent
|
|
|
2121
2125
|
}
|
|
2122
2126
|
|
|
2123
2127
|
private _handle_mouse(ev: UIEvent) {
|
|
2124
|
-
let __move = (ex, ey) => {
|
|
2128
|
+
let __move = (ex:number, ey:number) => {
|
|
2125
2129
|
if (this._is_horz()) {
|
|
2126
2130
|
|
|
2127
2131
|
let width;
|
|
@@ -2200,7 +2204,7 @@ export interface Shortcut {
|
|
|
2200
2204
|
sequence: string;
|
|
2201
2205
|
name: string;
|
|
2202
2206
|
immediate: boolean;
|
|
2203
|
-
callback?:
|
|
2207
|
+
callback?: EventHandler<KeyboardEvent>;
|
|
2204
2208
|
}
|
|
2205
2209
|
|
|
2206
2210
|
interface EvShortcut extends BasicEvent {
|
package/lib/src/dialog.ts
CHANGED
package/lib/src/drag_manager.ts
CHANGED
|
@@ -55,7 +55,7 @@ class DragManager {
|
|
|
55
55
|
|
|
56
56
|
notified: Component;
|
|
57
57
|
|
|
58
|
-
timer;
|
|
58
|
+
timer: any; // pb with name of settimeout return
|
|
59
59
|
|
|
60
60
|
/**
|
|
61
61
|
*
|
|
@@ -178,14 +178,14 @@ class DragManager {
|
|
|
178
178
|
|
|
179
179
|
_check( ) {
|
|
180
180
|
|
|
181
|
-
const leaving = ( x ) => {
|
|
181
|
+
const leaving = ( x: Component ) => {
|
|
182
182
|
x.removeClass('drop-over');
|
|
183
183
|
|
|
184
184
|
const cb = x.getData( x_drag_cb );
|
|
185
185
|
cb( 'leave', this.dragSource );
|
|
186
186
|
}
|
|
187
187
|
|
|
188
|
-
const entering = ( x ) => {
|
|
188
|
+
const entering = ( x: Component ) => {
|
|
189
189
|
x.addClass('drop-over');
|
|
190
190
|
const cb = x.getData( x_drag_cb );
|
|
191
191
|
cb( 'enter', this.dragSource );
|
package/lib/src/fileupload.ts
CHANGED
|
@@ -105,14 +105,14 @@ export class ImageUpload extends FileUpload {
|
|
|
105
105
|
return this.m_path;
|
|
106
106
|
}
|
|
107
107
|
|
|
108
|
-
private _set_value(v) {
|
|
108
|
+
private _set_value(v: any) {
|
|
109
109
|
debugger;
|
|
110
110
|
}
|
|
111
111
|
|
|
112
|
-
private _handleChange(e) {
|
|
112
|
+
private _handleChange(e: any) {
|
|
113
113
|
|
|
114
114
|
let self = this;
|
|
115
|
-
function createThumbnail(file) {
|
|
115
|
+
function createThumbnail(file: Blob) {
|
|
116
116
|
|
|
117
117
|
let reader = new FileReader();
|
|
118
118
|
reader.addEventListener('load', (e) => {
|
package/lib/src/form.ts
CHANGED
|
@@ -324,7 +324,7 @@ export class Form<T extends FormProps = FormProps, E extends FormEventMap = Form
|
|
|
324
324
|
|
|
325
325
|
public getValues(): any {
|
|
326
326
|
let elements = this._getElements();
|
|
327
|
-
let result = {};
|
|
327
|
+
let result: Record<string,any> = {};
|
|
328
328
|
|
|
329
329
|
for (let e = 0; e < elements.length; e++) {
|
|
330
330
|
|
package/lib/src/svgcomponent.ts
CHANGED
|
@@ -50,10 +50,10 @@ function num( x: number ): number {
|
|
|
50
50
|
return Math.round( x * 1000 ) / 1000;
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
-
function clean( a, ...b ) {
|
|
53
|
+
function clean( a: any, ...b: any ) {
|
|
54
54
|
|
|
55
55
|
// just round number values to 3 digits
|
|
56
|
-
b = b.map( v => {
|
|
56
|
+
b = b.map( ( v: any ) => {
|
|
57
57
|
if( typeof v === 'number' && isFinite(v) ) {
|
|
58
58
|
return num(v);
|
|
59
59
|
}
|
|
@@ -79,10 +79,15 @@ export abstract class SVGItem {
|
|
|
79
79
|
this.m_style = new Map( );
|
|
80
80
|
}
|
|
81
81
|
|
|
82
|
+
setTag( t: string ) {
|
|
83
|
+
this.m_tag = t;
|
|
84
|
+
}
|
|
85
|
+
|
|
82
86
|
/**
|
|
83
87
|
* render the item
|
|
84
88
|
* @returns
|
|
85
89
|
*/
|
|
90
|
+
|
|
86
91
|
render( ) : string {
|
|
87
92
|
return `<${this.m_tag} ${this.renderAttrs()} ${this.renderStyle()}>${this.renderContent( )}</${this.m_tag}>`;
|
|
88
93
|
}
|
|
@@ -421,7 +426,7 @@ export class SVGGradient extends SVGItem {
|
|
|
421
426
|
|
|
422
427
|
override renderContent(): string {
|
|
423
428
|
|
|
424
|
-
const result = [];
|
|
429
|
+
const result: string[] = [];
|
|
425
430
|
this.m_stops.forEach( s => {
|
|
426
431
|
result.push( `<stop offset="${s.offset}%" stop-color="${s.color}"></stop>`);
|
|
427
432
|
});
|
|
@@ -449,13 +454,13 @@ export class SVGGroup extends SVGItem {
|
|
|
449
454
|
return path;
|
|
450
455
|
}
|
|
451
456
|
|
|
452
|
-
text( x, y, txt ) {
|
|
457
|
+
text( x: number, y: number, txt: string ) {
|
|
453
458
|
const text = new SVGText( x, y, txt );
|
|
454
459
|
this.m_items.push( text );
|
|
455
460
|
return text;
|
|
456
461
|
}
|
|
457
462
|
|
|
458
|
-
ellipse( x, y, r1, r2 = r1 ) {
|
|
463
|
+
ellipse( x: number, y: number, r1: number, r2 = r1 ): SVGShape {
|
|
459
464
|
const shape = new SVGShape( 'ellipse' );
|
|
460
465
|
shape.attr( 'cx', num(x)+'' );
|
|
461
466
|
shape.attr( 'cy', num(y)+'' );
|
|
@@ -465,7 +470,7 @@ export class SVGGroup extends SVGItem {
|
|
|
465
470
|
return shape;
|
|
466
471
|
}
|
|
467
472
|
|
|
468
|
-
rect( x, y, w, h ) {
|
|
473
|
+
rect( x: number, y: number, w: number, h: number ): SVGShape {
|
|
469
474
|
const shape = new SVGShape( 'rect' );
|
|
470
475
|
shape.attr( 'x', num(x)+'' );
|
|
471
476
|
shape.attr( 'y', num(y)+'' );
|
|
@@ -545,7 +550,7 @@ export class SVGPathBuilder extends SVGGroup
|
|
|
545
550
|
|
|
546
551
|
render() {
|
|
547
552
|
|
|
548
|
-
let result = [];
|
|
553
|
+
let result: string[] = [];
|
|
549
554
|
this.m_items.forEach(i => {
|
|
550
555
|
result.push(i.render());
|
|
551
556
|
});
|
package/lib/src/version.ts
CHANGED