Merge pull request #50 from retejs/feature/comments-history

Feature/comments history

Author: Ni55aN

src/comment-node-sync.ts

@@ -0,0 +1,159 @@
+import { NodeId } from 'rete'
+import { BaseAreaPlugin } from 'rete-area-plugin'
+
+import { Comment } from './comment'
+import { FrameComment } from './frame-comment'
+import { detachNodeFromFrame, FrameMembership, syncFrameOnNodeDrop } from './frame-membership'
+import type { Produces } from './index'
+import { InlineComment } from './inline-comment'
+import type { ExpectedSchemes, MembershipState, Position } from './types'
+import { trackDragging, trackedTranslate, trackedTranslateComment } from './utils'
+
+export type CommentNodeSyncDeps<Schemes extends ExpectedSchemes, K> = {
+  area: BaseAreaPlugin<Schemes, K>
+  comments: Map<Comment['id'], Comment>
+  membershipState: MembershipState
+  emit: (signal: Produces) => Promise<unknown>
+}
+
+export function createCommentNodeSync<Schemes extends ExpectedSchemes, K>(deps: CommentNodeSyncDeps<Schemes, K>) {
+  const { area, comments, membershipState, emit } = deps
+  const { translate, isTranslating } = trackedTranslate({ area })
+  const commentTracker = trackedTranslateComment(comments)
+  const dragging = trackDragging()
+  const nodeDragPrevious = new Map<NodeId, Position>()
+
+  const collectFrameMembership = async (nodeId: NodeId) => {
+    const frames: FrameMembership[] = []
+
+    for (const comment of Array.from(comments.values())) {
+      if (comment instanceof FrameComment) {
+        const entry = await syncFrameOnNodeDrop(comment, nodeId)
+
+        if (entry) frames.push(entry)
+      }
+    }
+
+    return frames
+  }
+
+  const emitMembership = async (
+    frames: FrameMembership[],
+    node?: { id: NodeId, previous: Position, current: Position }
+  ) => {
+    if (!frames.length) return
+
+    await emit({
+      type: 'commentmembershipchanged',
+      data: node
+        ? { node, frames }
+        : { frames }
+    })
+  }
+
+  return {
+    beginNodeDrag(nodeId: NodeId) {
+      dragging.start(nodeId)
+      const view = area.nodeViews.get(nodeId)
+
+      if (view) nodeDragPrevious.set(nodeId, { ...view.position })
+    },
+
+    reorderLinkedComments(element: HTMLElement) {
+      const views = Array.from(area.nodeViews.entries())
+      const matchedView = views.find(([, view]) => view.element === element)
+
+      if (!matchedView) return
+
+      const linkedComments = Array.from(comments.entries())
+        .filter(([, comment]) => comment.linkedTo(matchedView[0]))
+
+      for (const [, comment] of linkedComments) {
+        if (comment instanceof InlineComment) {
+          area.area.content.reorder(comment.element, matchedView[1].element.nextElementSibling)
+        }
+        if (comment instanceof FrameComment) {
+          area.area.content.reorder(comment.element, area.area.content.holder.firstChild)
+        }
+      }
+    },
+
+    async onNodeTranslated(data: { id: NodeId, position: Position, previous: Position }) {
+      if (membershipState.restoring) return
+
+      const { id, position, previous } = data
+      const dx = position.x - previous.x
+      const dy = position.y - previous.y
+
+      await Promise.all(Array.from(comments.values())
+        .filter(comment => comment.linkedTo(id))
+        .map(async comment => {
+          if (comment instanceof InlineComment && !commentTracker.isTranslating(comment.id)) {
+            await commentTracker.translate(comment.id, dx, dy, [id])
+          }
+          if (comment instanceof FrameComment
+            && !dragging.isDragging(id)
+            && !commentTracker.isResizing(comment.id)) {
+            await commentTracker.resize(comment.id)
+          }
+        }))
+    },
+
+    async onCommentTranslated(data: { id: Comment['id'], dx: number, dy: number, sources?: NodeId[] }) {
+      const { id, dx, dy, sources } = data
+      const comment = comments.get(id)
+
+      if (!(comment instanceof FrameComment)) return
+
+      await Promise.all(comment.links
+        .filter(linkId => !sources?.includes(linkId))
+        .map(linkId => ({ linkId, view: area.nodeViews.get(linkId) }))
+        .map(async ({ linkId, view }) => {
+          if (!view) return
+          // prevent an infinite loop if a node is selected and translated along with the selected comment
+          if (!await emit({ type: 'commentlinktranslate', data: { id, link: linkId } })) return
+
+          if (!isTranslating(linkId)) await translate(linkId, view.position.x + dx, view.position.y + dy)
+        }))
+    },
+
+    async finalizeNodeDrag(nodeId: NodeId) {
+      if (membershipState.restoring) return
+
+      const nodePrevious = nodeDragPrevious.get(nodeId)
+      const nodeView = area.nodeViews.get(nodeId)
+      const frames = await collectFrameMembership(nodeId)
+
+      if (frames.length && nodePrevious && nodeView) {
+        await emitMembership(frames, {
+          id: nodeId,
+          previous: nodePrevious,
+          current: { ...nodeView.position }
+        })
+      }
+
+      nodeDragPrevious.delete(nodeId)
+      dragging.stop(nodeId)
+    },
+
+    async cleanupOnNodeRemoved(nodeId: NodeId) {
+      dragging.stop(nodeId)
+      nodeDragPrevious.delete(nodeId)
+
+      const frames: FrameMembership[] = []
+
+      for (const comment of Array.from(comments.values())) {
+        if (comment instanceof InlineComment && comment.linkedTo(nodeId)) {
+          comment.linkTo([])
+        }
+        if (comment instanceof FrameComment) {
+          const entry = await detachNodeFromFrame(comment, nodeId)
+
+          if (entry) frames.push(entry)
+        }
+      }
+
+      await emitMembership(frames)
+    }
+  }
+}

