cd-aichat 1.0.0

package/src/components/screenshot/exports.ts

@@ -0,0 +1,4 @@
+export type { Bounds } from "./types";
+export type { Lang } from "./zh_CN";
+export { default } from "./";
+export type { ScreenshotsProps } from "./";

package/src/components/screenshot/hooks/useBounds.ts

@@ -0,0 +1,35 @@
+import { useCallback } from 'react'
+import { Bounds } from '../types'
+import useDispatcher from './useDispatcher'
+import useStore from './useStore'
+
+export interface BoundsDispatcher {
+  set: (bounds: Bounds) => void
+  reset: () => void
+}
+
+export type BoundsValueDispatcher = [Bounds | null, BoundsDispatcher]
+
+export default function useBounds (): BoundsValueDispatcher {
+  const { bounds } = useStore()
+  const { setBounds } = useDispatcher()
+
+  const set = useCallback(
+    (bounds: Bounds) => {
+      setBounds?.(bounds)
+    },
+    [setBounds]
+  )
+
+  const reset = useCallback(() => {
+    setBounds?.(null)
+  }, [setBounds])
+
+  return [
+    bounds,
+    {
+      set,
+      reset
+    }
+  ]
+}

package/src/components/screenshot/hooks/useCall.ts

@@ -0,0 +1,17 @@
+import { useCallback } from 'react'
+import useDispatcher from './useDispatcher'
+
+export type CallDispatcher = <T extends unknown[]>(funcName: string, ...args: T) => void
+
+export default function useCall (): CallDispatcher {
+  const dispatcher = useDispatcher()
+
+  const call = useCallback(
+    <T extends unknown[]>(funcName: string, ...args: T) => {
+      dispatcher.call?.(funcName, ...args)
+    },
+    [dispatcher]
+  )
+
+  return call
+}

package/src/components/screenshot/hooks/useCanvasContextRef.ts

@@ -0,0 +1,8 @@
+import useStore from './useStore'
+import { CanvasContextRef } from '../types'
+
+export default function useCanvasContextRef (): CanvasContextRef {
+  const { canvasContextRef } = useStore()
+
+  return canvasContextRef
+}

package/src/components/screenshot/hooks/useCanvasMousedown.ts

@@ -0,0 +1,13 @@
+import { useEffect } from 'react'
+import useEmiter from '../hooks/useEmiter'
+
+export default function useCanvasMousedown (onMousedown: (e: MouseEvent) => unknown): void {
+  const emiter = useEmiter()
+
+  useEffect(() => {
+    emiter.on('mousedown', onMousedown)
+    return () => {
+      emiter.off('mousedown', onMousedown)
+    }
+  }, [onMousedown, emiter])
+}

package/src/components/screenshot/hooks/useCanvasMousemove.ts

@@ -0,0 +1,13 @@
+import { useEffect } from 'react'
+import useEmiter from '../hooks/useEmiter'
+
+export default function useCanvasMousemove (onMousemove: (e: MouseEvent) => unknown): void {
+  const emiter = useEmiter()
+
+  useEffect(() => {
+    emiter.on('mousemove', onMousemove)
+    return () => {
+      emiter.off('mousemove', onMousemove)
+    }
+  }, [onMousemove, emiter])
+}

package/src/components/screenshot/hooks/useCanvasMouseup.ts

@@ -0,0 +1,13 @@
+import { useEffect } from 'react'
+import useEmiter from '../hooks/useEmiter'
+
+export default function useCanvasMouseup (onMouseup: (e: MouseEvent) => unknown): void {
+  const emiter = useEmiter()
+
+  useEffect(() => {
+    emiter.on('mouseup', onMouseup)
+    return () => {
+      emiter.off('mouseup', onMouseup)
+    }
+  }, [onMouseup, emiter])
+}

package/src/components/screenshot/hooks/useCursor.ts

