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

Improve UX of importing vs. opening files (#3661)

Browse Source 
* wip

* fix drag and drop

* fix

* fix tests

* fix tests

* fix warning

* Partial code review

* add dialog

* fix web

* fix web

* push back release candidate expiry

* Code review

* Reduce code duplication for pasting files in frontend

---------

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
Timon
2026-01-22 01:37:49 -08:00
committed by GitHub
co-authored by Keavon Chambers
parent 781fa7ae95
commit 2be7790d4d
23 changed files with 301 additions and 354 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/state-providers/portfolio.ts
+10 -36
View File
@@ -8,7 +8,7 @@ import {
TriggerExportImage,
TriggerSaveFile,
TriggerImport,
TriggerOpenDocument,
TriggerOpen,
UpdateActiveDocument,
UpdateOpenDocumentsList,
UpdateDataPanelState,
@@ -16,7 +16,7 @@ import {
UpdateLayersPanelState,
} from "@graphite/messages";
import { downloadFile, downloadFileBlob, upload } from "@graphite/utility-functions/files";
import { extractPixelData, rasterizeSVG } from "@graphite/utility-functions/rasterization";
import { rasterizeSVG } from "@graphite/utility-functions/rasterization";
export function createPortfolioState(editor: Editor) {
const { subscribe, update } = writable({
@@ -45,12 +45,9 @@ export function createPortfolioState(editor: Editor) {
});
editor.subscriptions.subscribeJsMessage(TriggerFetchAndOpenDocument, async (data) => {
try {
const { name, filename } = data;
const url = new URL(`demo-artwork/${filename}`, document.location.href);
const url = new URL(`demo-artwork/${data.filename}`, document.location.href);
const response = await fetch(url);
const content = await response.text();
editor.handle.openDocumentFile(name, content);
editor.handle.openFile(data.filename, await response.bytes());
} catch {
// Needs to be delayed until the end of the current call stack so the existing demo artwork dialog can be closed first, otherwise this dialog won't show
setTimeout(() => {
@@ -58,37 +55,14 @@ export function createPortfolioState(editor: Editor) {
}, 0);
}
});
editor.subscriptions.subscribeJsMessage(TriggerOpenDocument, async () => {
const suffix = "." + editor.handle.fileExtension();
const data = await upload(suffix, "text");
// Use filename as document name, removing the extension if it exists
let documentName = data.filename;
if (documentName.endsWith(suffix)) {
documentName = documentName.slice(0, -suffix.length);
}
editor.handle.openDocumentFile(documentName, data.content);
editor.subscriptions.subscribeJsMessage(TriggerOpen, async () => {
const data = await upload(`image/*,.${editor.handle.fileExtension()}`, "data");
editor.handle.openFile(data.filename, data.content);
});
editor.subscriptions.subscribeJsMessage(TriggerImport, async () => {
const data = await upload("image/*", "both");
if (data.type.includes("svg")) {
const svg = new TextDecoder().decode(data.content.data);
editor.handle.pasteSvg(data.filename, svg);
return;
}
// In case the user accidentally uploads a Graphite file, open it instead of failing to import it
const graphiteFileSuffix = "." + editor.handle.fileExtension();
if (data.filename.endsWith(graphiteFileSuffix)) {
const documentName = data.filename.slice(0, -graphiteFileSuffix.length);
editor.handle.openDocumentFile(documentName, data.content.text);
return;
}
const imageData = await extractPixelData(new Blob([new Uint8Array(data.content.data)], { type: data.type }));
editor.handle.pasteImage(data.filename, new Uint8Array(imageData.data), imageData.width, imageData.height);
// TODO: Use the same `accept` string as in the `TriggerOpen` handler once importing Graphite documents as nodes is supported
const data = await upload("image/*", "data");
editor.handle.importFile(data.filename, data.content);
});
editor.subscriptions.subscribeJsMessage(TriggerSaveDocument, (data) => {
downloadFile(data.name, data.content);