From cf0413338e0e2bc22397a94138ece91a4e001a49 Mon Sep 17 00:00:00 2001 From: David Luzar Date: Mon, 10 Jul 2023 17:13:44 +0200 Subject: [PATCH] feat: support customizing what parts of frames are rendered (#6752) --- src/actions/actionFrame.ts | 13 +- src/actions/types.ts | 2 +- src/appState.ts | 4 +- src/components/App.tsx | 25 +- src/renderer/renderElement.ts | 6 +- src/renderer/renderScene.ts | 4 +- .../__snapshots__/contextmenu.test.tsx.snap | 119 +++++- .../regressionTests.test.tsx.snap | 371 +++++++++++++++--- .../packages/__snapshots__/utils.test.ts.snap | 7 +- src/types.ts | 9 +- 10 files changed, 472 insertions(+), 88 deletions(-) diff --git a/src/actions/actionFrame.ts b/src/actions/actionFrame.ts index 980d0f7d..054e5101 100644 --- a/src/actions/actionFrame.ts +++ b/src/actions/actionFrame.ts @@ -90,8 +90,8 @@ export const actionRemoveAllElementsFromFrame = register({ predicate: (elements, appState) => isSingleFrameSelected(elements, appState), }); -export const actionToggleFrameRendering = register({ - name: "toggleFrameRendering", +export const actionupdateFrameRendering = register({ + name: "updateFrameRendering", viewMode: true, trackEvent: { category: "canvas" }, perform: (elements, appState) => { @@ -99,13 +99,16 @@ export const actionToggleFrameRendering = register({ elements, appState: { ...appState, - shouldRenderFrames: !appState.shouldRenderFrames, + frameRendering: { + ...appState.frameRendering, + enabled: !appState.frameRendering.enabled, + }, }, commitToHistory: false, }; }, - contextItemLabel: "labels.toggleFrameRendering", - checked: (appState: AppState) => appState.shouldRenderFrames, + contextItemLabel: "labels.updateFrameRendering", + checked: (appState: AppState) => appState.frameRendering.enabled, }); export const actionSetFrameAsActiveTool = register({ diff --git a/src/actions/types.ts b/src/actions/types.ts index bd81fa55..ab20a896 100644 --- a/src/actions/types.ts +++ b/src/actions/types.ts @@ -119,7 +119,7 @@ export type ActionName = | "toggleHandTool" | "selectAllElementsInFrame" | "removeAllElementsFromFrame" - | "toggleFrameRendering" + | "updateFrameRendering" | "setFrameAsActiveTool" | "createContainerFromText" | "wrapTextInContainer"; diff --git a/src/appState.ts b/src/appState.ts index aaca0975..104fbcbf 100644 --- a/src/appState.ts +++ b/src/appState.ts @@ -84,7 +84,7 @@ export const getDefaultAppState = (): Omit< showStats: false, startBoundElement: null, suggestedBindings: [], - shouldRenderFrames: true, + frameRendering: { enabled: true, clip: true, name: true, outline: true }, frameToHighlight: null, editingFrame: null, elementsToHighlight: null, @@ -191,7 +191,7 @@ const APP_STATE_STORAGE_CONF = (< showStats: { browser: true, export: false, server: false }, startBoundElement: { browser: false, export: false, server: false }, suggestedBindings: { browser: false, export: false, server: false }, - shouldRenderFrames: { browser: false, export: false, server: false }, + frameRendering: { browser: false, export: false, server: false }, frameToHighlight: { browser: false, export: false, server: false }, editingFrame: { browser: false, export: false, server: false }, elementsToHighlight: { browser: false, export: false, server: false }, diff --git a/src/components/App.tsx b/src/components/App.tsx index 887392e2..611ff47b 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -505,7 +505,7 @@ class App extends React.Component { setActiveTool: this.setActiveTool, setCursor: this.setCursor, resetCursor: this.resetCursor, - toggleFrameRendering: this.toggleFrameRendering, + updateFrameRendering: this.updateFrameRendering, toggleSidebar: this.toggleSidebar, } as const; if (typeof excalidrawRef === "function") { @@ -651,7 +651,7 @@ class App extends React.Component { }; private renderFrameNames = () => { - if (!this.state.shouldRenderFrames) { + if (!this.state.frameRendering.enabled || !this.state.frameRendering.name) { return null; } @@ -2208,10 +2208,23 @@ class App extends React.Component { }); }; - toggleFrameRendering = () => { + updateFrameRendering = ( + opts: + | Partial + | (( + prevState: AppState["frameRendering"], + ) => Partial), + ) => { this.setState((prevState) => { + const next = + typeof opts === "function" ? opts(prevState.frameRendering) : opts; return { - shouldRenderFrames: !prevState.shouldRenderFrames, + frameRendering: { + enabled: next?.enabled ?? prevState.frameRendering.enabled, + clip: next?.clip ?? prevState.frameRendering.clip, + name: next?.name ?? prevState.frameRendering.name, + outline: next?.outline ?? prevState.frameRendering.outline, + }, }; }); }; @@ -3089,7 +3102,9 @@ class App extends React.Component { ).filter((element) => { // hitting a frame's element from outside the frame is not considered a hit const containingFrame = getContainingFrame(element); - return containingFrame && this.state.shouldRenderFrames + return containingFrame && + this.state.frameRendering.enabled && + this.state.frameRendering.clip ? isCursorInFrame({ x, y }, containingFrame) : true; }); diff --git a/src/renderer/renderElement.ts b/src/renderer/renderElement.ts index 0efe5df9..ff47d435 100644 --- a/src/renderer/renderElement.ts +++ b/src/renderer/renderElement.ts @@ -931,7 +931,11 @@ export const renderElement = ( break; } case "frame": { - if (!renderConfig.isExporting && appState.shouldRenderFrames) { + if ( + !renderConfig.isExporting && + appState.frameRendering.enabled && + appState.frameRendering.outline + ) { context.save(); context.translate( element.x + renderConfig.scrollX, diff --git a/src/renderer/renderScene.ts b/src/renderer/renderScene.ts index eac3d3c5..1344329e 100644 --- a/src/renderer/renderScene.ts +++ b/src/renderer/renderScene.ts @@ -470,7 +470,9 @@ export const _renderScene = ({ if ( frameId && ((renderConfig.isExporting && isOnlyExportingSingleFrame(elements)) || - (!renderConfig.isExporting && appState.shouldRenderFrames)) + (!renderConfig.isExporting && + appState.frameRendering.enabled && + appState.frameRendering.clip)) ) { context.save(); diff --git a/src/tests/__snapshots__/contextmenu.test.tsx.snap b/src/tests/__snapshots__/contextmenu.test.tsx.snap index 4c67a4c7..583c809a 100644 --- a/src/tests/__snapshots__/contextmenu.test.tsx.snap +++ b/src/tests/__snapshots__/contextmenu.test.tsx.snap @@ -314,6 +314,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 100, @@ -353,7 +359,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -501,6 +506,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 100, @@ -537,7 +548,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -694,6 +704,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 100, @@ -730,7 +746,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -1061,6 +1076,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 100, @@ -1097,7 +1118,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -1428,6 +1448,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 100, @@ -1464,7 +1490,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -1621,6 +1646,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 100, @@ -1655,7 +1686,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -1851,6 +1881,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 100, @@ -1887,7 +1923,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -2146,6 +2181,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 100, @@ -2187,7 +2228,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -2529,6 +2569,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 100, @@ -2565,7 +2611,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -3402,6 +3447,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 100, @@ -3438,7 +3489,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -3769,6 +3819,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 100, @@ -3805,7 +3861,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -4136,6 +4191,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 100, @@ -4175,7 +4236,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -4862,6 +4922,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 100, @@ -4901,7 +4967,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -5436,6 +5501,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 100, @@ -5477,7 +5548,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -5934,6 +6004,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 100, @@ -5968,7 +6044,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -6324,6 +6399,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 100, @@ -6360,7 +6441,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -6692,6 +6772,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 100, @@ -6728,7 +6814,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, diff --git a/src/tests/__snapshots__/regressionTests.test.tsx.snap b/src/tests/__snapshots__/regressionTests.test.tsx.snap index 2da3ccc2..fd2c2f5d 100644 --- a/src/tests/__snapshots__/regressionTests.test.tsx.snap +++ b/src/tests/__snapshots__/regressionTests.test.tsx.snap @@ -38,6 +38,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -81,7 +87,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -585,6 +590,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -630,7 +641,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -1134,6 +1144,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -1170,7 +1186,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -2060,6 +2075,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -2098,7 +2119,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -2296,6 +2316,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -2337,7 +2363,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -2841,6 +2866,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -2879,7 +2910,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -3138,6 +3168,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -3174,7 +3210,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -3329,6 +3364,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -3367,7 +3408,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -3860,6 +3900,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -3896,7 +3942,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -4180,6 +4225,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -4218,7 +4269,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -4416,6 +4466,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -4454,7 +4510,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -4695,6 +4750,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -4733,7 +4794,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -4992,6 +5052,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -5031,7 +5097,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -5451,6 +5516,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -5516,7 +5587,6 @@ Object { "y": 500, }, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -5803,6 +5873,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -5840,7 +5916,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -6127,6 +6202,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -6191,7 +6272,6 @@ Object { "y": 110, }, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -6346,6 +6426,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -6382,7 +6468,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -6537,6 +6622,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -6573,7 +6664,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -7082,6 +7172,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -7122,7 +7218,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -7454,6 +7549,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -7488,7 +7589,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -9864,6 +9964,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -9903,7 +10009,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -10295,6 +10400,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -10334,7 +10445,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -10593,6 +10703,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -10631,7 +10747,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -10847,6 +10962,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -10885,7 +11006,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -11173,6 +11293,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -11209,7 +11335,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -11364,6 +11489,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -11400,7 +11531,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -11555,6 +11685,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -11591,7 +11727,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -11746,6 +11881,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -11805,7 +11946,6 @@ Object { }, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -11990,6 +12130,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -12049,7 +12195,6 @@ Object { }, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -12234,6 +12379,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -12268,7 +12419,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -12465,6 +12615,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -12524,7 +12680,6 @@ Object { }, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -12709,6 +12864,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -12745,7 +12906,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -12900,6 +13060,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -12959,7 +13125,6 @@ Object { }, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -13144,6 +13309,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -13180,7 +13351,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -13335,6 +13505,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -13369,7 +13545,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -13566,6 +13741,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -13602,7 +13783,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -13757,6 +13937,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -13801,7 +13987,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -14616,6 +14801,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -14654,7 +14845,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -14913,6 +15103,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -14947,7 +15143,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": true, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -15027,6 +15222,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -15061,7 +15262,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -15141,6 +15341,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -15177,7 +15383,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -15332,6 +15537,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -15372,7 +15583,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -15704,6 +15914,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -15746,7 +15962,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -16352,6 +16567,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -16388,7 +16609,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -16586,6 +16806,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -16632,7 +16858,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -17573,6 +17798,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -17607,7 +17838,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -17687,6 +17917,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -17725,7 +17961,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -18597,6 +18832,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -18664,7 +18905,6 @@ Object { "y": 0, }, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -19084,6 +19324,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -19150,7 +19396,6 @@ Object { "y": 0, }, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -19409,6 +19654,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -19443,7 +19694,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": true, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -19523,6 +19773,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -19559,7 +19815,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -20111,6 +20366,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -20145,7 +20406,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, @@ -20225,6 +20485,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "height": 768, @@ -20259,7 +20525,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": true, diff --git a/src/tests/packages/__snapshots__/utils.test.ts.snap b/src/tests/packages/__snapshots__/utils.test.ts.snap index b0fd58fc..34085498 100644 --- a/src/tests/packages/__snapshots__/utils.test.ts.snap +++ b/src/tests/packages/__snapshots__/utils.test.ts.snap @@ -39,6 +39,12 @@ Object { "exportScale": 1, "exportWithDarkMode": false, "fileHandle": null, + "frameRendering": Object { + "clip": true, + "enabled": true, + "name": true, + "outline": true, + }, "frameToHighlight": null, "gridSize": null, "isBindingEnabled": true, @@ -70,7 +76,6 @@ Object { "selectedLinearElement": null, "selectionElement": null, "shouldCacheIgnoreZoom": false, - "shouldRenderFrames": true, "showHyperlinkPopup": false, "showStats": false, "showWelcomeScreen": false, diff --git a/src/types.ts b/src/types.ts index bb641088..40f54831 100644 --- a/src/types.ts +++ b/src/types.ts @@ -115,7 +115,12 @@ export type AppState = { startBoundElement: NonDeleted | null; suggestedBindings: SuggestedBinding[]; frameToHighlight: NonDeleted | null; - shouldRenderFrames: boolean; + frameRendering: { + enabled: boolean; + name: boolean; + outline: boolean; + clip: boolean; + }; editingFrame: string | null; elementsToHighlight: NonDeleted[] | null; // element being edited, but not necessarily added to elements array yet @@ -543,7 +548,7 @@ export type ExcalidrawImperativeAPI = { * the frames are still interactive in edit mode. As such, this API should be * used in conjunction with view mode (props.viewModeEnabled). */ - toggleFrameRendering: InstanceType["toggleFrameRendering"]; + updateFrameRendering: InstanceType["updateFrameRendering"]; }; export type Device = Readonly<{