Skip to content

Commit

Permalink
chore: Cleanup unused comments code for now
Browse files Browse the repository at this point in the history 
Signed-off-by: Julius Härtl <[email protected]>
  • Loading branch information
@juliusknorr
juliusknorr committed Jul 5, 2024
1 parent 0f07cdd commit a59828d
Showing 1 changed file with 0 additions and 223 deletions.
223 changes: 0 additions & 223 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,228 +131,6 @@ export default function App({ fileId, isEmbedded }: WhiteboardAppProps) {
}
}

const rerenderCommentIcons = () => {
if (!excalidrawAPI) {
return false
}
const commentIconsElements = appRef.current.querySelectorAll(
'.comment-icon'
) as HTMLElement[]
commentIconsElements.forEach((ele) => {
const id = ele.id
const appstate = excalidrawAPI.getAppState()
const { x, y } = sceneCoordsToViewportCoords(
{ sceneX: commentIcons[id].x, sceneY: commentIcons[id].y },
appstate
)
ele.style.left = `${
x - COMMENT_ICON_DIMENSION / 2 - appstate!.offsetLeft
}px`
ele.style.top = `${
y - COMMENT_ICON_DIMENSION / 2 - appstate!.offsetTop
}px`
})
}

const onPointerMoveFromPointerDownHandler = (
pointerDownState: PointerDownState
) => {
return withBatchedUpdatesThrottled((event) => {
if (!excalidrawAPI) {
return false
}
const { x, y } = viewportCoordsToSceneCoords(
{
clientX: event.clientX - pointerDownState.hitElementOffsets.x,
clientY: event.clientY - pointerDownState.hitElementOffsets.y
},
excalidrawAPI.getAppState()
)
setCommentIcons({
...commentIcons,
[pointerDownState.hitElement.id!]: {
...commentIcons[pointerDownState.hitElement.id!],
x,
y
}
})
})
}
const onPointerUpFromPointerDownHandler = (
pointerDownState: PointerDownState
) => {
return withBatchedUpdates((event) => {
window.removeEventListener('pointermove', pointerDownState.onMove)
window.removeEventListener('pointerup', pointerDownState.onUp)
excalidrawAPI?.setActiveTool({ type: 'selection' })
const distance = distance2d(
pointerDownState.x,
pointerDownState.y,
event.clientX,
event.clientY
)
if (distance === 0) {
if (!comment) {
setComment({
x: pointerDownState.hitElement.x + 60,
y: pointerDownState.hitElement.y,
value: pointerDownState.hitElement.value,
id: pointerDownState.hitElement.id
})
} else {
setComment(null)
}
}
})
}
const saveComment = () => {
if (!comment) {
return
}
if (!comment.id && !comment.value) {
setComment(null)
return
}
const id = comment.id || nanoid()
setCommentIcons({
...commentIcons,
[id]: {
x: comment.id ? comment.x - 60 : comment.x,
y: comment.y,
id,
value: comment.value
}
})
setComment(null)
}

const renderCommentIcons = () => {
return Object.values(commentIcons).map((commentIcon) => {
if (!excalidrawAPI) {
return false
}
const appState = excalidrawAPI.getAppState()
const { x, y } = sceneCoordsToViewportCoords(
{ sceneX: commentIcon.x, sceneY: commentIcon.y },
excalidrawAPI.getAppState()
)
return (
<div
id={commentIcon.id}
key={commentIcon.id}
style={{
top: `${y - COMMENT_ICON_DIMENSION / 2 - appState!.offsetTop}px`,
left: `${x - COMMENT_ICON_DIMENSION / 2 - appState!.offsetLeft}px`,
position: 'absolute',
zIndex: 1,
width: `${COMMENT_ICON_DIMENSION}px`,
height: `${COMMENT_ICON_DIMENSION}px`,
cursor: 'pointer',
touchAction: 'none'
}}
className="comment-icon"
onPointerDown={(event) => {
event.preventDefault()
if (comment) {
commentIcon.value = comment.value
saveComment()
}
const pointerDownState: any = {
x: event.clientX,
y: event.clientY,
hitElement: commentIcon,
hitElementOffsets: {
x: event.clientX - x,
y: event.clientY - y
}
}
const onPointerMove = onPointerMoveFromPointerDownHandler(
pointerDownState
)
const onPointerUp = onPointerUpFromPointerDownHandler(
pointerDownState
)
window.addEventListener('pointermove', onPointerMove)
window.addEventListener('pointerup', onPointerUp)

pointerDownState.onMove = onPointerMove
pointerDownState.onUp = onPointerUp

excalidrawAPI?.setActiveTool({
type: 'custom',
customType: 'comment'
})
}}
>
<div className="comment-avatar">
<img src="doremon.png" alt="doremon" />
</div>
</div>
)
})
}

const renderComment = () => {
if (!comment) {
return null
}
const appState = excalidrawAPI?.getAppState()!
const { x, y } = sceneCoordsToViewportCoords(
{ sceneX: comment.x, sceneY: comment.y },
appState
)
let top = y - COMMENT_ICON_DIMENSION / 2 - appState.offsetTop
let left = x - COMMENT_ICON_DIMENSION / 2 - appState.offsetLeft

if (
top + COMMENT_INPUT_HEIGHT
< appState.offsetTop + COMMENT_INPUT_HEIGHT
) {
top = COMMENT_ICON_DIMENSION / 2
}
if (top + COMMENT_INPUT_HEIGHT > appState.height) {
top = appState.height - COMMENT_INPUT_HEIGHT - COMMENT_ICON_DIMENSION / 2
}
if (
left + COMMENT_INPUT_WIDTH
< appState.offsetLeft + COMMENT_INPUT_WIDTH
) {
left = COMMENT_ICON_DIMENSION / 2
}
if (left + COMMENT_INPUT_WIDTH > appState.width) {
left = appState.width - COMMENT_INPUT_WIDTH - COMMENT_ICON_DIMENSION / 2
}

return (
<textarea
className="comment"
style={{
top: `${top}px`,
left: `${left}px`,
position: 'absolute',
zIndex: 1,
height: `${COMMENT_INPUT_HEIGHT}px`,
width: `${COMMENT_INPUT_WIDTH}px`
}}
ref={(ref) => {
setTimeout(() => ref?.focus())
}}
placeholder={comment.value ? 'Reply' : 'Comment'}
value={comment.value}
onChange={(event) => {
setComment({ ...comment, value: event.target.value })
}}
onBlur={saveComment}
onKeyDown={(event) => {
if (!event.shiftKey && event.key === 'Enter') {
event.preventDefault()
saveComment()
}
}}
/>
)
}

const renderMenu = () => {
return (
<MainMenu>
Expand Down Expand Up @@ -391,7 +169,6 @@ export default function App({ fileId, isEmbedded }: WhiteboardAppProps) {
}}
onLinkOpen={onLinkOpen}
onPointerDown={onPointerDown}
onScrollChange={rerenderCommentIcons}
>
{renderMenu()}
</Excalidraw>
Expand Down

0 comments on commit a59828d

Please sign in to comment.