|
11 | 11 | UpdateLayersPanelControlBarLeftLayout, |
12 | 12 | UpdateLayersPanelControlBarRightLayout, |
13 | 13 | UpdateLayersPanelBottomBarLayout, |
14 | | - } from "@graphite/messages"; |
15 | | - import type { DataBuffer, LayerPanelEntry } from "@graphite/messages"; |
| 14 | + } from "@graphite/messages.svelte"; |
| 15 | + import type { DataBuffer, LayerPanelEntry } from "@graphite/messages.svelte"; |
16 | 16 | import type { NodeGraphState } from "@graphite/state-providers/node-graph"; |
17 | 17 | import { platformIsMac } from "@graphite/utility-functions/platform"; |
18 | 18 | import { extractPixelData } from "@graphite/utility-functions/rasterization"; |
| 19 | + import type { WidgetLayout as WidgetLayoutState } from "@graphite/messages.svelte"; |
19 | 20 |
|
20 | 21 | import LayoutCol from "@graphite/components/layout/LayoutCol.svelte"; |
21 | 22 | import LayoutRow from "@graphite/components/layout/LayoutRow.svelte"; |
|
60 | 61 | let layerToClipAltKeyPressed = $state(false); |
61 | 62 |
|
62 | 63 | // Layouts |
63 | | - let layersPanelControlBarLeftLayout = $state(defaultWidgetLayout()); |
64 | | - let layersPanelControlBarRightLayout = $state(defaultWidgetLayout()); |
65 | | - let layersPanelBottomBarLayout = $state(defaultWidgetLayout()); |
| 64 | + let layersPanelControlBarLeftLayout = $state<WidgetLayoutState>(defaultWidgetLayout()); |
| 65 | + let layersPanelControlBarRightLayout = $state<WidgetLayoutState>(defaultWidgetLayout()); |
| 66 | + let layersPanelBottomBarLayout = $state<WidgetLayoutState>(defaultWidgetLayout()); |
66 | 67 |
|
67 | 68 | onMount(() => { |
68 | 69 | editor.subscriptions.subscribeJsMessage(UpdateLayersPanelControlBarLeftLayout, (updateLayersPanelControlBarLeftLayout) => { |
69 | 70 | patchWidgetLayout(layersPanelControlBarLeftLayout, updateLayersPanelControlBarLeftLayout); |
70 | | - layersPanelControlBarLeftLayout = layersPanelControlBarLeftLayout; |
71 | 71 | }); |
72 | 72 |
|
73 | 73 | editor.subscriptions.subscribeJsMessage(UpdateLayersPanelControlBarRightLayout, (updateLayersPanelControlBarRightLayout) => { |
74 | 74 | patchWidgetLayout(layersPanelControlBarRightLayout, updateLayersPanelControlBarRightLayout); |
75 | | - layersPanelControlBarRightLayout = layersPanelControlBarRightLayout; |
76 | 75 | }); |
77 | 76 |
|
78 | 77 | editor.subscriptions.subscribeJsMessage(UpdateLayersPanelBottomBarLayout, (updateLayersPanelBottomBarLayout) => { |
79 | 78 | patchWidgetLayout(layersPanelBottomBarLayout, updateLayersPanelBottomBarLayout); |
80 | | - layersPanelBottomBarLayout = layersPanelBottomBarLayout; |
81 | 79 | }); |
82 | 80 |
|
83 | 81 | editor.subscriptions.subscribeJsMessage(UpdateDocumentLayerStructureJs, (updateDocumentLayerStructure) => { |
|
182 | 180 |
|
183 | 181 | draggable = false; |
184 | 182 | listing.editingName = true; |
185 | | - layers = layers; |
| 183 | + // layers = layers; |
186 | 184 |
|
187 | 185 | await tick(); |
188 | 186 |
|
|
197 | 195 |
|
198 | 196 | draggable = true; |
199 | 197 | listing.editingName = false; |
200 | | - layers = layers; |
| 198 | + // layers = layers; |
201 | 199 |
|
202 | 200 | const name = (e.target instanceof HTMLInputElement && e.target.value) || ""; |
203 | 201 | editor.handle.setLayerName(listing.entry.id, name); |
|
207 | 205 | async function onEditLayerNameDeselect(listing: LayerListingInfo) { |
208 | 206 | draggable = true; |
209 | 207 | listing.editingName = false; |
210 | | - layers = layers; |
| 208 | + // layers = layers; |
211 | 209 |
|
212 | 210 | // Set it back to the original name if the user didn't enter a new name |
213 | 211 | if (document.activeElement instanceof HTMLInputElement) document.activeElement.value = listing.entry.alias; |
|
472 | 470 | }); |
473 | 471 | }; |
474 | 472 | recurse(updateDocumentLayerStructure); |
475 | | - layers = layers; |
| 473 | + // layers = layers; |
476 | 474 | } |
477 | 475 |
|
478 | 476 | function updateLayerInTree(targetId: bigint, targetLayer: LayerPanelEntry) { |
|
481 | 479 | const layer = layers.find((layer: LayerListingInfo) => layer.entry.id === targetId); |
482 | 480 | if (layer) { |
483 | 481 | layer.entry = targetLayer; |
484 | | - layers = layers; |
| 482 | + // layers = layers; |
485 | 483 | } |
486 | 484 | } |
487 | 485 | </script> |
488 | 486 |
|
489 | | -<LayoutCol class="layers" on:dragleave={() => (dragInPanel = false)}> |
| 487 | +<LayoutCol class="layers" ondragleave={() => (dragInPanel = false)}> |
490 | 488 | <LayoutRow class="control-bar" scrollableX={true}> |
491 | 489 | <WidgetLayout layout={layersPanelControlBarLeftLayout} /> |
492 | 490 | <Separator /> |
|
498 | 496 | styles={{ cursor: layerToClipUponClick && layerToClipAltKeyPressed && layerToClipUponClick.entry.clippable ? "alias" : "auto" }} |
499 | 497 | data-layer-panel |
500 | 498 | bind:this={list} |
501 | | - on:click={() => deselectAllLayers()} |
502 | | - on:dragover={updateInsertLine} |
503 | | - on:dragend={drop} |
504 | | - on:drop={drop} |
| 499 | + onclick={() => deselectAllLayers()} |
| 500 | + ondragover={updateInsertLine} |
| 501 | + ondragend={drop} |
| 502 | + ondrop={drop} |
505 | 503 | > |
506 | 504 | {#each layers as listing, index} |
507 | 505 | {@const selected = fakeHighlightOfNotYetSelectedLayerBeingDragged !== undefined ? fakeHighlightOfNotYetSelectedLayerBeingDragged === listing.entry.id : listing.entry.selected} |
|
519 | 517 | data-index={index} |
520 | 518 | tooltip={listing.entry.tooltip} |
521 | 519 | {draggable} |
522 | | - on:dragstart={(e) => draggable && dragStart(e, listing)} |
523 | | - on:click={(e) => selectLayerWithModifiers(e, listing)} |
| 520 | + ondragstart={(e) => draggable && dragStart(e, listing)} |
| 521 | + onclick={(e) => selectLayerWithModifiers(e, listing)} |
524 | 522 | > |
525 | 523 | {#if listing.entry.childrenAllowed} |
526 | 524 | <button |
|
547 | 545 | {#if listing.entry.name === "Artboard"} |
548 | 546 | <IconLabel icon="Artboard" class={"layer-type-icon"} /> |
549 | 547 | {/if} |
550 | | - <LayoutRow class="layer-name" on:dblclick={() => onEditLayerName(listing)}> |
| 548 | + <LayoutRow class="layer-name" ondblclick={() => onEditLayerName(listing)}> |
551 | 549 | <input |
552 | 550 | data-text-input |
553 | 551 | type="text" |
|
0 commit comments