Steve Ruiz
GitHub
commit
0bf450b01d
24 changed files with 476 additions and 417 deletions
|
|
@ -11,7 +11,9 @@ import RotateHandle from './rotate-handle'
|
|||
export default function Bounds(): JSX.Element {
|
||||
const isBrushing = useSelector((s) => s.isIn('brushSelecting'))
|
||||
|
||||
const isSelecting = useSelector((s) => s.isIn('selecting'))
|
||||
const shouldDisplay = useSelector((s) =>
|
||||
s.isInAny('selecting', 'selectPinching')
|
||||
)
|
||||
|
||||
const zoom = useSelector((s) => tld.getCurrentCamera(s.data).zoom)
|
||||
|
||||
|
|
@ -38,7 +40,7 @@ export default function Bounds(): JSX.Element {
|
|||
|
||||
if (!bounds) return null
|
||||
|
||||
if (!isSelecting) return null
|
||||
if (!shouldDisplay) return null
|
||||
|
||||
if (isSingleHandles) return null
|
||||
|
||||
|
|
|
|||
|
|
@ -1,47 +1,39 @@
|
|||
import { getShapeUtils } from 'state/shape-utils'
|
||||
import React from 'react'
|
||||
import { useSelector } from 'state'
|
||||
import tld from 'utils/tld'
|
||||
import { DotCircle, Handle } from './misc'
|
||||
import useShape from 'hooks/useShape'
|
||||
import useShapesToRender from 'hooks/useShapesToRender'
|
||||
import styled from 'styles'
|
||||
|
||||
export default function Defs(): JSX.Element {
|
||||
const shapeIdsToRender = useShapesToRender()
|
||||
|
||||
return (
|
||||
<defs>
|
||||
<DotCircle id="dot" r={4} />
|
||||
<Handle id="handle" r={4} />
|
||||
<ExpandDef />
|
||||
<ShadowDef />
|
||||
{shapeIdsToRender.map((id) => (
|
||||
<Def key={id} id={id} />
|
||||
))}
|
||||
<HoverDef />
|
||||
</defs>
|
||||
)
|
||||
}
|
||||
|
||||
function Def({ id }: { id: string }) {
|
||||
const shape = useShape(id)
|
||||
if (!shape) return null
|
||||
return getShapeUtils(shape).render(shape, { isEditing: false })
|
||||
}
|
||||
|
||||
function ExpandDef() {
|
||||
const zoom = useSelector((s) => tld.getCurrentCamera(s.data).zoom)
|
||||
return (
|
||||
<filter id="expand">
|
||||
<feMorphology operator="dilate" radius={2 / zoom} />
|
||||
<feMorphology operator="dilate" radius={0.5 / zoom} />
|
||||
</filter>
|
||||
)
|
||||
}
|
||||
|
||||
function ShadowDef() {
|
||||
function HoverDef() {
|
||||
return (
|
||||
<filter id="hover">
|
||||
<StyledShadow dx="0" dy="0" stdDeviation="1.2" floodOpacity="1" />
|
||||
<StyledShadow
|
||||
dx="2"
|
||||
dy="2"
|
||||
stdDeviation="0.5"
|
||||
floodOpacity="1"
|
||||
floodColor="blue"
|
||||
/>
|
||||
</filter>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,33 +1,121 @@
|
|||
import { useSelector } from 'state'
|
||||
import Shape from './shape'
|
||||
import HoveredShape from './hovered-shape'
|
||||
import usePageShapes from 'hooks/usePageShapes'
|
||||
import tld from 'utils/tld'
|
||||
import { Data, Shape, ShapeType } from 'types'
|
||||
import { getShapeUtils } from 'state/shape-utils'
|
||||
import { boundsCollide, boundsContain } from 'utils'
|
||||
import ShapeComponent from './shape'
|
||||
|
||||
/*
|
||||
On each state change, compare node ids of all shapes
|
||||
on the current page. Kind of expensive but only happens
|
||||
here; and still cheaper than any other pattern I've found.
|
||||
On each state change, populate a tree structure with all of
|
||||
the shapes that we need to render..
|
||||
*/
|
||||
|
||||
interface Node {
|
||||
shape: Shape
|
||||
children: Node[]
|
||||
isEditing: boolean
|
||||
isHovered: boolean
|
||||
isSelected: boolean
|
||||
isCurrentParent: boolean
|
||||
}
|
||||
|
||||
export default function Page(): JSX.Element {
|
||||
const showHovers = useSelector((s) =>
|
||||
s.isInAny('selecting', 'text', 'editingShape')
|
||||
// Get a tree of shapes to render
|
||||
const shapeTree = useSelector((s) => {
|
||||
// Get the shapes that fit into the current viewport
|
||||
|
||||
const viewport = tld.getViewport(s.data)
|
||||
|
||||
const shapesToShow = s.values.currentShapes.filter((shape) => {
|
||||
const shapeBounds = getShapeUtils(shape).getBounds(shape)
|
||||
|
||||
return (
|
||||
shape.type === ShapeType.Ray ||
|
||||
shape.type === ShapeType.Line ||
|
||||
boundsContain(viewport, shapeBounds) ||
|
||||
boundsCollide(viewport, shapeBounds)
|
||||
)
|
||||
})
|
||||
|
||||
// Should we allow shapes to be hovered?
|
||||
const allowHovers = s.isInAny('selecting', 'text', 'editingShape')
|
||||
|
||||
// Populate the shape tree
|
||||
const tree: Node[] = []
|
||||
|
||||
shapesToShow.forEach((shape) =>
|
||||
addToTree(s.data, s.values.selectedIds, allowHovers, tree, shape)
|
||||
)
|
||||
|
||||
const visiblePageShapeIds = usePageShapes()
|
||||
|
||||
const hoveredShapeId = useSelector((s) => {
|
||||
return visiblePageShapeIds.find((id) => id === s.data.hoveredId)
|
||||
return tree
|
||||
})
|
||||
|
||||
return (
|
||||
<g pointerEvents={showHovers ? 'all' : 'none'}>
|
||||
{showHovers && hoveredShapeId && (
|
||||
<HoveredShape key={hoveredShapeId} id={hoveredShapeId} />
|
||||
)}
|
||||
{visiblePageShapeIds.map((id) => (
|
||||
<Shape key={id} id={id} />
|
||||
<>
|
||||
{shapeTree.map((node) => (
|
||||
<ShapeNode key={node.shape.id} node={node} />
|
||||
))}
|
||||
</g>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
interface ShapeNodeProps {
|
||||
node: Node
|
||||
parentPoint?: number[]
|
||||
}
|
||||
|
||||
const ShapeNode = ({
|
||||
node: { shape, children, isEditing, isHovered, isSelected, isCurrentParent },
|
||||
}: ShapeNodeProps) => {
|
||||
return (
|
||||
<>
|
||||
<ShapeComponent
|
||||
shape={shape}
|
||||
isEditing={isEditing}
|
||||
isHovered={isHovered}
|
||||
isSelected={isSelected}
|
||||
isCurrentParent={isCurrentParent}
|
||||
/>
|
||||
{children.map((childNode) => (
|
||||
<ShapeNode key={childNode.shape.id} node={childNode} />
|
||||
))}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Populate the shape tree. This helper is recursive and only one call is needed.
|
||||
*
|
||||
* ### Example
|
||||
*
|
||||
*```ts
|
||||
* addDataToTree(data, selectedIds, allowHovers, branch, shape)
|
||||
*```
|
||||
*/
|
||||
function addToTree(
|
||||
data: Data,
|
||||
selectedIds: string[],
|
||||
allowHovers: boolean,
|
||||
branch: Node[],
|
||||
shape: Shape
|
||||
): void {
|
||||
const node = {
|
||||
shape,
|
||||
children: [],
|
||||
isHovered: data.hoveredId === shape.id,
|
||||
isCurrentParent: data.currentParentId === shape.id,
|
||||
isEditing: data.editingId === shape.id,
|
||||
isSelected: selectedIds.includes(shape.id),
|
||||
}
|
||||
|
||||
branch.push(node)
|
||||
|
||||
if (shape.children) {
|
||||
shape.children
|
||||
.map((id) => tld.getShape(data, id))
|
||||
.sort((a, b) => a.childIndex - b.childIndex)
|
||||
.forEach((shape) => {
|
||||
addToTree(data, selectedIds, allowHovers, node.children, shape)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,224 +1,112 @@
|
|||
import React, { useRef, memo, useEffect } from 'react'
|
||||
import state, { useSelector } from 'state'
|
||||
import styled from 'styles'
|
||||
import { getShapeUtils } from 'state/shape-utils'
|
||||
import { deepCompareArrays } from 'utils'
|
||||
import tld from 'utils/tld'
|
||||
import useShapeEvents from 'hooks/useShapeEvents'
|
||||
import useShape from 'hooks/useShape'
|
||||
import vec from 'utils/vec'
|
||||
import { getShapeStyle } from 'state/shape-styles'
|
||||
import { Shape as _Shape, ShapeType, TextShape } from 'types'
|
||||
import { getShapeUtils } from 'state/shape-utils'
|
||||
import { shallowEqual } from 'utils'
|
||||
import { memo, useRef } from 'react'
|
||||
|
||||
interface ShapeProps {
|
||||
id: string
|
||||
shape: _Shape
|
||||
isEditing: boolean
|
||||
isHovered: boolean
|
||||
isSelected: boolean
|
||||
isCurrentParent: boolean
|
||||
}
|
||||
|
||||
function Shape({ id }: ShapeProps): JSX.Element {
|
||||
const Shape = memo(
|
||||
({
|
||||
shape,
|
||||
isEditing,
|
||||
isHovered,
|
||||
isSelected,
|
||||
isCurrentParent,
|
||||
}: ShapeProps) => {
|
||||
const rGroup = useRef<SVGGElement>(null)
|
||||
const events = useShapeEvents(shape.id, isCurrentParent, rGroup)
|
||||
const utils = getShapeUtils(shape)
|
||||
|
||||
const isHidden = useSelector((s) => {
|
||||
const shape = tld.getShape(s.data, id)
|
||||
if (shape === undefined) return true
|
||||
return shape?.isHidden
|
||||
})
|
||||
|
||||
const children = useSelector((s) => {
|
||||
const shape = tld.getShape(s.data, id)
|
||||
if (shape === undefined) return []
|
||||
return shape?.children
|
||||
})
|
||||
|
||||
const strokeWidth = useSelector((s) => {
|
||||
const shape = tld.getShape(s.data, id)
|
||||
if (shape === undefined) return 0
|
||||
const style = getShapeStyle(shape?.style)
|
||||
return +style.strokeWidth
|
||||
})
|
||||
|
||||
const transform = useSelector((s) => {
|
||||
const shape = tld.getShape(s.data, id)
|
||||
if (shape === undefined) return ''
|
||||
const center = getShapeUtils(shape).getCenter(shape)
|
||||
const center = utils.getCenter(shape)
|
||||
const rotation = shape.rotation * (180 / Math.PI)
|
||||
const parentPoint = tld.getShape(s.data, shape.parentId)?.point || [0, 0]
|
||||
|
||||
return `
|
||||
translate(${vec.neg(parentPoint)})
|
||||
const transform = `
|
||||
rotate(${rotation}, ${center})
|
||||
translate(${shape.point})
|
||||
`
|
||||
})
|
||||
|
||||
const isCurrentParent = useSelector((s) => {
|
||||
return s.data.currentParentId === id
|
||||
})
|
||||
|
||||
const events = useShapeEvents(id, isCurrentParent, rGroup)
|
||||
|
||||
const shape = tld.getShape(state.data, id)
|
||||
|
||||
if (!shape) {
|
||||
console.warn('Could not find that shape:', id)
|
||||
return null
|
||||
}
|
||||
|
||||
// From here on, not reactive—if we're here, we can trust that the
|
||||
// shape in state is a shape with changes that we need to render.
|
||||
|
||||
const { isParent, isForeignObject, canStyleFill } = getShapeUtils(shape)
|
||||
|
||||
return (
|
||||
<StyledGroup
|
||||
id={id + '-group'}
|
||||
<g
|
||||
ref={rGroup}
|
||||
id={shape.id}
|
||||
transform={transform}
|
||||
isCurrentParent={isCurrentParent}
|
||||
filter={isHovered ? 'url(#expand)' : 'none'}
|
||||
{...events}
|
||||
>
|
||||
{isForeignObject ? (
|
||||
<ForeignObjectHover id={id} />
|
||||
{isEditing && shape.type === ShapeType.Text ? (
|
||||
<EditingTextShape shape={shape} />
|
||||
) : (
|
||||
<EventSoak
|
||||
as="use"
|
||||
href={'#' + id}
|
||||
strokeWidth={strokeWidth + 8}
|
||||
variant={canStyleFill ? 'filled' : 'hollow'}
|
||||
<RenderedShape
|
||||
shape={shape}
|
||||
isEditing={isEditing}
|
||||
isHovered={isHovered}
|
||||
isSelected={isSelected}
|
||||
isCurrentParent={isCurrentParent}
|
||||
/>
|
||||
)}
|
||||
|
||||
{!isHidden &&
|
||||
(isForeignObject ? (
|
||||
<ForeignObjectRender id={id} />
|
||||
) : (
|
||||
<RealShape id={id} isParent={isParent} strokeWidth={strokeWidth} />
|
||||
))}
|
||||
|
||||
{isParent &&
|
||||
children.map((shapeId) => <Shape key={shapeId} id={shapeId} />)}
|
||||
</StyledGroup>
|
||||
</g>
|
||||
)
|
||||
},
|
||||
shallowEqual
|
||||
)
|
||||
|
||||
export default Shape
|
||||
|
||||
interface RenderedShapeProps {
|
||||
shape: _Shape
|
||||
isEditing: boolean
|
||||
isHovered: boolean
|
||||
isSelected: boolean
|
||||
isCurrentParent: boolean
|
||||
}
|
||||
|
||||
export default memo(Shape)
|
||||
|
||||
interface RealShapeProps {
|
||||
id: string
|
||||
isParent: boolean
|
||||
strokeWidth: number
|
||||
const RenderedShape = memo(
|
||||
function RenderedShape({
|
||||
shape,
|
||||
isEditing,
|
||||
isHovered,
|
||||
isSelected,
|
||||
isCurrentParent,
|
||||
}: RenderedShapeProps) {
|
||||
return getShapeUtils(shape).render(shape, {
|
||||
isEditing,
|
||||
isHovered,
|
||||
isSelected,
|
||||
isCurrentParent,
|
||||
})
|
||||
},
|
||||
(prev, next) => {
|
||||
if (
|
||||
prev.isEditing !== next.isEditing ||
|
||||
prev.isHovered !== next.isHovered ||
|
||||
prev.isSelected !== next.isSelected ||
|
||||
prev.isCurrentParent !== next.isCurrentParent
|
||||
) {
|
||||
return false
|
||||
}
|
||||
|
||||
const RealShape = memo(function RealShape({
|
||||
id,
|
||||
isParent,
|
||||
strokeWidth,
|
||||
}: RealShapeProps) {
|
||||
return (
|
||||
<StyledShape
|
||||
as="use"
|
||||
data-shy={isParent}
|
||||
href={'#' + id}
|
||||
strokeWidth={strokeWidth}
|
||||
/>
|
||||
)
|
||||
})
|
||||
|
||||
const ForeignObjectHover = memo(function ForeignObjectHover({
|
||||
id,
|
||||
}: {
|
||||
id: string
|
||||
}) {
|
||||
const size = useSelector((s) => {
|
||||
const shape = tld.getPage(s.data).shapes[id]
|
||||
if (shape === undefined) return [0, 0]
|
||||
const bounds = getShapeUtils(shape).getBounds(shape)
|
||||
|
||||
return [bounds.width, bounds.height]
|
||||
}, deepCompareArrays)
|
||||
|
||||
return (
|
||||
<EventSoak
|
||||
as="rect"
|
||||
width={size[0]}
|
||||
height={size[1]}
|
||||
strokeWidth={1.5}
|
||||
variant={'ghost'}
|
||||
/>
|
||||
)
|
||||
})
|
||||
|
||||
const ForeignObjectRender = memo(function ForeignObjectRender({
|
||||
id,
|
||||
}: {
|
||||
id: string
|
||||
}) {
|
||||
const shape = useShape(id)
|
||||
|
||||
const rFocusable = useRef<HTMLTextAreaElement>(null)
|
||||
|
||||
const isEditing = useSelector((s) => s.data.editingId === id)
|
||||
|
||||
useEffect(() => {
|
||||
if (isEditing) {
|
||||
setTimeout(() => {
|
||||
const elm = rFocusable.current
|
||||
if (!elm) return
|
||||
elm.focus()
|
||||
}, 0)
|
||||
if (next.shape !== prev.shape) {
|
||||
return !getShapeUtils(next.shape).shouldRender(next.shape, prev.shape)
|
||||
}
|
||||
}, [isEditing])
|
||||
|
||||
if (shape === undefined) return null
|
||||
return true
|
||||
}
|
||||
)
|
||||
|
||||
return getShapeUtils(shape).render(shape, { isEditing, ref: rFocusable })
|
||||
})
|
||||
|
||||
const StyledShape = styled('path', {
|
||||
strokeLinecap: 'round',
|
||||
strokeLinejoin: 'round',
|
||||
pointerEvents: 'none',
|
||||
})
|
||||
|
||||
const EventSoak = styled('use', {
|
||||
opacity: 0,
|
||||
strokeLinecap: 'round',
|
||||
strokeLinejoin: 'round',
|
||||
variants: {
|
||||
variant: {
|
||||
ghost: {
|
||||
pointerEvents: 'all',
|
||||
filter: 'none',
|
||||
opacity: 0,
|
||||
},
|
||||
hollow: {
|
||||
pointerEvents: 'stroke',
|
||||
},
|
||||
filled: {
|
||||
pointerEvents: 'all',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
const StyledGroup = styled('g', {
|
||||
outline: 'none',
|
||||
|
||||
'& > *[data-shy=true]': {
|
||||
opacity: 0,
|
||||
},
|
||||
|
||||
'&:hover': {
|
||||
'& > *[data-shy=true]': {
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
|
||||
variants: {
|
||||
isCurrentParent: {
|
||||
true: {
|
||||
'& > *[data-shy=true]': {
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
function EditingTextShape({ shape }: { shape: TextShape }) {
|
||||
const ref = useRef<HTMLTextAreaElement>(null)
|
||||
|
||||
return getShapeUtils(shape).render(shape, {
|
||||
ref,
|
||||
isEditing: true,
|
||||
isHovered: false,
|
||||
isSelected: false,
|
||||
isCurrentParent: false,
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
|
||||
import { MutableRefObject, useCallback } from 'react'
|
||||
import { MutableRefObject, useCallback, useEffect } from 'react'
|
||||
import state from 'state'
|
||||
import {
|
||||
fastBrushSelect,
|
||||
|
|
@ -74,6 +74,19 @@ export default function useCanvasEvents(
|
|||
// }
|
||||
}, [])
|
||||
|
||||
// Send event on iOS when a user presses the "Done" key while editing a text element
|
||||
useEffect(() => {
|
||||
function handleFocusOut() {
|
||||
state.send('BLURRED_EDITING_SHAPE')
|
||||
}
|
||||
|
||||
document.addEventListener('focusout', handleFocusOut)
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('focusout', handleFocusOut)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return {
|
||||
onPointerDown: handlePointerDown,
|
||||
onPointerMove: handlePointerMove,
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { useEffect } from 'react'
|
||||
import state, { useSelector } from 'state'
|
||||
import { getShapeUtils } from 'state/shape-utils'
|
||||
import { PageState, Bounds, ShapeType } from 'types'
|
||||
import { PageState, Bounds, ShapeType, Shape } from 'types'
|
||||
import {
|
||||
boundsCollide,
|
||||
boundsContain,
|
||||
|
|
@ -12,7 +12,7 @@ import tld from 'utils/tld'
|
|||
|
||||
const viewportCache = new WeakMap<PageState, Bounds>()
|
||||
|
||||
export default function usePageShapes(): string[] {
|
||||
export default function usePageShapes(): Shape[] {
|
||||
// Reset the viewport cache when the window resizes
|
||||
useEffect(() => {
|
||||
const handleResize = debounce(() => state.send('RESIZED_WINDOW'), 32)
|
||||
|
|
@ -35,8 +35,7 @@ export default function usePageShapes(): string[] {
|
|||
|
||||
const viewport = viewportCache.get(pageState)
|
||||
|
||||
const shapesToShow = s.values.currentShapes
|
||||
.filter((shape) => {
|
||||
const shapesToShow = s.values.currentShapes.filter((shape) => {
|
||||
if (shape.type === ShapeType.Ray || shape.type === ShapeType.Line) {
|
||||
return true
|
||||
}
|
||||
|
|
@ -47,7 +46,6 @@ export default function usePageShapes(): string[] {
|
|||
boundsCollide(viewport, shapeBounds)
|
||||
)
|
||||
})
|
||||
.map((shape) => shape.id)
|
||||
|
||||
return shapesToShow
|
||||
}, deepCompareArrays)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import Command from './command'
|
||||
import history from '../history'
|
||||
import { Data } from 'types'
|
||||
import tld from 'utils/tld'
|
||||
import storage from 'state/storage'
|
||||
|
||||
export default function changePage(data: Data, toPageId: string): void {
|
||||
|
|
@ -17,11 +18,15 @@ export default function changePage(data: Data, toPageId: string): void {
|
|||
storage.loadPage(data, data.document.id, toPageId)
|
||||
data.currentPageId = toPageId
|
||||
data.currentParentId = toPageId
|
||||
|
||||
tld.setZoomCSS(tld.getPageState(data).camera.zoom)
|
||||
},
|
||||
undo(data) {
|
||||
storage.loadPage(data, data.document.id, fromPageId)
|
||||
data.currentPageId = fromPageId
|
||||
data.currentParentId = fromPageId
|
||||
|
||||
tld.setZoomCSS(tld.getPageState(data).camera.zoom)
|
||||
},
|
||||
})
|
||||
)
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import Command from './command'
|
|||
import history from '../history'
|
||||
import { Data, Page, PageState } from 'types'
|
||||
import { uniqueId } from 'utils/utils'
|
||||
import tld from 'utils/tld'
|
||||
import storage from 'state/storage'
|
||||
|
||||
export default function createPage(data: Data, goToPage = true): void {
|
||||
|
|
@ -25,6 +26,7 @@ export default function createPage(data: Data, goToPage = true): void {
|
|||
|
||||
storage.savePage(data, data.document.id, page.id)
|
||||
storage.saveDocumentToLocalStorage(data)
|
||||
tld.setZoomCSS(tld.getPageState(data).camera.zoom)
|
||||
},
|
||||
undo(data) {
|
||||
const { page, currentPageId } = snapshot
|
||||
|
|
@ -32,6 +34,7 @@ export default function createPage(data: Data, goToPage = true): void {
|
|||
delete data.pageStates[page.id]
|
||||
data.currentPageId = currentPageId
|
||||
storage.saveDocumentToLocalStorage(data)
|
||||
tld.setZoomCSS(tld.getPageState(data).camera.zoom)
|
||||
},
|
||||
})
|
||||
)
|
||||
|
|
|
|||
|
|
@ -87,6 +87,8 @@ export default function moveToPageCommand(data: Data, newPageId: string): void {
|
|||
|
||||
// Move to the new page
|
||||
data.currentPageId = toPageId
|
||||
|
||||
tld.setZoomCSS(tld.getPageState(data).camera.zoom)
|
||||
},
|
||||
undo(data) {
|
||||
const fromPageId = newPageId
|
||||
|
|
@ -141,6 +143,8 @@ export default function moveToPageCommand(data: Data, newPageId: string): void {
|
|||
tld.setSelectedIds(data, [...selectedIds])
|
||||
|
||||
data.currentPageId = toPageId
|
||||
|
||||
tld.setZoomCSS(tld.getPageState(data).camera.zoom)
|
||||
},
|
||||
})
|
||||
)
|
||||
|
|
|
|||
|
|
@ -90,6 +90,8 @@ export function fastZoomUpdate(point: number[], delta: number): void {
|
|||
|
||||
data.pageStates[data.currentPageId].camera = deepClone(camera)
|
||||
|
||||
tld.setZoomCSS(camera.zoom)
|
||||
|
||||
state.forceData(freeze(data))
|
||||
}
|
||||
|
||||
|
|
@ -116,6 +118,8 @@ export function fastPinchCamera(
|
|||
|
||||
data.pageStates[data.currentPageId] = { ...pageState }
|
||||
|
||||
tld.setZoomCSS(camera.zoom)
|
||||
|
||||
state.forceData(freeze(data))
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -77,5 +77,5 @@ export const defaultStyle: ShapeStyles = {
|
|||
color: ColorStyle.Black,
|
||||
size: SizeStyle.Medium,
|
||||
isFilled: false,
|
||||
dash: DashStyle.Solid,
|
||||
dash: DashStyle.Draw,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ import {
|
|||
getBoundsFromPoints,
|
||||
translateBounds,
|
||||
pointInBounds,
|
||||
pointInCircle,
|
||||
circleFromThreePoints,
|
||||
isAngleBetween,
|
||||
getPerfectDashProps,
|
||||
|
|
@ -103,7 +102,7 @@ const arrow = registerShapeUtils<ArrowShape>({
|
|||
},
|
||||
|
||||
render(shape) {
|
||||
const { id, bend, handles, style } = shape
|
||||
const { bend, handles, style } = shape
|
||||
const { start, end, bend: _bend } = handles
|
||||
|
||||
const isStraightLine =
|
||||
|
|
@ -146,11 +145,11 @@ const arrow = registerShapeUtils<ArrowShape>({
|
|||
<path
|
||||
d={path}
|
||||
fill="none"
|
||||
stroke="transparent"
|
||||
strokeWidth={Math.max(8, strokeWidth * 2)}
|
||||
strokeDasharray="none"
|
||||
strokeDashoffset="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d={path}
|
||||
|
|
@ -160,6 +159,7 @@ const arrow = registerShapeUtils<ArrowShape>({
|
|||
strokeDasharray={strokeDasharray}
|
||||
strokeDashoffset={strokeDashoffset}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</>
|
||||
)
|
||||
|
|
@ -206,6 +206,7 @@ const arrow = registerShapeUtils<ArrowShape>({
|
|||
strokeDasharray="none"
|
||||
strokeDashoffset="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d={path}
|
||||
|
|
@ -215,22 +216,28 @@ const arrow = registerShapeUtils<ArrowShape>({
|
|||
strokeDasharray={strokeDasharray}
|
||||
strokeDashoffset={strokeDashoffset}
|
||||
strokeLinecap="round"
|
||||
></path>
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const sw = strokeWidth * 1.618
|
||||
|
||||
return (
|
||||
<g id={id}>
|
||||
<g pointerEvents="all">
|
||||
{shaftPath}
|
||||
{shape.decorations.start === Decoration.Arrow && (
|
||||
<path
|
||||
d={getArrowHeadPath(shape, start.point, insetStart)}
|
||||
fill="none"
|
||||
stroke={styles.stroke}
|
||||
strokeWidth={strokeWidth * 1.618}
|
||||
strokeWidth={sw}
|
||||
strokeDashoffset="none"
|
||||
strokeDasharray="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
pointerEvents="stroke"
|
||||
/>
|
||||
)}
|
||||
{shape.decorations.end === Decoration.Arrow && (
|
||||
|
|
@ -238,9 +245,12 @@ const arrow = registerShapeUtils<ArrowShape>({
|
|||
d={getArrowHeadPath(shape, end.point, insetEnd)}
|
||||
fill="none"
|
||||
stroke={styles.stroke}
|
||||
strokeWidth={strokeWidth * 1.618}
|
||||
strokeWidth={sw}
|
||||
strokeDashoffset="none"
|
||||
strokeDasharray="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
pointerEvents="stroke"
|
||||
/>
|
||||
)}
|
||||
</g>
|
||||
|
|
@ -302,21 +312,8 @@ const arrow = registerShapeUtils<ArrowShape>({
|
|||
return vec.add(shape.point, vec.med(start.point, end.point))
|
||||
},
|
||||
|
||||
hitTest(shape, point) {
|
||||
const { start, end } = shape.handles
|
||||
if (shape.bend === 0) {
|
||||
return (
|
||||
vec.distanceToLineSegment(
|
||||
start.point,
|
||||
end.point,
|
||||
vec.sub(point, shape.point)
|
||||
) < 4
|
||||
)
|
||||
}
|
||||
|
||||
const [cx, cy, r] = getCtp(shape)
|
||||
|
||||
return !pointInCircle(point, vec.add(shape.point, [cx, cy]), r - 4)
|
||||
hitTest() {
|
||||
return true
|
||||
},
|
||||
|
||||
hitTestBounds(this, shape, brushBounds) {
|
||||
|
|
|
|||
|
|
@ -20,13 +20,9 @@ const dot = registerShapeUtils<DotShape>({
|
|||
},
|
||||
|
||||
render(shape) {
|
||||
const { id } = shape
|
||||
|
||||
const styles = getShapeStyle(shape.style)
|
||||
|
||||
return (
|
||||
<use id={id} href="#dot" stroke={styles.stroke} fill={styles.stroke} />
|
||||
)
|
||||
return <use href="#dot" stroke={styles.stroke} fill={styles.stroke} />
|
||||
},
|
||||
|
||||
getBounds(shape) {
|
||||
|
|
|
|||
|
|
@ -40,29 +40,32 @@ const draw = registerShapeUtils<DrawShape>({
|
|||
return shape.points !== prev.points || shape.style !== prev.style
|
||||
},
|
||||
|
||||
render(shape) {
|
||||
const { id, points, style } = shape
|
||||
render(shape, { isHovered }) {
|
||||
const { points, style } = shape
|
||||
|
||||
const styles = getShapeStyle(style)
|
||||
|
||||
const strokeWidth = +styles.strokeWidth
|
||||
|
||||
const shouldFill =
|
||||
style.isFilled &&
|
||||
points.length > 3 &&
|
||||
vec.dist(points[0], points[points.length - 1]) < +styles.strokeWidth * 2
|
||||
|
||||
// For very short lines, draw a point instead of a line
|
||||
|
||||
if (points.length > 0 && points.length < 3) {
|
||||
const sw = strokeWidth * 0.618
|
||||
|
||||
return (
|
||||
<g id={id}>
|
||||
<circle
|
||||
r={strokeWidth * 0.618}
|
||||
fill={styles.stroke}
|
||||
stroke={styles.stroke}
|
||||
strokeWidth={styles.strokeWidth}
|
||||
strokeWidth={sw}
|
||||
pointerEvents="all"
|
||||
filter={isHovered ? 'url(#expand)' : 'none'}
|
||||
/>
|
||||
</g>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -78,13 +81,15 @@ const draw = registerShapeUtils<DrawShape>({
|
|||
})
|
||||
|
||||
return (
|
||||
<g id={id}>
|
||||
<>
|
||||
{shouldFill && (
|
||||
<path
|
||||
d={polygonPathData}
|
||||
strokeWidth="0"
|
||||
stroke="none"
|
||||
fill={styles.fill}
|
||||
strokeLinejoin="round"
|
||||
strokeLinecap="round"
|
||||
pointerEvents="fill"
|
||||
/>
|
||||
)}
|
||||
<path
|
||||
|
|
@ -92,8 +97,12 @@ const draw = registerShapeUtils<DrawShape>({
|
|||
fill={styles.stroke}
|
||||
stroke={styles.stroke}
|
||||
strokeWidth={strokeWidth}
|
||||
strokeLinejoin="round"
|
||||
strokeLinecap="round"
|
||||
pointerEvents="all"
|
||||
filter={isHovered ? 'url(#expand)' : 'none'}
|
||||
/>
|
||||
</g>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -119,25 +128,32 @@ const draw = registerShapeUtils<DrawShape>({
|
|||
|
||||
const path = simplePathCache.get(points)
|
||||
|
||||
const sw = strokeWidth * 1.618
|
||||
|
||||
return (
|
||||
<g id={id}>
|
||||
{style.dash !== DashStyle.Solid && (
|
||||
<path
|
||||
d={path}
|
||||
fill="transparent"
|
||||
stroke="transparent"
|
||||
strokeWidth={strokeWidth * 2}
|
||||
/>
|
||||
)}
|
||||
<>
|
||||
<path
|
||||
d={path}
|
||||
fill={shouldFill ? styles.fill : 'none'}
|
||||
stroke="transparent"
|
||||
strokeWidth={Math.min(4, strokeWidth * 2)}
|
||||
strokeLinejoin="round"
|
||||
strokeLinecap="round"
|
||||
pointerEvents={shouldFill ? 'all' : 'stroke'}
|
||||
/>
|
||||
<path
|
||||
d={path}
|
||||
fill="transparent"
|
||||
stroke={styles.stroke}
|
||||
strokeWidth={strokeWidth * 1.618}
|
||||
strokeWidth={sw}
|
||||
strokeDasharray={strokeDasharray}
|
||||
strokeDashoffset={strokeDashoffset}
|
||||
strokeLinejoin="round"
|
||||
strokeLinecap="round"
|
||||
pointerEvents="stroke"
|
||||
filter={isHovered ? 'url(#expand)' : 'none'}
|
||||
/>
|
||||
</g>
|
||||
</>
|
||||
)
|
||||
},
|
||||
|
||||
|
|
@ -160,13 +176,8 @@ const draw = registerShapeUtils<DrawShape>({
|
|||
return getBoundsCenter(this.getBounds(shape))
|
||||
},
|
||||
|
||||
hitTest(shape, point) {
|
||||
const pt = vec.sub(point, shape.point)
|
||||
const min = +getShapeStyle(shape.style).strokeWidth
|
||||
return shape.points.some(
|
||||
(curr, i) =>
|
||||
i > 0 && vec.distanceToLineSegment(shape.points[i - 1], curr, pt) < min
|
||||
)
|
||||
hitTest() {
|
||||
return true
|
||||
},
|
||||
|
||||
hitTestBounds(this, shape, brushBounds) {
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ const ellipse = registerShapeUtils<EllipseShape>({
|
|||
},
|
||||
|
||||
render(shape) {
|
||||
const { id, radiusX, radiusY, style } = shape
|
||||
const { radiusX, radiusY, style } = shape
|
||||
const styles = getShapeStyle(style)
|
||||
const strokeWidth = +styles.strokeWidth
|
||||
|
||||
|
|
@ -58,25 +58,26 @@ const ellipse = registerShapeUtils<EllipseShape>({
|
|||
const path = pathCache.get(shape)
|
||||
|
||||
return (
|
||||
<g id={id}>
|
||||
<>
|
||||
{style.isFilled && (
|
||||
<ellipse
|
||||
id={id}
|
||||
cx={radiusX}
|
||||
cy={radiusY}
|
||||
rx={rx}
|
||||
ry={ry}
|
||||
stroke="none"
|
||||
fill={styles.fill}
|
||||
pointerEvents="fill"
|
||||
/>
|
||||
)}
|
||||
<path
|
||||
d={path}
|
||||
fill={styles.stroke}
|
||||
stroke={styles.stroke}
|
||||
strokeWidth={styles.strokeWidth}
|
||||
strokeWidth={strokeWidth}
|
||||
pointerEvents="all"
|
||||
/>
|
||||
</g>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -92,21 +93,21 @@ const ellipse = registerShapeUtils<EllipseShape>({
|
|||
4
|
||||
)
|
||||
|
||||
const sw = strokeWidth * 1.618
|
||||
|
||||
return (
|
||||
<g id={id}>
|
||||
<ellipse
|
||||
id={id}
|
||||
cx={radiusX}
|
||||
cy={radiusY}
|
||||
rx={rx}
|
||||
ry={ry}
|
||||
fill={styles.fill}
|
||||
stroke={styles.stroke}
|
||||
strokeWidth={strokeWidth * 1.618}
|
||||
strokeWidth={sw}
|
||||
strokeDasharray={strokeDasharray}
|
||||
strokeDashoffset={strokeDashoffset}
|
||||
pointerEvents={style.isFilled ? 'all' : 'stroke'}
|
||||
/>
|
||||
</g>
|
||||
)
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -26,11 +26,10 @@ const group = registerShapeUtils<GroupShape>({
|
|||
},
|
||||
|
||||
render(shape) {
|
||||
const { id, size } = shape
|
||||
const { size } = shape
|
||||
|
||||
return (
|
||||
<StyledGroupShape
|
||||
id={id}
|
||||
width={size[0]}
|
||||
height={size[1]}
|
||||
data-shy={true}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ const line = registerShapeUtils<LineShape>({
|
|||
return shape.direction !== prev.direction || shape.style !== prev.style
|
||||
},
|
||||
|
||||
render(shape) {
|
||||
render(shape, { isHovered }) {
|
||||
const { id, direction } = shape
|
||||
const [x1, y1] = vec.add([0, 0], vec.mul(direction, 10000))
|
||||
const [x2, y2] = vec.sub([0, 0], vec.mul(direction, 10000))
|
||||
|
|
@ -34,7 +34,7 @@ const line = registerShapeUtils<LineShape>({
|
|||
const styles = getShapeStyle(shape.style)
|
||||
|
||||
return (
|
||||
<g id={id}>
|
||||
<g id={id} filter={isHovered ? 'url(#expand)' : 'none'}>
|
||||
<ThinLine x1={x1} y1={y1} x2={x2} y2={y2} stroke={styles.stroke} />
|
||||
<circle r={4} fill="transparent" />
|
||||
<use href="#dot" fill="black" />
|
||||
|
|
|
|||
|
|
@ -29,17 +29,19 @@ const polyline = registerShapeUtils<PolylineShape>({
|
|||
return shape.points !== prev.points || shape.style !== prev.style
|
||||
},
|
||||
render(shape) {
|
||||
const { id, points } = shape
|
||||
const { points, style } = shape
|
||||
|
||||
const styles = getShapeStyle(shape.style)
|
||||
const styles = getShapeStyle(style)
|
||||
|
||||
return (
|
||||
<polyline
|
||||
id={id}
|
||||
points={points.toString()}
|
||||
stroke={styles.stroke}
|
||||
strokeWidth={styles.strokeWidth}
|
||||
strokeWidth={styles.strokeWidth * 1.618}
|
||||
fill={shape.style.isFilled ? styles.fill : 'none'}
|
||||
pointerEvents={style.isFilled ? 'all' : 'stroke'}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
)
|
||||
},
|
||||
|
|
@ -61,19 +63,8 @@ const polyline = registerShapeUtils<PolylineShape>({
|
|||
return [bounds.minX + bounds.width / 2, bounds.minY + bounds.height / 2]
|
||||
},
|
||||
|
||||
hitTest(shape, point) {
|
||||
const pt = vec.sub(point, shape.point)
|
||||
let prev = shape.points[0]
|
||||
|
||||
for (let i = 1; i < shape.points.length; i++) {
|
||||
const curr = shape.points[i]
|
||||
if (vec.distanceToLineSegment(prev, curr, pt) < 4) {
|
||||
hitTest() {
|
||||
return true
|
||||
}
|
||||
prev = curr
|
||||
}
|
||||
|
||||
return false
|
||||
},
|
||||
|
||||
hitTestBounds(this, shape, brushBounds) {
|
||||
|
|
@ -125,7 +116,7 @@ const polyline = registerShapeUtils<PolylineShape>({
|
|||
|
||||
canTransform: true,
|
||||
canChangeAspectRatio: true,
|
||||
canStyleFill: false,
|
||||
canStyleFill: true,
|
||||
})
|
||||
|
||||
export default polyline
|
||||
|
|
|
|||
|
|
@ -26,18 +26,18 @@ const ray = registerShapeUtils<RayShape>({
|
|||
return shape.direction !== prev.direction || shape.style !== prev.style
|
||||
},
|
||||
render(shape) {
|
||||
const { id, direction } = shape
|
||||
const { direction } = shape
|
||||
|
||||
const styles = getShapeStyle(shape.style)
|
||||
|
||||
const [x2, y2] = vec.add([0, 0], vec.mul(direction, 10000))
|
||||
|
||||
return (
|
||||
<g id={id}>
|
||||
<>
|
||||
<ThinLine x1={0} y1={0} x2={x2} y2={y2} stroke={styles.stroke} />
|
||||
<circle r={4} fill="transparent" />
|
||||
<use href="#dot" />
|
||||
</g>
|
||||
</>
|
||||
)
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ const rectangle = registerShapeUtils<RectangleShape>({
|
|||
return shape.size !== prev.size || shape.style !== prev.style
|
||||
},
|
||||
|
||||
render(shape) {
|
||||
render(shape, { isHovered }) {
|
||||
const { id, size, radius, style } = shape
|
||||
const styles = getShapeStyle(style)
|
||||
const strokeWidth = +styles.strokeWidth
|
||||
|
|
@ -39,7 +39,8 @@ const rectangle = registerShapeUtils<RectangleShape>({
|
|||
})
|
||||
|
||||
return (
|
||||
<g id={id}>
|
||||
<>
|
||||
{style.isFilled && (
|
||||
<rect
|
||||
rx={radius}
|
||||
ry={radius}
|
||||
|
|
@ -51,13 +52,16 @@ const rectangle = registerShapeUtils<RectangleShape>({
|
|||
fill={styles.fill}
|
||||
stroke={styles.stroke}
|
||||
/>
|
||||
)}
|
||||
<path
|
||||
d={pathData}
|
||||
fill={styles.stroke}
|
||||
stroke={styles.stroke}
|
||||
strokeWidth={styles.strokeWidth}
|
||||
filter={isHovered ? 'url(#expand)' : 'none'}
|
||||
pointerEvents={style.isFilled ? 'all' : 'stroke'}
|
||||
/>
|
||||
</g>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -97,17 +101,21 @@ const rectangle = registerShapeUtils<RectangleShape>({
|
|||
})
|
||||
|
||||
return (
|
||||
<g id={id}>
|
||||
<>
|
||||
<rect
|
||||
x={sw / 2}
|
||||
y={sw / 2}
|
||||
width={w}
|
||||
height={h}
|
||||
fill={styles.fill}
|
||||
stroke="none"
|
||||
stroke="transparent"
|
||||
strokeWidth={sw}
|
||||
pointerEvents={style.isFilled ? 'all' : 'stroke'}
|
||||
/>
|
||||
<g filter={isHovered ? 'url(#expand)' : 'none'} pointerEvents="stroke">
|
||||
{paths}
|
||||
</g>
|
||||
</>
|
||||
)
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { uniqueId, isMobile, getFromCache } from 'utils/utils'
|
||||
import { uniqueId, getFromCache } from 'utils/utils'
|
||||
import vec from 'utils/vec'
|
||||
import TextAreaUtils from 'utils/text-area'
|
||||
import { TextShape, ShapeType } from 'types'
|
||||
|
|
@ -106,7 +106,13 @@ const text = registerShapeUtils<TextShape>({
|
|||
}
|
||||
}
|
||||
|
||||
function handleBlur() {
|
||||
function handleBlur(e: React.FocusEvent<HTMLTextAreaElement>) {
|
||||
if (isEditing) {
|
||||
e.currentTarget.focus()
|
||||
e.currentTarget.select()
|
||||
return
|
||||
}
|
||||
|
||||
setTimeout(() => state.send('BLURRED_EDITING_SHAPE', { id }), 0)
|
||||
}
|
||||
|
||||
|
|
@ -115,22 +121,18 @@ const text = registerShapeUtils<TextShape>({
|
|||
state.send('FOCUSED_EDITING_SHAPE', { id })
|
||||
}
|
||||
|
||||
function handlePointerDown(e: React.PointerEvent<HTMLTextAreaElement>) {
|
||||
if (e.currentTarget.selectionEnd !== 0) {
|
||||
e.currentTarget.selectionEnd = 0
|
||||
function handlePointerDown() {
|
||||
if (ref.current.selectionEnd !== 0) {
|
||||
ref.current.selectionEnd = 0
|
||||
}
|
||||
}
|
||||
|
||||
const fontSize = getFontSize(shape.style.size) * shape.scale
|
||||
const lineHeight = fontSize * 1.4
|
||||
|
||||
if (ref === undefined) {
|
||||
throw Error('This component should receive a ref.')
|
||||
}
|
||||
|
||||
if (!isEditing) {
|
||||
return (
|
||||
<g id={id} pointerEvents="none">
|
||||
<>
|
||||
{text.split('\n').map((str, i) => (
|
||||
<text
|
||||
key={i}
|
||||
|
|
@ -138,13 +140,13 @@ const text = registerShapeUtils<TextShape>({
|
|||
y={4 + fontSize / 2 + i * lineHeight}
|
||||
fontFamily="Verveine Regular"
|
||||
fontStyle="normal"
|
||||
fontWeight="regular"
|
||||
fontWeight="500"
|
||||
fontSize={fontSize}
|
||||
width={bounds.width}
|
||||
height={bounds.height}
|
||||
fill={styles.stroke}
|
||||
color={styles.stroke}
|
||||
stroke={styles.stroke}
|
||||
stroke="none"
|
||||
xmlSpace="preserve"
|
||||
dominantBaseline="mathematical"
|
||||
alignmentBaseline="mathematical"
|
||||
|
|
@ -152,15 +154,20 @@ const text = registerShapeUtils<TextShape>({
|
|||
{str}
|
||||
</text>
|
||||
))}
|
||||
</g>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
if (ref === undefined) {
|
||||
throw Error('This component should receive a ref when editing.')
|
||||
}
|
||||
|
||||
return (
|
||||
<foreignObject
|
||||
id={id}
|
||||
width={bounds.width}
|
||||
height={bounds.height}
|
||||
pointerEvents="none"
|
||||
onPointerDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
<StyledTextArea
|
||||
ref={ref as React.RefObject<HTMLTextAreaElement>}
|
||||
|
|
@ -177,7 +184,7 @@ const text = registerShapeUtils<TextShape>({
|
|||
autoSave="false"
|
||||
placeholder=""
|
||||
color={styles.stroke}
|
||||
autoFocus={!!isMobile()}
|
||||
autoFocus={true}
|
||||
onFocus={handleFocus}
|
||||
onBlur={handleBlur}
|
||||
onKeyDown={handleKeyDown}
|
||||
|
|
@ -287,6 +294,7 @@ const StyledTextArea = styled('textarea', {
|
|||
minWidth: 1,
|
||||
lineHeight: 1.4,
|
||||
outline: 0,
|
||||
fontWeight: '500',
|
||||
backgroundColor: '$boundsBg',
|
||||
overflow: 'hidden',
|
||||
pointerEvents: 'all',
|
||||
|
|
|
|||
|
|
@ -663,16 +663,8 @@ const state = createState({
|
|||
onExit: ['completeSession', 'clearEditingId'],
|
||||
on: {
|
||||
EDITED_SHAPE: { do: 'updateEditSession' },
|
||||
BLURRED_EDITING_SHAPE: [
|
||||
{ unless: 'isEditingShape' },
|
||||
POINTED_SHAPE: [
|
||||
{
|
||||
get: 'editingShape',
|
||||
if: 'shouldDeleteShape',
|
||||
do: ['cancelSession', 'deleteSelection'],
|
||||
},
|
||||
{ to: 'selecting' },
|
||||
],
|
||||
POINTED_SHAPE: {
|
||||
unless: 'isPointingEditingShape',
|
||||
if: 'isPointingTextShape',
|
||||
do: [
|
||||
|
|
@ -685,12 +677,31 @@ const state = createState({
|
|||
'startEditSession',
|
||||
],
|
||||
},
|
||||
CANCELLED: [
|
||||
],
|
||||
BLURRED_EDITING_SHAPE: [
|
||||
{
|
||||
unless: 'isEditingShape',
|
||||
get: 'editingShape',
|
||||
if: 'shouldDeleteShape',
|
||||
do: 'breakSession',
|
||||
else: 'cancelSession',
|
||||
do: ['cancelSession', 'deleteSelection'],
|
||||
},
|
||||
{ to: 'selecting' },
|
||||
],
|
||||
POINTED_CANVAS: [
|
||||
{
|
||||
unless: 'isEditingShape',
|
||||
get: 'editingShape',
|
||||
if: 'shouldDeleteShape',
|
||||
do: ['cancelSession', 'deleteSelection'],
|
||||
},
|
||||
{ to: 'selecting' },
|
||||
],
|
||||
CANCELLED: [
|
||||
{
|
||||
unless: 'isEditingShape',
|
||||
get: 'editingShape',
|
||||
if: 'shouldDeleteShape',
|
||||
do: ['cancelSession', 'deleteSelection'],
|
||||
},
|
||||
{ to: 'selecting' },
|
||||
],
|
||||
|
|
|
|||
7
types.ts
7
types.ts
|
|
@ -607,8 +607,11 @@ export interface ShapeUtility<K extends Shape> {
|
|||
render(
|
||||
this: ShapeUtility<K>,
|
||||
shape: K,
|
||||
info: {
|
||||
isEditing: boolean
|
||||
info?: {
|
||||
isEditing?: boolean
|
||||
isHovered?: boolean
|
||||
isSelected?: boolean
|
||||
isCurrentParent?: boolean
|
||||
ref?: React.MutableRefObject<HTMLTextAreaElement>
|
||||
}
|
||||
): JSX.Element
|
||||
|
|
|
|||
|
|
@ -65,6 +65,43 @@ export function decompress(s: string): string {
|
|||
return s
|
||||
}
|
||||
|
||||
/**
|
||||
* Get whether two objects are shallowly equal.
|
||||
*
|
||||
* ### Example
|
||||
*
|
||||
*```ts
|
||||
* shallowEqual(objA, objB) // true
|
||||
*```
|
||||
*/
|
||||
export function shallowEqual(
|
||||
objA: Record<string, unknown>,
|
||||
objB: Record<string, unknown>
|
||||
): boolean {
|
||||
if (objA === objB) return true
|
||||
|
||||
if (!objA || !objB) return false
|
||||
|
||||
const aKeys = Object.keys(objA)
|
||||
const bKeys = Object.keys(objB)
|
||||
const len = aKeys.length
|
||||
|
||||
if (bKeys.length !== len) return false
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
const key = aKeys[i]
|
||||
|
||||
if (
|
||||
objA[key] !== objB[key] ||
|
||||
!Object.prototype.hasOwnProperty.call(objB, key)
|
||||
) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
/**
|
||||
* Recursively clone an object or array.
|
||||
* @param obj
|
||||
|
|
|
|||
Loading…
Reference in a new issue