@@ -0,0 +1,34 @@
+import { useCallback } from 'react'
+import useDispatcher from './useDispatcher'
+import useStore from './useStore'
+
+export interface CursorDispatcher {
+  set: (cursor: string) => void;
+  reset: () => void;
+}
+
+export type CursorValueDispatcher = [string | undefined, CursorDispatcher];
+
+export default function useCursor (): CursorValueDispatcher {
+  const { cursor } = useStore()
+  const { setCursor } = useDispatcher()
+
+  const set = useCallback(
+    (cursor: string) => {
+      setCursor?.(cursor)
+    },
+    [setCursor]
+  )
+
+  const reset = useCallback(() => {
+    setCursor?.('move')
+  }, [setCursor])
+
+  return [
+    cursor,
+    {
+      set,
+      reset
+    }
+  ]
+}

package/src/components/screenshot/hooks/useDispatcher.ts

@@ -0,0 +1,8 @@
+import { useContext } from 'react'
+import ScreenshotsContext, { ScreenshotsContextDispatcher } from '../ScreenshotsContext'
+
+export default function useDispatcher (): ScreenshotsContextDispatcher {
+  const { dispatcher } = useContext(ScreenshotsContext)
+
+  return dispatcher
+}

package/src/components/screenshot/hooks/useDrawSelect.ts

@@ -0,0 +1,16 @@
+import { useEffect } from 'react'
+import useEmiter from '../hooks/useEmiter'
+import { HistoryItemSource } from '../types'
+
+export default function useDrawSelect (
+  onDrawSelect: (action: HistoryItemSource<unknown, unknown>, e: MouseEvent) => unknown
+): void {
+  const emiter = useEmiter()
+
+  useEffect(() => {
+    emiter.on('drawselect', onDrawSelect)
+    return () => {
+      emiter.off('drawselect', onDrawSelect)
+    }
+  }, [onDrawSelect, emiter])
+}

package/src/components/screenshot/hooks/useEmiter.ts

@@ -0,0 +1,61 @@
+import { useCallback } from 'react'
+import { EmiterListener } from '../types'
+import useStore from './useStore'
+
+export interface EmiterDispatcher {
+  on: (event: string, listener: EmiterListener) => void
+  off: (event: string, listener: EmiterListener) => void
+  emit: (event: string, ...args: unknown[]) => void
+  reset: () => void
+}
+
+export default function useEmiter (): EmiterDispatcher {
+  const { emiterRef } = useStore()
+
+  const on = useCallback(
+    (event: string, listener: EmiterListener) => {
+      const emiter = emiterRef.current
+      if (Array.isArray(emiter[event])) {
+        emiter[event].push(listener)
+      } else {
+        emiter[event] = [listener]
+      }
+    },
+    [emiterRef]
+  )
+
+  const off = useCallback(
+    (event: string, listener: EmiterListener) => {
+      const emiter = emiterRef.current
+      if (Array.isArray(emiter[event])) {
+        const index = emiter[event].findIndex(item => item === listener)
+        if (index !== -1) {
+          emiter[event].splice(index, 1)
+        }
+      }
+    },
+    [emiterRef]
+  )
+
+  const emit = useCallback(
+    (event: string, ...args: unknown[]) => {
+      const emiter = emiterRef.current
+
+      if (Array.isArray(emiter[event])) {
+        emiter[event].forEach(listener => listener(...args))
+      }
+    },
+    [emiterRef]
+  )
+
+  const reset = useCallback(() => {
+    emiterRef.current = {}
+  }, [emiterRef])
+
+  return {
+    on,
+    off,
+    emit,
+    reset
+  }
+}

package/src/components/screenshot/hooks/useHistory.ts

