kopia lustrzana https://github.com/Tldraw/Tldraw
Fix note grid creation and dragging behavior
rodzic
6253994ca4
commit
e25e202e83
|
@ -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() {
|
||||||
|
|
|
@ -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 (
|
||||||
|
|
|
@ -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 = () => {
|
||||||
|
|
|
@ -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()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Ładowanie…
Reference in New Issue