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

Polish node graph frames and rename them for clarity (#1104)

Browse Source 
* Polish layer panel UI and layer type icons/text

* Assorted UI text and comment cleanup

* Insert Transform node before Imaginate node via tool

* Rename "Node Graph Frame" to Layer type and Frame tool

* Rename "Node Graph Frame" to "Frame" tool

* Update Node Graph Frame -> Frame tool icon

* Fix lint warnings
This commit is contained in:
Keavon Chambers
2023-04-03 01:52:25 -07:00
committed by GitHub
parent 14cf7bef31
commit 65d705abc7
25 changed files with 104 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/assets/icon-16px-solid/layer.svg
+3
View File
@@ -0,0 +1,3 @@
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M0,2v7.3L4.7,14H16V2H0z M15,13H6V9H1V3h14V13z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 128 B

frontend/assets/icon-16px-solid/node-folder.svg
-4
View File
@@ -1,4 +0,0 @@
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M14,13H2c-0.55,0-1-0.45-1-1V6h5.42l1-1H15v7C15,12.55,14.55,13,14,13z" />
<path d="M6,2H2C1.45,2,1,2.45,1,3v2h5l1-1h8c0-0.55-0.45-1-1-1H7L6,2z" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 225 B

frontend/assets/icon-24px-two-tone/raster-frame-tool.svg
+4
View File
@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path class="color-raster" d="M18,8v8H6V8H18 M19,6H5C4.5,6,4,6.4,4,7v10c0,0.5,0.5,1,1,1h14c0.5,0,1-0.5,1-1V7C20,6.4,19.5,6,19,6L19,6z" />
<path class="color-solid" d="M2,8V6c0-1.1,0.9-2,2-2h2v1H4C3.4,5,3,5.4,3,6v2H2z M21,16v2c0,0.6-0.4,1-1,1h-2v1h2c1.1,0,2-0.9,2-2v-2H21z M18,5h2c0.6,0,1,0.4,1,1v2h1V6c0-1.1-0.9-2-2-2h-2V5z M6,19H4c-0.6,0-1-0.4-1-1v-2H2v2c0,1.1,0.9,2,2,2h2V19z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 452 B

frontend/assets/icon-24px-two-tone/raster-nodes-tool.svg
-6
View File
@@ -1,6 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path class="color-raster" d="M23,18c0,1.1-0.9,2-2,2h-4c-1.1,0-2-0.9-2-2v-2c0-1.1,0.9-2,2-2h4c1.1,0,2,0.9,2,2V18z" />
<path class="color-raster" d="M23,8c0,1.1-0.9,2-2,2h-4c-1.1,0-2-0.9-2-2V6c0-1.1,0.9-2,2-2h4c1.1,0,2,0.9,2,2V8z" />
<path class="color-raster" d="M9,13c0,1.1-0.9,2-2,2H3c-1.1,0-2-0.9-2-2v-2c0-1.1,0.9-2,2-2h4c1.1,0,2,0.9,2,2V13z" />
<path class="color-solid" d="M12.9,9.3c0.2-1,0.4-1.6,1.1-1.8v-1l-0.1,0c-1.5,0.3-1.7,1.6-2,2.6c-0.3,1.2-0.5,2.1-1.9,2.4v1c1.5,0.2,1.7,1.2,1.9,2.4c0.2,1,0.5,2.3,2,2.6l0.1,0v-1c-0.7-0.2-0.9-0.8-1.1-1.8c-0.2-0.9-0.4-2-1.4-2.7C12.5,11.3,12.7,10.2,12.9,9.3z" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 677 B

frontend/src/components/panels/LayerTree.svelte
+3 -2
View File
@@ -359,15 +359,16 @@
on:dragstart={(e) => draggable && dragStart(e, listing)}
on:click={(e) => selectLayerWithModifiers(e, listing)}
>
{@const layerType = getLayerTypeData(listing.entry.layerType)}
<LayoutRow class="layer-type-icon">
<IconLabel icon={getLayerTypeData(listing.entry.layerType).icon} tooltip={getLayerTypeData(listing.entry.layerType).name} />
<IconLabel icon={layerType.icon} />
</LayoutRow>
<LayoutRow class="layer-name" on:dblclick={() => onEditLayerName(listing)}>
<input
data-text-input
type="text"
value={listing.entry.name}
placeholder={getLayerTypeData(listing.entry.layerType).name}
placeholder={"Untitled " + layerType.name}
disabled={!listing.editingName}
on:blur={() => onEditLayerNameDeselect(listing)}
on:keydown={(e) => e.key === "Escape" && onEditLayerNameDeselect(listing)}
frontend/src/utility-functions/icons.ts
+6 -6
View File
@@ -95,19 +95,19 @@ import BooleanUnion from "@graphite/../assets/icon-16px-solid/boolean-union.svg"
import CheckboxChecked from "@graphite/../assets/icon-16px-solid/checkbox-checked.svg";
import CheckboxUnchecked from "@graphite/../assets/icon-16px-solid/checkbox-unchecked.svg";
import Copy from "@graphite/../assets/icon-16px-solid/copy.svg";
import Eyedropper from "@graphite/../assets/icon-16px-solid/eyedropper.svg";
import EyeHidden from "@graphite/../assets/icon-16px-solid/eye-hidden.svg";
import EyeVisible from "@graphite/../assets/icon-16px-solid/eye-visible.svg";
import Eyedropper from "@graphite/../assets/icon-16px-solid/eyedropper.svg";
import File from "@graphite/../assets/icon-16px-solid/file.svg";
import FlipHorizontal from "@graphite/../assets/icon-16px-solid/flip-horizontal.svg";
import FlipVertical from "@graphite/../assets/icon-16px-solid/flip-vertical.svg";
import Folder from "@graphite/../assets/icon-16px-solid/folder.svg";
import GraphiteLogo from "@graphite/../assets/icon-16px-solid/graphite-logo.svg";
import Layer from "@graphite/../assets/icon-16px-solid/layer.svg";
import NodeArtboard from "@graphite/../assets/icon-16px-solid/node-artboard.svg";
import NodeBlur from "@graphite/../assets/icon-16px-solid/node-blur.svg";
import NodeBrushwork from "@graphite/../assets/icon-16px-solid/node-brushwork.svg";
import NodeColorCorrection from "@graphite/../assets/icon-16px-solid/node-color-correction.svg";
import NodeFolder from "@graphite/../assets/icon-16px-solid/node-folder.svg";
import NodeGradient from "@graphite/../assets/icon-16px-solid/node-gradient.svg";
import NodeImage from "@graphite/../assets/icon-16px-solid/node-image.svg";
import NodeImaginate from "@graphite/../assets/icon-16px-solid/node-imaginate.svg";
@@ -160,11 +160,11 @@ const SOLID_16PX = {
FlipVertical: { svg: FlipVertical, size: 16 },
Folder: { svg: Folder, size: 16 },
GraphiteLogo: { svg: GraphiteLogo, size: 16 },
Layer: { svg: Layer, size: 16 },
NodeArtboard: { svg: NodeArtboard, size: 16 },
NodeBlur: { svg: NodeBlur, size: 16 },
NodeBrushwork: { svg: NodeBrushwork, size: 16 },
NodeColorCorrection: { svg: NodeColorCorrection, size: 16 },
NodeFolder: { svg: NodeFolder, size: 16 },
NodeGradient: { svg: NodeGradient, size: 16 },
NodeImage: { svg: NodeImage, size: 16 },
NodeImaginate: { svg: NodeImaginate, size: 16 },
@@ -232,9 +232,9 @@ import GeneralSelectTool from "@graphite/../assets/icon-24px-two-tone/general-se
import RasterBrushTool from "@graphite/../assets/icon-24px-two-tone/raster-brush-tool.svg";
import RasterCloneTool from "@graphite/../assets/icon-24px-two-tone/raster-clone-tool.svg";
import RasterDetailTool from "@graphite/../assets/icon-24px-two-tone/raster-detail-tool.svg";
import RasterFrameTool from "@graphite/../assets/icon-24px-two-tone/raster-frame-tool.svg";
import RasterHealTool from "@graphite/../assets/icon-24px-two-tone/raster-heal-tool.svg";
import RasterImaginateTool from "@graphite/../assets/icon-24px-two-tone/raster-imaginate-tool.svg";
import RasterNodesTool from "@graphite/../assets/icon-24px-two-tone/raster-nodes-tool.svg";
import RasterPatchTool from "@graphite/../assets/icon-24px-two-tone/raster-patch-tool.svg";
import RasterRelightTool from "@graphite/../assets/icon-24px-two-tone/raster-relight-tool.svg";
import VectorEllipseTool from "@graphite/../assets/icon-24px-two-tone/vector-ellipse-tool.svg";
@@ -254,12 +254,12 @@ const TWO_TONE_24PX = {
GeneralGradientTool: { svg: GeneralGradientTool, size: 24 },
GeneralNavigateTool: { svg: GeneralNavigateTool, size: 24 },
GeneralSelectTool: { svg: GeneralSelectTool, size: 24 },
RasterImaginateTool: { svg: RasterImaginateTool, size: 24 },
RasterNodesTool: { svg: RasterNodesTool, size: 24 },
RasterBrushTool: { svg: RasterBrushTool, size: 24 },
RasterCloneTool: { svg: RasterCloneTool, size: 24 },
RasterDetailTool: { svg: RasterDetailTool, size: 24 },
RasterFrameTool: { svg: RasterFrameTool, size: 24 },
RasterHealTool: { svg: RasterHealTool, size: 24 },
RasterImaginateTool: { svg: RasterImaginateTool, size: 24 },
RasterPatchTool: { svg: RasterPatchTool, size: 24 },
RasterRelightTool: { svg: RasterRelightTool, size: 24 },
VectorEllipseTool: { svg: VectorEllipseTool, size: 24 },
frontend/src/wasm-communication/editor.ts
+1 -1
View File
@@ -58,7 +58,7 @@ export async function initWasm(): Promise<void> {
// Import the WASM module JS bindings and wrap them in the panic proxy
// eslint-disable-next-line import/no-cycle
wasmImport = await import("@graphite/../wasm/pkg").then(panicProxy);
wasmImport = await import("@graphite/../wasm/pkg");
// Provide a random starter seed which must occur after initializing the WASM module, since WASM can't generate its own random numbers
const randomSeedFloat = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER);
frontend/src/wasm-communication/messages.ts
+3 -6
View File
@@ -745,7 +745,7 @@ export class LayerMetadata {
selected!: boolean;
}
export type LayerType = "Imaginate" | "NodeGraphFrame" | "Folder" | "Image" | "Shape" | "Text";
export type LayerType = "Folder" | "NodeGraphFrame" | "Text";
export type LayerTypeData = {
name: string;
@@ -754,11 +754,8 @@ export type LayerTypeData = {
export function layerTypeData(layerType: LayerType): LayerTypeData | undefined {
const entries: Record<string, LayerTypeData> = {
Imaginate: { name: "Imaginate", icon: "NodeImaginate" },
NodeGraphFrame: { name: "Node Graph Frame", icon: "NodeNodes" },
Folder: { name: "Folder", icon: "NodeFolder" },
Image: { name: "Image", icon: "NodeImage" },
Shape: { name: "Shape", icon: "NodeShape" },
NodeGraphFrame: { name: "Layer", icon: "Layer" },
Folder: { name: "Folder", icon: "Folder" },
Text: { name: "Text", icon: "NodeText" },
};
frontend/wasm/src/editor_api.rs
+1 -1
View File
@@ -588,7 +588,7 @@ impl JsEditorHandle {
self.dispatch(message);
}
/// Shifts the node and its children to stop nodes going ontop of each other
/// Shifts the node and its children to stop nodes going on top of each other
#[wasm_bindgen(js_name = shiftNode)]
pub fn shift_node(&self, node_id: u64) {
let message = NodeGraphMessage::ShiftNode { node_id };