@hypen-space/web 0.4.3 → 0.4.5
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/index.js +14 -2
- package/dist/canvas/index.js.map +3 -3
- package/dist/canvas/input.d.ts +8 -1
- package/dist/canvas/input.js +14 -2
- package/dist/canvas/input.js.map +3 -3
- package/dist/canvas/renderer.js +14 -2
- package/dist/canvas/renderer.js.map +3 -3
- package/dist/client.js +61 -23
- package/dist/client.js.map +5 -5
- package/dist/dom/applicators/events.js +53 -2
- package/dist/dom/applicators/events.js.map +3 -3
- package/dist/dom/applicators/index.js +53 -2
- package/dist/dom/applicators/index.js.map +3 -3
- package/dist/dom/index.js +56 -5
- package/dist/dom/index.js.map +4 -4
- package/dist/dom/renderer.d.ts +3 -3
- package/dist/dom/renderer.js +56 -5
- package/dist/dom/renderer.js.map +4 -4
- package/dist/hypen.js +61 -23
- package/dist/hypen.js.map +5 -5
- package/dist/index.js +69 -6
- package/dist/index.js.map +5 -5
- package/package.json +2 -2
- package/src/canvas/input.ts +23 -1
- package/src/dom/applicators/events.ts +71 -0
- package/src/dom/renderer.ts +4 -4
- package/src/hypen.ts +7 -24
package/dist/index.js
CHANGED
|
@@ -2351,7 +2351,58 @@ var eventHandlers = {
|
|
|
2351
2351
|
onFocus: createEventHandler("focus", { extractPayload: focusPayload }),
|
|
2352
2352
|
onBlur: createEventHandler("blur", { extractPayload: focusPayload }),
|
|
2353
2353
|
onMouseEnter: createEventHandler("mouseenter", { extractPayload: mousePayload }),
|
|
2354
|
-
onMouseLeave: createEventHandler("mouseleave", { extractPayload: mousePayload })
|
|
2354
|
+
onMouseLeave: createEventHandler("mouseleave", { extractPayload: mousePayload }),
|
|
2355
|
+
bind: (element, value) => {
|
|
2356
|
+
const bindPath = typeof value === "string" ? value : null;
|
|
2357
|
+
if (!bindPath)
|
|
2358
|
+
return;
|
|
2359
|
+
const disposables = getElementDisposables2(element);
|
|
2360
|
+
const eventKey = `bind:${bindPath}`;
|
|
2361
|
+
if (getRegisteredEvents(element).has(eventKey))
|
|
2362
|
+
return;
|
|
2363
|
+
registerEvent(element, eventKey);
|
|
2364
|
+
const hypenType = element.dataset?.hypenType;
|
|
2365
|
+
if (hypenType === "checkbox" || hypenType === "switch") {
|
|
2366
|
+
const input = element.querySelector('input[type="checkbox"]');
|
|
2367
|
+
if (!input)
|
|
2368
|
+
return;
|
|
2369
|
+
const listener = () => {
|
|
2370
|
+
const engine = getEngine(element);
|
|
2371
|
+
if (engine) {
|
|
2372
|
+
engine.dispatchAction("__hypen_bind", {
|
|
2373
|
+
path: bindPath,
|
|
2374
|
+
value: input.checked
|
|
2375
|
+
});
|
|
2376
|
+
}
|
|
2377
|
+
};
|
|
2378
|
+
disposables.add(disposableListener(input, "change", listener, { passive: true }));
|
|
2379
|
+
} else if (element instanceof HTMLSelectElement) {
|
|
2380
|
+
const listener = () => {
|
|
2381
|
+
const engine = getEngine(element);
|
|
2382
|
+
if (engine) {
|
|
2383
|
+
engine.dispatchAction("__hypen_bind", {
|
|
2384
|
+
path: bindPath,
|
|
2385
|
+
value: element.value
|
|
2386
|
+
});
|
|
2387
|
+
}
|
|
2388
|
+
};
|
|
2389
|
+
disposables.add(disposableListener(element, "change", listener, { passive: true }));
|
|
2390
|
+
} else if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
|
|
2391
|
+
const listener = () => {
|
|
2392
|
+
const engine = getEngine(element);
|
|
2393
|
+
if (engine) {
|
|
2394
|
+
engine.dispatchAction("__hypen_bind", {
|
|
2395
|
+
path: bindPath,
|
|
2396
|
+
value: element.value
|
|
2397
|
+
});
|
|
2398
|
+
}
|
|
2399
|
+
};
|
|
2400
|
+
disposables.add(disposableListener(element, "input", listener, { passive: true }));
|
|
2401
|
+
} else {
|
|
2402
|
+
return;
|
|
2403
|
+
}
|
|
2404
|
+
disposables.addCallback(() => unregisterEvent(element, eventKey));
|
|
2405
|
+
}
|
|
2355
2406
|
};
|
|
2356
2407
|
|
|
2357
2408
|
// src/dom/applicators/typography.ts
|
|
@@ -3320,7 +3371,7 @@ class DOMRenderer {
|
|
|
3320
3371
|
applicators;
|
|
3321
3372
|
engine;
|
|
3322
3373
|
currentState = {};
|
|
3323
|
-
|
|
3374
|
+
router = null;
|
|
3324
3375
|
globalContext = null;
|
|
3325
3376
|
componentInstances = new Map;
|
|
3326
3377
|
debugTracker;
|
|
@@ -3335,8 +3386,8 @@ class DOMRenderer {
|
|
|
3335
3386
|
this.applicators.register(name, handler);
|
|
3336
3387
|
}
|
|
3337
3388
|
}
|
|
3338
|
-
setContext(
|
|
3339
|
-
this.
|
|
3389
|
+
setContext(router, globalContext) {
|
|
3390
|
+
this.router = router;
|
|
3340
3391
|
this.globalContext = globalContext;
|
|
3341
3392
|
}
|
|
3342
3393
|
applyPatches(patches) {
|
|
@@ -5228,13 +5279,17 @@ class InputOverlay {
|
|
|
5228
5279
|
overlay = null;
|
|
5229
5280
|
focusedNode = null;
|
|
5230
5281
|
onChangeCallback = null;
|
|
5282
|
+
bindPath = null;
|
|
5283
|
+
engine = null;
|
|
5231
5284
|
constructor(container) {
|
|
5232
5285
|
this.container = container || {};
|
|
5233
5286
|
}
|
|
5234
|
-
showInput(node, canvasBounds, onChange) {
|
|
5287
|
+
showInput(node, canvasBounds, onChange, engine) {
|
|
5235
5288
|
if (typeof document === "undefined")
|
|
5236
5289
|
return;
|
|
5237
5290
|
this.hideInput();
|
|
5291
|
+
this.bindPath = node.props.bind || null;
|
|
5292
|
+
this.engine = engine || null;
|
|
5238
5293
|
const bounds = getAbsoluteBounds(node);
|
|
5239
5294
|
if (!bounds)
|
|
5240
5295
|
return;
|
|
@@ -5258,6 +5313,8 @@ class InputOverlay {
|
|
|
5258
5313
|
}
|
|
5259
5314
|
this.focusedNode = null;
|
|
5260
5315
|
this.onChangeCallback = null;
|
|
5316
|
+
this.bindPath = null;
|
|
5317
|
+
this.engine = null;
|
|
5261
5318
|
}
|
|
5262
5319
|
updatePosition(node, canvasBounds) {
|
|
5263
5320
|
if (!this.overlay || node !== this.focusedNode)
|
|
@@ -5319,6 +5376,12 @@ class InputOverlay {
|
|
|
5319
5376
|
return;
|
|
5320
5377
|
const value = this.overlay.value;
|
|
5321
5378
|
this.onChangeCallback(value);
|
|
5379
|
+
if (this.bindPath && this.engine) {
|
|
5380
|
+
this.engine.dispatchAction("__hypen_bind", {
|
|
5381
|
+
path: this.bindPath,
|
|
5382
|
+
value
|
|
5383
|
+
});
|
|
5384
|
+
}
|
|
5322
5385
|
}
|
|
5323
5386
|
onBlur() {
|
|
5324
5387
|
this.hideInput();
|
|
@@ -5755,4 +5818,4 @@ export {
|
|
|
5755
5818
|
ApplicatorRegistry
|
|
5756
5819
|
};
|
|
5757
5820
|
|
|
5758
|
-
//# debugId=
|
|
5821
|
+
//# debugId=6270567F68CE276A64756E2164756E21
|