[feature] Side cloning (#149)

* Adds side clone behavior

* Adds tab to clone, fixes wheel

* Fix bug in draw shape

* Passing tests
This commit is contained in:
Steve Ruiz 2021-10-14 16:37:52 +01:00 committed by GitHub
parent 0183a4d5a2
commit 46c9ac508d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 279 additions and 62 deletions

View file

@ -12,6 +12,7 @@ describe('bounds', () => {
viewportWidth={1000}
isLocked={false}
isHidden={false}
showCloneButtons={false}
/>
)
})

View file

@ -5,6 +5,7 @@ import { CenterHandle } from './center-handle'
import { RotateHandle } from './rotate-handle'
import { CornerHandle } from './corner-handle'
import { EdgeHandle } from './edge-handle'
import { CloneButtons } from './clone-buttons'
import { Container } from '+components/container'
import { SVGContainer } from '+components/svg-container'
@ -14,11 +15,21 @@ interface BoundsProps {
rotation: number
isLocked: boolean
isHidden: boolean
showCloneButtons: boolean
viewportWidth: number
children?: React.ReactNode
}
export const Bounds = React.memo(
({ zoom, bounds, viewportWidth, rotation, isHidden, isLocked }: BoundsProps): JSX.Element => {
({
zoom,
bounds,
viewportWidth,
rotation,
isHidden,
isLocked,
showCloneButtons,
}: BoundsProps): JSX.Element => {
// Touch target size
const targetSize = (viewportWidth < 768 ? 16 : 8) / zoom
// Handle size
@ -32,8 +43,8 @@ export const Bounds = React.memo(
return (
<Container bounds={bounds} rotation={rotation}>
<SVGContainer opacity={isHidden ? 0 : 1}>
<CenterHandle bounds={bounds} isLocked={isLocked} />
<SVGContainer>
<CenterHandle bounds={bounds} isLocked={isLocked} isHidden={isHidden} />
<EdgeHandle
targetSize={targetSize}
size={size}
@ -96,6 +107,7 @@ export const Bounds = React.memo(
bounds={bounds}
isHidden={!showHandles || !showRotateHandle}
/>
{showCloneButtons && <CloneButtons bounds={bounds} />}
</SVGContainer>
</Container>
)

View file

@ -4,17 +4,21 @@ import type { TLBounds } from '+types'
export interface CenterHandleProps {
bounds: TLBounds
isLocked: boolean
isHidden: boolean
}
export const CenterHandle = React.memo(({ bounds, isLocked }: CenterHandleProps): JSX.Element => {
return (
<rect
className={isLocked ? 'tl-bounds-center tl-dashed' : 'tl-bounds-center'}
x={-1}
y={-1}
width={bounds.width + 2}
height={bounds.height + 2}
pointerEvents="none"
/>
)
})
export const CenterHandle = React.memo(
({ bounds, isLocked, isHidden }: CenterHandleProps): JSX.Element => {
return (
<rect
className={isLocked ? 'tl-bounds-center tl-dashed' : 'tl-bounds-center'}
x={-1}
y={-1}
width={bounds.width + 2}
height={bounds.height + 2}
opacity={isHidden ? 0 : 1}
pointerEvents="none"
/>
)
}
)

View file

@ -0,0 +1,31 @@
import * as React from 'react'
import { useTLContext } from '+hooks'
import type { TLBounds } from '+types'
export interface CloneButtonProps {
bounds: TLBounds
side: 'top' | 'right' | 'bottom' | 'left'
}
export function CloneButton({ bounds, side }: CloneButtonProps) {
const x = side === 'left' ? -44 : side === 'right' ? bounds.width + 44 : bounds.width / 2
const y = side === 'top' ? -44 : side === 'bottom' ? bounds.height + 44 : bounds.height / 2
const { callbacks, inputs } = useTLContext()
const handleClick = React.useCallback(
(e: React.PointerEvent<SVGCircleElement>) => {
e.stopPropagation()
const info = inputs.pointerDown(e, side)
callbacks.onShapeClone?.(info, e)
},
[callbacks.onShapeClone]
)
return (
<g className="tl-clone-button-target" transform={`translate(${x}, ${y})`}>
<rect className="tl-transparent" width={88} height={88} x={-44} y={-44} />
<circle className="tl-clone-button" onPointerDown={handleClick} />
</g>
)
}

View file

@ -0,0 +1,18 @@
import * as React from 'react'
import type { TLBounds } from '+types'
import { CloneButton } from './clone-button'
export interface CloneButtonsProps {
bounds: TLBounds
}
export function CloneButtons({ bounds }: CloneButtonsProps) {
return (
<>
<CloneButton bounds={bounds} side="top" />
<CloneButton bounds={bounds} side="right" />
<CloneButton bounds={bounds} side="bottom" />
<CloneButton bounds={bounds} side="left" />
</>
)
}

View file

@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import * as React from 'react'
import type { TLBinding, TLPage, TLPageState, TLShape } from '+types'
import type { TLBinding, TLPage, TLPageState, TLShape, TLShapeUtil } from '+types'
import { useSelection, useShapeTree, useHandles, useTLContext } from '+hooks'
import { Bounds } from '+components/bounds'
import { BoundsBg } from '+components/bounds/bounds-bg'
@ -39,8 +39,6 @@ export const Page = React.memo(function Page<T extends TLShape, M extends Record
callbacks.onRenderCountChange
)
const { shapeWithHandles } = useHandles(page, pageState)
const { bounds, isLocked, rotation } = useSelection(page, pageState, shapeUtils)
const {
@ -49,6 +47,23 @@ export const Page = React.memo(function Page<T extends TLShape, M extends Record
camera: { zoom },
} = pageState
let showCloneButtons = false
let shapeWithHandles: TLShape | undefined = undefined
if (selectedIds.length === 1) {
const id = selectedIds[0]
const shape = page.shapes[id]
const utils = shapeUtils[shape.type] as TLShapeUtil<any, any>
showCloneButtons = utils.canClone
if (shape.handles !== undefined) {
shapeWithHandles = shape
}
}
return (
<>
{bounds && !hideBounds && <BoundsBg bounds={bounds} rotation={rotation} />}
@ -57,9 +72,10 @@ export const Page = React.memo(function Page<T extends TLShape, M extends Record
))}
{!hideIndicators &&
selectedIds
.map((id) => page.shapes[id])
.filter(Boolean)
.map((id) => (
<ShapeIndicator key={'selected_' + id} shape={page.shapes[id]} meta={meta} isSelected />
.map((shape) => (
<ShapeIndicator key={'selected_' + shape.id} shape={shape} meta={meta} isSelected />
))}
{!hideIndicators && hoveredId && (
<ShapeIndicator
@ -77,6 +93,7 @@ export const Page = React.memo(function Page<T extends TLShape, M extends Record
isLocked={isLocked}
rotation={rotation}
isHidden={hideBounds}
showCloneButtons={showCloneButtons}
/>
)}
{!hideHandles && shapeWithHandles && <Handles shape={shapeWithHandles} />}

View file

@ -266,6 +266,31 @@ const tlcss = css`
stroke: var(--tl-selectStroke);
}
.tl-clone-button-target {
pointer-events: all;
}
.tl-clone-button-target:hover > .tl-clone-button {
stroke-width: calc(1.5px * var(--tl-scale));
stroke: var(--tl-selectStroke);
opacity: 1;
}
.tl-clone-button-target:hover {
opacity: 1;
}
.tl-clone-button {
r: calc(8px * var(--tl-scale));
pointer-events: all;
cursor: pointer;
fill: transparent;
}
.tl-clone-button:hover {
fill: var(--tl-selectStroke);
}
.tl-bounds {
pointer-events: none;
contain: layout style size;

View file

@ -31,38 +31,28 @@ export function useZoomEvents<T extends HTMLElement>(zoom: number, ref: React.Re
}
}, [])
React.useEffect(() => {
const elm = ref.current
function handleWheel(e: WheelEvent) {
if (e.altKey) {
const point = inputs.pointer?.point ?? [inputs.bounds.width / 2, inputs.bounds.height / 2]
const info = inputs.pinch(point, point)
callbacks.onZoom?.({ ...info, delta: [...point, e.deltaY] }, e)
return
}
e.preventDefault()
if (inputs.isPinching) return
if (Vec.isEqual([e.deltaX, e.deltaY], [0, 0])) return
const info = inputs.pan([e.deltaX, e.deltaY], e as WheelEvent)
callbacks.onPan?.(info, e)
}
elm?.addEventListener('wheel', handleWheel, { passive: false })
return () => {
elm?.removeEventListener('wheel', handleWheel)
}
}, [ref, callbacks, inputs])
useGesture(
{
onWheel: ({ delta, event: e }) => {
if (e.altKey && e.buttons === 0) {
const point = inputs.pointer?.point ?? [inputs.bounds.width / 2, inputs.bounds.height / 2]
const info = inputs.pinch(point, point)
callbacks.onZoom?.({ ...info, delta: [...point, -e.deltaY] }, e)
return
}
e.preventDefault()
if (inputs.isPinching) return
if (Vec.isEqual(delta, [0, 0])) return
const info = inputs.pan(delta, e as WheelEvent)
callbacks.onPan?.(info, e)
},
onPinchStart: ({ origin, event }) => {
const elm = ref.current

View file

@ -26,6 +26,8 @@ export const ShapeUtil = function <T extends TLShape, E extends Element, M = any
isStateful: false,
canClone: false,
isAspectRatioLocked: false,
create: (props) => {

View file

@ -147,6 +147,11 @@ export type TLKeyboardEventHandler = (key: string, info: TLKeyboardInfo, e: Keyb
export type TLPointerEventHandler = (info: TLPointerInfo<string>, e: React.PointerEvent) => void
export type TLShapeCloneHandler = (
info: TLPointerInfo<'top' | 'left' | 'right' | 'bottom'>,
e: React.PointerEvent
) => void
export type TLCanvasEventHandler = (info: TLPointerInfo<'canvas'>, e: React.PointerEvent) => void
export type TLBoundsEventHandler = (info: TLPointerInfo<'bounds'>, e: React.PointerEvent) => void
@ -215,6 +220,7 @@ export interface TLCallbacks<T extends TLShape> {
// Misc
onShapeChange: TLShapeChangeHandler<T, any>
onShapeBlur: TLShapeBlurHandler<any>
onShapeClone: TLShapeCloneHandler
onRenderCountChange: (ids: string[]) => void
onError: (error: Error) => void
onBoundsChange: (bounds: TLBounds) => void
@ -333,17 +339,13 @@ export type TLShapeUtil<
canEdit: boolean
canClone: boolean
canBind: boolean
isStateful: boolean
minHeight: number
minWidth: number
maxHeight: number
maxWidth: number
showBounds: boolean
getRotatedBounds(this: TLShapeUtil<T, E, M>, shape: T): TLBounds

View file

@ -274,6 +274,7 @@ function InnerTldraw({
onRenderCountChange={tlstate.onRenderCountChange}
onShapeChange={tlstate.onShapeChange}
onShapeBlur={tlstate.onShapeBlur}
onShapeClone={tlstate.onShapeClone}
onBoundsChange={tlstate.updateBounds}
onKeyDown={tlstate.onKeyDown}
onKeyUp={tlstate.onKeyUp}

View file

@ -49,7 +49,7 @@ export const Draw = new ShapeUtil<DrawShape, SVGSVGElement, TLDrawMeta>(() => ({
const verySmall = bounds.width <= strokeWidth / 2 && bounds.height <= strokeWidth / 2
if (verySmall) {
const sw = (1 + strokeWidth) / 2
const sw = 1 + strokeWidth
return (
<SVGContainer ref={ref} id={shape.id + '_svg'} {...events}>
@ -140,8 +140,6 @@ export const Draw = new ShapeUtil<DrawShape, SVGSVGElement, TLDrawMeta>(() => ({
return getSolidStrokePathData(shape, false)
}, [points])
if (!shape) return null
const bounds = this.getBounds(shape)
const verySmall = bounds.width < 4 && bounds.height < 4
@ -321,7 +319,7 @@ function getDrawStrokePathData(shape: DrawShape, isComplete: boolean) {
function getSolidStrokePathData(shape: DrawShape, isComplete: boolean) {
const { points } = shape
if (points.length === 0) return 'M 0 0 L 0 0'
if (points.length < 2) return 'M 0 0 L 0 0'
const options = getOptions(shape, isComplete)

View file

@ -27,6 +27,8 @@ export const Sticky = new ShapeUtil<StickyShape, HTMLDivElement, TLDrawMeta>(()
canEdit: true,
canClone: true,
pathCache: new WeakMap<number[], string>([]),
defaultProps: {
@ -78,6 +80,11 @@ export const Sticky = new ShapeUtil<StickyShape, HTMLDivElement, TLDrawMeta>(()
(e: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (e.key === 'Escape') return
if (e.key === 'Tab' && shape.text.length === 0) {
e.preventDefault()
return
}
e.stopPropagation()
if (e.key === 'Tab') {

View file

@ -6,6 +6,7 @@ import {
TLBoundsEventHandler,
TLBoundsHandleEventHandler,
TLKeyboardEventHandler,
TLShapeCloneHandler,
TLCanvasEventHandler,
TLPageState,
TLPinchEventHandler,
@ -2182,6 +2183,7 @@ export class TLDrawState extends StateManager<Data> {
}
onZoom: TLWheelEventHandler = (info, e) => {
if (this.state.appState.status !== TLDrawStatus.Idle) return
this.zoom(info.delta[2] / 100, info.delta)
this.onPointerMove(info, e as unknown as React.PointerEvent)
}
@ -2322,6 +2324,8 @@ export class TLDrawState extends StateManager<Data> {
this.currentTool.onShapeBlur?.()
}
onShapeClone: TLShapeCloneHandler = (info, e) => this.currentTool.onShapeClone?.(info, e)
onRenderCountChange = (ids: string[]) => {
const appState = this.getAppState()
if (appState.isEmptyCanvas && ids.length > 0) {

View file

@ -5,6 +5,8 @@ import type {
TLKeyboardEventHandler,
TLPinchEventHandler,
TLPointerEventHandler,
TLShapeBlurHandler,
TLShapeCloneHandler,
TLWheelEventHandler,
} from '~../../core/src/types'
import type { TLDrawState } from '~state'
@ -105,5 +107,6 @@ export abstract class BaseTool {
onReleaseHandle?: TLPointerEventHandler
// Misc
onShapeBlur?: () => void
onShapeBlur?: TLShapeBlurHandler
onShapeClone?: TLShapeCloneHandler
}

View file

@ -7,6 +7,7 @@ import {
TLPointerEventHandler,
TLPinchEventHandler,
TLKeyboardEventHandler,
TLShapeCloneHandler,
Utils,
} from '@tldraw/core'
import { SessionType, TLDrawShapeType } from '~types'
@ -19,6 +20,8 @@ enum Status {
PointingCanvas = 'pointingCanvas',
PointingHandle = 'pointingHandle',
PointingBounds = 'pointingBounds',
PointingClone = 'pointingClone',
TranslatingClone = 'translatingClone',
PointingBoundsHandle = 'pointingBoundsHandle',
TranslatingHandle = 'translatingHandle',
Translating = 'translating',
@ -68,6 +71,51 @@ export class SelectTool extends BaseTool {
this.setStatus(Status.Idle)
}
getShapeClone = (id: string, side: 'top' | 'right' | 'bottom' | 'left') => {
const shape = this.state.getShape(id)
const utils = TLDR.getShapeUtils(shape)
if (utils.canClone) {
const bounds = utils.getBounds(shape)
const center = utils.getCenter(shape)
let point =
side === 'top'
? [bounds.minX, bounds.minY - (bounds.height + 32)]
: side === 'right'
? [bounds.maxX + 32, bounds.minY]
: side === 'bottom'
? [bounds.minX, bounds.maxY + 32]
: [bounds.minX - (bounds.width + 32), bounds.minY]
if (shape.rotation !== 0) {
const newCenter = Vec.add(point, [bounds.width / 2, bounds.height / 2])
const rotatedCenter = Vec.rotWith(newCenter, center, shape.rotation || 0)
point = Vec.sub(rotatedCenter, [bounds.width / 2, bounds.height / 2])
}
const id = Utils.uniqueId()
const clone = {
...shape,
id,
point,
}
if (clone.type === TLDrawShapeType.Sticky) {
clone.text = ''
}
return clone
}
return
}
/* ----------------- Event Handlers ----------------- */
onCancel = () => {
@ -83,6 +131,24 @@ export class SelectTool extends BaseTool {
return
}
if (key === 'Tab') {
if (this.status === Status.Idle && this.state.selectedIds.length === 1) {
const [selectedId] = this.state.selectedIds
const clonedShape = this.getShapeClone(selectedId, 'right')
if (clonedShape) {
this.state.createShapes(clonedShape)
this.setStatus(Status.Idle)
this.state.setEditingId(clonedShape.id)
this.state.select(clonedShape.id)
}
}
return
}
if (key === 'Meta' || key === 'Control') {
// TODO: Make all sessions have all of these arguments
this.state.updateSession(
@ -146,6 +212,15 @@ export class SelectTool extends BaseTool {
return
}
if (this.status === Status.PointingClone) {
if (Vec.dist(info.origin, info.point) > 4) {
this.setStatus(Status.TranslatingClone)
const point = this.state.getPagePoint(info.origin)
this.state.startSession(SessionType.Translate, point)
}
return
}
if (this.status === Status.PointingBounds) {
if (Vec.dist(info.origin, info.point) > 4) {
this.setStatus(Status.Translating)
@ -194,6 +269,16 @@ export class SelectTool extends BaseTool {
}
onPointerUp: TLPointerEventHandler = (info) => {
if (this.status === Status.TranslatingClone || this.status === Status.PointingClone) {
if (this.pointedId) {
this.state.completeSession()
this.state.setEditingId(this.pointedId)
}
this.setStatus(Status.Idle)
this.pointedId = undefined
return
}
if (this.status === Status.PointingBounds) {
if (info.target === 'bounds') {
// If we just clicked the selecting bounds's background,
@ -466,4 +551,21 @@ export class SelectTool extends BaseTool {
this.state.pinchZoom(info.point, info.delta, info.delta[2])
this.onPointerMove(info, e as unknown as React.PointerEvent)
}
/* ---------------------- Misc ---------------------- */
onShapeClone: TLShapeCloneHandler = (info) => {
const selectedShapeId = this.state.selectedIds[0]
const clonedShape = this.getShapeClone(selectedShapeId, info.target)
if (clonedShape) {
this.state.createShapes(clonedShape)
// Now start pointing the bounds, so that a user can start
// dragging to reposition if they wish.
this.pointedId = clonedShape.id
this.setStatus(Status.PointingClone)
}
}
}