Fix the blend mode and opacity widgets of the Layers panel (#1506)

* Fix blend mode and opacity

* Cleanup and bug fixes

---------

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
0HyperCube
2023-12-12 09:27:23 +00:00
committed by GitHub
co-authored by Keavon Chambers
parent 6bce72dccd
commit 29222700f4
20 changed files with 271 additions and 241 deletions
+6 -6
View File
@@ -4,7 +4,7 @@
import { beginDraggingElement } from "@graphite/io-managers/drag";
import { platformIsMac } from "@graphite/utility-functions/platform";
import type { Editor } from "@graphite/wasm-communication/editor";
import { defaultWidgetLayout, patchWidgetLayout, UpdateDocumentLayerDetails, UpdateDocumentLayerTreeStructureJs, UpdateLayerTreeOptionsLayout } from "@graphite/wasm-communication/messages";
import { defaultWidgetLayout, patchWidgetLayout, UpdateDocumentLayerDetails, UpdateDocumentLayerTreeStructureJs, UpdateLayersPanelOptionsLayout } from "@graphite/wasm-communication/messages";
import type { LayerType, LayerPanelEntry } from "@graphite/wasm-communication/messages";
import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
@@ -46,12 +46,12 @@
let dragInPanel = false;
// Layouts
let layerTreeOptionsLayout = defaultWidgetLayout();
let layersPanelOptionsLayout = defaultWidgetLayout();
onMount(() => {
editor.subscriptions.subscribeJsMessage(UpdateLayerTreeOptionsLayout, (updateLayerTreeOptionsLayout) => {
patchWidgetLayout(layerTreeOptionsLayout, updateLayerTreeOptionsLayout);
layerTreeOptionsLayout = layerTreeOptionsLayout;
editor.subscriptions.subscribeJsMessage(UpdateLayersPanelOptionsLayout, (updateLayersPanelOptionsLayout) => {
patchWidgetLayout(layersPanelOptionsLayout, updateLayersPanelOptionsLayout);
layersPanelOptionsLayout = layersPanelOptionsLayout;
});
editor.subscriptions.subscribeJsMessage(UpdateDocumentLayerTreeStructureJs, (updateDocumentLayerTreeStructure) => {
@@ -301,7 +301,7 @@
<LayoutCol class="layers" on:dragleave={() => (dragInPanel = false)}>
<LayoutRow class="options-bar" scrollableX={true}>
<WidgetLayout layout={layerTreeOptionsLayout} />
<WidgetLayout layout={layersPanelOptionsLayout} />
</LayoutRow>
<LayoutRow class="list-area" scrollableY={true}>
<LayoutCol class="list" bind:this={list} on:click={() => deselectAllLayers()} on:dragover={(e) => draggable && updateInsertLine(e)} on:dragend={() => draggable && drop()}>