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

Add folders to frontend and folder creation to backend (#315)

Browse Source 
* Add folders to frontend and folder creation to backend

Closes #149

* Add Group keybind

* Add logic to handle expanding of folders

* Send all paths as (u32, u32)

* Add custom serialization for path

* Merge two layer_panel files

* Refactor frontend layer merging

* Fix JS linting

* Update upstream thumbnail changes

* Add paste into selected folder + fix thumbnail dirtification

* Implement CollapseFolder function

* Skip folders on a different indentation level during reorder

* Only reorder within the same folder

* Add folder node icon for folder layers

* Add expand/collapse folder button; partly implement new layer tree design

* Update terminology in the docs

* Add number labels to ruler marks

* Replace promise with await in MenuList.vue

* Miscellaneous minor code cleanup

* Disallow snake_case variable names in frontend

* Add support for saving and opening files (#325)

* Add support for saving a document

This is similar to the "export" functionality, except that
we store all metadata needed to open the file again.

Currently we store the internal representation of the layer
which is probably pretty fragile.

* Add support for opening a saved document

User can select a file using the browser's file input selector.
We parse it as JSON and load it into the internal representation.

Concerns:
- The file format is fragile
- Loading data directly into internal data structures usually creates
security vulnerabilities
- Error handling: The user is not informed of errors

* Serialize Document and skip "cache" fields in Layer

Instead of serializing the root layer, we serialize the
Document struct directly. Additionally, we mark the
"cache" fields in layer as "skip" fields so they
don't get serialized.

* Opened files use the filename as the tab title

* Split "new document" and "open document" handling

Open document needs name and content to be provided so having a
different interface is cleaner. Also did some refactoring to reuse code.

* Show error to user when a file fails to open

* Clean up code: better variable naming and structure

* Use document name for saved and exported files

We pass through the document name in the export and save
messages. Additionally, we check if the appropriate file
suffixes (.graphite and .svg) need to be added before
passing it to the frontend.

* Refactor document name generation

* Don't assign a default of 1 to Documents that start with something
  other than DEFAULT_DOCUMENT_NAME
* Improve runtime complexity by using binary instead of linear search

* Update Layer panel upon document selection

* Add File>Open/Ctrl+O; File>Save (As)/Ctrl+(Shift)+S; browse filters extension; split out download()/upload() into files.ts; change unsaved close dialog text

Co-authored-by: Dennis Kobert <dennis@kobert.dev>
Co-authored-by: Keavon Chambers <keavon@keavon.com>

* Refactor ViewportPosition from u32 (UVec2) to f64 (DVec2) (#345)

* Refactor ViewportPosition from u32 (UVec2) to f64 (DVec2)

* Fix pseudo_hash call

* Replace hash function with proper function for uuid generation

* Cargo fmt

Co-authored-by: Dennis Kobert <dennis@kobert.dev>

* Improve Frontend -> Backend user input system (#348)

Includes refactor that sends coordinates of the document viewports to the backend so input is sent relative to the application window
Closes #124
Fixes #291

* Improve Frontend -> Backend user input system

* Code review changes

* More code review changes

* Fix TS error

* Update the readme

* Make scrollbars interactable (#328)

* Make scrollbars interactable

* Add watcher for position change

* Fix case of data

* Fix updateHandlePosition capitalization

* Clean up class name thing

* Scroll bars between 0 and 1

* Allow width to be 100%

* Scrollbars reflect backend

* Include viewport in scrollbar

* Add half viewport padding for scrollbars

* Refactor scrollbar using lerp

* Send messages to backend

* Refactor

* Use glam::DVec2

* Remove glam::

* Remove unnecessary abs

* Add TrueDoctor's change

* Add missing minus

* Fix vue issues

* Fix viewport size

* Remove unnecessary log

* Linear dragging

* Improve scrollbar behavior (#351)

* Change scrollbar behavior

* Leave space at the end of the scrollbar

* Change mid to center

* Use shorter array initialization

* Add space around scrollbar

* Fix scrollbar spacing

* Smooth end of scrollbars

* Add page up and down

* Page up and down on click in scrollbar track

* Add shift pageup to translate horizontally

* Implement bounding box for selected layers (#349)

* Implement bounding box for selected layers

* Add shift modifier for multi selection

* Fix collapsing of folders

* Add have pixel offset to selection bounding box

* Don't panic on Ctrl + A

* Rename to camel case

* Add todo comment for Keavon

* Apply @Hypercubes review suggestions

* Fix many panics, improve behavior of copy/paste and grouping (but grouping still can panic)

Co-authored-by: Dennis Kobert <dennis@kobert.dev>
This commit is contained in:
Keavon Chambers
2021-08-29 08:27:49 -07:00
parent e75714330c
commit 6b274b3f1c
23 changed files with 463 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/assets/24px-full-color/node-type-folder.svg Normal file
View File

@@ -0,0 +1,26 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g transform="translate(7 7)">
<path style="fill:#FFFFFF" d="M15.22-2.74l-9-4c-0.78-0.34-1.66-0.34-2.44,0l-9,4C-6.3-2.26-7-1.19-7,0v10c0,1.19,0.7,2.26,1.78,2.74l9,4C4.17,16.91,4.58,17,5,17s0.83-0.09,1.22-0.26l9-4C16.3,12.26,17,11.19,17,10V0C17-1.19,16.3-2.26,15.22-2.74z" />
<path style="fill:#DD83FF" d="M13.38,8.93L6,5.47c-0.64-0.26-1.36-0.26-2,0l-7.38,3.46c-0.83,0.39-0.83,1.02,0,1.41L4,13.81c0.64,0.26,1.36,0.26,2.01,0l7.38-3.46C14.21,9.96,14.21,9.32,13.38,8.93z" />
<path style="opacity:0.4; fill:url(#bottom)" d="M13.38,8.93L6,5.47c-0.64-0.26-1.36-0.26-2,0l-7.38,3.46c-0.83,0.39-0.83,1.02,0,1.41L4,13.81c0.64,0.26,1.36,0.26,2.01,0l7.38-3.46C14.21,9.96,14.21,9.32,13.38,8.93z" />
<path style="fill:#EAC800" d="M13.38,4.29L6,0.83c-0.64-0.26-1.36-0.26-2,0l-7.38,3.46c-0.83,0.39-0.83,1.02,0,1.41L4,9.17c0.64,0.26,1.36,0.26,2.01,0l7.38-3.46C14.21,5.32,14.21,4.68,13.38,4.29z" />
<path style="opacity:0.4; fill:url(#middle)" d="M13.38,4.29L6,0.83c-0.64-0.26-1.36-0.26-2,0l-7.38,3.46c-0.83,0.39-0.83,1.02,0,1.41L4,9.17c0.64,0.26,1.36,0.26,2.01,0l7.38-3.46C14.21,5.32,14.21,4.68,13.38,4.29z" />
<path style="fill:#6EEBFF" d="M13.38-0.35L6-3.81c-0.64-0.26-1.36-0.26-2,0l-7.38,3.46c-0.83,0.39-0.83,1.02,0,1.41L4,4.53c0.64,0.26,1.36,0.26,2.01,0l7.38-3.46C14.21,0.68,14.21,0.04,13.38-0.35z" />
<path style="opacity:0.4; fill:url(#top)" d="M13.38-0.35L6-3.81c-0.64-0.26-1.36-0.26-2,0l-7.38,3.46c-0.83,0.39-0.83,1.02,0,1.41L4,4.53c0.64,0.26,1.36,0.26,2.01,0l7.38-3.46C14.21,0.68,14.21,0.04,13.38-0.35z" />
</g>
<linearGradient id="top" gradientUnits="userSpaceOnUse" x1="10.5551" y1="-26.454" x2="10.5551" y2="-25.454" gradientTransform="matrix(18.0005 0 0 -8.7219 -184.997 -226.0052)">
<stop offset="0" style="stop-color:#000000; stop-opacity:0" />
<stop offset="0.91" style="stop-color:#000000; stop-opacity:0.796" />
<stop offset="1" style="stop-color:#000000" />
</linearGradient>
<linearGradient id="middle" gradientUnits="userSpaceOnUse" x1="10.5551" y1="-26.459" x2="10.5551" y2="-25.459" gradientTransform="matrix(18.0005 0 0 -8.7209 -184.997 -221.3842)">
<stop offset="0" style="stop-color:#000000; stop-opacity:0" />
<stop offset="0.91" style="stop-color:#000000; stop-opacity:0.796" />
<stop offset="1" style="stop-color:#000000" />
</linearGradient>
<linearGradient id="bottom" gradientUnits="userSpaceOnUse" x1="10.5551" y1="-26.454" x2="10.5551" y2="-25.454" gradientTransform="matrix(18.0005 0 0 -8.7219 -184.997 -216.7282)">
<stop offset="0" style="stop-color:#000000; stop-opacity:0" />
<stop offset="0.91" style="stop-color:#000000; stop-opacity:0.796" />
<stop offset="1" style="stop-color:#000000" />
</linearGradient>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

4
frontend/assets/24px-full-color/node-type-path.svg
View File

@@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path style="fill:#FFFFFF;" d="M23.34,4.06c0.14-0.94-0.18-1.88-0.85-2.55s-1.62-0.98-2.55-0.85c-5.27,0.77-10.61,0.77-15.88,0C3.12,0.53,2.18,0.84,1.51,1.51S0.53,3.13,0.66,4.06c0.77,5.27,0.77,10.61,0,15.88c-0.14,0.94,0.18,1.88,0.85,2.55s1.62,0.98,2.55,0.85c5.27-0.77,10.61-0.77,15.88,0c0.14,0.02,0.29,0.03,0.43,0.03c0.79,0,1.55-0.31,2.12-0.88c0.67-0.67,0.98-1.62,0.85-2.55C22.57,14.67,22.57,9.33,23.34,4.06z" />
<path style="fill:#65BBE5;" d="M19.89,9.01c-0.17,0.02-2.18,0.26-4.89,1.01V9H9v3.28c-1.6,0.79-3.2,1.75-4.64,2.95c-0.42,0.35-0.48,0.98-0.13,1.41C4.43,16.88,4.71,17,5,17c0.23,0,0.45-0.08,0.64-0.23C6.68,15.9,7.83,15.16,9,14.53V15h6v-2.9c2.88-0.84,5.07-1.1,5.11-1.11c0.55-0.06,0.94-0.56,0.88-1.11C20.93,9.34,20.43,8.95,19.89,9.01z M13,13h-2v-2h2V13z" />
<path style="fill:#FFFFFF" d="M23.34,4.06c0.14-0.94-0.18-1.88-0.85-2.55s-1.62-0.98-2.55-0.85c-5.27,0.77-10.61,0.77-15.88,0C3.12,0.53,2.18,0.84,1.51,1.51S0.53,3.13,0.66,4.06c0.77,5.27,0.77,10.61,0,15.88c-0.14,0.94,0.18,1.88,0.85,2.55s1.62,0.98,2.55,0.85c5.27-0.77,10.61-0.77,15.88,0c0.14,0.02,0.29,0.03,0.43,0.03c0.79,0,1.55-0.31,2.12-0.88c0.67-0.67,0.98-1.62,0.85-2.55C22.57,14.67,22.57,9.33,23.34,4.06z" />
<path style="fill:#65BBE5" d="M19.89,9.01c-0.17,0.02-2.18,0.26-4.89,1.01V9H9v3.28c-1.6,0.79-3.2,1.75-4.64,2.95c-0.42,0.35-0.48,0.98-0.13,1.41C4.43,16.88,4.71,17,5,17c0.23,0,0.45-0.08,0.64-0.23C6.68,15.9,7.83,15.16,9,14.53V15h6v-2.9c2.88-0.84,5.07-1.1,5.11-1.11c0.55-0.06,0.94-0.56,0.88-1.11C20.93,9.34,20.43,8.95,19.89,9.01z M13,13h-2v-2h2V13z" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 828 B

After

Width:  |  Height:  |  Size: 826 B

3
frontend/src/App.vue
View File

@@ -59,6 +59,9 @@
--color-accent-hover-rgb: 73, 165, 226;
--color-accent-disabled: #416277;
--color-accent-disabled-rgb: 65, 98, 119;
--color-data-raster: #e4bb72;
--color-data-raster-rgb: 228, 187, 114;
}
html,

178
frontend/src/components/panels/LayerTree.vue
View File

@@ -25,9 +25,17 @@
:title="layer.visible ? 'Visible' : 'Hidden'"
/>
</div>
<button
v-if="layer.layer_type === LayerType.Folder"
class="node-connector"
:class="{ expanded: layer.layer_data.expanded }"
@click.stop="handleNodeConnectorClick(layer.path)"
></button>
<div v-else class="node-connector-missing"></div>
<div
class="layer"
:class="{ selected: layer.layer_data.selected }"
:style="{ marginLeft: layerIndent(layer) }"
@click.shift.exact.stop="handleShiftClick(layer)"
@click.ctrl.exact.stop="handleControlClick(layer)"
@click.alt.exact.stop="handleControlClick(layer)"
@@ -35,12 +43,14 @@
>
<div class="layer-thumbnail" v-html="layer.thumbnail"></div>
<div class="layer-type-icon">
<IconLabel :icon="'NodeTypePath'" title="Path" />
<IconLabel v-if="layer.layer_type === LayerType.Folder" :icon="'NodeTypeFolder'" title="Folder" />
<IconLabel v-else :icon="'NodeTypePath'" title="Path" />
</div>
<div class="layer-name">
<span>{{ layer.name }}</span>
</div>
</div>
<!-- <div class="glue" :style="{ marginLeft: layerIndent(layer) }"></div> -->
</div>
</LayoutCol>
</LayoutRow>
@@ -72,42 +82,96 @@
display: flex;
height: 36px;
align-items: center;
margin: 0 8px;
flex: 0 0 auto;
.layer {
display: flex;
align-items: center;
background: var(--color-5-dullgray);
border-radius: 4px;
width: 100%;
height: 100%;
margin-left: 4px;
padding-left: 16px;
}
.selected {
background: var(--color-accent);
color: var(--color-f-white);
}
position: relative;
& + .layer-row {
margin-top: 2px;
}
.layer-thumbnail {
width: 64px;
height: 100%;
background: white;
.layer-visibility {
flex: 0 0 auto;
margin-left: 4px;
}
svg {
width: calc(100% - 4px);
height: calc(100% - 4px);
margin: 2px;
.node-connector {
flex: 0 0 auto;
width: 12px;
height: 12px;
margin: 0 2px;
border-radius: 50%;
background: var(--color-data-raster);
outline: none;
border: none;
position: relative;
&::after {
content: "";
position: absolute;
width: 0;
height: 0;
top: 2px;
left: 3px;
border-style: solid;
border-width: 0 3px 6px 3px;
border-color: transparent transparent var(--color-2-mildblack) transparent;
}
&.expanded::after {
top: 3px;
left: 4px;
border-width: 3px 0 3px 6px;
border-color: transparent transparent transparent var(--color-2-mildblack);
}
}
.layer-type-icon {
margin: 0 8px;
.node-connector-missing {
width: 16px;
flex: 0 0 auto;
}
.layer {
display: flex;
align-items: center;
border-radius: 2px;
background: var(--color-5-dullgray);
margin-right: 16px;
width: 100%;
height: 100%;
z-index: 1;
&.selected {
background: var(--color-7-middlegray);
color: var(--color-f-white);
}
.layer-thumbnail {
width: 64px;
height: 100%;
background: white;
border-radius: 2px;
svg {
width: calc(100% - 4px);
height: calc(100% - 4px);
margin: 2px;
}
}
.layer-type-icon {
margin-left: 8px;
margin-right: 4px;
}
}
.glue {
position: absolute;
background: var(--color-data-raster);
height: 6px;
bottom: -4px;
left: 44px;
right: 16px;
z-index: 0;
}
}
}
@@ -117,7 +181,7 @@
<script lang="ts">
import { defineComponent } from "vue";
import { ResponseType, registerResponseHandler, Response, BlendMode, ExpandFolder, UpdateLayer, LayerPanelEntry } from "@/utilities/response-handler";
import { ResponseType, registerResponseHandler, Response, BlendMode, ExpandFolder, CollapseFolder, UpdateLayer, LayerPanelEntry, LayerType } from "@/utilities/response-handler";
import { SeparatorType } from "@/components/widgets/widgets";
import LayoutRow from "@/components/layout/LayoutRow.vue";
@@ -175,9 +239,15 @@ const blendModeEntries: SectionsOfMenuListEntries = [
export default defineComponent({
props: {},
methods: {
layerIndent(layer: LayerPanelEntry): string {
return `${(layer.path.length - 1) * 16}px`;
},
async toggleLayerVisibility(path: BigUint64Array) {
(await wasm).toggle_layer_visibility(path);
},
async handleNodeConnectorClick(path: BigUint64Array) {
(await wasm).toggle_layer_expansion(path);
},
async setLayerBlendMode() {
const blendMode = this.blendModeEntries.flat()[this.blendModeSelectedIndex].value as BlendMode;
if (blendMode) {
@@ -308,16 +378,61 @@ export default defineComponent({
if (expandData) {
const responsePath = expandData.path;
const responseLayers = expandData.children as Array<LayerPanelEntry>;
if (responsePath.length > 0) console.error("Non root paths are currently not implemented");
// TODO: @Keavon Refactor this function
if (responseLayers.length === 0) return;
this.layers = responseLayers;
const mergeIntoExisting = (elements: Array<LayerPanelEntry>, layers: Array<LayerPanelEntry>) => {
let lastInsertion = layers.findIndex((layer: LayerPanelEntry) => {
const pathLengthsEqual = elements[0].path.length - 1 === layer.path.length;
return pathLengthsEqual && elements[0].path.slice(0, -1).every((layerId, i) => layerId === layer.path[i]);
});
elements.forEach((nlayer) => {
const index = layers.findIndex((layer: LayerPanelEntry) => {
const pathLengthsEqual = nlayer.path.length === layer.path.length;
return pathLengthsEqual && nlayer.path.every((layerId, i) => layerId === layer.path[i]);
});
if (index >= 0) {
lastInsertion = index;
layers[index] = nlayer;
} else {
lastInsertion += 1;
layers.splice(lastInsertion, 0, nlayer);
}
});
};
mergeIntoExisting(responseLayers, this.layers);
const newLayers: Array<LayerPanelEntry> = [];
this.layers.forEach((layer) => {
const index = responseLayers.findIndex((nlayer: LayerPanelEntry) => {
const pathLengthsEqual = responsePath.length + 1 === layer.path.length;
return pathLengthsEqual && nlayer.path.every((layerId, i) => layerId === layer.path[i]);
});
if (index >= 0 || layer.path.length !== responsePath.length + 1) {
newLayers.push(layer);
}
});
this.layers = newLayers;
this.setBlendModeForSelectedLayers();
this.setOpacityForSelectedLayers();
}
});
registerResponseHandler(ResponseType.CollapseFolder, (responseData) => {
console.log("CollapseFolder: ", responseData);
const collapseData = responseData as CollapseFolder;
if (collapseData) {
const responsePath = collapseData.path;
const newLayers: Array<LayerPanelEntry> = [];
this.layers.forEach((layer) => {
if (responsePath.length >= layer.path.length || !responsePath.every((layerId, i) => layerId === layer.path[i])) {
newLayers.push(layer);
}
});
this.layers = newLayers;
this.setBlendModeForSelectedLayers();
this.setOpacityForSelectedLayers();
}
});
registerResponseHandler(ResponseType.UpdateLayer, (responseData) => {
const updateData = responseData as UpdateLayer;
@@ -348,6 +463,7 @@ export default defineComponent({
opacity: 100,
MenuDirection,
SeparatorType,
LayerType,
};
},
components: {

2
frontend/src/components/widgets/labels/IconLabel.vue
View File

@@ -112,6 +112,7 @@ import MouseHintRMBDrag from "@/../assets/16px-two-tone/mouse-hint-rmb-drag.svg"
import MouseHintMMBDrag from "@/../assets/16px-two-tone/mouse-hint-mmb-drag.svg";
import NodeTypePath from "@/../assets/24px-full-color/node-type-path.svg";
import NodeTypeFolder from "@/../assets/24px-full-color/node-type-folder.svg";
const icons = {
LayoutSelectTool: { component: LayoutSelectTool, size: 24 },
@@ -192,6 +193,7 @@ const icons = {
MouseHintRMBDrag: { component: MouseHintRMBDrag, size: 16 },
MouseHintMMBDrag: { component: MouseHintMMBDrag, size: 16 },
NodeTypePath: { component: NodeTypePath, size: 24 },
NodeTypeFolder: { component: NodeTypeFolder, size: 24 },
};
const components = Object.fromEntries(Object.entries(icons).map(([name, data]) => [name, data.component]));

2
frontend/src/utilities/response-handler.ts
View File

@@ -272,7 +272,7 @@ function newSetCanvasRotation(input: any): SetCanvasRotation {
function newPath(input: any): BigUint64Array {
// eslint-disable-next-line
const u32CombinedPairs = input.map((n: Array<bigint>) => BigInt((BigInt(n[0]) << BigInt(32)) | BigInt(n[1])));
const u32CombinedPairs = input.map((n: Array<number>) => BigInt((BigInt(n[0]) << BigInt(32)) | BigInt(n[1])));
return new BigUint64Array(u32CombinedPairs);
}

6
frontend/wasm/src/document.rs
View File

@@ -170,7 +170,7 @@ pub fn on_mouse_up(x: f64, y: f64, mouse_keys: u8, modifiers: u8) -> Result<(),
pub fn on_key_down(name: String, modifiers: u8) -> Result<(), JsValue> {
let key = translate_key(&name);
let mods = ModifierKeys::from_bits(modifiers).expect("invalid modifier keys");
log::trace!("key down {:?}, name: {}, modifiers: {:?}", key, name, mods);
log::trace!("Key down {:?}, name: {}, modifiers: {:?}", key, name, mods);
let ev = InputPreprocessorMessage::KeyDown(key, mods);
dispatch(ev)
}
@@ -180,7 +180,7 @@ pub fn on_key_down(name: String, modifiers: u8) -> Result<(), JsValue> {
pub fn on_key_up(name: String, modifiers: u8) -> Result<(), JsValue> {
let key = translate_key(&name);
let mods = ModifierKeys::from_bits(modifiers).expect("invalid modifier keys");
log::trace!("key up {:?}, name: {}, modifiers: {:?}", key, name, mods);
log::trace!("Key up {:?}, name: {}, modifiers: {:?}", key, name, mods);
let ev = InputPreprocessorMessage::KeyUp(key, mods);
dispatch(ev)
}
@@ -353,5 +353,5 @@ pub fn delete_layer(path: Vec<LayerId>) -> Result<(), JsValue> {
/// Requests the backend to add a layer to the layer list
#[wasm_bindgen]
pub fn add_folder(path: Vec<LayerId>) -> Result<(), JsValue> {
dispatch(DocumentMessage::AddFolder(path))
dispatch(DocumentMessage::CreateFolder(path))
}

2
frontend/wasm/src/wrappers.rs
View File

@@ -91,7 +91,7 @@ pub fn translate_append_mode(name: &str) -> Option<SelectAppendMode> {
}
pub fn translate_key(name: &str) -> Key {
log::trace!("pressed key: {}", name);
log::trace!("Key event received: {}", name);
use Key::*;
match name.to_lowercase().as_str() {
"a" => KeyA,