Add a node insertion button and layer renaming from the Properties panel (#2072)

* Add node button

* Improve css a bit

* Add layer renaming to the Properties panel and move New Layer to that, plus add unpinning to properties sections

* Add tooltip

* Re-add layer itself in listing

* Final code review

---------

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
James Lindsay
2024-10-25 23:58:34 -07:00
committed by GitHub
co-authored by Keavon Chambers
parent 3c839ffd2b
commit 5aa6716910
24 changed files with 389 additions and 264 deletions
@@ -2,23 +2,16 @@
import { getContext, onMount } from "svelte";
import type { Editor } from "@graphite/wasm-communication/editor";
import { defaultWidgetLayout, patchWidgetLayout, UpdatePropertyPanelOptionsLayout, UpdatePropertyPanelSectionsLayout } from "@graphite/wasm-communication/messages";
import { defaultWidgetLayout, patchWidgetLayout, UpdatePropertyPanelSectionsLayout } from "@graphite/wasm-communication/messages";
import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
const editor = getContext<Editor>("editor");
let propertiesOptionsLayout = defaultWidgetLayout();
let propertiesSectionsLayout = defaultWidgetLayout();
onMount(() => {
editor.subscriptions.subscribeJsMessage(UpdatePropertyPanelOptionsLayout, (updatePropertyPanelOptionsLayout) => {
patchWidgetLayout(propertiesOptionsLayout, updatePropertyPanelOptionsLayout);
propertiesOptionsLayout = propertiesOptionsLayout;
});
editor.subscriptions.subscribeJsMessage(UpdatePropertyPanelSectionsLayout, (updatePropertyPanelSectionsLayout) => {
patchWidgetLayout(propertiesSectionsLayout, updatePropertyPanelSectionsLayout);
propertiesSectionsLayout = propertiesSectionsLayout;
@@ -27,9 +20,6 @@
</script>
<LayoutCol class="properties">
<LayoutRow class="options-bar">
<WidgetLayout layout={propertiesOptionsLayout} />
</LayoutRow>
<LayoutCol class="sections" scrollableY={true}>
<WidgetLayout layout={propertiesSectionsLayout} />
</LayoutCol>