Fix note grid creation and dragging behavior

pull/3256/head
Taha 2024-03-26 09:41:22 +00:00
rodzic 6253994ca4
commit e25e202e83
4 zmienionych plików z 14 dodań i 13 usunięć

Wyświetl plik

@ -7,6 +7,7 @@ import {
TLInterruptEvent, TLInterruptEvent,
TLPointerEventInfo, TLPointerEventInfo,
TLShapeId, TLShapeId,
Vec,
createShapeId, createShapeId,
moveCameraWhenCloseToEdge, moveCameraWhenCloseToEdge,
} from '@tldraw/editor' } from '@tldraw/editor'
@ -23,7 +24,7 @@ export class Brushing extends StateNode {
initialStartShape: TLGeoShape | null = null initialStartShape: TLGeoShape | null = null
override onEnter = (info: TLGeoShape) => { override onEnter = (info: TLGeoShape) => {
this.initialStartShape = info this.initialStartShape = { ...info }
} }
override onTick = () => { override onTick = () => {
@ -51,13 +52,12 @@ export class Brushing extends StateNode {
private complete() { private complete() {
this.editor.updateInstanceState({ brush: null }) this.editor.updateInstanceState({ brush: null })
this.gridShapes.shift() this.gridShapes.shift()
this.gridShapes.unshift(this.initialStartShape!.id)
const gridShapes = this.gridShapes.map((id) => { const gridShapes = this.gridShapes.map((id) => {
if (!id) return null
const shape = this.editor.getShape(id) const shape = this.editor.getShape(id)
return shape return shape
}) })
gridShapes.unshift(this.initialStartShape!)
this.editor.createShapes( this.editor.createShapes(
gridShapes.map((shape) => { gridShapes.map((shape) => {
return { return {
@ -68,7 +68,8 @@ export class Brushing extends StateNode {
} }
}) })
) )
this.editor.deleteShapes(this.gridShapes) this.editor.deleteShapes([...this.gridShapes, this.initialStartShape!.id])
this.parent.transition('idle') this.parent.transition('idle')
} }
@ -78,12 +79,16 @@ export class Brushing extends StateNode {
} }
private createNoteGrid() { private createNoteGrid() {
const noteSize = 200 + 30
const { const {
inputs: { currentPagePoint }, inputs: { currentPagePoint },
} = this.editor } = this.editor
// Set the brush to contain the current and origin points // Set the brush to contain the current and origin points
const originPoint = { x: this.initialStartShape!.x + 115, y: this.initialStartShape!.y + 115 } const originPoint = { x: this.initialStartShape!.x + 115, y: this.initialStartShape!.y + 115 }
this.brush.setTo(Box.FromPoints([originPoint, currentPagePoint])) const angle = Vec.Sub(currentPagePoint, originPoint).uni()
const newPoint = Vec.Add(currentPagePoint, angle.mul(noteSize + 100))
this.brush.setTo(Box.FromPoints([originPoint, newPoint]))
console.log({ angle })
const isLeft = originPoint.x - currentPagePoint.x > 0 const isLeft = originPoint.x - currentPagePoint.x > 0
const isUp = originPoint.y - currentPagePoint.y > 0 const isUp = originPoint.y - currentPagePoint.y > 0
const direction = { const direction = {
@ -92,7 +97,6 @@ export class Brushing extends StateNode {
} }
// test how many notes fit in the brush horizontally and vertically // test how many notes fit in the brush horizontally and vertically
const noteSize = 200 + 30
const brushWidth = this.brush.width const brushWidth = this.brush.width
const offsetOriginPoint = { const offsetOriginPoint = {
x: originPoint.x - noteSize / 2, x: originPoint.x - noteSize / 2,
@ -120,7 +124,7 @@ export class Brushing extends StateNode {
x, x,
y, y,
id: geoId, id: geoId,
opacity: 0.25, opacity: 0.5,
props: { props: {
h: 200, h: 200,
w: 200, w: 200,
@ -132,7 +136,6 @@ export class Brushing extends StateNode {
} }
} }
this.gridShapes = geoIds this.gridShapes = geoIds
// n
} }
private cleanupGridShapes() { private cleanupGridShapes() {

Wyświetl plik

@ -7,7 +7,6 @@ export class Dragging extends StateNode {
override onEnter = (shape: TLNoteShape) => { override onEnter = (shape: TLNoteShape) => {
this.shape = shape this.shape = shape
console.log('Dragging.onEnter', shape)
} }
override onExit = () => { override onExit = () => {
this.cleanupDropZone() this.cleanupDropZone()
@ -76,7 +75,7 @@ export class Dragging extends StateNode {
) )
return distanceA - distanceB return distanceA - distanceB
}) as TLNoteShape[] }) as TLNoteShape[]
console.log('notes', notes)
if (notes.length === 0) return undefined if (notes.length === 0) return undefined
let direction: 'above' | 'below' | 'left' | 'right' | null = null let direction: 'above' | 'below' | 'left' | 'right' | null = null
if ( if (

Wyświetl plik

@ -23,7 +23,7 @@ export class Idle extends StateNode {
this.editor.setCursor({ type: 'cross', rotation: 0 }) this.editor.setCursor({ type: 'cross', rotation: 0 })
} }
override onExit = () => { override onExit = () => {
this.cleanupDropZone() // this.cleanupDropZone()
} }
override onPointerMove = () => { override onPointerMove = () => {

Wyświetl plik

@ -33,7 +33,6 @@ export class PointingDropZone extends StateNode {
override onPointerUp: TLEventHandlers['onPointerUp'] = () => { override onPointerUp: TLEventHandlers['onPointerUp'] = () => {
this.shape = this.createShape() this.shape = this.createShape()
this.complete() this.complete()
} }