@mulsense/xnew 0.4.1 → 0.4.3
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/dist/addons/xpixi.d.ts +4 -3
- package/dist/addons/xpixi.js +3 -26
- package/dist/addons/xpixi.mjs +3 -26
- package/dist/addons/xrapier2d.js +1 -1
- package/dist/addons/xrapier2d.mjs +1 -1
- package/dist/addons/xrapier3d.js +1 -1
- package/dist/addons/xrapier3d.mjs +1 -1
- package/dist/addons/xthree.d.ts +3 -3
- package/dist/addons/xthree.js +0 -5
- package/dist/addons/xthree.mjs +0 -5
- package/dist/xnew.d.ts +3 -45
- package/dist/xnew.js +28 -114
- package/dist/xnew.mjs +28 -114
- package/package.json +1 -1
package/dist/addons/xpixi.d.ts
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
|
+
import * as PIXI from 'pixi.js';
|
|
2
|
+
|
|
1
3
|
declare const _default: {
|
|
2
4
|
initialize({ renderer, canvas }?: {
|
|
3
5
|
renderer?: any;
|
|
4
6
|
canvas?: HTMLCanvasElement | null;
|
|
5
|
-
update?: boolean;
|
|
6
7
|
}): void;
|
|
7
8
|
nest(object: any): any;
|
|
8
9
|
readonly renderer: any;
|
|
9
|
-
readonly scene:
|
|
10
|
-
readonly canvas:
|
|
10
|
+
readonly scene: PIXI.Container;
|
|
11
|
+
readonly canvas: HTMLCanvasElement;
|
|
11
12
|
};
|
|
12
13
|
|
|
13
14
|
export { _default as default };
|
package/dist/addons/xpixi.js
CHANGED
|
@@ -24,20 +24,13 @@
|
|
|
24
24
|
var PIXI__namespace = /*#__PURE__*/_interopNamespaceDefault(PIXI);
|
|
25
25
|
|
|
26
26
|
var xpixi = {
|
|
27
|
-
initialize({ renderer = null, canvas = null
|
|
28
|
-
xnew.extend(Root, { renderer, canvas
|
|
27
|
+
initialize({ renderer = null, canvas = null } = {}) {
|
|
28
|
+
xnew.extend(Root, { renderer, canvas });
|
|
29
29
|
},
|
|
30
30
|
nest(object) {
|
|
31
31
|
xnew.extend(Nest, { object });
|
|
32
32
|
return object;
|
|
33
33
|
},
|
|
34
|
-
sync(canvas) {
|
|
35
|
-
const texture = PIXI__namespace.Texture.from(canvas);
|
|
36
|
-
xnew(PreUpdate, () => {
|
|
37
|
-
texture.source.update();
|
|
38
|
-
});
|
|
39
|
-
return texture;
|
|
40
|
-
},
|
|
41
34
|
get renderer() {
|
|
42
35
|
var _a;
|
|
43
36
|
return (_a = xnew.context('xpixi.root')) === null || _a === void 0 ? void 0 : _a.renderer;
|
|
@@ -51,7 +44,7 @@
|
|
|
51
44
|
return (_a = xnew.context('xpixi.root')) === null || _a === void 0 ? void 0 : _a.canvas;
|
|
52
45
|
},
|
|
53
46
|
};
|
|
54
|
-
function Root(unit, { canvas
|
|
47
|
+
function Root(unit, { canvas }) {
|
|
55
48
|
const root = {};
|
|
56
49
|
xnew.context('xpixi.root', root);
|
|
57
50
|
root.canvas = canvas;
|
|
@@ -60,17 +53,8 @@
|
|
|
60
53
|
width: canvas.width, height: canvas.height, view: canvas,
|
|
61
54
|
antialias: true, backgroundAlpha: 0,
|
|
62
55
|
})).then((renderer) => root.renderer = renderer);
|
|
63
|
-
root.updates = [];
|
|
64
56
|
root.scene = new PIXI__namespace.Container();
|
|
65
57
|
xnew.context('xpixi.object', root.scene);
|
|
66
|
-
if (update === true) {
|
|
67
|
-
unit.on('update', () => {
|
|
68
|
-
root.updates.forEach((update) => {
|
|
69
|
-
update();
|
|
70
|
-
});
|
|
71
|
-
root.renderer.render(root.scene);
|
|
72
|
-
});
|
|
73
|
-
}
|
|
74
58
|
}
|
|
75
59
|
function Nest(unit, { object }) {
|
|
76
60
|
const parent = xnew.context('xpixi.object');
|
|
@@ -80,13 +64,6 @@
|
|
|
80
64
|
parent.removeChild(object);
|
|
81
65
|
});
|
|
82
66
|
}
|
|
83
|
-
function PreUpdate(unit, callback) {
|
|
84
|
-
const root = xnew.context('xpixi.root');
|
|
85
|
-
root.updates.push(callback);
|
|
86
|
-
unit.on('finalize', () => {
|
|
87
|
-
root.updates = root.updates.filter((update) => update !== callback);
|
|
88
|
-
});
|
|
89
|
-
}
|
|
90
67
|
|
|
91
68
|
return xpixi;
|
|
92
69
|
|
package/dist/addons/xpixi.mjs
CHANGED
|
@@ -2,20 +2,13 @@ import xnew from '@mulsense/xnew';
|
|
|
2
2
|
import * as PIXI from 'pixi.js';
|
|
3
3
|
|
|
4
4
|
var xpixi = {
|
|
5
|
-
initialize({ renderer = null, canvas = null
|
|
6
|
-
xnew.extend(Root, { renderer, canvas
|
|
5
|
+
initialize({ renderer = null, canvas = null } = {}) {
|
|
6
|
+
xnew.extend(Root, { renderer, canvas });
|
|
7
7
|
},
|
|
8
8
|
nest(object) {
|
|
9
9
|
xnew.extend(Nest, { object });
|
|
10
10
|
return object;
|
|
11
11
|
},
|
|
12
|
-
sync(canvas) {
|
|
13
|
-
const texture = PIXI.Texture.from(canvas);
|
|
14
|
-
xnew(PreUpdate, () => {
|
|
15
|
-
texture.source.update();
|
|
16
|
-
});
|
|
17
|
-
return texture;
|
|
18
|
-
},
|
|
19
12
|
get renderer() {
|
|
20
13
|
var _a;
|
|
21
14
|
return (_a = xnew.context('xpixi.root')) === null || _a === void 0 ? void 0 : _a.renderer;
|
|
@@ -29,7 +22,7 @@ var xpixi = {
|
|
|
29
22
|
return (_a = xnew.context('xpixi.root')) === null || _a === void 0 ? void 0 : _a.canvas;
|
|
30
23
|
},
|
|
31
24
|
};
|
|
32
|
-
function Root(unit, { canvas
|
|
25
|
+
function Root(unit, { canvas }) {
|
|
33
26
|
const root = {};
|
|
34
27
|
xnew.context('xpixi.root', root);
|
|
35
28
|
root.canvas = canvas;
|
|
@@ -38,17 +31,8 @@ function Root(unit, { canvas, update }) {
|
|
|
38
31
|
width: canvas.width, height: canvas.height, view: canvas,
|
|
39
32
|
antialias: true, backgroundAlpha: 0,
|
|
40
33
|
})).then((renderer) => root.renderer = renderer);
|
|
41
|
-
root.updates = [];
|
|
42
34
|
root.scene = new PIXI.Container();
|
|
43
35
|
xnew.context('xpixi.object', root.scene);
|
|
44
|
-
if (update === true) {
|
|
45
|
-
unit.on('update', () => {
|
|
46
|
-
root.updates.forEach((update) => {
|
|
47
|
-
update();
|
|
48
|
-
});
|
|
49
|
-
root.renderer.render(root.scene);
|
|
50
|
-
});
|
|
51
|
-
}
|
|
52
36
|
}
|
|
53
37
|
function Nest(unit, { object }) {
|
|
54
38
|
const parent = xnew.context('xpixi.object');
|
|
@@ -58,12 +42,5 @@ function Nest(unit, { object }) {
|
|
|
58
42
|
parent.removeChild(object);
|
|
59
43
|
});
|
|
60
44
|
}
|
|
61
|
-
function PreUpdate(unit, callback) {
|
|
62
|
-
const root = xnew.context('xpixi.root');
|
|
63
|
-
root.updates.push(callback);
|
|
64
|
-
unit.on('finalize', () => {
|
|
65
|
-
root.updates = root.updates.filter((update) => update !== callback);
|
|
66
|
-
});
|
|
67
|
-
}
|
|
68
45
|
|
|
69
46
|
export { xpixi as default };
|
package/dist/addons/xrapier2d.js
CHANGED
|
@@ -2,7 +2,7 @@ import xnew from '@mulsense/xnew';
|
|
|
2
2
|
import RAPIER from '@dimforge/rapier2d-compat';
|
|
3
3
|
|
|
4
4
|
var xrapier2d = {
|
|
5
|
-
initialize({ gravity = { x: 0.0, y: 9.81 } } = {}) {
|
|
5
|
+
initialize({ gravity = { x: 0.0, y: -9.81 } } = {}) {
|
|
6
6
|
xnew.extend(Root, { gravity });
|
|
7
7
|
},
|
|
8
8
|
get world() {
|
package/dist/addons/xrapier3d.js
CHANGED
|
@@ -2,7 +2,7 @@ import xnew from '@mulsense/xnew';
|
|
|
2
2
|
import RAPIER from '@dimforge/rapier3d-compat';
|
|
3
3
|
|
|
4
4
|
var xrapier3d = {
|
|
5
|
-
initialize({ gravity = { x: 0.0, y: 9.81, z: 0.0 } } = {}) {
|
|
5
|
+
initialize({ gravity = { x: 0.0, y: -9.81, z: 0.0 } } = {}) {
|
|
6
6
|
xnew.extend(Root, { gravity });
|
|
7
7
|
},
|
|
8
8
|
get world() {
|
package/dist/addons/xthree.d.ts
CHANGED
|
@@ -9,9 +9,9 @@ declare const _default: {
|
|
|
9
9
|
}): void;
|
|
10
10
|
nest(object: any): any;
|
|
11
11
|
readonly renderer: any;
|
|
12
|
-
readonly camera:
|
|
13
|
-
readonly scene:
|
|
14
|
-
readonly canvas:
|
|
12
|
+
readonly camera: THREE.Camera;
|
|
13
|
+
readonly scene: THREE.Scene;
|
|
14
|
+
readonly canvas: HTMLCanvasElement;
|
|
15
15
|
};
|
|
16
16
|
|
|
17
17
|
export { _default as default };
|
package/dist/addons/xthree.js
CHANGED
|
@@ -57,11 +57,6 @@
|
|
|
57
57
|
root.camera = camera !== null && camera !== void 0 ? camera : new THREE__namespace.PerspectiveCamera(45, root.renderer.domElement.width / root.renderer.domElement.height);
|
|
58
58
|
root.scene = new THREE__namespace.Scene();
|
|
59
59
|
xnew.context('xthree.object', root.scene);
|
|
60
|
-
if (update === true) {
|
|
61
|
-
unit.on('update', () => {
|
|
62
|
-
root.renderer.render(root.scene, root.camera);
|
|
63
|
-
});
|
|
64
|
-
}
|
|
65
60
|
}
|
|
66
61
|
function Nest(unit, { object }) {
|
|
67
62
|
const parent = xnew.context('xthree.object');
|
package/dist/addons/xthree.mjs
CHANGED
|
@@ -35,11 +35,6 @@ function Root(unit, { canvas, camera, update }) {
|
|
|
35
35
|
root.camera = camera !== null && camera !== void 0 ? camera : new THREE.PerspectiveCamera(45, root.renderer.domElement.width / root.renderer.domElement.height);
|
|
36
36
|
root.scene = new THREE.Scene();
|
|
37
37
|
xnew.context('xthree.object', root.scene);
|
|
38
|
-
if (update === true) {
|
|
39
|
-
unit.on('update', () => {
|
|
40
|
-
root.renderer.render(root.scene, root.camera);
|
|
41
|
-
});
|
|
42
|
-
}
|
|
43
38
|
}
|
|
44
39
|
function Nest(unit, { object }) {
|
|
45
40
|
const parent = xnew.context('xthree.object');
|
package/dist/xnew.d.ts
CHANGED
|
@@ -22,19 +22,10 @@ declare class MapMap<Key1, Key2, Value> extends Map<Key1, Map<Key2, Value>> {
|
|
|
22
22
|
|
|
23
23
|
type UnitElement = HTMLElement | SVGElement;
|
|
24
24
|
|
|
25
|
-
interface EventProps {
|
|
26
|
-
element: UnitElement;
|
|
27
|
-
type: string;
|
|
28
|
-
listener: Function;
|
|
29
|
-
options?: boolean | AddEventListenerOptions;
|
|
30
|
-
}
|
|
31
25
|
declare class EventManager {
|
|
32
26
|
private map;
|
|
33
|
-
add(
|
|
34
|
-
remove(
|
|
35
|
-
type: string;
|
|
36
|
-
listener: Function;
|
|
37
|
-
}): void;
|
|
27
|
+
add(element: UnitElement, type: string, listener: Function, options?: boolean | AddEventListenerOptions): void;
|
|
28
|
+
remove(type: string, listener: Function): void;
|
|
38
29
|
private basic;
|
|
39
30
|
private resize;
|
|
40
31
|
private click;
|
|
@@ -286,7 +277,7 @@ declare const xnew$1: CreateUnit & {
|
|
|
286
277
|
protect(): void;
|
|
287
278
|
};
|
|
288
279
|
|
|
289
|
-
declare function AccordionFrame(
|
|
280
|
+
declare function AccordionFrame(unit: Unit, { open, duration, easing }?: {
|
|
290
281
|
open?: boolean;
|
|
291
282
|
duration?: number;
|
|
292
283
|
easing?: string;
|
|
@@ -295,10 +286,6 @@ declare function AccordionFrame(frame: Unit, { open, duration, easing }?: {
|
|
|
295
286
|
open(): void;
|
|
296
287
|
close(): void;
|
|
297
288
|
};
|
|
298
|
-
declare function AccordionHeader(unit: Unit, {}?: {}): void;
|
|
299
|
-
declare function AccordionBullet(unit: Unit, { type }?: {
|
|
300
|
-
type?: string;
|
|
301
|
-
}): void;
|
|
302
289
|
declare function AccordionContent(unit: Unit, {}?: {}): {
|
|
303
290
|
transition({ element, rate }: {
|
|
304
291
|
element: HTMLElement;
|
|
@@ -330,30 +317,6 @@ declare function ModalContent(content: Unit, { background }?: {
|
|
|
330
317
|
}): void;
|
|
331
318
|
};
|
|
332
319
|
|
|
333
|
-
declare function TabFrame(frame: Unit, { select }?: {
|
|
334
|
-
select?: string;
|
|
335
|
-
}): void;
|
|
336
|
-
declare function TabButton(button: Unit, { key }?: {
|
|
337
|
-
key?: string;
|
|
338
|
-
}): {
|
|
339
|
-
select({ element }: {
|
|
340
|
-
element: HTMLElement;
|
|
341
|
-
}): void;
|
|
342
|
-
deselect({ element }: {
|
|
343
|
-
element: HTMLElement;
|
|
344
|
-
}): void;
|
|
345
|
-
};
|
|
346
|
-
declare function TabContent(content: Unit, { key }?: {
|
|
347
|
-
key?: string;
|
|
348
|
-
}): {
|
|
349
|
-
select({ element }: {
|
|
350
|
-
element: HTMLElement;
|
|
351
|
-
}): void;
|
|
352
|
-
deselect({ element }: {
|
|
353
|
-
element: HTMLElement;
|
|
354
|
-
}): void;
|
|
355
|
-
};
|
|
356
|
-
|
|
357
320
|
declare function DragFrame(frame: Unit, { x, y }?: {
|
|
358
321
|
x?: number;
|
|
359
322
|
y?: number;
|
|
@@ -757,12 +720,7 @@ declare const basics: {
|
|
|
757
720
|
ModalFrame: typeof ModalFrame;
|
|
758
721
|
ModalContent: typeof ModalContent;
|
|
759
722
|
AccordionFrame: typeof AccordionFrame;
|
|
760
|
-
AccordionHeader: typeof AccordionHeader;
|
|
761
|
-
AccordionBullet: typeof AccordionBullet;
|
|
762
723
|
AccordionContent: typeof AccordionContent;
|
|
763
|
-
TabFrame: typeof TabFrame;
|
|
764
|
-
TabButton: typeof TabButton;
|
|
765
|
-
TabContent: typeof TabContent;
|
|
766
724
|
TextStream: typeof TextStream;
|
|
767
725
|
DragFrame: typeof DragFrame;
|
|
768
726
|
DragTarget: typeof DragTarget;
|
package/dist/xnew.js
CHANGED
|
@@ -212,7 +212,8 @@
|
|
|
212
212
|
constructor() {
|
|
213
213
|
this.map = new MapMap();
|
|
214
214
|
}
|
|
215
|
-
add(
|
|
215
|
+
add(element, type, listener, options) {
|
|
216
|
+
const props = { element, type, listener, options };
|
|
216
217
|
let finalize;
|
|
217
218
|
if (props.type === 'resize') {
|
|
218
219
|
finalize = this.resize(props);
|
|
@@ -255,7 +256,7 @@
|
|
|
255
256
|
}
|
|
256
257
|
this.map.set(props.type, props.listener, finalize);
|
|
257
258
|
}
|
|
258
|
-
remove(
|
|
259
|
+
remove(type, listener) {
|
|
259
260
|
const finalize = this.map.get(type, listener);
|
|
260
261
|
if (finalize) {
|
|
261
262
|
finalize();
|
|
@@ -458,9 +459,9 @@
|
|
|
458
459
|
}
|
|
459
460
|
isActive = false;
|
|
460
461
|
};
|
|
461
|
-
this.add(
|
|
462
|
-
this.add(
|
|
463
|
-
this.add(
|
|
462
|
+
this.add(element, 'dragstart', dragstart, options);
|
|
463
|
+
this.add(element, 'dragmove', dragmove, options);
|
|
464
|
+
this.add(element, 'dragend', dragend, options);
|
|
464
465
|
function getOthers(id) {
|
|
465
466
|
const backup = map.get(id);
|
|
466
467
|
map.delete(id);
|
|
@@ -469,9 +470,9 @@
|
|
|
469
470
|
return others;
|
|
470
471
|
}
|
|
471
472
|
return () => {
|
|
472
|
-
this.remove(
|
|
473
|
-
this.remove(
|
|
474
|
-
this.remove(
|
|
473
|
+
this.remove('dragstart', dragstart);
|
|
474
|
+
this.remove('dragmove', dragmove);
|
|
475
|
+
this.remove('dragend', dragend);
|
|
475
476
|
};
|
|
476
477
|
}
|
|
477
478
|
key(props) {
|
|
@@ -803,15 +804,14 @@
|
|
|
803
804
|
}
|
|
804
805
|
static on(unit, type, listener, options) {
|
|
805
806
|
if (SYSTEM_EVENTS.includes(type)) {
|
|
806
|
-
|
|
807
|
-
unit._.systems[type].push({ listener, execute });
|
|
807
|
+
unit._.systems[type].push({ listener, execute: Unit.wrap(Unit.currentUnit, listener) });
|
|
808
808
|
}
|
|
809
809
|
if (unit._.listeners.has(type, listener) === false) {
|
|
810
810
|
const execute = Unit.wrap(Unit.currentUnit, listener);
|
|
811
811
|
unit._.listeners.set(type, listener, { element: unit.element, component: unit._.currentComponent, execute });
|
|
812
812
|
Unit.type2units.add(type, unit);
|
|
813
813
|
if (/^[A-Za-z]/.test(type)) {
|
|
814
|
-
unit._.eventManager.add(
|
|
814
|
+
unit._.eventManager.add(unit.element, type, execute, options);
|
|
815
815
|
}
|
|
816
816
|
}
|
|
817
817
|
}
|
|
@@ -825,7 +825,7 @@
|
|
|
825
825
|
return;
|
|
826
826
|
unit._.listeners.delete(type, listener);
|
|
827
827
|
if (/^[A-Za-z]/.test(type)) {
|
|
828
|
-
unit._.eventManager.remove(
|
|
828
|
+
unit._.eventManager.remove(type, item.execute);
|
|
829
829
|
}
|
|
830
830
|
});
|
|
831
831
|
if (unit._.listeners.has(type) === false) {
|
|
@@ -1163,63 +1163,44 @@
|
|
|
1163
1163
|
}
|
|
1164
1164
|
});
|
|
1165
1165
|
|
|
1166
|
-
function AccordionFrame(
|
|
1166
|
+
function AccordionFrame(unit, { open = false, duration = 200, easing = 'ease' } = {}) {
|
|
1167
1167
|
const internal = xnew$1((internal) => {
|
|
1168
1168
|
return {
|
|
1169
|
-
frame, open, rate: 0.0,
|
|
1170
|
-
|
|
1169
|
+
frame: unit, open, rate: 0.0,
|
|
1170
|
+
transition(rate) {
|
|
1171
|
+
xnew$1.emit('-transition', { rate });
|
|
1172
|
+
}
|
|
1171
1173
|
};
|
|
1172
1174
|
});
|
|
1173
1175
|
xnew$1.context('xnew.accordionframe', internal);
|
|
1174
|
-
internal.on('-transition', ({ rate }) =>
|
|
1175
|
-
|
|
1176
|
+
internal.on('-transition', ({ rate }) => {
|
|
1177
|
+
internal.rate = rate;
|
|
1178
|
+
xnew$1.emit('-transition', { rate });
|
|
1179
|
+
});
|
|
1180
|
+
xnew$1.timeout(() => {
|
|
1181
|
+
internal.transition(open ? 1.0 : 0.0);
|
|
1182
|
+
});
|
|
1176
1183
|
return {
|
|
1177
1184
|
toggle() {
|
|
1178
1185
|
if (internal.rate === 1.0) {
|
|
1179
|
-
|
|
1186
|
+
unit.close();
|
|
1180
1187
|
}
|
|
1181
1188
|
else if (internal.rate === 0.0) {
|
|
1182
|
-
|
|
1189
|
+
unit.open();
|
|
1183
1190
|
}
|
|
1184
1191
|
},
|
|
1185
1192
|
open() {
|
|
1186
1193
|
if (internal.rate === 0.0) {
|
|
1187
|
-
xnew$1.transition((x) => internal.
|
|
1194
|
+
xnew$1.transition((x) => internal.transition(x), duration, easing);
|
|
1188
1195
|
}
|
|
1189
1196
|
},
|
|
1190
1197
|
close() {
|
|
1191
1198
|
if (internal.rate === 1.0) {
|
|
1192
|
-
xnew$1.transition((x) => internal.
|
|
1199
|
+
xnew$1.transition((x) => internal.transition(1.0 - x), duration, easing);
|
|
1193
1200
|
}
|
|
1194
1201
|
}
|
|
1195
1202
|
};
|
|
1196
1203
|
}
|
|
1197
|
-
function AccordionHeader(unit, {} = {}) {
|
|
1198
|
-
const internal = xnew$1.context('xnew.accordionframe');
|
|
1199
|
-
xnew$1.nest('<button style="display: flex; align-items: center; margin: 0; padding: 0; width: 100%; text-align: left; border: none; font: inherit; color: inherit; background: none; cursor: pointer;">');
|
|
1200
|
-
unit.on('click', () => internal.frame.toggle());
|
|
1201
|
-
}
|
|
1202
|
-
function AccordionBullet(unit, { type = 'arrow' } = {}) {
|
|
1203
|
-
const internal = xnew$1.context('xnew.accordionframe');
|
|
1204
|
-
xnew$1.nest('<div style="display:inline-block; position: relative; width: 0.55em; margin: 0 0.3em;">');
|
|
1205
|
-
if (type === 'arrow') {
|
|
1206
|
-
const arrow = xnew$1(`<div style="width: 100%; height: 0.55em; border-right: 0.12em solid currentColor; border-bottom: 0.12em solid currentColor; box-sizing: border-box; transform-origin: center;">`);
|
|
1207
|
-
arrow.element.style.transform = `rotate(${internal.rate * 90 - 45}deg)`;
|
|
1208
|
-
internal.on('-transition', ({ rate }) => {
|
|
1209
|
-
arrow.element.style.transform = `rotate(${rate * 90 - 45}deg)`;
|
|
1210
|
-
});
|
|
1211
|
-
}
|
|
1212
|
-
else if (type === 'plusminus') {
|
|
1213
|
-
const line1 = xnew$1(`<div style="position: absolute; width: 100%; border-top: 0.06em solid currentColor; border-bottom: 0.06em solid currentColor; box-sizing: border-box; transform-origin: center;">`);
|
|
1214
|
-
const line2 = xnew$1(`<div style="position: absolute; width: 100%; border-top: 0.06em solid currentColor; border-bottom: 0.06em solid currentColor; box-sizing: border-box; transform-origin: center;">`);
|
|
1215
|
-
line2.element.style.transform = `rotate(90deg)`;
|
|
1216
|
-
line2.element.style.opacity = `${1.0 - internal.rate}`;
|
|
1217
|
-
internal.on('-transition', ({ rate }) => {
|
|
1218
|
-
line1.element.style.transform = `rotate(${90 + rate * 90}deg)`;
|
|
1219
|
-
line2.element.style.transform = `rotate(${rate * 180}deg)`;
|
|
1220
|
-
});
|
|
1221
|
-
}
|
|
1222
|
-
}
|
|
1223
1204
|
function AccordionContent(unit, {} = {}) {
|
|
1224
1205
|
const internal = xnew$1.context('xnew.accordionframe');
|
|
1225
1206
|
xnew$1.nest(`<div style="display: ${internal.open ? 'block' : 'none'};">`);
|
|
@@ -1324,68 +1305,6 @@
|
|
|
1324
1305
|
};
|
|
1325
1306
|
}
|
|
1326
1307
|
|
|
1327
|
-
function TabFrame(frame, { select } = {}) {
|
|
1328
|
-
const internal = xnew$1((internal) => {
|
|
1329
|
-
const buttons = new Map();
|
|
1330
|
-
const contents = new Map();
|
|
1331
|
-
return {
|
|
1332
|
-
frame, buttons, contents,
|
|
1333
|
-
emit(type, ...args) { xnew$1.emit(type, ...args); }
|
|
1334
|
-
};
|
|
1335
|
-
});
|
|
1336
|
-
xnew$1.context('xnew.tabframe', internal);
|
|
1337
|
-
xnew$1.timeout(() => internal.emit('-select', { key: select !== null && select !== void 0 ? select : [...internal.buttons.keys()][0] }));
|
|
1338
|
-
}
|
|
1339
|
-
function TabButton(button, { key } = {}) {
|
|
1340
|
-
const internal = xnew$1.context('xnew.tabframe');
|
|
1341
|
-
const div = xnew$1.nest('<div>');
|
|
1342
|
-
key = key !== null && key !== void 0 ? key : (internal.buttons.size).toString();
|
|
1343
|
-
internal.buttons.set(key, button);
|
|
1344
|
-
button.on('click', () => {
|
|
1345
|
-
internal.emit('-select', { key });
|
|
1346
|
-
});
|
|
1347
|
-
internal.on('-select', ({ key }) => {
|
|
1348
|
-
const select = internal.buttons.get(key);
|
|
1349
|
-
if (select === button) {
|
|
1350
|
-
button.select({ element: div });
|
|
1351
|
-
}
|
|
1352
|
-
else {
|
|
1353
|
-
button.deselect({ element: div });
|
|
1354
|
-
}
|
|
1355
|
-
});
|
|
1356
|
-
return {
|
|
1357
|
-
select({ element }) {
|
|
1358
|
-
Object.assign(element.style, { opacity: 1.0, cursor: 'text' });
|
|
1359
|
-
},
|
|
1360
|
-
deselect({ element }) {
|
|
1361
|
-
Object.assign(element.style, { opacity: 0.6, cursor: 'pointer' });
|
|
1362
|
-
}
|
|
1363
|
-
};
|
|
1364
|
-
}
|
|
1365
|
-
function TabContent(content, { key } = {}) {
|
|
1366
|
-
const internal = xnew$1.context('xnew.tabframe');
|
|
1367
|
-
const div = xnew$1.nest('<div style="display: none;">');
|
|
1368
|
-
key = key !== null && key !== void 0 ? key : (internal.contents.size).toString();
|
|
1369
|
-
internal.contents.set(key, content);
|
|
1370
|
-
internal.on('-select', ({ key }) => {
|
|
1371
|
-
const select = internal.contents.get(key);
|
|
1372
|
-
if (select === content) {
|
|
1373
|
-
content.select({ element: div });
|
|
1374
|
-
}
|
|
1375
|
-
else {
|
|
1376
|
-
content.deselect({ element: div });
|
|
1377
|
-
}
|
|
1378
|
-
});
|
|
1379
|
-
return {
|
|
1380
|
-
select({ element }) {
|
|
1381
|
-
Object.assign(element.style, { display: 'block' });
|
|
1382
|
-
},
|
|
1383
|
-
deselect({ element }) {
|
|
1384
|
-
Object.assign(element.style, { display: 'none' });
|
|
1385
|
-
}
|
|
1386
|
-
};
|
|
1387
|
-
}
|
|
1388
|
-
|
|
1389
1308
|
function DragFrame(frame, { x = 0, y = 0 } = {}) {
|
|
1390
1309
|
const absolute = xnew$1.nest(`<div style="position: absolute; top: ${y}px; left: ${x}px;">`);
|
|
1391
1310
|
xnew$1.context('xnew.dragframe', { frame, absolute });
|
|
@@ -3479,12 +3398,7 @@
|
|
|
3479
3398
|
ModalFrame,
|
|
3480
3399
|
ModalContent,
|
|
3481
3400
|
AccordionFrame,
|
|
3482
|
-
AccordionHeader,
|
|
3483
|
-
AccordionBullet,
|
|
3484
3401
|
AccordionContent,
|
|
3485
|
-
TabFrame,
|
|
3486
|
-
TabButton,
|
|
3487
|
-
TabContent,
|
|
3488
3402
|
TextStream,
|
|
3489
3403
|
DragFrame,
|
|
3490
3404
|
DragTarget,
|
package/dist/xnew.mjs
CHANGED
|
@@ -206,7 +206,8 @@ class EventManager {
|
|
|
206
206
|
constructor() {
|
|
207
207
|
this.map = new MapMap();
|
|
208
208
|
}
|
|
209
|
-
add(
|
|
209
|
+
add(element, type, listener, options) {
|
|
210
|
+
const props = { element, type, listener, options };
|
|
210
211
|
let finalize;
|
|
211
212
|
if (props.type === 'resize') {
|
|
212
213
|
finalize = this.resize(props);
|
|
@@ -249,7 +250,7 @@ class EventManager {
|
|
|
249
250
|
}
|
|
250
251
|
this.map.set(props.type, props.listener, finalize);
|
|
251
252
|
}
|
|
252
|
-
remove(
|
|
253
|
+
remove(type, listener) {
|
|
253
254
|
const finalize = this.map.get(type, listener);
|
|
254
255
|
if (finalize) {
|
|
255
256
|
finalize();
|
|
@@ -452,9 +453,9 @@ class EventManager {
|
|
|
452
453
|
}
|
|
453
454
|
isActive = false;
|
|
454
455
|
};
|
|
455
|
-
this.add(
|
|
456
|
-
this.add(
|
|
457
|
-
this.add(
|
|
456
|
+
this.add(element, 'dragstart', dragstart, options);
|
|
457
|
+
this.add(element, 'dragmove', dragmove, options);
|
|
458
|
+
this.add(element, 'dragend', dragend, options);
|
|
458
459
|
function getOthers(id) {
|
|
459
460
|
const backup = map.get(id);
|
|
460
461
|
map.delete(id);
|
|
@@ -463,9 +464,9 @@ class EventManager {
|
|
|
463
464
|
return others;
|
|
464
465
|
}
|
|
465
466
|
return () => {
|
|
466
|
-
this.remove(
|
|
467
|
-
this.remove(
|
|
468
|
-
this.remove(
|
|
467
|
+
this.remove('dragstart', dragstart);
|
|
468
|
+
this.remove('dragmove', dragmove);
|
|
469
|
+
this.remove('dragend', dragend);
|
|
469
470
|
};
|
|
470
471
|
}
|
|
471
472
|
key(props) {
|
|
@@ -797,15 +798,14 @@ class Unit {
|
|
|
797
798
|
}
|
|
798
799
|
static on(unit, type, listener, options) {
|
|
799
800
|
if (SYSTEM_EVENTS.includes(type)) {
|
|
800
|
-
|
|
801
|
-
unit._.systems[type].push({ listener, execute });
|
|
801
|
+
unit._.systems[type].push({ listener, execute: Unit.wrap(Unit.currentUnit, listener) });
|
|
802
802
|
}
|
|
803
803
|
if (unit._.listeners.has(type, listener) === false) {
|
|
804
804
|
const execute = Unit.wrap(Unit.currentUnit, listener);
|
|
805
805
|
unit._.listeners.set(type, listener, { element: unit.element, component: unit._.currentComponent, execute });
|
|
806
806
|
Unit.type2units.add(type, unit);
|
|
807
807
|
if (/^[A-Za-z]/.test(type)) {
|
|
808
|
-
unit._.eventManager.add(
|
|
808
|
+
unit._.eventManager.add(unit.element, type, execute, options);
|
|
809
809
|
}
|
|
810
810
|
}
|
|
811
811
|
}
|
|
@@ -819,7 +819,7 @@ class Unit {
|
|
|
819
819
|
return;
|
|
820
820
|
unit._.listeners.delete(type, listener);
|
|
821
821
|
if (/^[A-Za-z]/.test(type)) {
|
|
822
|
-
unit._.eventManager.remove(
|
|
822
|
+
unit._.eventManager.remove(type, item.execute);
|
|
823
823
|
}
|
|
824
824
|
});
|
|
825
825
|
if (unit._.listeners.has(type) === false) {
|
|
@@ -1157,63 +1157,44 @@ const xnew$1 = Object.assign(function (...args) {
|
|
|
1157
1157
|
}
|
|
1158
1158
|
});
|
|
1159
1159
|
|
|
1160
|
-
function AccordionFrame(
|
|
1160
|
+
function AccordionFrame(unit, { open = false, duration = 200, easing = 'ease' } = {}) {
|
|
1161
1161
|
const internal = xnew$1((internal) => {
|
|
1162
1162
|
return {
|
|
1163
|
-
frame, open, rate: 0.0,
|
|
1164
|
-
|
|
1163
|
+
frame: unit, open, rate: 0.0,
|
|
1164
|
+
transition(rate) {
|
|
1165
|
+
xnew$1.emit('-transition', { rate });
|
|
1166
|
+
}
|
|
1165
1167
|
};
|
|
1166
1168
|
});
|
|
1167
1169
|
xnew$1.context('xnew.accordionframe', internal);
|
|
1168
|
-
internal.on('-transition', ({ rate }) =>
|
|
1169
|
-
|
|
1170
|
+
internal.on('-transition', ({ rate }) => {
|
|
1171
|
+
internal.rate = rate;
|
|
1172
|
+
xnew$1.emit('-transition', { rate });
|
|
1173
|
+
});
|
|
1174
|
+
xnew$1.timeout(() => {
|
|
1175
|
+
internal.transition(open ? 1.0 : 0.0);
|
|
1176
|
+
});
|
|
1170
1177
|
return {
|
|
1171
1178
|
toggle() {
|
|
1172
1179
|
if (internal.rate === 1.0) {
|
|
1173
|
-
|
|
1180
|
+
unit.close();
|
|
1174
1181
|
}
|
|
1175
1182
|
else if (internal.rate === 0.0) {
|
|
1176
|
-
|
|
1183
|
+
unit.open();
|
|
1177
1184
|
}
|
|
1178
1185
|
},
|
|
1179
1186
|
open() {
|
|
1180
1187
|
if (internal.rate === 0.0) {
|
|
1181
|
-
xnew$1.transition((x) => internal.
|
|
1188
|
+
xnew$1.transition((x) => internal.transition(x), duration, easing);
|
|
1182
1189
|
}
|
|
1183
1190
|
},
|
|
1184
1191
|
close() {
|
|
1185
1192
|
if (internal.rate === 1.0) {
|
|
1186
|
-
xnew$1.transition((x) => internal.
|
|
1193
|
+
xnew$1.transition((x) => internal.transition(1.0 - x), duration, easing);
|
|
1187
1194
|
}
|
|
1188
1195
|
}
|
|
1189
1196
|
};
|
|
1190
1197
|
}
|
|
1191
|
-
function AccordionHeader(unit, {} = {}) {
|
|
1192
|
-
const internal = xnew$1.context('xnew.accordionframe');
|
|
1193
|
-
xnew$1.nest('<button style="display: flex; align-items: center; margin: 0; padding: 0; width: 100%; text-align: left; border: none; font: inherit; color: inherit; background: none; cursor: pointer;">');
|
|
1194
|
-
unit.on('click', () => internal.frame.toggle());
|
|
1195
|
-
}
|
|
1196
|
-
function AccordionBullet(unit, { type = 'arrow' } = {}) {
|
|
1197
|
-
const internal = xnew$1.context('xnew.accordionframe');
|
|
1198
|
-
xnew$1.nest('<div style="display:inline-block; position: relative; width: 0.55em; margin: 0 0.3em;">');
|
|
1199
|
-
if (type === 'arrow') {
|
|
1200
|
-
const arrow = xnew$1(`<div style="width: 100%; height: 0.55em; border-right: 0.12em solid currentColor; border-bottom: 0.12em solid currentColor; box-sizing: border-box; transform-origin: center;">`);
|
|
1201
|
-
arrow.element.style.transform = `rotate(${internal.rate * 90 - 45}deg)`;
|
|
1202
|
-
internal.on('-transition', ({ rate }) => {
|
|
1203
|
-
arrow.element.style.transform = `rotate(${rate * 90 - 45}deg)`;
|
|
1204
|
-
});
|
|
1205
|
-
}
|
|
1206
|
-
else if (type === 'plusminus') {
|
|
1207
|
-
const line1 = xnew$1(`<div style="position: absolute; width: 100%; border-top: 0.06em solid currentColor; border-bottom: 0.06em solid currentColor; box-sizing: border-box; transform-origin: center;">`);
|
|
1208
|
-
const line2 = xnew$1(`<div style="position: absolute; width: 100%; border-top: 0.06em solid currentColor; border-bottom: 0.06em solid currentColor; box-sizing: border-box; transform-origin: center;">`);
|
|
1209
|
-
line2.element.style.transform = `rotate(90deg)`;
|
|
1210
|
-
line2.element.style.opacity = `${1.0 - internal.rate}`;
|
|
1211
|
-
internal.on('-transition', ({ rate }) => {
|
|
1212
|
-
line1.element.style.transform = `rotate(${90 + rate * 90}deg)`;
|
|
1213
|
-
line2.element.style.transform = `rotate(${rate * 180}deg)`;
|
|
1214
|
-
});
|
|
1215
|
-
}
|
|
1216
|
-
}
|
|
1217
1198
|
function AccordionContent(unit, {} = {}) {
|
|
1218
1199
|
const internal = xnew$1.context('xnew.accordionframe');
|
|
1219
1200
|
xnew$1.nest(`<div style="display: ${internal.open ? 'block' : 'none'};">`);
|
|
@@ -1318,68 +1299,6 @@ function ModalContent(content, { background = 'rgba(0, 0, 0, 0.1)' } = {}) {
|
|
|
1318
1299
|
};
|
|
1319
1300
|
}
|
|
1320
1301
|
|
|
1321
|
-
function TabFrame(frame, { select } = {}) {
|
|
1322
|
-
const internal = xnew$1((internal) => {
|
|
1323
|
-
const buttons = new Map();
|
|
1324
|
-
const contents = new Map();
|
|
1325
|
-
return {
|
|
1326
|
-
frame, buttons, contents,
|
|
1327
|
-
emit(type, ...args) { xnew$1.emit(type, ...args); }
|
|
1328
|
-
};
|
|
1329
|
-
});
|
|
1330
|
-
xnew$1.context('xnew.tabframe', internal);
|
|
1331
|
-
xnew$1.timeout(() => internal.emit('-select', { key: select !== null && select !== void 0 ? select : [...internal.buttons.keys()][0] }));
|
|
1332
|
-
}
|
|
1333
|
-
function TabButton(button, { key } = {}) {
|
|
1334
|
-
const internal = xnew$1.context('xnew.tabframe');
|
|
1335
|
-
const div = xnew$1.nest('<div>');
|
|
1336
|
-
key = key !== null && key !== void 0 ? key : (internal.buttons.size).toString();
|
|
1337
|
-
internal.buttons.set(key, button);
|
|
1338
|
-
button.on('click', () => {
|
|
1339
|
-
internal.emit('-select', { key });
|
|
1340
|
-
});
|
|
1341
|
-
internal.on('-select', ({ key }) => {
|
|
1342
|
-
const select = internal.buttons.get(key);
|
|
1343
|
-
if (select === button) {
|
|
1344
|
-
button.select({ element: div });
|
|
1345
|
-
}
|
|
1346
|
-
else {
|
|
1347
|
-
button.deselect({ element: div });
|
|
1348
|
-
}
|
|
1349
|
-
});
|
|
1350
|
-
return {
|
|
1351
|
-
select({ element }) {
|
|
1352
|
-
Object.assign(element.style, { opacity: 1.0, cursor: 'text' });
|
|
1353
|
-
},
|
|
1354
|
-
deselect({ element }) {
|
|
1355
|
-
Object.assign(element.style, { opacity: 0.6, cursor: 'pointer' });
|
|
1356
|
-
}
|
|
1357
|
-
};
|
|
1358
|
-
}
|
|
1359
|
-
function TabContent(content, { key } = {}) {
|
|
1360
|
-
const internal = xnew$1.context('xnew.tabframe');
|
|
1361
|
-
const div = xnew$1.nest('<div style="display: none;">');
|
|
1362
|
-
key = key !== null && key !== void 0 ? key : (internal.contents.size).toString();
|
|
1363
|
-
internal.contents.set(key, content);
|
|
1364
|
-
internal.on('-select', ({ key }) => {
|
|
1365
|
-
const select = internal.contents.get(key);
|
|
1366
|
-
if (select === content) {
|
|
1367
|
-
content.select({ element: div });
|
|
1368
|
-
}
|
|
1369
|
-
else {
|
|
1370
|
-
content.deselect({ element: div });
|
|
1371
|
-
}
|
|
1372
|
-
});
|
|
1373
|
-
return {
|
|
1374
|
-
select({ element }) {
|
|
1375
|
-
Object.assign(element.style, { display: 'block' });
|
|
1376
|
-
},
|
|
1377
|
-
deselect({ element }) {
|
|
1378
|
-
Object.assign(element.style, { display: 'none' });
|
|
1379
|
-
}
|
|
1380
|
-
};
|
|
1381
|
-
}
|
|
1382
|
-
|
|
1383
1302
|
function DragFrame(frame, { x = 0, y = 0 } = {}) {
|
|
1384
1303
|
const absolute = xnew$1.nest(`<div style="position: absolute; top: ${y}px; left: ${x}px;">`);
|
|
1385
1304
|
xnew$1.context('xnew.dragframe', { frame, absolute });
|
|
@@ -3473,12 +3392,7 @@ const basics = {
|
|
|
3473
3392
|
ModalFrame,
|
|
3474
3393
|
ModalContent,
|
|
3475
3394
|
AccordionFrame,
|
|
3476
|
-
AccordionHeader,
|
|
3477
|
-
AccordionBullet,
|
|
3478
3395
|
AccordionContent,
|
|
3479
|
-
TabFrame,
|
|
3480
|
-
TabButton,
|
|
3481
|
-
TabContent,
|
|
3482
3396
|
TextStream,
|
|
3483
3397
|
DragFrame,
|
|
3484
3398
|
DragTarget,
|