• Index
• Search by APIs
• Search by Words
• Project Search

• Java
• Python
• JavaScript
• TypeScript
• C++
• Scala
• Blog

• remind-master
  • .github
    • workflows
      • main.yml
  • .husky
    • pre-commit
    • .gitignore
  • .prettierrc
  • LICENSE
  • .npmrc
  • pnpm-workspace.yaml
  • xo.config.cjs
  • packages
    • contributions
      • src
        • useUpdateTopic.ts
        • useDndTopic.ts
        • index.ts
        • useNavigate.ts
        • useHistory.ts
        • index.d.ts
        • utils.ts
        • useSelection.ts
        • useToolbar.ts
      • vite.config.ts
      • CHANGELOG.md
      • package.json
      • tsconfig.node.json
      • tsconfig.json
    • example
      • src
        • data.ts
        • main.ts
      • vite.config.ts
      • CHANGELOG.md
      • package.json
      • index.html
      • tsconfig.node.json
      • tsconfig.json
    • core
      • src
        • preact.d.ts
        • layout
          • index.ts
          • mindmap.ts
          • shared.ts
          • structure.ts
        • utils
          • is.ts
          • useTextEditor.tsx
          • link.tsx
          • textRender.ts
          • uuid.ts
          • to.ts
          • debug.ts
          • common.ts
          • useEventListener.ts
          • history.ts
          • tree.ts
          • assert.ts
        • contribute
          • index.ts
        • interface
          • layout.ts
          • viewModel.ts
          • theme.ts
          • topic.ts
          • textEditor.ts
          • intl.ts
          • contribute.ts
          • model.ts
        • createMindmap.tsx
        • index.ts
        • viewModel
          • index.ts
        • unstated
          • index.tsx
        • context
          • locale.ts
          • theme.ts
        • index.d.ts
        • view
          • Topic.tsx
          • Links.tsx
          • Mindmap.tsx
          • index.module.css
        • vite-env.d.ts
        • model
          • index.ts
        • constant.ts
      • vite.config.ts
      • test
        • useEventListener.test.ts
        • textRender.test.ts
        • history.test.ts
        • createMindmap.test.ts
        • layout.test.ts
        • model.test.ts
      • CHANGELOG.md
      • package.json
      • tsconfig.node.json
      • tsconfig.json
  • README.md
  • package.json
  • tsconfig.node.json
  • .changeset
    • config.json
    • README.md
  • tsconfig.json
  • .gitignore
  • .vscode
    • extensions.json

import { useEffect, useRef, useMemo, useImperativeHandle } from 'preact/hooks'
import { RefObject } from 'preact'
import { forwardRef } from 'preact/compat'
import { Model } from '../model'
import { ViewModel } from '../viewModel'
import { useContributions, useContributionAPI } from '../contribute'
import { toPX } from '../utils/common'
import { Theme } from '../interface/theme'
import { IntlLanguage } from '../interface/intl'
import { LayoutTopic, TopicData } from '../interface/topic'
import { Contribution, ContributionAPI } from '../interface/contribute'
import { ViewType } from '../constant'
import { debug } from '../utils/debug'
import { doLayout } from '../layout'
import { LayoutType } from '../interface/layout'
import { useTextEditor } from '../utils/useTextEditor'
import { Links } from './Links'
import Topic from './Topic'
import styles from './index.module.css'

interface MindmapProps {
  theme: Theme
  locale: IntlLanguage
  value: TopicData
  onChange: (value: TopicData) => void
  contributions: Contribution[]
  layout: LayoutType
}

const Mindmap = forwardRef(
  (props: MindmapProps, ref: RefObject<ContributionAPI>) => {
    const { onChange, contributions, layout, theme } = props
    const model = Model.useContainer()
    const viewModel = ViewModel.useContainer()
    const editorRef = useRef<HTMLDivElement>(null)
    const { root } = model
    const textEditor = useTextEditor()
    const contributionAPI = useContributionAPI({
      view: editorRef,
      layout,
      textEditor,
    })
    const { slots } = useContributions(contributionAPI, contributions)
    const mindmapSlots = slots.filter(
      (slot) => slot?.viewType === ViewType.mindmap,
    )
    const { mindmap: mindmapTheme } = theme

    const { layoutRoot, canvasWidth, canvasHeight } = useMemo(() => {
      return doLayout(root, { layout, theme })
    }, [root, layout, theme])

    debug('layoutRoot', layoutRoot)

    useEffect(() => {
      onChange?.(root)
    }, [root])

    useEffect(() => {
      viewModel.setLayoutRoot(layoutRoot)
    }, [layoutRoot])

    useImperativeHandle(ref, () => contributionAPI, [contributionAPI])

    useEffect(() => {
      try {
        editorRef.current.scrollIntoView({ block: 'center', inline: 'center' })
      } catch {}
    }, [])

    return (
      <div className={styles.container}>
        <div
          className={styles.scrollContainer}
          style={{ background: mindmapTheme.background }}
        >
          <div
            ref={editorRef}
            data-type={ViewType.mindmap}
            className={styles.editor}
            style={{
              width: toPX(canvasWidth),
              height: toPX(canvasHeight),
            }}
            draggable
          >
            <svg
              className={styles.svgCanvas}
              width={canvasWidth}
              height={canvasHeight}
              xmlns="http://www.w3.org/2000/svg"
              // to make generated svg has background color
              style={{ background: mindmapTheme.background }}
            >
              <Links layoutRoot={layoutRoot} layout={layout} />
              <Topics layoutRoot={layoutRoot} />
            </svg>
            {textEditor.editor}
            {mindmapSlots}
          </div>
        </div>
      </div>
    )
  },
)

function Topics({ layoutRoot }: { layoutRoot: LayoutTopic }) {
  return (
    <g className="topics">
      {layoutRoot.descendants().map((node) => {
        return <Topic key={node.data.id} node={node} />
      })}
    </g>
  )
}

export { Mindmap }
export type { MindmapProps }