@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.
@@ -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: any;
10
- readonly canvas: any;
10
+ readonly scene: PIXI.Container;
11
+ readonly canvas: HTMLCanvasElement;
11
12
  };
12
13
 
13
14
  export { _default as default };
@@ -24,20 +24,13 @@
24
24
  var PIXI__namespace = /*#__PURE__*/_interopNamespaceDefault(PIXI);
25
25
 
26
26
  var xpixi = {
27
- initialize({ renderer = null, canvas = null, update = true } = {}) {
28
- xnew.extend(Root, { renderer, canvas, update });
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, update }) {
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
 
@@ -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, update = true } = {}) {
6
- xnew.extend(Root, { renderer, canvas, update });
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, update }) {
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 };
@@ -5,7 +5,7 @@
5
5
  })(this, (function (xnew, RAPIER) { 'use strict';
6
6
 
7
7
  var xrapier2d = {
8
- initialize({ gravity = { x: 0.0, y: 9.81 } } = {}) {
8
+ initialize({ gravity = { x: 0.0, y: -9.81 } } = {}) {
9
9
  xnew.extend(Root, { gravity });
10
10
  },
11
11
  get world() {
@@ -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() {
@@ -5,7 +5,7 @@
5
5
  })(this, (function (xnew, RAPIER) { 'use strict';
6
6
 
7
7
  var xrapier3d = {
8
- initialize({ gravity = { x: 0.0, y: 9.81, z: 0.0 } } = {}) {
8
+ initialize({ gravity = { x: 0.0, y: -9.81, z: 0.0 } } = {}) {
9
9
  xnew.extend(Root, { gravity });
10
10
  },
11
11
  get world() {
@@ -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() {
@@ -9,9 +9,9 @@ declare const _default: {
9
9
  }): void;
10
10
  nest(object: any): any;
11
11
  readonly renderer: any;
12
- readonly camera: any;
13
- readonly scene: any;
14
- readonly canvas: any;
12
+ readonly camera: THREE.Camera;
13
+ readonly scene: THREE.Scene;
14
+ readonly canvas: HTMLCanvasElement;
15
15
  };
16
16
 
17
17
  export { _default as default };
@@ -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');
@@ -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(props: EventProps): void;
34
- remove({ type, listener }: {
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(frame: Unit, { open, duration, easing }?: {
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(props) {
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({ type, listener }) {
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({ element, options, type: 'dragstart', listener: dragstart });
462
- this.add({ element, options, type: 'dragmove', listener: dragmove });
463
- this.add({ element, options, type: 'dragend', listener: dragend });
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({ type: 'dragstart', listener: dragstart });
473
- this.remove({ type: 'dragmove', listener: dragmove });
474
- this.remove({ type: 'dragend', listener: dragend });
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
- const execute = Unit.wrap(Unit.currentUnit, listener);
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({ element: unit.element, type, listener: execute, options });
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({ type, listener: item.execute });
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(frame, { open = false, duration = 200, easing = 'ease' } = {}) {
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
- emit(type, ...args) { xnew$1.emit(type, ...args); }
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 }) => internal.rate = rate);
1175
- internal.emit('-transition', { rate: open ? 1.0 : 0.0 });
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
- frame.close();
1186
+ unit.close();
1180
1187
  }
1181
1188
  else if (internal.rate === 0.0) {
1182
- frame.open();
1189
+ unit.open();
1183
1190
  }
1184
1191
  },
1185
1192
  open() {
1186
1193
  if (internal.rate === 0.0) {
1187
- xnew$1.transition((x) => internal.emit('-transition', { rate: x }), duration, easing);
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.emit('-transition', { rate: 1.0 - x }), duration, easing);
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(props) {
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({ type, listener }) {
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({ element, options, type: 'dragstart', listener: dragstart });
456
- this.add({ element, options, type: 'dragmove', listener: dragmove });
457
- this.add({ element, options, type: 'dragend', listener: dragend });
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({ type: 'dragstart', listener: dragstart });
467
- this.remove({ type: 'dragmove', listener: dragmove });
468
- this.remove({ type: 'dragend', listener: dragend });
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
- const execute = Unit.wrap(Unit.currentUnit, listener);
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({ element: unit.element, type, listener: execute, options });
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({ type, listener: item.execute });
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(frame, { open = false, duration = 200, easing = 'ease' } = {}) {
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
- emit(type, ...args) { xnew$1.emit(type, ...args); }
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 }) => internal.rate = rate);
1169
- internal.emit('-transition', { rate: open ? 1.0 : 0.0 });
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
- frame.close();
1180
+ unit.close();
1174
1181
  }
1175
1182
  else if (internal.rate === 0.0) {
1176
- frame.open();
1183
+ unit.open();
1177
1184
  }
1178
1185
  },
1179
1186
  open() {
1180
1187
  if (internal.rate === 0.0) {
1181
- xnew$1.transition((x) => internal.emit('-transition', { rate: x }), duration, easing);
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.emit('-transition', { rate: 1.0 - x }), duration, easing);
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,
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "keywords": [
5
5
  "Component-Oriented Programming"
6
6
  ],
7
- "version": "0.4.1",
7
+ "version": "0.4.3",
8
8
  "main": "dist/xnew.js",
9
9
  "module": "dist/xnew.mjs",
10
10
  "types": "dist/xnew.d.ts",