Fix zoom and paste for embedded shapes

This commit is contained in:
Steve Ruiz 2021-10-14 13:51:21 +01:00
parent f8cb7f03b6
commit 1c65c51b60
4 changed files with 17 additions and 23 deletions

View file

@ -61,26 +61,15 @@ export function Canvas<T extends TLShape, M extends Record<string, unknown>>({
usePreventNavigation(rCanvas, inputs.bounds.width)
const events = useCanvasEvents()
useCameraCss(rLayer, rContainer, pageState)
const preventScrolling = React.useCallback((e: React.UIEvent<HTMLDivElement, UIEvent>) => {
e.preventDefault()
// e.currentTarget.scrollTo(0, 0)
}, [])
useKeyEvents()
const events = useCanvasEvents()
return (
<div id={id} className="tl-container" ref={rContainer}>
<div
id="canvas"
className="tl-absolute tl-canvas"
ref={rCanvas}
onScroll={preventScrolling}
{...events}
>
<div id="canvas" className="tl-absolute tl-canvas" ref={rCanvas} {...events}>
<ErrorBoundary FallbackComponent={ErrorFallback} onReset={resetError}>
<div ref={rLayer} className="tl-absolute tl-layer">
<Page

View file

@ -7,24 +7,24 @@ export default function Embedded(): JSX.Element {
<div
style={{
position: 'relative',
width: 'auto',
width: '100%',
height: '500px',
overflow: 'hidden',
marginBottom: '32px',
}}
>
<TLDraw id="small3" />
<TLDraw id="small5" />
</div>
<div
style={{
position: 'relative',
width: 'auto',
width: '100%',
height: '500px',
overflow: 'hidden',
}}
>
<TLDraw id="small4" />
<TLDraw id="small6" />
</div>
</div>
)

View file

@ -4,8 +4,6 @@ html,
}
body {
position: fixed;
overflow: hidden;
overscroll-behavior: none;
margin: 0px;
padding: 0px;

View file

@ -162,7 +162,7 @@ export class TLDrawState extends StateManager<Data> {
onChange?: (tlstate: TLDrawState, data: Data, reason: string) => void,
onMount?: (tlstate: TLDrawState) => void
) {
super(defaultState, id, 4, (next, prev) => ({
super(defaultState, id, 10, (next, prev) => ({
...next,
document: prev.document,
}))
@ -572,6 +572,7 @@ export class TLDrawState extends StateManager<Data> {
this.session = undefined
this.selectedGroupId = undefined
this.currentTool.setStatus(TLDrawStatus.Idle)
this.pasteInfo.offset = [0, 0]
this.resetHistory()
.clearSelectHistory()
.loadDocument(defaultDocument)
@ -1126,15 +1127,21 @@ export class TLDrawState extends StateManager<Data> {
let center = Vec.round(this.getPagePoint(point || this.centerPoint))
this.createShapes({
id: 'temp',
type: TLDrawShapeType.Ellipse,
point: center,
})
if (
Vec.dist(center, this.pasteInfo.center) < 2 ||
Vec.dist(center, Vec.round(Utils.getBoundsCenter(commonBounds))) < 2
) {
center = Vec.add(center, this.pasteInfo.offset)
this.pasteInfo.offset = Vec.add(this.pasteInfo.offset, [
this.state.settings.nudgeDistanceLarge,
this.state.settings.nudgeDistanceLarge,
])
center = Vec.add(center, this.pasteInfo.offset)
} else {
this.pasteInfo.center = center
this.pasteInfo.offset = [0, 0]
@ -2347,6 +2354,6 @@ export class TLDrawState extends StateManager<Data> {
}
get centerPoint() {
return Vec.round(Utils.getBoundsCenter(this.bounds))
return Vec.round([this.bounds.width / 2, this.bounds.height / 2])
}
}