From 2403990ea362f1e066da5a877b123cbdfe3dada2 Mon Sep 17 00:00:00 2001 From: Jonathan Kelley Date: Tue, 12 Oct 2021 02:26:06 -0400 Subject: [PATCH] docsd: more example images --- Cargo.toml | 2 +- README.md | 6 +- packages/desktop/src/index.js | 113 +++++++++++++++++----------------- 3 files changed, 60 insertions(+), 61 deletions(-) diff --git a/Cargo.toml b/Cargo.toml index 93b1de804..64c2a77e7 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -19,7 +19,7 @@ dioxus-mobile = { path = "./packages/mobile", optional = true } [features] # core -default = ["core", "ssr", "web"] +default = ["core"] core = ["macro", "hooks", "html"] macro = ["dioxus-core-macro"] hooks = ["dioxus-hooks"] diff --git a/README.md b/README.md index 2f389e68d..cb0264f00 100644 --- a/README.md +++ b/README.md @@ -89,9 +89,9 @@ If you know React, then you already know Dioxus. ## Examples: -| File Navigator (Desktop) | Bluetooth scanner (Desktop) | TodoMVC (All platforms) | Widget Gallery | -| ---------------------------------------------------------------- | ---------------------------------------------------------------- | ---------------------------------------------------------------- | ---------------------------------------------------------------- | -| ![asd](https://sixtyfps.io/resources/printerdemo_screenshot.png) | ![asd](https://sixtyfps.io/resources/printerdemo_screenshot.png) | ![asd](https://github.com/DioxusLabs/todomvc/blob/master/example.png) | ![asd](https://sixtyfps.io/resources/printerdemo_screenshot.png) | +| File Navigator (Desktop) | Bluetooth scanner (Desktop) | TodoMVC (All platforms) | Widget Gallery | +| -------------------------------------------------------------------------------- | ---------------------------------------------------------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------- | +| ![asd](https://github.com/DioxusLabs/file-explorer-example/raw/master/image.png) | ![asd](https://sixtyfps.io/resources/printerdemo_screenshot.png) | ![asd](https://github.com/DioxusLabs/todomvc/blob/master/example.png) | ![asd](https://sixtyfps.io/resources/printerdemo_screenshot.png) | diff --git a/packages/desktop/src/index.js b/packages/desktop/src/index.js index 0245aabef..28f46cdaa 100644 --- a/packages/desktop/src/index.js +++ b/packages/desktop/src/index.js @@ -50,6 +50,18 @@ class Interpreter { root.replaceWith(...els); } + InsertAfter(edit) { + let old = this.nodes[edit.root]; + let new_nodes = this.stack.splice(this.stack.length - edit.n); + old.after(...new_nodes); + } + + InsertBefore(edit) { + let old = this.nodes[edit.root]; + let new_nodes = this.stack.splice(this.stack.length - edit.n); + old.before(...new_nodes); + } + Remove(edit) { let node = this.nodes[edit.root]; if (node !== undefined) { @@ -78,74 +90,18 @@ class Interpreter { CreatePlaceholder(edit) { let el = document.createElement("pre"); - // let el = document.createComment("vroot"); this.stack.push(el); this.nodes[edit.root] = el; } RemoveEventListener(edit) { } - SetText(edit) { - this.top().textContent = edit.text; - } - - SetAttribute(edit) { - const name = edit.field; - const value = edit.value; - const ns = edit.ns; - const node = this.top(this.stack); - if (ns == "style") { - node.style[name] = value; - } else if (ns !== undefined) { - node.setAttributeNS(ns, name, value); - } else { - node.setAttribute(name, value); - } - if (name === "value") { - node.value = value; - } - if (name === "checked") { - node.checked = true; - } - if (name === "selected") { - node.selected = true; - } - } - RemoveAttribute(edit) { - const name = edit.field; - const node = this.top(this.stack); - node.removeAttribute(name); - - if (name === "value") { - node.value = null; - } - if (name === "checked") { - node.checked = false; - } - if (name === "selected") { - node.selected = false; - } - } - - InsertAfter(edit) { - let old = this.nodes[edit.root]; - let new_nodes = this.stack.splice(this.stack.length - edit.n); - // console.log("inserting nodes after", new_nodes, old); - old.after(...new_nodes); - } - - InsertBefore(edit) { - let old = this.nodes[edit.root]; - let new_nodes = this.stack.splice(this.stack.length - edit.n); - old.before(...new_nodes); - } - NewEventListener(edit) { const event_name = edit.event_name; const mounted_node_id = edit.root; const scope = edit.scope; - const element = this.top(); + const element = this.nodes[edit.root] element.setAttribute(`dioxus-event-${event_name}`, `${scope}.${mounted_node_id}`); if (this.listeners[event_name] === undefined) { @@ -191,6 +147,49 @@ class Interpreter { }); } } + + SetText(edit) { + this.nodes[edit.root].textContent = edit.text; + } + + SetAttribute(edit) { + const name = edit.field; + const value = edit.value; + const ns = edit.ns; + const node = this.nodes[edit.root] + if (ns == "style") { + node.style[name] = value; + } else if (ns !== undefined) { + node.setAttributeNS(ns, name, value); + } else { + node.setAttribute(name, value); + } + if (name === "value") { + node.value = value; + } + if (name === "checked") { + node.checked = true; + } + if (name === "selected") { + node.selected = true; + } + } + RemoveAttribute(edit) { + const name = edit.field; + const node = this.nodes[edit.root]; + node.removeAttribute(name); + + if (name === "value") { + node.value = null; + } + if (name === "checked") { + node.checked = false; + } + if (name === "selected") { + node.selected = false; + } + } + } async function initialize() {