Diff simple layout changes to avoid excessive DOM replacements (#910)

* Add UI diffs to rust

* Clean up some js

* Fix lints

* Fix test

* Remove one unnecessary keyword

* Rename to widget path

* Rename new_val to new_value

* Rename newVal to layoutGroup in createLayoutGroup

* Extract get_widget_path to a function

* Base skipping on the layout rather than the target

* Rename to ResendActiveWidget

* Switch info to trace

* Add a link to the documentation about Object.assign

* knitpick js changes

* Add more comments to diff functions

Co-authored-by: mfish33 <maxmfishernj@gmail.com>
This commit is contained in:
0HyperCube
2022-12-25 10:56:35 -08:00
committed by Keavon Chambers
co-authored by mfish33
parent 01931939ff
commit 694890642e
12 changed files with 464 additions and 264 deletions
+2 -2
View File
@@ -2,7 +2,7 @@ import { reactive, readonly } from "vue";
import { type IconName } from "@/utility-functions/icons";
import { type Editor } from "@/wasm-communication/editor";
import { type TextButtonWidget, type WidgetLayout, defaultWidgetLayout, DisplayDialog, DisplayDialogDismiss, UpdateDialogDetails } from "@/wasm-communication/messages";
import { type TextButtonWidget, type WidgetLayout, defaultWidgetLayout, DisplayDialog, DisplayDialogDismiss, UpdateDialogDetails, patchWidgetLayout } from "@/wasm-communication/messages";
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
export function createDialogState(editor: Editor) {
@@ -37,7 +37,7 @@ export function createDialogState(editor: Editor) {
state.icon = displayDialog.icon;
});
editor.subscriptions.subscribeJsMessage(UpdateDialogDetails, (updateDialogDetails) => {
state.widgets = updateDialogDetails;
patchWidgetLayout(state.widgets, updateDialogDetails);
state.jsCallbackBasedButtons = undefined;
});
editor.subscriptions.subscribeJsMessage(DisplayDialogDismiss, dismissDialog);
+11 -2
View File
@@ -1,7 +1,16 @@
import { reactive, readonly } from "vue";
import { type Editor } from "@/wasm-communication/editor";
import { type FrontendNode, type FrontendNodeLink, type FrontendNodeType, UpdateNodeGraph, UpdateNodeTypes, UpdateNodeGraphBarLayout, defaultWidgetLayout } from "@/wasm-communication/messages";
import {
type FrontendNode,
type FrontendNodeLink,
type FrontendNodeType,
UpdateNodeGraph,
UpdateNodeTypes,
UpdateNodeGraphBarLayout,
defaultWidgetLayout,
patchWidgetLayout,
} from "@/wasm-communication/messages";
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
export function createNodeGraphState(editor: Editor) {
@@ -21,7 +30,7 @@ export function createNodeGraphState(editor: Editor) {
state.nodeTypes = updateNodeTypes.nodeTypes;
});
editor.subscriptions.subscribeJsMessage(UpdateNodeGraphBarLayout, (updateNodeGraphBarLayout) => {
state.nodeGraphBarLayout = updateNodeGraphBarLayout;
patchWidgetLayout(state.nodeGraphBarLayout, updateNodeGraphBarLayout);
});
return {