[fix] awful rendering issue (#1842)
This PR fixes an extremely performance-crushing bug that was happening in Safari and Chrome when iframes were present. ### Change Type - [x] `patch` — Bug fix ### Test Plan 1. Create one hundred shapes 2. Create a gist or maps embed 3. Select all If the app crashes or the rendering layers list grows to lots and lots of layers, that's the bug. ### Release Notes - [fix] iframe rendering issue
This commit is contained in:
parent
e7ad05fbf5
commit
227c97a057
3 changed files with 32 additions and 24 deletions
|
@ -221,14 +221,13 @@ input,
|
||||||
contain: strict;
|
contain: strict;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tl-shapes {
|
.tl-fixed-layer {
|
||||||
position: relative;
|
position: absolute;
|
||||||
z-index: 1;
|
top: 0px;
|
||||||
}
|
left: 0px;
|
||||||
|
width: 100%;
|
||||||
.tl-overlays {
|
height: 100%;
|
||||||
position: relative;
|
contain: strict;
|
||||||
z-index: 2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tl-overlays__item {
|
.tl-overlays__item {
|
||||||
|
|
|
@ -27,6 +27,7 @@ export const Canvas = track(function Canvas({ className }: { className?: string
|
||||||
|
|
||||||
const rCanvas = React.useRef<HTMLDivElement>(null)
|
const rCanvas = React.useRef<HTMLDivElement>(null)
|
||||||
const rHtmlLayer = React.useRef<HTMLDivElement>(null)
|
const rHtmlLayer = React.useRef<HTMLDivElement>(null)
|
||||||
|
const rHtmlLayer2 = React.useRef<HTMLDivElement>(null)
|
||||||
|
|
||||||
useScreenBounds()
|
useScreenBounds()
|
||||||
useDocumentEvents()
|
useDocumentEvents()
|
||||||
|
@ -40,6 +41,8 @@ export const Canvas = track(function Canvas({ className }: { className?: string
|
||||||
() => {
|
() => {
|
||||||
const htmlElm = rHtmlLayer.current
|
const htmlElm = rHtmlLayer.current
|
||||||
if (!htmlElm) return
|
if (!htmlElm) return
|
||||||
|
const htmlElm2 = rHtmlLayer2.current
|
||||||
|
if (!htmlElm2) return
|
||||||
|
|
||||||
const { x, y, z } = editor.camera
|
const { x, y, z } = editor.camera
|
||||||
|
|
||||||
|
@ -55,6 +58,12 @@ export const Canvas = track(function Canvas({ className }: { className?: string
|
||||||
y + offset
|
y + offset
|
||||||
)}px)`
|
)}px)`
|
||||||
)
|
)
|
||||||
|
htmlElm2.style.setProperty(
|
||||||
|
'transform',
|
||||||
|
`scale(${toDomPrecision(z)}) translate(${toDomPrecision(x + offset)}px,${toDomPrecision(
|
||||||
|
y + offset
|
||||||
|
)}px)`
|
||||||
|
)
|
||||||
},
|
},
|
||||||
[editor]
|
[editor]
|
||||||
)
|
)
|
||||||
|
@ -92,7 +101,6 @@ export const Canvas = track(function Canvas({ className }: { className?: string
|
||||||
{Background && <Background />}
|
{Background && <Background />}
|
||||||
<GridWrapper />
|
<GridWrapper />
|
||||||
<UiLogger />
|
<UiLogger />
|
||||||
<div ref={rHtmlLayer} className="tl-html-layer" draggable={false}>
|
|
||||||
<svg className="tl-svg-context">
|
<svg className="tl-svg-context">
|
||||||
<defs>
|
<defs>
|
||||||
{shapeSvgDefs}
|
{shapeSvgDefs}
|
||||||
|
@ -103,11 +111,12 @@ export const Canvas = track(function Canvas({ className }: { className?: string
|
||||||
{SvgDefs && <SvgDefs />}
|
{SvgDefs && <SvgDefs />}
|
||||||
</defs>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
|
<div ref={rHtmlLayer} className="tl-html-layer" draggable={false}>
|
||||||
<SelectionBackgroundWrapper />
|
<SelectionBackgroundWrapper />
|
||||||
<div className="tl-shapes">
|
|
||||||
<ShapesToDisplay />
|
<ShapesToDisplay />
|
||||||
</div>
|
</div>
|
||||||
<div className="tl-overlays">
|
<div className="tl-fixed-layer">
|
||||||
|
<div ref={rHtmlLayer2} className="tl-html-layer">
|
||||||
{/* <GeometryDebuggingView /> */}
|
{/* <GeometryDebuggingView /> */}
|
||||||
<HandlesWrapper />
|
<HandlesWrapper />
|
||||||
<BrushWrapper />
|
<BrushWrapper />
|
||||||
|
|
|
@ -3039,8 +3039,8 @@ export class Editor extends EventEmitter<TLEventMap> {
|
||||||
maskedPageBounds: Box2d | undefined
|
maskedPageBounds: Box2d | undefined
|
||||||
}[] = []
|
}[] = []
|
||||||
|
|
||||||
let nextIndex = MAX_SHAPES_PER_PAGE
|
let nextIndex = MAX_SHAPES_PER_PAGE * 2
|
||||||
let nextBackgroundIndex = 0
|
let nextBackgroundIndex = MAX_SHAPES_PER_PAGE
|
||||||
|
|
||||||
// We only really need these if we're using editor state, but that's ok
|
// We only really need these if we're using editor state, but that's ok
|
||||||
const editingShapeId = this.editingShapeId
|
const editingShapeId = this.editingShapeId
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue