@hypen-space/web 0.5.2 → 0.5.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/canvas/accessibility.d.ts +118 -11
- package/dist/canvas/accessibility.js +470 -108
- package/dist/canvas/accessibility.js.map +1 -1
- package/dist/canvas/dispatch.d.ts +24 -0
- package/dist/canvas/dispatch.js +62 -0
- package/dist/canvas/dispatch.js.map +1 -0
- package/dist/canvas/editing.d.ts +178 -0
- package/dist/canvas/editing.js +590 -0
- package/dist/canvas/editing.js.map +1 -0
- package/dist/canvas/events.d.ts +28 -23
- package/dist/canvas/events.js +76 -128
- package/dist/canvas/events.js.map +1 -1
- package/dist/canvas/focus.d.ts +78 -0
- package/dist/canvas/focus.js +182 -0
- package/dist/canvas/focus.js.map +1 -0
- package/dist/canvas/index.d.ts +3 -1
- package/dist/canvas/index.js +3 -1
- package/dist/canvas/index.js.map +1 -1
- package/dist/canvas/paint.d.ts +16 -3
- package/dist/canvas/paint.js +283 -41
- package/dist/canvas/paint.js.map +1 -1
- package/dist/canvas/renderer.d.ts +20 -1
- package/dist/canvas/renderer.js +181 -50
- package/dist/canvas/renderer.js.map +1 -1
- package/dist/canvas/selection.js +31 -177
- package/dist/canvas/selection.js.map +1 -1
- package/dist/canvas/text-geometry.d.ts +72 -0
- package/dist/canvas/text-geometry.js +244 -0
- package/dist/canvas/text-geometry.js.map +1 -0
- package/dist/canvas/text.js +42 -9
- package/dist/canvas/text.js.map +1 -1
- package/dist/canvas/types.d.ts +7 -1
- package/dist/canvas/variants.d.ts +4 -1
- package/dist/canvas/variants.js +22 -3
- package/dist/canvas/variants.js.map +1 -1
- package/dist/dom/a11y-styles.d.ts +20 -0
- package/dist/dom/a11y-styles.js +61 -0
- package/dist/dom/a11y-styles.js.map +1 -0
- package/dist/dom/applicators/aria.d.ts +19 -0
- package/dist/dom/applicators/aria.js +36 -0
- package/dist/dom/applicators/aria.js.map +1 -0
- package/dist/dom/applicators/events.d.ts +7 -0
- package/dist/dom/applicators/events.js +35 -8
- package/dist/dom/applicators/events.js.map +1 -1
- package/dist/dom/applicators/index.js +4 -0
- package/dist/dom/applicators/index.js.map +1 -1
- package/dist/dom/components/hypenapp.d.ts +25 -1
- package/dist/dom/components/hypenapp.js +213 -245
- package/dist/dom/components/hypenapp.js.map +1 -1
- package/dist/dom/components/index.js +7 -0
- package/dist/dom/components/index.js.map +1 -1
- package/dist/dom/components/spinner.js +24 -10
- package/dist/dom/components/spinner.js.map +1 -1
- package/dist/dom/components/tabs.d.ts +27 -0
- package/dist/dom/components/tabs.js +69 -0
- package/dist/dom/components/tabs.js.map +1 -0
- package/dist/dom/components/visuallyhidden.d.ts +9 -0
- package/dist/dom/components/visuallyhidden.js +26 -0
- package/dist/dom/components/visuallyhidden.js.map +1 -0
- package/dist/dom/operability.d.ts +100 -0
- package/dist/dom/operability.js +298 -0
- package/dist/dom/operability.js.map +1 -0
- package/dist/dom/renderer.d.ts +98 -5
- package/dist/dom/renderer.js +398 -63
- package/dist/dom/renderer.js.map +1 -1
- package/dist/dom/route-focus.d.ts +42 -0
- package/dist/dom/route-focus.js +88 -0
- package/dist/dom/route-focus.js.map +1 -0
- package/dist/dom/semantics.d.ts +35 -0
- package/dist/dom/semantics.js +184 -0
- package/dist/dom/semantics.js.map +1 -0
- package/package.json +2 -2
- package/src/canvas/QUICKSTART.md +4 -4
- package/src/canvas/README.md +55 -29
- package/src/canvas/accessibility.ts +507 -115
- package/src/canvas/dispatch.ts +78 -0
- package/src/canvas/editing.ts +697 -0
- package/src/canvas/events.ts +89 -142
- package/src/canvas/focus.ts +216 -0
- package/src/canvas/index.ts +8 -1
- package/src/canvas/paint.ts +339 -42
- package/src/canvas/renderer.ts +218 -70
- package/src/canvas/selection.ts +52 -210
- package/src/canvas/text-geometry.ts +311 -0
- package/src/canvas/text.ts +43 -9
- package/src/canvas/types.ts +14 -1
- package/src/canvas/variants.ts +24 -5
- package/src/dom/a11y-styles.ts +65 -0
- package/src/dom/applicators/aria.ts +41 -0
- package/src/dom/applicators/events.ts +38 -7
- package/src/dom/applicators/index.ts +5 -0
- package/src/dom/components/hypenapp.ts +244 -272
- package/src/dom/components/index.ts +7 -0
- package/src/dom/components/spinner.ts +31 -13
- package/src/dom/components/tabs.ts +76 -0
- package/src/dom/components/visuallyhidden.ts +30 -0
- package/src/dom/operability.ts +312 -0
- package/src/dom/renderer.ts +455 -63
- package/src/dom/route-focus.ts +98 -0
- package/src/dom/semantics.ts +199 -0
- package/dist/canvas/input.d.ts +0 -76
- package/dist/canvas/input.js +0 -207
- package/dist/canvas/input.js.map +0 -1
- package/src/canvas/input.ts +0 -251
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Action Dispatch
|
|
3
|
+
*
|
|
4
|
+
* Resolves a DOM-ish event on a virtual node to the engine action its
|
|
5
|
+
* props declare, and dispatches it. Shared by the canvas hit-test path
|
|
6
|
+
* (pointer events) and the accessibility-mirror path (keyboard / AT
|
|
7
|
+
* activation) so both produce identical action payloads.
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
import type { VirtualNode } from "./types.js";
|
|
11
|
+
import { resolveEventAction } from "./props.js";
|
|
12
|
+
|
|
13
|
+
/** Minimal engine surface needed for dispatch. */
|
|
14
|
+
export interface DispatchEngine {
|
|
15
|
+
dispatchAction(name: string, payload?: any): void;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
// Maps a DOM event type to the applicator prop names the engine may have set
|
|
19
|
+
// on a node, in priority order. Multi-word events (`mouseenter`) need their
|
|
20
|
+
// proper camelCase form (`onMouseEnter`) since the engine emits applicator
|
|
21
|
+
// names verbatim. `mouseenter` also accepts `onHover` as an alias.
|
|
22
|
+
const CANVAS_EVENT_PROP_NAMES: Record<string, string[]> = {
|
|
23
|
+
mouseenter: ["onMouseEnter", "onHover", "onmouseenter", "mouseenter"],
|
|
24
|
+
mouseleave: ["onMouseLeave", "onmouseleave", "mouseleave"],
|
|
25
|
+
mousedown: ["onMouseDown", "onmousedown", "mousedown"],
|
|
26
|
+
mouseup: ["onMouseUp", "onmouseup", "mouseup"],
|
|
27
|
+
dblclick: ["onDblClick", "onDoubleClick", "ondblclick", "dblclick"],
|
|
28
|
+
contextmenu: ["onContextMenu", "oncontextmenu", "contextmenu"],
|
|
29
|
+
keydown: ["onKeyDown", "onkeydown", "keydown"],
|
|
30
|
+
keyup: ["onKeyUp", "onkeyup", "keyup"],
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
/**
|
|
34
|
+
* Dispatch an event on a node to the engine action its props declare.
|
|
35
|
+
*
|
|
36
|
+
* Engine emits event applicators in camelCase (`onClick`, `onMouseEnter`).
|
|
37
|
+
* Multi-word DOM events like `mouseenter` must map to `onMouseEnter`, not
|
|
38
|
+
* the naive `onMouseenter` that `on${capitalize(eventType)}` would produce.
|
|
39
|
+
* The older flat form `onclick`/`onmouseenter` is still accepted. After
|
|
40
|
+
* prop normalisation the value is either a string (action name) or an
|
|
41
|
+
* object carrying an action name at `"0"` plus an auxiliary payload.
|
|
42
|
+
*/
|
|
43
|
+
export function dispatchNodeEvent(
|
|
44
|
+
engine: DispatchEngine,
|
|
45
|
+
node: VirtualNode,
|
|
46
|
+
eventType: string,
|
|
47
|
+
data: any,
|
|
48
|
+
): void {
|
|
49
|
+
const propNames = CANVAS_EVENT_PROP_NAMES[eventType] ?? [
|
|
50
|
+
`on${eventType.charAt(0).toUpperCase()}${eventType.slice(1)}`,
|
|
51
|
+
`on${eventType}`,
|
|
52
|
+
eventType,
|
|
53
|
+
];
|
|
54
|
+
|
|
55
|
+
let spec: unknown;
|
|
56
|
+
for (const name of propNames) {
|
|
57
|
+
if (node.props[name] != null) {
|
|
58
|
+
spec = node.props[name];
|
|
59
|
+
break;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
// Actionable components fall back to the bare `action` prop on click.
|
|
64
|
+
if (spec == null && eventType === "click") {
|
|
65
|
+
spec = node.props.action;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
const resolved = resolveEventAction(spec);
|
|
69
|
+
if (!resolved) return;
|
|
70
|
+
|
|
71
|
+
engine.dispatchAction(resolved.actionName, {
|
|
72
|
+
type: eventType,
|
|
73
|
+
nodeId: node.id,
|
|
74
|
+
timestamp: Date.now(),
|
|
75
|
+
...resolved.payload,
|
|
76
|
+
...data,
|
|
77
|
+
});
|
|
78
|
+
}
|