kopia lustrzana https://github.com/Tldraw/Tldraw
Period key works as pointer down / up (#377)
rodzic
59e351c779
commit
3de6ef334a
|
@ -1437,8 +1437,6 @@ export class TldrawApp extends StateManager<TDSnapshot> {
|
||||||
.map((shape) => {
|
.map((shape) => {
|
||||||
const parentShapeId = idsMap[shape.parentId]
|
const parentShapeId = idsMap[shape.parentId]
|
||||||
|
|
||||||
console.log(shape)
|
|
||||||
|
|
||||||
const copy = {
|
const copy = {
|
||||||
...shape,
|
...shape,
|
||||||
id: idsMap[shape.id],
|
id: idsMap[shape.id],
|
||||||
|
@ -2500,6 +2498,36 @@ export class TldrawApp extends StateManager<TDSnapshot> {
|
||||||
|
|
||||||
onKeyDown: TLKeyboardEventHandler = (key, info, e) => {
|
onKeyDown: TLKeyboardEventHandler = (key, info, e) => {
|
||||||
switch (e.key) {
|
switch (e.key) {
|
||||||
|
case '.': {
|
||||||
|
if (this.status === 'idle') {
|
||||||
|
const { shiftKey, metaKey, altKey, ctrlKey, spaceKey } = this
|
||||||
|
|
||||||
|
this.onPointerDown(
|
||||||
|
{
|
||||||
|
target: 'canvas',
|
||||||
|
pointerId: 0,
|
||||||
|
origin: info.point,
|
||||||
|
point: info.point,
|
||||||
|
delta: [0, 0],
|
||||||
|
pressure: 0.5,
|
||||||
|
shiftKey,
|
||||||
|
ctrlKey,
|
||||||
|
metaKey,
|
||||||
|
altKey,
|
||||||
|
spaceKey,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
shiftKey,
|
||||||
|
altKey,
|
||||||
|
ctrlKey,
|
||||||
|
pointerId: 0,
|
||||||
|
clientX: info.point[0],
|
||||||
|
clientY: info.point[1],
|
||||||
|
} as unknown as React.PointerEvent<HTMLDivElement>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
break
|
||||||
|
}
|
||||||
case 'Escape': {
|
case 'Escape': {
|
||||||
this.cancel()
|
this.cancel()
|
||||||
break
|
break
|
||||||
|
@ -2531,6 +2559,34 @@ export class TldrawApp extends StateManager<TDSnapshot> {
|
||||||
if (!info) return
|
if (!info) return
|
||||||
|
|
||||||
switch (e.key) {
|
switch (e.key) {
|
||||||
|
case '.': {
|
||||||
|
const { currentPoint, shiftKey, metaKey, altKey, ctrlKey, spaceKey } = this
|
||||||
|
|
||||||
|
this.onPointerUp(
|
||||||
|
{
|
||||||
|
target: 'canvas',
|
||||||
|
pointerId: 0,
|
||||||
|
origin: currentPoint,
|
||||||
|
point: currentPoint,
|
||||||
|
delta: [0, 0],
|
||||||
|
pressure: 0.5,
|
||||||
|
shiftKey,
|
||||||
|
ctrlKey,
|
||||||
|
metaKey,
|
||||||
|
altKey,
|
||||||
|
spaceKey,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
shiftKey,
|
||||||
|
altKey,
|
||||||
|
ctrlKey,
|
||||||
|
pointerId: 0,
|
||||||
|
clientX: currentPoint[0],
|
||||||
|
clientY: currentPoint[1],
|
||||||
|
} as unknown as React.PointerEvent<HTMLDivElement>
|
||||||
|
)
|
||||||
|
break
|
||||||
|
}
|
||||||
case 'Meta': {
|
case 'Meta': {
|
||||||
this.metaKey = false
|
this.metaKey = false
|
||||||
break
|
break
|
||||||
|
|
|
@ -9,6 +9,8 @@ export class ArrowTool extends BaseTool {
|
||||||
/* ----------------- Event Handlers ----------------- */
|
/* ----------------- Event Handlers ----------------- */
|
||||||
|
|
||||||
onPointerDown: TLPointerEventHandler = () => {
|
onPointerDown: TLPointerEventHandler = () => {
|
||||||
|
if (this.status !== Status.Idle) return
|
||||||
|
|
||||||
const {
|
const {
|
||||||
currentPoint,
|
currentPoint,
|
||||||
appState: { currentPageId, currentStyle },
|
appState: { currentPageId, currentStyle },
|
||||||
|
|
|
@ -9,6 +9,8 @@ export class DrawTool extends BaseTool {
|
||||||
/* ----------------- Event Handlers ----------------- */
|
/* ----------------- Event Handlers ----------------- */
|
||||||
|
|
||||||
onPointerDown: TLPointerEventHandler = (info) => {
|
onPointerDown: TLPointerEventHandler = (info) => {
|
||||||
|
if (this.status !== Status.Idle) return
|
||||||
|
|
||||||
const {
|
const {
|
||||||
currentPoint,
|
currentPoint,
|
||||||
appState: { currentPageId, currentStyle },
|
appState: { currentPageId, currentStyle },
|
||||||
|
|
|
@ -9,6 +9,8 @@ export class EllipseTool extends BaseTool {
|
||||||
/* ----------------- Event Handlers ----------------- */
|
/* ----------------- Event Handlers ----------------- */
|
||||||
|
|
||||||
onPointerDown: TLPointerEventHandler = () => {
|
onPointerDown: TLPointerEventHandler = () => {
|
||||||
|
if (this.status !== Status.Idle) return
|
||||||
|
|
||||||
const {
|
const {
|
||||||
currentPoint,
|
currentPoint,
|
||||||
appState: { currentPageId, currentStyle },
|
appState: { currentPageId, currentStyle },
|
||||||
|
|
|
@ -18,6 +18,8 @@ export class EraseTool extends BaseTool {
|
||||||
/* ----------------- Event Handlers ----------------- */
|
/* ----------------- Event Handlers ----------------- */
|
||||||
|
|
||||||
onPointerDown: TLPointerEventHandler = () => {
|
onPointerDown: TLPointerEventHandler = () => {
|
||||||
|
if (this.status !== Status.Idle) return
|
||||||
|
|
||||||
this.setStatus(Status.Pointing)
|
this.setStatus(Status.Pointing)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -9,6 +9,8 @@ export class LineTool extends BaseTool {
|
||||||
/* ----------------- Event Handlers ----------------- */
|
/* ----------------- Event Handlers ----------------- */
|
||||||
|
|
||||||
onPointerDown: TLPointerEventHandler = () => {
|
onPointerDown: TLPointerEventHandler = () => {
|
||||||
|
if (this.status !== Status.Idle) return
|
||||||
|
|
||||||
const {
|
const {
|
||||||
currentPoint,
|
currentPoint,
|
||||||
appState: { currentPageId, currentStyle },
|
appState: { currentPageId, currentStyle },
|
||||||
|
|
|
@ -9,6 +9,8 @@ export class RectangleTool extends BaseTool {
|
||||||
/* ----------------- Event Handlers ----------------- */
|
/* ----------------- Event Handlers ----------------- */
|
||||||
|
|
||||||
onPointerDown: TLPointerEventHandler = () => {
|
onPointerDown: TLPointerEventHandler = () => {
|
||||||
|
if (this.status !== Status.Idle) return
|
||||||
|
|
||||||
const {
|
const {
|
||||||
currentPoint,
|
currentPoint,
|
||||||
appState: { currentPageId, currentStyle },
|
appState: { currentPageId, currentStyle },
|
||||||
|
|
|
@ -237,7 +237,10 @@ export class SelectTool extends BaseTool<Status> {
|
||||||
onPointerMove: TLPointerEventHandler = (info, e) => {
|
onPointerMove: TLPointerEventHandler = (info, e) => {
|
||||||
const { originPoint, currentPoint } = this.app
|
const { originPoint, currentPoint } = this.app
|
||||||
|
|
||||||
if ((this.status === Status.SpacePanning && e.buttons === 1) || (this.status === Status.MiddleWheelPanning && e.buttons === 4)) {
|
if (
|
||||||
|
(this.status === Status.SpacePanning && e.buttons === 1) ||
|
||||||
|
(this.status === Status.MiddleWheelPanning && e.buttons === 4)
|
||||||
|
) {
|
||||||
this.app.onPan?.({ ...info, delta: Vec.neg(info.delta) }, e as unknown as WheelEvent)
|
this.app.onPan?.({ ...info, delta: Vec.neg(info.delta) }, e as unknown as WheelEvent)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
@ -344,6 +347,32 @@ export class SelectTool extends BaseTool<Status> {
|
||||||
if (e.buttons === 4) {
|
if (e.buttons === 4) {
|
||||||
this.setStatus(Status.MiddleWheelPanning)
|
this.setStatus(Status.MiddleWheelPanning)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (info.target === 'canvas' && this.status === Status.Idle) {
|
||||||
|
const { currentPoint } = this.app
|
||||||
|
|
||||||
|
if (info.spaceKey && e.buttons === 1) return
|
||||||
|
|
||||||
|
if (this.status === Status.Idle && info.altKey && info.shiftKey) {
|
||||||
|
this.setStatus(Status.ClonePainting)
|
||||||
|
this.clonePaint(currentPoint)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// Unless the user is holding shift or meta, clear the current selection
|
||||||
|
if (!info.shiftKey) {
|
||||||
|
this.app.onShapeBlur()
|
||||||
|
|
||||||
|
if (info.altKey && this.app.selectedIds.length > 0) {
|
||||||
|
this.app.duplicate(this.app.selectedIds, currentPoint)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.selectNone()
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setStatus(Status.PointingCanvas)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onPointerUp: TLPointerEventHandler = (info, e) => {
|
onPointerUp: TLPointerEventHandler = (info, e) => {
|
||||||
|
@ -403,32 +432,6 @@ export class SelectTool extends BaseTool<Status> {
|
||||||
|
|
||||||
// Canvas
|
// Canvas
|
||||||
|
|
||||||
onPointCanvas: TLCanvasEventHandler = (info, e) => {
|
|
||||||
const { currentPoint } = this.app
|
|
||||||
|
|
||||||
if (info.spaceKey && e.buttons === 1) return
|
|
||||||
|
|
||||||
if (this.status === Status.Idle && info.altKey && info.shiftKey) {
|
|
||||||
this.setStatus(Status.ClonePainting)
|
|
||||||
this.clonePaint(currentPoint)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// Unless the user is holding shift or meta, clear the current selection
|
|
||||||
if (!info.shiftKey) {
|
|
||||||
this.app.onShapeBlur()
|
|
||||||
|
|
||||||
if (info.altKey && this.app.selectedIds.length > 0) {
|
|
||||||
this.app.duplicate(this.app.selectedIds, currentPoint)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this.selectNone()
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setStatus(Status.PointingCanvas)
|
|
||||||
}
|
|
||||||
|
|
||||||
onDoubleClickCanvas: TLCanvasEventHandler = () => {
|
onDoubleClickCanvas: TLCanvasEventHandler = () => {
|
||||||
// Needs debugging
|
// Needs debugging
|
||||||
// const { currentPoint } = this.app
|
// const { currentPoint } = this.app
|
||||||
|
|
|
@ -73,22 +73,23 @@ export class TldrawTestApp extends TldrawApp {
|
||||||
inputs.pointerDown(this.getPoint(options), id),
|
inputs.pointerDown(this.getPoint(options), id),
|
||||||
{} as React.PointerEvent
|
{} as React.PointerEvent
|
||||||
)
|
)
|
||||||
this.onPointerDown(
|
this.onPointerDown(inputs.pointerDown(this.getPoint(options), id), {} as React.PointerEvent)
|
||||||
inputs.pointerDown(this.getPoint(options), 'canvas'),
|
|
||||||
{} as React.PointerEvent
|
|
||||||
)
|
|
||||||
return this
|
return this
|
||||||
}
|
}
|
||||||
|
|
||||||
doubleClickBoundHandle = (id: TLBoundsHandle, options?: PointerOptions | number[]) => {
|
doubleClickBoundHandle = (id: TLBoundsHandle, options?: PointerOptions | number[]) => {
|
||||||
|
this.onPointerDown(inputs.pointerDown(this.getPoint(options), id), {} as React.PointerEvent)
|
||||||
|
this.onPointerUp(inputs.pointerUp(this.getPoint(options), id), {} as React.PointerEvent)
|
||||||
|
this.onPointerDown(inputs.pointerDown(this.getPoint(options), id), {} as React.PointerEvent)
|
||||||
this.onDoubleClickBoundsHandle(
|
this.onDoubleClickBoundsHandle(
|
||||||
|
inputs.pointerUp(this.getPoint(options), id),
|
||||||
|
{} as React.PointerEvent
|
||||||
|
)
|
||||||
|
this.onReleaseBoundsHandle?.(
|
||||||
inputs.pointerDown(this.getPoint(options), id),
|
inputs.pointerDown(this.getPoint(options), id),
|
||||||
{} as React.PointerEvent
|
{} as React.PointerEvent
|
||||||
)
|
)
|
||||||
this.onPointerDown(
|
this.onPointerUp?.(inputs.pointerUp(this.getPoint(options), id), {} as React.PointerEvent)
|
||||||
inputs.pointerDown(this.getPoint(options), 'canvas'),
|
|
||||||
{} as React.PointerEvent
|
|
||||||
)
|
|
||||||
return this
|
return this
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Ładowanie…
Reference in New Issue