src/comment.ts

@@ -14,6 +14,7 @@ export class Comment {
   element!: HTMLElement
   nested!: HTMLElement
   prevPosition: null | Position = null
+  private dragOrigin: null | Position = null
 
   constructor(
     public text: string,
@@ -23,9 +24,14 @@ export class Comment {
       pick?: null | (() => void)
       translate?: null | ((dx: number, dy: number, sources?: NodeId[]) => Promise<void>)
       drag?: null | (() => void)
-    }
+      dragged?: null | ((
+        previous: Position,
+        prevLinks: string[]
+      ) => Promise<void>)
+    },
+    options?: { id?: string }
   ) {
-    this.id = getUID()
+    this.id = options?.id ?? getUID()
     this.element = document.createElement('div')
     this.nested = document.createElement('div')
     this.element.appendChild(this.nested)
@@ -41,6 +47,7 @@ export class Comment {
       },
       {
         start: () => {
+          this.dragOrigin = { x: this.x, y: this.y }
           this.prevPosition = { ...area.area.pointer }
 
           if (this.events?.pick) {
@@ -58,10 +65,7 @@ export class Comment {
           }
         },
         drag: () => {
-          this.prevPosition = null
-          if (this.events?.drag) {
-            this.events.drag()
-          }
+          void this.finishDrag()
         }
       }
     )
@@ -111,4 +115,25 @@ export class Comment {
   destroy() {
     this.dragHandler.destroy()
   }
+
+  private async finishDrag() {
+    this.prevPosition = null
+
+    const origin = this.dragOrigin
+
+    this.dragOrigin = null
+
+    if (!origin) {
+      this.events?.drag?.()
+      return
+    }
+
+    const prevLinks = [...this.links]
+
+    if (this.events?.drag) {
+      this.events.drag()
+    }
+
+    await this.events?.dragged?.(origin, prevLinks)
+  }
 }

src/frame-comment.ts

@@ -2,7 +2,7 @@ import { NodeEditor, NodeId } from 'rete'
 import { BaseAreaPlugin } from 'rete-area-plugin'
 
 import { Comment } from './comment'
-import { ExpectedSchemes } from './types'
+import { ExpectedSchemes, Position } from './types'
 import { containsRect, intersectRect, nodesBBox, Rect } from './utils'
 
 export class FrameComment extends Comment {
@@ -18,7 +18,13 @@ export class FrameComment extends Comment {
       contextMenu?: (comment: FrameComment) => void
       pick?: (comment: FrameComment) => void
       translate?: (comment: FrameComment, dx: number, dy: number, sources?: NodeId[]) => Promise<void>
-    }
+      dragged?: (
+        comment: FrameComment,
+        previous: Position,
+        prevLinks: string[]
+      ) => Promise<void>
+    },
+    options?: { id?: string }
   ) {
     super(text, area, {
       contextMenu: () => {
@@ -30,8 +36,11 @@ export class FrameComment extends Comment {
       translate: async (dx, dy, sources) => {
         if (events?.translate) await events.translate(this, dx, dy, sources)
       },
-      drag: () => 1
-    })
+      drag: () => 1,
+      dragged: async (previous, prevLinks) => {
+        if (events?.dragged) await events.dragged(this, previous, prevLinks)
+      }
+    }, options)
 
     this.nested.className = 'frame-comment'
   }

