Dylan/excalidraw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

debug preview fix

Browse Source
This commit is contained in:
Ryan Di 2024-12-05 16:02:04 +08:00
parent 113dfc0023
commit 7762b925ae
1 changed files with 82 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

163
excalidraw-app/App.tsx
View File

@ -79,7 +79,10 @@ import {
} from "./components/ExportToExcalidrawPlus"; } from "./components/ExportToExcalidrawPlus";
import { updateStaleImageStatuses } from "./data/FileManager"; import { updateStaleImageStatuses } from "./data/FileManager";
import { newElementWith } from "../packages/excalidraw/element/mutateElement"; import { newElementWith } from "../packages/excalidraw/element/mutateElement";
import { isInitializedImageElement } from "../packages/excalidraw/element/typeChecks"; import {
isInitializedImageElement,
isRectangularElement,
} from "../packages/excalidraw/element/typeChecks";
import { loadFilesFromFirebase } from "./data/firebase"; import { loadFilesFromFirebase } from "./data/firebase";
import { import {
LibraryIndexedDBAdapter, LibraryIndexedDBAdapter,
@ -641,89 +644,87 @@ const ExcalidrawWrapper = () => {
collabAPI.syncElements(elements); collabAPI.syncElements(elements);
} }
{ const nonDeletedElements = getNonDeletedElements(elements);
const frame = elements.find(
(el) => el.strokeStyle === "dashed" && !el.isDeleted,
);
exportToCanvas({ const frame = nonDeletedElements.find(
data: { (el) => el.strokeStyle === "dashed" && el.type === "rectangle",
elements: getNonDeletedElements(elements).filter( );
(x) => x.id !== frame?.id,
),
// .concat(
// restoreElements(
// [
// // @ts-ignore
// {
// type: "rectangle",
// width: appState.width / zoom,
// height: appState.height / zoom,
// x: -appState.scrollX,
// y: -appState.scrollY,
// fillStyle: "solid",
// strokeColor: "transparent",
// backgroundColor: "rgba(0,0,0,0.05)",
// roundness: { type: ROUNDNESS.ADAPTIVE_RADIUS, value: 40 },
// },
// ],
// null,
// ),
// ),
appState,
files,
},
config: {
// // light yellow
// // canvasBackgroundColor: "#fff9c4",
// // width,
// // maxWidthOrHeight: 120,
// // scale: 0.01,
// // scale: 2,
// // origin: "content",
// // scale: 2,
// // x: 0,
// // y: 0,
// padding: 20,
// ...config, exportToCanvas({
data: {
elements: nonDeletedElements.filter((x) => x.id !== frame?.id),
// .concat(
// restoreElements(
// [
// // @ts-ignore
// {
// type: "rectangle",
// width: appState.width / zoom,
// height: appState.height / zoom,
// x: -appState.scrollX,
// y: -appState.scrollY,
// fillStyle: "solid",
// strokeColor: "transparent",
// backgroundColor: "rgba(0,0,0,0.05)",
// roundness: { type: ROUNDNESS.ADAPTIVE_RADIUS, value: 40 },
// },
// ],
// null,
// ),
// ),
appState,
files,
},
config: {
// // light yellow
// // canvasBackgroundColor: "#fff9c4",
// // width,
// // maxWidthOrHeight: 120,
// // scale: 0.01,
// // scale: 2,
// // origin: "content",
// // scale: 2,
// // x: 0,
// // y: 0,
// padding: 20,
// width: config.width, // ...config,
// height: config.height,
// maxWidthOrHeight: config.maxWidthOrHeight, // width: config.width,
// widthOrHeight: config.widthOrHeight, // height: config.height,
// padding: config.padding, // maxWidthOrHeight: config.maxWidthOrHeight,
...(frame // widthOrHeight: config.widthOrHeight,
? { // padding: config.padding,
...config, ...(frame
width: frame.width, ? {
height: frame.height, ...config,
x: frame.x, width: frame.width,
y: frame.y, height: frame.height,
} x: frame.x,
: config), y: frame.y,
// // height: 140, }
// // x: -appState.scrollX, : config),
// // y: -appState.scrollY, // // height: 140,
// // height: 150, // // x: -appState.scrollX,
// // height: appState.height, // // y: -appState.scrollY,
// // scale, // // height: 150,
// // zoom: { value: appState.zoom.value }, // // height: appState.height,
// // getDimensions(width,height) { // // scale,
// // setCanvasSize({ width, height }) // // zoom: { value: appState.zoom.value },
// // return {width: 300, height: 150} // // getDimensions(width,height) {
// // } // // setCanvasSize({ width, height })
}, // // return {width: 300, height: 150}
}).then((canvas) => { // // }
if (canvasPreviewContainerRef.current) { },
canvasPreviewContainerRef.current.replaceChildren(canvas); }).then((canvas) => {
document.querySelector( if (canvasPreviewContainerRef.current) {
".dims", canvasPreviewContainerRef.current.replaceChildren(canvas);
)!.innerHTML = `${canvas.width}x${canvas.height}`; document.querySelector(
// canvas.style.width = "100%"; ".dims",
} )!.innerHTML = `${canvas.width}x${canvas.height}`;
}); // canvas.style.width = "100%";
} }
});
// this check is redundant, but since this is a hot path, it's best // this check is redundant, but since this is a hot path, it's best
// not to evaludate the nested expression every time // not to evaludate the nested expression every time