From 820de45a35e9bbec4b66a899d0d2036189486262 Mon Sep 17 00:00:00 2001 From: Steve Ruiz Date: Tue, 14 Sep 2021 12:17:49 +0100 Subject: [PATCH] Fix draw shape, menu --- packages/core/src/components/brush/brush.tsx | 2 +- packages/core/src/hooks/useStyle.tsx | 5 +- packages/tldraw/src/components/menu/menu.tsx | 14 ++-- .../session/sessions/draw/draw.session.ts | 81 ++++++++++--------- packages/tldraw/src/state/tlstate.ts | 2 + 5 files changed, 58 insertions(+), 46 deletions(-) diff --git a/packages/core/src/components/brush/brush.tsx b/packages/core/src/components/brush/brush.tsx index ec3521926..7b035324c 100644 --- a/packages/core/src/components/brush/brush.tsx +++ b/packages/core/src/components/brush/brush.tsx @@ -5,7 +5,7 @@ export const brushUpdater = new BrushUpdater() export const Brush = React.memo((): JSX.Element | null => { return ( - + ) diff --git a/packages/core/src/hooks/useStyle.tsx b/packages/core/src/hooks/useStyle.tsx index a4641acdb..5e7415533 100644 --- a/packages/core/src/hooks/useStyle.tsx +++ b/packages/core/src/hooks/useStyle.tsx @@ -165,18 +165,18 @@ const tlcss = css` position: absolute; top: 0px; left: 0px; - overflow: hidden; transform-origin: center center; pointer-events: none; display: flex; align-items: center; justify-content: center; + overflow: clip; } .tl-positioned-svg { width: 100%; height: 100%; - overflow: hidden; + overflow: clip; } .tl-positioned-div { @@ -185,6 +185,7 @@ const tlcss = css` height: 100%; overflow: hidden; padding: var(--tl-padding); + overflow: clip; } .tl-counter-scaled { diff --git a/packages/tldraw/src/components/menu/menu.tsx b/packages/tldraw/src/components/menu/menu.tsx index 874afc9ef..4476e1478 100644 --- a/packages/tldraw/src/components/menu/menu.tsx +++ b/packages/tldraw/src/components/menu/menu.tsx @@ -20,7 +20,9 @@ export const Menu = React.memo(() => { const { tlstate } = useTLDrawContext() const handleNew = React.useCallback(() => { - tlstate.newProject() + if (window.confirm('Are you sure you want to start a new project?')) { + tlstate.newProject() + } }, [tlstate]) const handleSave = React.useCallback(() => { @@ -42,29 +44,29 @@ export const Menu = React.memo(() => { - + New Project #N - + Open... #L - + Save #S - + Save As... ⇧#S - + Sign Out diff --git a/packages/tldraw/src/state/session/sessions/draw/draw.session.ts b/packages/tldraw/src/state/session/sessions/draw/draw.session.ts index 10e58b223..b5c28f728 100644 --- a/packages/tldraw/src/state/session/sessions/draw/draw.session.ts +++ b/packages/tldraw/src/state/session/sessions/draw/draw.session.ts @@ -38,35 +38,39 @@ export class DrawSession implements Session { update = (data: Data, point: number[], pressure: number, isLocked = false) => { const { snapshot } = this - // Roundabout way of preventing the "dot" from showing while drawing - if (this.points.length === 0) { - this.points.push([0, 0, pressure]) + // Even if we're not locked yet, we base the future locking direction + // on the first dimension to reach a threshold, or the bigger dimension + // once one or both dimensions have reached the threshold. + if (!this.lockedDirection && this.points.length > 1) { + const bounds = Utils.getBoundsFromPoints(this.points) + if (bounds.width > 8 || bounds.height > 8) { + this.lockedDirection = bounds.width > bounds.height ? 'horizontal' : 'vertical' + } } // Drawing while holding shift will "lock" the pen to either the - // x or y axis, depending on which direction has the greater - // delta. Pressing shift will also add more points to "return" - // the pen to the axis. + // x or y axis, depending on the locking direction. if (isLocked) { if (!this.isLocked && this.points.length > 1) { - const bounds = Utils.getBoundsFromPoints(this.points) - if (bounds.width > 8 || bounds.height > 8) { - this.isLocked = true - const returning = [...this.last] - - const isVertical = bounds.height > 8 - - if (isVertical) { - this.lockedDirection = 'vertical' - returning[0] = this.origin[0] - } else { - this.lockedDirection = 'horizontal' - returning[1] = this.origin[1] - } - - this.previous = returning - this.points.push(Vec.sub(returning, this.origin)) + // If we're locking before knowing what direction we're in, set it + // early based on the bigger dimension. + if (!this.lockedDirection) { + const bounds = Utils.getBoundsFromPoints(this.points) + this.lockedDirection = bounds.width > bounds.height ? 'horizontal' : 'vertical' } + + this.isLocked = true + // Start locking + const returning = [...this.last] + + if (this.lockedDirection === 'vertical') { + returning[0] = 0 + } else { + returning[1] = 0 + } + + this.previous = returning + this.points.push(returning.concat(pressure)) } } else if (this.isLocked) { this.isLocked = false @@ -80,13 +84,10 @@ export class DrawSession implements Session { } } - // The previous input (not adjusted) point - // The new adjusted point const newPoint = Vec.round(Vec.sub(point, this.origin)).concat(pressure) - // Don't add duplicate points. Be sure to - // test against the previous *adjusted* point. + // Don't add duplicate points. if (Vec.isEqual(this.last, newPoint)) return // The new adjusted point is now the previous adjusted point. @@ -95,27 +96,33 @@ export class DrawSession implements Session { // Does the input point create a new top left? const prevTopLeft = [...this.topLeft] - this.topLeft = [Math.min(this.topLeft[0], point[0]), Math.min(this.topLeft[1], point[1])] + const topLeft = [Math.min(this.topLeft[0], point[0]), Math.min(this.topLeft[1], point[1])] - const delta = Vec.sub(this.topLeft, this.origin) + const delta = Vec.sub(topLeft, this.origin) // Add the new adjusted point to the points array this.points.push(newPoint) // Time to shift some points! - let points: number[][] - if (Vec.isEqual(prevTopLeft, this.topLeft)) { - // If the new top left is the same as the previous top left, - // we don't need to shift anything: we just shift the new point - // and add it to the shifted points array. - points = [...this.shiftedPoints, Vec.sub(newPoint, delta)] - } else { + if (prevTopLeft[0] !== topLeft[0] || prevTopLeft[1] !== topLeft[1]) { + this.topLeft = topLeft // If we have a new top left, then we need to iterate through // the "unshifted" points array and shift them based on the // offset between the new top left and the original top left. - points = this.points.map((pt) => [pt[0] - delta[0], pt[1] - delta[1], pt[2]]) + + points = this.points.map((pt) => { + return Vec.round(Vec.sub(pt, delta)).concat(pt[2]) + }) + } else { + // If the new top left is the same as the previous top left, + // we don't need to shift anything: we just shift the new point + // and add it to the shifted points array. + points = [ + ...this.shiftedPoints, + Vec.sub(newPoint, Vec.sub(topLeft, this.origin)).concat(newPoint[2]), + ] } this.shiftedPoints = points diff --git a/packages/tldraw/src/state/tlstate.ts b/packages/tldraw/src/state/tlstate.ts index 8230e5009..45dcd1413 100644 --- a/packages/tldraw/src/state/tlstate.ts +++ b/packages/tldraw/src/state/tlstate.ts @@ -555,6 +555,7 @@ export class TLDrawState extends StateManager { */ newProject = () => { // TODO + this.resetDocument() } /** @@ -2375,6 +2376,7 @@ export class TLDrawState extends StateManager { onPointCanvas: TLCanvasEventHandler = (info) => { if (this.appState.isStyleOpen) { this.toggleStylePanel() + return } switch (this.appState.status.current) {