@@ -0,0 +1,160 @@
+import { useCallback } from 'react'
+import { History, HistoryItem, HistoryItemType } from '../types'
+import useDispatcher from './useDispatcher'
+import useStore from './useStore'
+
+export interface HistoryValue extends History {
+  top?: HistoryItem<unknown, unknown>
+}
+
+export interface HistoryDispatcher {
+  push: <S, E>(action: HistoryItem<S, E>) => void
+  pop: () => void
+  undo: () => void
+  redo: () => void
+  set: (history: History) => void
+  select: <S, E>(action: HistoryItem<S, E>) => void
+  clearSelect: () => void
+  reset: () => void
+}
+
+export type HistoryValueDispatcher = [HistoryValue, HistoryDispatcher]
+
+export default function useHistory (): HistoryValueDispatcher {
+  const { history } = useStore()
+  const { setHistory } = useDispatcher()
+
+  const push = useCallback(
+    <S, E>(action: HistoryItem<S, E>) => {
+      const { index, stack } = history
+
+      stack.forEach(item => {
+        if (item.type === HistoryItemType.Source) {
+          item.isSelected = false
+        }
+      })
+
+      if (action.type === HistoryItemType.Source) {
+        action.isSelected = true
+      } else if (action.type === HistoryItemType.Edit) {
+        action.source.isSelected = true
+      }
+
+      stack.splice(index + 1)
+      stack.push(action)
+
+      setHistory?.({
+        index: stack.length - 1,
+        stack
+      })
+    },
+    [history, setHistory]
+  )
+
+  const pop = useCallback(() => {
+    const { stack } = history
+
+    stack.pop()
+
+    setHistory?.({
+      index: stack.length - 1,
+      stack
+    })
+  }, [history, setHistory])
+
+  const undo = useCallback(() => {
+    const { index, stack } = history
+
+    const item = stack[index]
+
+    if (item) {
+      if (item.type === HistoryItemType.Source) {
+        item.isSelected = false
+      } else if (item.type === HistoryItemType.Edit) {
+        item.source.editHistory.pop()
+      }
+    }
+
+    setHistory?.({
+      index: index <= 0 ? -1 : index - 1,
+      stack
+    })
+  }, [history, setHistory])
+
+  const redo = useCallback(() => {
+    const { index, stack } = history
+
+    const item = stack[index + 1]
+
+    if (item) {
+      if (item.type === HistoryItemType.Source) {
+        item.isSelected = false
+      } else if (item.type === HistoryItemType.Edit) {
+        item.source.editHistory.push(item)
+      }
+    }
+
+    setHistory?.({
+      index: index >= stack.length - 1 ? stack.length - 1 : index + 1,
+      stack
+    })
+  }, [history, setHistory])
+
+  const set = useCallback(
+    (history: History) => {
+      setHistory?.({ ...history })
+    },
+    [setHistory]
+  )
+
+  const select = useCallback(
+    <S, E>(action: HistoryItem<S, E>) => {
+      history.stack.forEach(item => {
+        if (item.type === HistoryItemType.Source) {
+          if (item === action) {
+            item.isSelected = true
+          } else {
+            item.isSelected = false
+          }
+        }
+      })
+      setHistory?.({ ...history })
+    },
+    [history, setHistory]
+  )
+
+  const clearSelect = useCallback(() => {
+    history.stack.forEach(item => {
+      if (item.type === HistoryItemType.Source) {
+        item.isSelected = false
+      }
+    })
+
+    setHistory?.({ ...history })
+  }, [history, setHistory])
+
+  const reset = useCallback(() => {
+    setHistory?.({
+      index: -1,
+      stack: []
+    })
+  }, [setHistory])
+
+  return [
+    {
+      index: history.index,
+      stack: history.stack,
+      top: history.stack.slice(history.index, history.index + 1)[0]
+    },
+    {
+      push,
+      pop,
+      undo,
+      redo,
+      set,
+      select,
+      clearSelect,
+      reset
+    }
+  ]
+}

package/src/components/screenshot/hooks/useLang.ts

@@ -0,0 +1,8 @@
+import { Lang } from '../zh_CN'
+import useStore from './useStore'
+
+export default function useLang (): Lang {
+  const { lang } = useStore()
+
+  return lang
+}

package/src/components/screenshot/hooks/useOperation.ts

