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
+6 -5
View File
@@ -231,6 +231,7 @@ import { textInputCleanup } from "@/utility-functions/keyboard-entry";
import { rasterizeSVGCanvas } from "@/utility-functions/rasterization";
import {
defaultWidgetLayout,
patchWidgetLayout,
type DisplayEditableTextbox,
type MouseCursorIcon,
type UpdateDocumentBarLayout,
@@ -505,19 +506,19 @@ export default defineComponent({
},
// Update layouts
updateDocumentModeLayout(updateDocumentModeLayout: UpdateDocumentModeLayout) {
this.documentModeLayout = updateDocumentModeLayout;
patchWidgetLayout(this.documentModeLayout, updateDocumentModeLayout);
},
updateToolOptionsLayout(updateToolOptionsLayout: UpdateToolOptionsLayout) {
this.toolOptionsLayout = updateToolOptionsLayout;
patchWidgetLayout(this.toolOptionsLayout, updateToolOptionsLayout);
},
updateDocumentBarLayout(updateDocumentBarLayout: UpdateDocumentBarLayout) {
this.documentBarLayout = updateDocumentBarLayout;
patchWidgetLayout(this.documentBarLayout, updateDocumentBarLayout);
},
updateToolShelfLayout(updateToolShelfLayout: UpdateToolShelfLayout) {
this.toolShelfLayout = updateToolShelfLayout;
patchWidgetLayout(this.toolShelfLayout, updateToolShelfLayout);
},
updateWorkingColorsLayout(updateWorkingColorsLayout: UpdateWorkingColorsLayout) {
this.workingColorsLayout = updateWorkingColorsLayout;
patchWidgetLayout(this.workingColorsLayout, updateWorkingColorsLayout);
},
// Resize elements to render the new viewport size
viewportResize() {
+2 -1
View File
@@ -277,6 +277,7 @@ import {
type LayerTypeData,
type LayerPanelEntry,
defaultWidgetLayout,
patchWidgetLayout,
UpdateDocumentLayerDetails,
UpdateDocumentLayerTreeStructureJs,
UpdateLayerTreeOptionsLayout,
@@ -523,7 +524,7 @@ export default defineComponent({
});
this.editor.subscriptions.subscribeJsMessage(UpdateLayerTreeOptionsLayout, (updateLayerTreeOptionsLayout) => {
this.layerTreeOptionsLayout = updateLayerTreeOptionsLayout;
patchWidgetLayout(this.layerTreeOptionsLayout, updateLayerTreeOptionsLayout);
});
this.editor.subscriptions.subscribeJsMessage(UpdateDocumentLayerDetails, (updateDocumentLayerDetails) => {
@@ -32,7 +32,7 @@
<script lang="ts">
import { defineComponent } from "vue";
import { defaultWidgetLayout, UpdatePropertyPanelOptionsLayout, UpdatePropertyPanelSectionsLayout } from "@/wasm-communication/messages";
import { defaultWidgetLayout, patchWidgetLayout, UpdatePropertyPanelOptionsLayout, UpdatePropertyPanelSectionsLayout } from "@/wasm-communication/messages";
import LayoutCol from "@/components/layout/LayoutCol.vue";
import LayoutRow from "@/components/layout/LayoutRow.vue";
@@ -48,11 +48,11 @@ export default defineComponent({
},
mounted() {
this.editor.subscriptions.subscribeJsMessage(UpdatePropertyPanelOptionsLayout, (updatePropertyPanelOptionsLayout) => {
this.propertiesOptionsLayout = updatePropertyPanelOptionsLayout;
patchWidgetLayout(this.propertiesOptionsLayout, updatePropertyPanelOptionsLayout);
});
this.editor.subscriptions.subscribeJsMessage(UpdatePropertyPanelSectionsLayout, (updatePropertyPanelSectionsLayout) => {
this.propertiesSectionsLayout = updatePropertyPanelSectionsLayout;
patchWidgetLayout(this.propertiesSectionsLayout, updatePropertyPanelSectionsLayout);
});
},
components: {