diff --git a/packages/editor/src/lib/components/default-components/DefaultCanvas.tsx b/packages/editor/src/lib/components/default-components/DefaultCanvas.tsx index 2c8f38f58..37565008a 100644 --- a/packages/editor/src/lib/components/default-components/DefaultCanvas.tsx +++ b/packages/editor/src/lib/components/default-components/DefaultCanvas.tsx @@ -387,25 +387,38 @@ function ShapesWithSVGs() { ) } + function ReflowIfNeeded() { const editor = useEditor() const culledShapesRef = useRef>(new Set()) useQuickReactor( 'reflow for culled shapes', () => { + if (!editor.environment.isSafari) return const culledShapes = editor.getCulledShapes() - if ( - culledShapesRef.current.size === culledShapes.size && - [...culledShapes].every((id) => culledShapesRef.current.has(id)) - ) - return + const prev = culledShapesRef.current + let reflow = false + if (prev.size !== culledShapes.size) { + reflow = true + } else { + for (const id of culledShapes) { + if (!prev.has(id)) { + reflow = true + break + } + } + } + if (reflow) { + const canvas = document.getElementsByClassName('tl-canvas') + if (canvas.length === 0) { + return + } // This causes a reflow + // https://gist.github.com/paulirish/5d52fb081b3570c81e3a + ;(canvas[0] as HTMLDivElement).offsetHeight + } - culledShapesRef.current = culledShapes - const canvas = document.getElementsByClassName('tl-canvas') - if (canvas.length === 0) return // This causes a reflow // https://gist.github.com/paulirish/5d52fb081b3570c81e3a - const _height = (canvas[0] as HTMLDivElement).offsetHeight }, [editor] ) diff --git a/packages/editor/src/lib/editor/Editor.ts b/packages/editor/src/lib/editor/Editor.ts index 36f231093..4d9bb74c3 100644 --- a/packages/editor/src/lib/editor/Editor.ts +++ b/packages/editor/src/lib/editor/Editor.ts @@ -4226,8 +4226,7 @@ export class Editor extends EventEmitter { * * @public */ - @computed - getCulledShapes() { + @computed getCulledShapes() { const notVisibleShapes = this._notVisibleShapes().get() const selectedShapeIds = this.getSelectedShapeIds() const editingId = this.getEditingShapeId()