fix desktop mounted event

This commit is contained in:
Evan Almloff 2023-10-20 08:45:04 -05:00
parent 007aacc247
commit 378cbfabd9
5 changed files with 17 additions and 126 deletions

View file

@ -30,7 +30,7 @@ impl RenderedElementBacking for DesktopElement {
>, >,
>, >,
> { > {
let script = format!("return window.interpreter.GetClientRect({});", self.id.0); let script = format!("return window.interpreter.getClientRect({});", self.id.0);
let fut = self let fut = self
.query .query
@ -54,7 +54,7 @@ impl RenderedElementBacking for DesktopElement {
behavior: dioxus_html::ScrollBehavior, behavior: dioxus_html::ScrollBehavior,
) -> std::pin::Pin<Box<dyn futures_util::Future<Output = dioxus_html::MountedResult<()>>>> { ) -> std::pin::Pin<Box<dyn futures_util::Future<Output = dioxus_html::MountedResult<()>>>> {
let script = format!( let script = format!(
"return window.interpreter.ScrollTo({}, {});", "return window.interpreter.scrollTo({}, {});",
self.id.0, self.id.0,
serde_json::to_string(&behavior).expect("Failed to serialize ScrollBehavior") serde_json::to_string(&behavior).expect("Failed to serialize ScrollBehavior")
); );
@ -81,7 +81,7 @@ impl RenderedElementBacking for DesktopElement {
focus: bool, focus: bool,
) -> std::pin::Pin<Box<dyn futures_util::Future<Output = dioxus_html::MountedResult<()>>>> { ) -> std::pin::Pin<Box<dyn futures_util::Future<Output = dioxus_html::MountedResult<()>>>> {
let script = format!( let script = format!(
"return window.interpreter.SetFocus({}, {});", "return window.interpreter.setFocus({}, {});",
self.id.0, focus self.id.0, focus
); );

View file

@ -29,7 +29,7 @@ use desktop_context::{EventData, UserWindowEvent, WebviewQueue, WindowEventHandl
use dioxus_core::*; use dioxus_core::*;
use dioxus_html::{event_bubbles, MountedData}; use dioxus_html::{event_bubbles, MountedData};
use dioxus_html::{native_bind::NativeFileEngine, FormData, HtmlEvent}; use dioxus_html::{native_bind::NativeFileEngine, FormData, HtmlEvent};
use dioxus_interpreter_js::Channel; use dioxus_interpreter_js::binary_protocol::Channel;
use element::DesktopElement; use element::DesktopElement;
use eval::init_eval; use eval::init_eval;
use futures_util::{pin_mut, FutureExt}; use futures_util::{pin_mut, FutureExt};

View file

@ -1,5 +1,3 @@
import { setAttributeInner } from "./common.js";
class InterpreterConfig { class InterpreterConfig {
constructor(intercept_link_redirects) { constructor(intercept_link_redirects) {
this.intercept_link_redirects = intercept_link_redirects; this.intercept_link_redirects = intercept_link_redirects;
@ -215,45 +213,6 @@ class ListenerMap {
delete this.local[id]; delete this.local[id];
} }
} }
function SetAttributeInner(node, field, value, ns) {
const name = field;
if (ns === "style") {
// ????? why do we need to do this
if (node.style === undefined) {
node.style = {};
}
node.style[name] = value;
} else if (ns !== null && ns !== undefined && ns !== "") {
node.setAttributeNS(ns, name, value);
} else {
switch (name) {
case "value":
if (value !== node.value) {
node.value = value;
}
break;
case "initial_value":
node.defaultValue = value;
break;
case "checked":
node.checked = truthy(value);
break;
case "selected":
node.selected = truthy(value);
break;
case "dangerous_inner_html":
node.innerHTML = value;
break;
default:
// https://github.com/facebook/react/blob/8b88ac2592c5f555f315f9440cbb665dd1e7457a/packages/react-dom/src/shared/DOMProperty.js#L352-L364
if (!truthy(value) && bool_attrs.hasOwnProperty(name)) {
node.removeAttribute(name);
} else {
node.setAttribute(name, value);
}
}
}
}
function LoadChild(array) { function LoadChild(array) {
// iterate through each number and get that child // iterate through each number and get that child
node = stack[stack.length - 1]; node = stack[stack.length - 1];
@ -284,41 +243,10 @@ function AppendChildren(id, many) {
root.appendChild(els[k]); root.appendChild(els[k]);
} }
} }
const bool_attrs = {
allowfullscreen: true,
allowpaymentrequest: true,
async: true,
autofocus: true,
autoplay: true,
checked: true,
controls: true,
default: true,
defer: true,
disabled: true,
formnovalidate: true,
hidden: true,
ismap: true,
itemscope: true,
loop: true,
multiple: true,
muted: true,
nomodule: true,
novalidate: true,
open: true,
playsinline: true,
readonly: true,
required: true,
reversed: true,
selected: true,
truespeed: true,
webkitdirectory: true,
};
function truthy(val) {
return val === "true" || val === true;
}
window.interpreter = {}
function getClientRect(id) { window.interpreter.getClientRect = function (id) {
const node = nodes[id]; const node = nodes[id];
if (!node) { if (!node) {
return; return;
@ -331,7 +259,7 @@ function getClientRect(id) {
}; };
} }
function scrollTo(id, behavior) { window.interpreter.scrollTo = function (id, behavior) {
const node = nodes[id]; const node = nodes[id];
if (!node) { if (!node) {
return false; return false;
@ -343,7 +271,7 @@ function scrollTo(id, behavior) {
} }
/// Set the focus on the element /// Set the focus on the element
function setFocus(id, focus) { window.interpreter.setFocus = function (id, focus) {
const node = nodes[id]; const node = nodes[id];
if (!node) { if (!node) {
return false; return false;
@ -356,47 +284,6 @@ function setFocus(id, focus) {
return true; return true;
} }
function saveTemplate(template) {
let roots = [];
for (let root of template.roots) {
roots.push(this.MakeTemplateNode(root));
}
this.templates[template.name] = roots;
}
function makeTemplateNode(node) {
switch (node.type) {
case "Text":
return document.createTextNode(node.text);
case "Dynamic":
let dyn = document.createElement("pre");
dyn.hidden = true;
return dyn;
case "DynamicText":
return document.createTextNode("placeholder");
case "Element":
let el;
if (node.namespace != null) {
el = document.createElementNS(node.namespace, node.tag);
} else {
el = document.createElement(node.tag);
}
for (let attr of node.attrs) {
if (attr.type == "Static") {
setAttributeInner(el, attr.name, attr.value, attr.namespace);
}
}
for (let child of node.children) {
el.appendChild(this.MakeTemplateNode(child));
}
return el;
}
}
function get_mouse_data(event) { function get_mouse_data(event) {
const { const {
altKey, altKey,

View file

@ -296,6 +296,7 @@ pub mod binary_protocol {
#[bindgen] #[bindgen]
mod protocol_js { mod protocol_js {
const JS_FILE: &str = "./packages/interpreter/src/interpreter.js"; const JS_FILE: &str = "./packages/interpreter/src/interpreter.js";
const JS_FILE: &str = "./packages/interpreter/src/common.js";
fn mount_to_root() { fn mount_to_root() {
"{AppendChildren(root, stack.length-1);}" "{AppendChildren(root, stack.length-1);}"
@ -382,10 +383,10 @@ pub mod binary_protocol {
"{nodes[$id$].textContent = $text$;}" "{nodes[$id$].textContent = $text$;}"
} }
fn set_attribute(id: u32, field: &str<u8, attr>, value: &str, ns: &str<u8, ns_cache>) { fn set_attribute(id: u32, field: &str<u8, attr>, value: &str, ns: &str<u8, ns_cache>) {
"{node = nodes[$id$]; SetAttributeInner(node, $field$, $value$, $ns$);}" "{node = nodes[$id$]; setAttributeInner(node, $field$, $value$, $ns$);}"
} }
fn set_top_attribute(field: &str<u8, attr>, value: &str, ns: &str<u8, ns_cache>) { fn set_top_attribute(field: &str<u8, attr>, value: &str, ns: &str<u8, ns_cache>) {
"{SetAttributeInner(stack[stack.length-1], $field$, $value$, $ns$);}" "{setAttributeInner(stack[stack.length-1], $field$, $value$, $ns$);}"
} }
fn remove_attribute(id: u32, field: &str<u8, attr>, ns: &str<u8, ns_cache>) { fn remove_attribute(id: u32, field: &str<u8, attr>, ns: &str<u8, ns_cache>) {
r#"{ r#"{

View file

@ -29,7 +29,7 @@ impl RenderedElementBacking for LiveviewElement {
>, >,
>, >,
> { > {
let script = format!("return getClientRect({});", self.id.0); let script = format!("return window.interpreter.getClientRect({});", self.id.0);
let fut = self let fut = self
.query .query
@ -53,7 +53,7 @@ impl RenderedElementBacking for LiveviewElement {
behavior: dioxus_html::ScrollBehavior, behavior: dioxus_html::ScrollBehavior,
) -> std::pin::Pin<Box<dyn futures_util::Future<Output = dioxus_html::MountedResult<()>>>> { ) -> std::pin::Pin<Box<dyn futures_util::Future<Output = dioxus_html::MountedResult<()>>>> {
let script = format!( let script = format!(
"return scrollTo({}, {});", "return window.interpreter.scrollTo({}, {});",
self.id.0, self.id.0,
serde_json::to_string(&behavior).expect("Failed to serialize ScrollBehavior") serde_json::to_string(&behavior).expect("Failed to serialize ScrollBehavior")
); );
@ -76,7 +76,10 @@ impl RenderedElementBacking for LiveviewElement {
&self, &self,
focus: bool, focus: bool,
) -> std::pin::Pin<Box<dyn futures_util::Future<Output = dioxus_html::MountedResult<()>>>> { ) -> std::pin::Pin<Box<dyn futures_util::Future<Output = dioxus_html::MountedResult<()>>>> {
let script = format!("return setFocus({}, {});", self.id.0, focus); let script = format!(
"return window.interpreter.setFocus({}, {});",
self.id.0, focus
);
let fut = self.query.new_query::<bool>(&script).resolve(); let fut = self.query.new_query::<bool>(&script).resolve();