fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-19 19:08:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

Remove all references to legacy layers (#1523)

Browse Source 
* Remove visible field from LegacyLayer

* Remove LegacyLayer wrapper around LegacyLayerType

* Remove FolderLegacyLayer and LayerLegacyLayer wrappers around their data

* Remove legacy layers
This commit is contained in:
Keavon Chambers
2023-12-19 20:50:45 -08:00
parent 9a7d7de8fa
commit dcd38f2e4c
26 changed files with 211 additions and 1078 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/components/panels/Layers.svelte
View File

@@ -5,7 +5,7 @@
import { platformIsMac } from "@graphite/utility-functions/platform";
import type { Editor } from "@graphite/wasm-communication/editor";
import { defaultWidgetLayout, patchWidgetLayout, UpdateDocumentLayerDetails, UpdateDocumentLayerTreeStructureJs, UpdateLayersPanelOptionsLayout } from "@graphite/wasm-communication/messages";
import type { LayerType, LayerPanelEntry } from "@graphite/wasm-communication/messages";
import type { LayerClassification, LayerPanelEntry } from "@graphite/wasm-communication/messages";
import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
@@ -136,8 +136,8 @@
editor.instance.deselectAllLayers();
}
function isGroupOrArtboard(layerType: LayerType) {
return layerType === "Folder" || layerType === "Artboard";
function isNestingLayer(layerClassification: LayerClassification) {
return layerClassification === "Folder" || layerClassification === "Artboard";
}
function calculateDragIndex(tree: LayoutCol, clientY: number, select?: () => void): DraggingData {
@@ -179,9 +179,9 @@
}
// Inserting below current row
else if (distance > -closest && distance > -RANGE_TO_INSERT_WITHIN_BOTTOM_FOLDER_NOT_ROOT && distance < 0) {
insertFolder = isGroupOrArtboard(layer.layerType) ? layer.path : layer.path.slice(0, layer.path.length - 1);
insertIndex = isGroupOrArtboard(layer.layerType) ? 0 : folderIndex + 1;
highlightFolder = isGroupOrArtboard(layer.layerType);
insertFolder = isNestingLayer(layer.layerClassification) ? layer.path : layer.path.slice(0, layer.path.length - 1);
insertIndex = isNestingLayer(layer.layerClassification) ? 0 : folderIndex + 1;
highlightFolder = isNestingLayer(layer.layerClassification);
closest = -distance;
markerHeight = index === treeChildren.length - 1 ? rect.bottom - INSERT_MARK_OFFSET : rect.bottom;
}
@@ -320,11 +320,11 @@
on:dragstart={(e) => draggable && dragStart(e, listing)}
on:click={(e) => selectLayerWithModifiers(e, listing)}
>
{#if isGroupOrArtboard(listing.entry.layerType)}
{#if isNestingLayer(listing.entry.layerClassification)}
<button class="expand-arrow" class:expanded={listing.entry.layerMetadata.expanded} on:click|stopPropagation={() => handleExpandArrowClick(listing.entry.path)} tabindex="0" />
{#if listing.entry.layerType === "Artboard"}
{#if listing.entry.layerClassification === "Artboard"}
<IconLabel icon="Artboard" class={"layer-type-icon"} />
{:else if listing.entry.layerType === "Folder"}
{:else if listing.entry.layerClassification === "Folder"}
<IconLabel icon="Folder" class={"layer-type-icon"} />
{/if}
{:else}
@@ -337,7 +337,7 @@
data-text-input
type="text"
value={listing.entry.name}
placeholder={listing.entry.layerType}
placeholder={listing.entry.layerClassification}
disabled={!listing.editingName}
on:blur={() => onEditLayerNameDeselect(listing)}
on:keydown={(e) => e.key === "Escape" && onEditLayerNameDeselect(listing)}
@@ -349,8 +349,8 @@
class={"visibility"}
action={(e) => (toggleLayerVisibility(listing.entry.path), e?.stopPropagation())}
size={24}
icon={listing.entry.visible ? "EyeVisible" : "EyeHidden"}
tooltip={listing.entry.visible ? "Visible" : "Hidden"}
icon={(() => true)() ? "EyeVisible" : "EyeHidden"}
tooltip={(() => true)() ? "Visible" : "Hidden"}
/>
</LayoutRow>
{/each}

5
frontend/src/components/widgets/WidgetSpan.svelte
View File

@@ -17,7 +17,6 @@
import CurveInput from "@graphite/components/widgets/inputs/CurveInput.svelte";
import DropdownInput from "@graphite/components/widgets/inputs/DropdownInput.svelte";
import FontInput from "@graphite/components/widgets/inputs/FontInput.svelte";
import LayerReferenceInput from "@graphite/components/widgets/inputs/LayerReferenceInput.svelte";
import NumberInput from "@graphite/components/widgets/inputs/NumberInput.svelte";
import OptionalInput from "@graphite/components/widgets/inputs/OptionalInput.svelte";
import PivotInput from "@graphite/components/widgets/inputs/PivotInput.svelte";
@@ -126,10 +125,6 @@
{#if imageLabel}
<ImageLabel {...exclude(imageLabel)} />
{/if}
{@const layerReferenceInput = narrowWidgetProps(component.props, "LayerReferenceInput")}
{#if layerReferenceInput}
<LayerReferenceInput {...exclude(layerReferenceInput)} on:value={({ detail }) => updateLayout(index, detail)} />
{/if}
{@const numberInput = narrowWidgetProps(component.props, "NumberInput")}
{#if numberInput}
<NumberInput

136
frontend/src/components/widgets/inputs/LayerReferenceInput.svelte
View File

@@ -1,136 +0,0 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import { currentDraggingElement } from "@graphite/io-managers/drag";
import type { LayerType } from "@graphite/wasm-communication/messages";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
const dispatch = createEventDispatcher<{ value: string | undefined }>();
export let value: string | undefined = undefined;
export let layerName: string | undefined = undefined;
export let layerType: LayerType | undefined = undefined;
export let disabled = false;
export let tooltip: string | undefined = undefined;
export let sharpRightCorners = false;
let hoveringDrop = false;
$: droppable = hoveringDrop && Boolean(currentDraggingElement());
function dragOver(e: DragEvent) {
hoveringDrop = true;
e.preventDefault();
}
function drop(e: DragEvent) {
hoveringDrop = false;
const element = currentDraggingElement();
const layerPath = element?.getAttribute("data-layer") || undefined;
if (layerPath) {
e.preventDefault();
dispatch("value", layerPath);
}
}
</script>
<LayoutRow
class="layer-reference-input"
classes={{ disabled, droppable, "sharp-right-corners": sharpRightCorners }}
{tooltip}
on:dragover={(e) => !disabled && dragOver(e)}
on:dragleave={() => !disabled && (hoveringDrop = false)}
on:drop={(e) => !disabled && drop(e)}
>
{#if value === undefined || droppable}
<LayoutRow class="drop-zone" />
<TextLabel italic={true}>{droppable ? "Drop" : "Drag"} Layer Here</TextLabel>
{:else}
{#if layerName !== undefined && layerType}
<IconLabel icon={layerType} class="layer-icon" />
<TextLabel italic={layerName === ""} class="layer-name">{layerName || `Untitled ${layerType || "[Unknown Layer Type]"}`}</TextLabel>
{:else}
<TextLabel bold={true} italic={true} class="missing">Layer Missing</TextLabel>
{/if}
<IconButton icon="CloseX" size={16} {disabled} action={() => dispatch("value", undefined)} />
{/if}
</LayoutRow>
<style lang="scss" global>
.layer-reference-input {
position: relative;
flex: 1 0 auto;
height: 24px;
border-radius: 2px;
background: var(--color-1-nearblack);
.drop-zone {
pointer-events: none;
border: 1px dashed var(--color-4-dimgray);
border-radius: 1px;
position: absolute;
top: 2px;
bottom: 2px;
left: 2px;
right: 2px;
}
&.droppable .drop-zone {
border: 1px dashed var(--color-e-nearwhite);
}
.layer-icon {
margin: 4px 8px;
+ .text-label {
padding-left: 0;
}
}
.text-label {
line-height: 18px;
padding: 3px calc(8px + 2px);
width: 100%;
text-align: center;
&.missing {
// TODO: Define this as a permanent color palette choice (search the project for all uses of this hex code)
color: #d6536e;
}
&.layer-name {
text-align: left;
}
}
.icon-button {
margin: 4px;
margin-left: 0;
}
&.disabled {
background: var(--color-2-mildblack);
.drop-zone {
border: 1px dashed var(--color-4-dimgray);
}
.text-label {
color: var(--color-8-uppergray);
}
.icon-label svg {
fill: var(--color-8-uppergray);
}
}
}
</style>