@@ -0,0 +1,37 @@
+import { useCallback } from 'react'
+import useDispatcher from './useDispatcher'
+import useStore from './useStore'
+
+export interface OperationDispatcher {
+  set: (operation: string) => void;
+  reset: () => void;
+}
+
+export type OperationValueDispatcher = [
+  string | undefined,
+  OperationDispatcher
+];
+
+export default function useOperation (): OperationValueDispatcher {
+  const { operation } = useStore()
+  const { setOperation } = useDispatcher()
+
+  const set = useCallback(
+    (operation: string) => {
+      setOperation?.(operation)
+    },
+    [setOperation]
+  )
+
+  const reset = useCallback(() => {
+    setOperation?.(undefined)
+  }, [setOperation])
+
+  return [
+    operation,
+    {
+      set,
+      reset
+    }
+  ]
+}

package/src/components/screenshot/hooks/useReset.ts

@@ -0,0 +1,26 @@
+import { useCallback } from 'react'
+import useBounds from './useBounds'
+import useCursor from './useCursor'
+import useEmiter from './useEmiter'
+import useHistory from './useHistory'
+import useOperation from './useOperation'
+
+export type ResetDispatcher = () => void
+
+export default function useReset (): ResetDispatcher {
+  const emiter = useEmiter()
+  const [, boundsDispatcher] = useBounds()
+  const [, cursorDispatcher] = useCursor()
+  const [, historyDispatcher] = useHistory()
+  const [, operatioDispatcher] = useOperation()
+
+  const reset = useCallback(() => {
+    emiter.reset()
+    historyDispatcher.reset()
+    boundsDispatcher.reset()
+    cursorDispatcher.reset()
+    operatioDispatcher.reset()
+  }, [emiter, historyDispatcher, boundsDispatcher, cursorDispatcher, operatioDispatcher])
+
+  return reset
+}

package/src/components/screenshot/hooks/useStore.ts

@@ -0,0 +1,8 @@
+import { useContext } from 'react'
+import ScreenshotsContext, { ScreenshotsContextStore } from '../ScreenshotsContext'
+
+export default function useStore (): ScreenshotsContextStore {
+  const { store } = useContext(ScreenshotsContext)
+
+  return store
+}

package/src/components/screenshot/icons/iconfont.scss

@@ -0,0 +1,88 @@
+@font-face {
+  font-family: 'screenshots-icon'; /* Project id 572327 */
+  src: url('iconfont.woff2') format('woff2'), url('iconfont.woff') format('woff'),
+    url('iconfont.ttf') format('truetype');
+}
+
+[class^='icon-'],
+[class*=' icon-'] {
+  font-family: 'screenshots-icon' !important;
+  font-style: normal;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-ok:before {
+  content: '\e001';
+}
+
+.icon-cancel:before {
+  content: '\e002';
+}
+
+.icon-save:before {
+  content: '\e003';
+}
+
+.icon-redo:before {
+  content: '\e004';
+}
+
+.icon-undo:before {
+  content: '\e005';
+}
+
+.icon-mosaic:before {
+  content: '\e006';
+}
+
+.icon-text:before {
+  content: '\e007';
+}
+
+.icon-brush:before {
+  content: '\e008';
+}
+
+.icon-arrow:before {
+  content: '\e009';
+}
+
+.icon-ellipse:before {
+  content: '\e00a';
+}
+
+.icon-rectangle:before {
+  content: '\e00b';
+}
+
+.icon-scan:before {
+  content: '';
+  background: transparent url(/imgs/svg/scan.svg) no-repeat 0px 0px;
+  background-size: 22px;
+  background-position: center;
+  width: 35px;
+  height: 35px;
+  display: inline-block;
+}
+
+.icon-search:before {
+  content: '';
+  background: transparent url(/imgs/svg/search.svg) no-repeat 0px 0px;
+  background-size: 22px;
+  background-position: center;
+  width: 35px;
+  height: 35px;
+  display: inline-block;
+}
+
+.icon-pin:before {
+  content: '';
+  background: transparent url(/imgs/svg/pin.svg) no-repeat 0px 0px;
+  background-size: 22px;
+  background-position: center;
+  width: 35px;
+  height: 35px;
+  display: inline-block;
+}