wip: better desktop support
This commit is contained in:
Jonathan Kelley committed
1 parent
19df1bda10
commit
25a8411485
11 files changed
+519
-586
No files matched your search
+229
-292
@@ -1,4 +1,213 @@
|
||||
|
||||
function serialize_event(event) {
|
||||
switch (event.type) {
|
||||
case "copy":
|
||||
case "cut":
|
||||
case "past":
|
||||
return {};
|
||||
|
||||
case "compositionend":
|
||||
case "compositionstart":
|
||||
case "compositionupdate":
|
||||
return {
|
||||
data: event.data
|
||||
}
|
||||
|
||||
case "keydown":
|
||||
case "keypress":
|
||||
case "keyup":
|
||||
return {
|
||||
char_code: event.charCode,
|
||||
key: event.key,
|
||||
alt_key: event.altKey,
|
||||
ctrl_key: event.ctrlKey,
|
||||
meta_key: event.metaKey,
|
||||
key_code: event.keyCode,
|
||||
shift_key: event.shiftKey,
|
||||
locale: "locale",
|
||||
location: event.location,
|
||||
repeat: event.repeat,
|
||||
which: event.which,
|
||||
// locale: event.locale,
|
||||
}
|
||||
|
||||
case "focus":
|
||||
case "blur":
|
||||
return {};
|
||||
|
||||
case "change":
|
||||
let target = event.target;
|
||||
let value;
|
||||
if (target.type === "checkbox" || target.type === "radio") {
|
||||
value = target.checked ? "true" : "false";
|
||||
} else {
|
||||
value = target.value ?? target.textContent;
|
||||
}
|
||||
|
||||
return {
|
||||
value: value
|
||||
};
|
||||
|
||||
case "input":
|
||||
case "invalid":
|
||||
case "reset":
|
||||
case "submit": {
|
||||
let target = event.target;
|
||||
let value = target.value ?? target.textContent;
|
||||
return {
|
||||
value: value
|
||||
};
|
||||
}
|
||||
|
||||
case "click":
|
||||
case "contextmenu":
|
||||
case "doubleclick":
|
||||
case "drag":
|
||||
case "dragend":
|
||||
case "dragenter":
|
||||
case "dragexit":
|
||||
case "dragleave":
|
||||
case "dragover":
|
||||
case "dragstart":
|
||||
case "drop":
|
||||
case "mousedown":
|
||||
case "mouseenter":
|
||||
case "mouseleave":
|
||||
case "mousemove":
|
||||
case "mouseout":
|
||||
case "mouseover":
|
||||
case "mouseup":
|
||||
return {
|
||||
alt_key: event.altKey,
|
||||
button: event.button,
|
||||
buttons: event.buttons,
|
||||
client_x: event.clientX,
|
||||
client_y: event.clientY,
|
||||
ctrl_key: event.ctrlKey,
|
||||
meta_key: event.metaKey,
|
||||
page_x: event.pageX,
|
||||
page_y: event.pageY,
|
||||
screen_x: event.screenX,
|
||||
screen_y: event.screenY,
|
||||
shift_key: event.shiftKey,
|
||||
}
|
||||
|
||||
case "pointerdown":
|
||||
case "pointermove":
|
||||
case "pointerup":
|
||||
case "pointercancel":
|
||||
case "gotpointercapture":
|
||||
case "lostpointercapture":
|
||||
case "pointerenter":
|
||||
case "pointerleave":
|
||||
case "pointerover":
|
||||
case "pointerout":
|
||||
return {
|
||||
alt_key: event.altKey,
|
||||
button: event.button,
|
||||
buttons: event.buttons,
|
||||
client_x: event.clientX,
|
||||
client_y: event.clientY,
|
||||
ctrl_key: event.ctrlKey,
|
||||
meta_key: event.metaKey,
|
||||
page_x: event.pageX,
|
||||
page_y: event.pageY,
|
||||
screen_x: event.screenX,
|
||||
screen_y: event.screenY,
|
||||
shift_key: event.shiftKey,
|
||||
pointer_id: event.pointerId,
|
||||
width: event.width,
|
||||
height: event.height,
|
||||
pressure: event.pressure,
|
||||
tangential_pressure: event.tangentialPressure,
|
||||
tilt_x: event.tiltX,
|
||||
tilt_y: event.tiltY,
|
||||
twist: event.twist,
|
||||
pointer_type: event.pointerType,
|
||||
is_primary: event.isPrimary,
|
||||
}
|
||||
|
||||
case "select":
|
||||
return {};
|
||||
|
||||
case "touchcancel":
|
||||
case "touchend":
|
||||
case "touchmove":
|
||||
case "touchstart":
|
||||
return {
|
||||
alt_key: event.altKey,
|
||||
ctrl_key: event.ctrlKey,
|
||||
meta_key: event.metaKey,
|
||||
shift_key: event.shiftKey,
|
||||
|
||||
// changed_touches: event.changedTouches,
|
||||
// target_touches: event.targetTouches,
|
||||
// touches: event.touches,
|
||||
}
|
||||
|
||||
case "scroll":
|
||||
return {};
|
||||
|
||||
case "wheel":
|
||||
return {
|
||||
delta_x: event.deltaX,
|
||||
delta_y: event.deltaY,
|
||||
delta_z: event.deltaZ,
|
||||
delta_mode: event.deltaMode,
|
||||
};
|
||||
|
||||
case "animationstart":
|
||||
case "animationend":
|
||||
case "animationiteration":
|
||||
return {
|
||||
animation_name: event.animationName,
|
||||
elapsed_time: event.elapsedTime,
|
||||
pseudo_element: event.pseudoElement,
|
||||
};
|
||||
|
||||
case "transitionend":
|
||||
return {
|
||||
property_name: event.propertyName,
|
||||
elapsed_time: event.elapsedTime,
|
||||
pseudo_element: event.pseudoElement,
|
||||
};
|
||||
|
||||
case "abort":
|
||||
case "canplay":
|
||||
case "canplaythrough":
|
||||
case "durationchange":
|
||||
case "emptied":
|
||||
case "encrypted":
|
||||
case "ended":
|
||||
case "error":
|
||||
case "loadeddata":
|
||||
case "loadedmetadata":
|
||||
case "loadstart":
|
||||
case "pause":
|
||||
case "play":
|
||||
case "playing":
|
||||
case "progress":
|
||||
case "ratechange":
|
||||
case "seeked":
|
||||
case "seeking":
|
||||
case "stalled":
|
||||
case "suspend":
|
||||
case "timeupdate":
|
||||
case "volumechange":
|
||||
case "waiting":
|
||||
return {};
|
||||
|
||||
case "toggle":
|
||||
return {};
|
||||
|
||||
default:
|
||||
return {};
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
class Interpreter {
|
||||
constructor(root) {
|
||||
this.root = root;
|
||||
@@ -125,22 +334,8 @@ class Interpreter {
|
||||
mounted_dom_id: parseInt(real_id),
|
||||
contents: contents,
|
||||
};
|
||||
// console.log(evt);
|
||||
rpc.call('user_event', evt).then((reply) => {
|
||||
// console.log("reply received", reply);
|
||||
|
||||
this.stack.push(this.root);
|
||||
|
||||
reply.map((reply) => {
|
||||
let edits = reply.edits;
|
||||
for (let x = 0; x < edits.length; x++) {
|
||||
let edit = edits[x];
|
||||
let f = this[edit.type];
|
||||
f.call(this, edit);
|
||||
}
|
||||
});
|
||||
|
||||
})
|
||||
rpc.call('user_event', evt);
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -197,286 +392,28 @@ class Interpreter {
|
||||
}
|
||||
}
|
||||
|
||||
handleEdits(edits) {
|
||||
|
||||
// console.log("handling raw edits", rawedits);
|
||||
// let edits = JSON.parse(rawedits);
|
||||
// console.log("handling edits", edits);
|
||||
|
||||
this.stack.push(this.root);
|
||||
|
||||
for (let x = 0; x < edits.length; x++) {
|
||||
let edit = edits[x];
|
||||
let f = this[edit.type];
|
||||
f.call(this, edit);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function initialize() {
|
||||
function main() {
|
||||
let root = window.document.getElementById("_dioxusroot");
|
||||
const interpreter = new Interpreter(root);
|
||||
window.interpreter = new Interpreter(root);
|
||||
console.log(window.interpreter);
|
||||
|
||||
const reply = await rpc.call('initiate');
|
||||
|
||||
let pre_rendered = reply.pre_rendered;
|
||||
if (pre_rendered !== undefined) {
|
||||
root.innerHTML = pre_rendered;
|
||||
}
|
||||
|
||||
const edits = reply.edits;
|
||||
|
||||
apply_edits(edits, interpreter);
|
||||
rpc.call('initialize');
|
||||
}
|
||||
|
||||
function apply_edits(edits, interpreter) {
|
||||
// console.log(edits);
|
||||
for (let x = 0; x < edits.length; x++) {
|
||||
let edit = edits[x];
|
||||
let f = interpreter[edit.type];
|
||||
f.call(interpreter, edit);
|
||||
}
|
||||
|
||||
// // console.log("stack completed: ", interpreter.stack);
|
||||
}
|
||||
|
||||
function serialize_event(event) {
|
||||
let serializer = SerializeMap[event.type];
|
||||
if (serializer === undefined) {
|
||||
return {};
|
||||
} else {
|
||||
return serializer(event);
|
||||
}
|
||||
}
|
||||
|
||||
const SerializeMap = {
|
||||
"copy": serialize_clipboard,
|
||||
"cut": serialize_clipboard,
|
||||
"paste": serialize_clipboard,
|
||||
|
||||
"compositionend": serialize_composition,
|
||||
"compositionstart": serialize_composition,
|
||||
"compositionupdate": serialize_composition,
|
||||
|
||||
"keydown": serialize_keyboard,
|
||||
"keypress": serialize_keyboard,
|
||||
"keyup": serialize_keyboard,
|
||||
|
||||
"focus": serialize_focus,
|
||||
"blur": serialize_focus,
|
||||
|
||||
// "change": serialize_form,
|
||||
"change": serialize_change,
|
||||
|
||||
"input": serialize_form,
|
||||
"invalid": serialize_form,
|
||||
"reset": serialize_form,
|
||||
"submit": serialize_form,
|
||||
|
||||
"click": serialize_mouse,
|
||||
"contextmenu": serialize_mouse,
|
||||
"doubleclick": serialize_mouse,
|
||||
"drag": serialize_mouse,
|
||||
"dragend": serialize_mouse,
|
||||
"dragenter": serialize_mouse,
|
||||
"dragexit": serialize_mouse,
|
||||
"dragleave": serialize_mouse,
|
||||
"dragover": serialize_mouse,
|
||||
"dragstart": serialize_mouse,
|
||||
"drop": serialize_mouse,
|
||||
"mousedown": serialize_mouse,
|
||||
"mouseenter": serialize_mouse,
|
||||
"mouseleave": serialize_mouse,
|
||||
"mousemove": serialize_mouse,
|
||||
"mouseout": serialize_mouse,
|
||||
"mouseover": serialize_mouse,
|
||||
"mouseup": serialize_mouse,
|
||||
|
||||
"pointerdown": serialize_pointer,
|
||||
"pointermove": serialize_pointer,
|
||||
"pointerup": serialize_pointer,
|
||||
"pointercancel": serialize_pointer,
|
||||
"gotpointercapture": serialize_pointer,
|
||||
"lostpointercapture": serialize_pointer,
|
||||
"pointerenter": serialize_pointer,
|
||||
"pointerleave": serialize_pointer,
|
||||
"pointerover": serialize_pointer,
|
||||
"pointerout": serialize_pointer,
|
||||
|
||||
"select": serialize_selection,
|
||||
|
||||
"touchcancel": serialize_touch,
|
||||
"touchend": serialize_touch,
|
||||
"touchmove": serialize_touch,
|
||||
"touchstart": serialize_touch,
|
||||
|
||||
"scroll": serialize_scroll,
|
||||
|
||||
"wheel": serialize_wheel,
|
||||
|
||||
"animationstart": serialize_animation,
|
||||
"animationend": serialize_animation,
|
||||
"animationiteration": serialize_animation,
|
||||
|
||||
"transitionend": serialize_transition,
|
||||
|
||||
"abort": serialize_media,
|
||||
"canplay": serialize_media,
|
||||
"canplaythrough": serialize_media,
|
||||
"durationchange": serialize_media,
|
||||
"emptied": serialize_media,
|
||||
"encrypted": serialize_media,
|
||||
"ended": serialize_media,
|
||||
"error": serialize_media,
|
||||
"loadeddata": serialize_media,
|
||||
"loadedmetadata": serialize_media,
|
||||
"loadstart": serialize_media,
|
||||
"pause": serialize_media,
|
||||
"play": serialize_media,
|
||||
"playing": serialize_media,
|
||||
"progress": serialize_media,
|
||||
"ratechange": serialize_media,
|
||||
"seeked": serialize_media,
|
||||
"seeking": serialize_media,
|
||||
"stalled": serialize_media,
|
||||
"suspend": serialize_media,
|
||||
"timeupdate": serialize_media,
|
||||
"volumechange": serialize_media,
|
||||
"waiting": serialize_media,
|
||||
|
||||
"toggle": serialize_toggle
|
||||
}
|
||||
|
||||
function serialize_clipboard(_event) {
|
||||
return {};
|
||||
}
|
||||
function serialize_composition(event) {
|
||||
return {
|
||||
data: event.data
|
||||
}
|
||||
}
|
||||
function serialize_keyboard(event) {
|
||||
return {
|
||||
char_code: event.charCode,
|
||||
key: event.key,
|
||||
alt_key: event.altKey,
|
||||
ctrl_key: event.ctrlKey,
|
||||
meta_key: event.metaKey,
|
||||
key_code: event.keyCode,
|
||||
shift_key: event.shiftKey,
|
||||
locale: "locale",
|
||||
// locale: event.locale,
|
||||
location: event.location,
|
||||
repeat: event.repeat,
|
||||
which: event.which,
|
||||
}
|
||||
}
|
||||
function serialize_focus(_event) {
|
||||
return {}
|
||||
}
|
||||
|
||||
function serialize_change(event) {
|
||||
let target = event.target;
|
||||
let value;
|
||||
if (target.type === "checkbox" || target.type === "radio") {
|
||||
value = target.checked ? "true" : "false";
|
||||
} else {
|
||||
value = target.value ?? target.textContent;
|
||||
}
|
||||
|
||||
return {
|
||||
value: value
|
||||
}
|
||||
}
|
||||
function serialize_form(event) {
|
||||
let target = event.target;
|
||||
let value = target.value ?? target.textContent;
|
||||
return {
|
||||
value: value
|
||||
}
|
||||
}
|
||||
function serialize_mouse(event) {
|
||||
return {
|
||||
alt_key: event.altKey,
|
||||
button: event.button,
|
||||
buttons: event.buttons,
|
||||
client_x: event.clientX,
|
||||
client_y: event.clientY,
|
||||
ctrl_key: event.ctrlKey,
|
||||
meta_key: event.metaKey,
|
||||
page_x: event.pageX,
|
||||
page_y: event.pageY,
|
||||
screen_x: event.screenX,
|
||||
screen_y: event.screenY,
|
||||
shift_key: event.shiftKey,
|
||||
}
|
||||
}
|
||||
|
||||
function serialize_pointer(event) {
|
||||
return {
|
||||
alt_key: event.altKey,
|
||||
button: event.button,
|
||||
buttons: event.buttons,
|
||||
client_x: event.clientX,
|
||||
client_y: event.clientY,
|
||||
ctrl_key: event.ctrlKey,
|
||||
meta_key: event.metaKey,
|
||||
page_x: event.pageX,
|
||||
page_y: event.pageY,
|
||||
screen_x: event.screenX,
|
||||
screen_y: event.screenY,
|
||||
shift_key: event.shiftKey,
|
||||
pointer_id: event.pointerId,
|
||||
width: event.width,
|
||||
height: event.height,
|
||||
pressure: event.pressure,
|
||||
tangential_pressure: event.tangentialPressure,
|
||||
tilt_x: event.tiltX,
|
||||
tilt_y: event.tiltY,
|
||||
twist: event.twist,
|
||||
pointer_type: event.pointerType,
|
||||
is_primary: event.isPrimary,
|
||||
}
|
||||
}
|
||||
|
||||
function serialize_selection(event) {
|
||||
return {}
|
||||
}
|
||||
|
||||
function serialize_touch(event) {
|
||||
return {
|
||||
alt_key: event.altKey,
|
||||
ctrl_key: event.ctrlKey,
|
||||
meta_key: event.metaKey,
|
||||
shift_key: event.shiftKey,
|
||||
|
||||
// changed_touches: event.changedTouches,
|
||||
// target_touches: event.targetTouches,
|
||||
// touches: event.touches,
|
||||
}
|
||||
}
|
||||
function serialize_scroll(event) {
|
||||
return {}
|
||||
}
|
||||
|
||||
function serialize_wheel(event) {
|
||||
return {
|
||||
delta_x: event.deltaX,
|
||||
delta_y: event.deltaY,
|
||||
delta_z: event.deltaZ,
|
||||
delta_mode: event.deltaMode,
|
||||
}
|
||||
}
|
||||
|
||||
function serialize_animation(event) {
|
||||
return {
|
||||
animation_name: event.animationName,
|
||||
elapsed_time: event.elapsedTime,
|
||||
pseudo_element: event.pseudoElement,
|
||||
}
|
||||
}
|
||||
|
||||
function serialize_transition(event) {
|
||||
return {
|
||||
property_name: event.propertyName,
|
||||
elapsed_time: event.elapsedTime,
|
||||
pseudo_element: event.pseudoElement,
|
||||
}
|
||||
}
|
||||
|
||||
function serialize_media(event) {
|
||||
return {}
|
||||
}
|
||||
|
||||
function serialize_toggle(event) {
|
||||
return {}
|
||||
}
|
||||
|
||||
|
||||
initialize();
|
||||
main()
|
||||
Reference in new issue
Block a user