src/frame-membership.ts

@@ -0,0 +1,72 @@
+import { NodeId } from 'rete'
+
+import { FrameComment } from './frame-comment'
+
+export type FrameBounds = { x: number, y: number, width: number, height: number }
+
+export type FrameMembership = {
+  id: FrameComment['id']
+  links: { prev: string[], next: string[] }
+  previous: FrameBounds
+  current: FrameBounds
+}
+
+export function frameBounds(comment: FrameComment): FrameBounds {
+  return {
+    x: comment.x,
+    y: comment.y,
+    width: comment.width,
+    height: comment.height
+  }
+}
+
+function sameLinkSet(prev: string[], next: string[]) {
+  return prev.length === next.length && prev.every(linkId => next.includes(linkId))
+}
+
+function nextLinks(frame: FrameComment, nodeId: NodeId) {
+  const links = frame.links.filter(id => id !== nodeId)
+
+  return frame.intersects(nodeId)
+    ? [...links, nodeId]
+    : links
+}
+
+export async function syncFrameOnNodeDrop(frame: FrameComment, nodeId: NodeId) {
+  const prevLinks = [...frame.links]
+  const next = nextLinks(frame, nodeId)
+
+  if (sameLinkSet(prevLinks, next)) {
+    if (frame.linkedTo(nodeId)) await frame.resize()
+    return null
+  }
+
+  const previous = frameBounds(frame)
+
+  frame.linkTo(next)
+  await frame.resize()
+
+  return {
+    id: frame.id,
+    links: { prev: prevLinks, next: [...frame.links] },
+    previous,
+    current: frameBounds(frame)
+  }
+}
+
+export async function detachNodeFromFrame(frame: FrameComment, nodeId: NodeId) {
+  if (!frame.linkedTo(nodeId)) return null
+
+  const prevLinks = [...frame.links]
+  const previous = frameBounds(frame)
+
+  frame.linkTo(frame.links.filter(id => id !== nodeId))
+  await frame.resize()
+
+  return {
+    id: frame.id,
+    links: { prev: prevLinks, next: [...frame.links] },
+    previous,
+    current: frameBounds(frame)
+  }
+}

src/handlers.ts

@@ -0,0 +1,55 @@
+import { NodeId } from 'rete'
+import { BaseAreaPlugin } from 'rete-area-plugin'
+
+import { FrameComment } from './frame-comment'
+import type { Produces } from './index'
+import { InlineComment } from './inline-comment'
+import type { ExpectedSchemes, Position } from './types'
+
+export type CommentHandlerDeps = {
+  area: BaseAreaPlugin<ExpectedSchemes, unknown>
+  emit: (signal: Produces) => Promise<unknown>
+  editComment: (id: string) => Promise<void>
+}
+
+export function createInlineHandlers(deps: CommentHandlerDeps) {
+  const { area, emit, editComment } = deps
+
+  return {
+    contextMenu: ({ id }: InlineComment) => void editComment(id),
+    pick: (item: InlineComment) => {
+      area.area.content.reorder(item.element, null)
+      void emit({ type: 'commentselected', data: item })
+    },
+    translate: async ({ id }: InlineComment, dx: number, dy: number, sources?: NodeId[]) => {
+      await emit({ type: 'commenttranslated', data: { id, dx, dy, sources } })
+    },
+    dragged: async (item: InlineComment, previous: Position, prevLinks: string[]) => {
+      await emit({
+        type: 'commentdragged',
+        data: { id: item.id, previous, prevLinks }
+      })
+    }
+  }
+}
+
+export function createFrameHandlers(deps: CommentHandlerDeps) {
+  const { area, emit, editComment } = deps
+
+  return {
+    contextMenu: ({ id }: FrameComment) => void editComment(id),
+    pick: (item: FrameComment) => {
+      area.area.content.reorder(item.element, area.area.content.holder.firstChild)
+      void emit({ type: 'commentselected', data: item })
+    },
+    translate: async ({ id }: FrameComment, dx: number, dy: number, sources?: NodeId[]) => {
+      await emit({ type: 'commenttranslated', data: { id, dx, dy, sources } })
+    },
+    dragged: async (item: FrameComment, previous: Position, prevLinks: string[]) => {
+      await emit({
+        type: 'commentdragged',
+        data: { id: item.id, previous, prevLinks }
+      })
+    }
+  }
+}