Webページにマインドマップ機能を簡単に統合 - Mind Elixir

import MindElixir from "mind-elixir";
import "mind-elixir/style"; // 5.0以降のバージョンでは手動でスタイルをインポートする必要があります

<script type="module" src="https://cdn.jsdelivr.net/npm/mind-elixir/dist/MindElixir.js"></script>

<div id="map"></div>
<style>
  #map {
    height: 500px;
    width: 100%;
  }
</style>

import MindElixir from "mind-elixir";
import "mind-elixir/style";

let options = {
  el: "#map", // or HTMLDivElement
};

let mei = new MindElixir(options);
const data = MindElixir.new("new topic");
mei.init(data);

type EventMap = {
  operation: (info: Operation) => void;
  selectNode: (nodeObj: NodeObj, e?: MouseEvent) => void;
  selectNewNode: (nodeObj: NodeObj) => void;
  selectNodes: (nodeObj: NodeObj[]) => void;
  unselectNodes: (nodeObj: NodeObj[]) => void;
  expandNode: (nodeObj: NodeObj) => void;
  linkDiv: () => void;
  scale: (scale: number) => void;
  move: (data: { dx: number; dy: number }) => void;
  updateArrowDelta: (arrow: Arrow) => void;
  showContextMenu: (e: MouseEvent) => void;
};

mei.bus.addListener("operation", (operation) => {
  console.log(operation);
});

let mei = new MindElixir({
  // ...
  before: {
    async addChild(el, obj) {
      try {
        await saveToDatabase(obj);
        return true;
      } catch (error) {
        console.error("Error adding child:", error);
        return false;
      }
    },
  },
});

export interface NodeObj {
  topic: string;
  id: Uid;
  style?: {
    fontSize?: string;
    color?: string;
    background?: string;
    fontWeight?: string;
  };
  children?: NodeObj[];
  tags?: string[];
  icons?: string[];
  hyperLink?: string;
  expanded?: boolean;
  direction?: Left | Right;
  image?: {
    url: string;
    width: number;
    height: number;
    fit?: "fill" | "contain" | "cover";
  };
  branchColor?: string;
  dangerouslySetInnerHTML?: string;
  note?: string;
}

const data = mind.nodeData;
console.log(data);
data.topic = data.topic + "new Data";
mind.refresh();

import data from "https://esm.sh/mind-elixir/dist/example.js";
mind.refresh(data);

const PROFESSIONAL_THEME = {
  name: "Professional",
  type: "light",
  palette: ["#2c2c2c", "#404040", "#555555", "#6a6a6a", "#7f7f7f", "#949494", "#a9a9a9"],
  cssVar: {
    "--node-gap-x": "32px",
    "--node-gap-y": "12px",
    "--main-gap-x": "68px",
    "--main-gap-y": "48px",
    "--root-radius": "8px",
    "--main-radius": "6px",
    "--root-color": "#ffffff",
    "--root-bgcolor": "#1a1a1a",
    "--root-border-color": "#333333",
    "--main-color": "#2c2c2c",
    "--main-bgcolor": "#ffffff",
    "--topic-padding": "4px",
    "--color": "#4a4a4a",
    "--bgcolor": "#fafafa",
    "--selected": "#666666",
    "--panel-color": "#2c2c2c",
    "--panel-bgcolor": "#ffffff",
    "--panel-border-color": "#e0e0e0",
  },
};

let mind = new MindElixir({
  el: "#map",
  theme: PROFESSIONAL_THEME,
});

// メインノード（ルートノードの次のレベルのノード）の展開・折りたたみボタンスタイル
me-main > me-wrapper > me-parent > me-epd {
  top: 50%;
  transform: translateY(-50%);
}
// その他の子ノードの展開・折りたたみボタンスタイル
me-epd {
  top: 100%;
  transform: translateY(-50%);
}
// 左側の展開・折りたたみボタン専用調整
.lhs {
  & > me-wrapper > me-parent > me-epd {
    left: -10px;
  }
  me-epd {
    left: 5px;
  }
}
// 右側の展開・折りたたみボタン専用調整
.rhs {
  & > me-wrapper > me-parent > me-epd {
    right: -10px;
  }
  me-epd {
    right: 5px;
  }
}

//...
{
  fontSize?: string
  color?: string
  background?: string
  fontWeight?: string
}
// ...

const data = {
  nodeData: {
    id: "me-root",
    topic: "Mind Elixir",
    tags: ["Mind Map Core"],
    children: [
      {
        topic: "Customized Div",
        id: "c00a2264f4532615",
        children: [
          {
            topic: "",
            id: "c00a2264f4532614",
            dangerouslySetInnerHTML:
              '<div><style>.title{font-size:50px}</style><div class="title">Title</div><div style="color: red; font-size: 20px;">Hello world</div></div>',
          },
        ],
      },
    ],
  },
};

import { domToPng } from "@ssshooter/modern-screenshot";

const download = async () => {
  const dataUrl = await domToPng(mind.nodes, {
    onCloneNode: (node) => {
      const n = node as HTMLDivElement;
      n.style.position = "";
      n.style.top = "";
      n.style.left = "";
      n.style.bottom = "";
      n.style.right = "";
    },
    padding: 300,
    quality: 1,
  });
  const link = document.createElement("a");
  link.download = "screenshot.png";
  link.href = dataUrl;
  link.click();
};

import { snapdom } from "@zumer/snapdom";

const dl2 = async () => {
  const result = await snapdom(mind.nodes);
  await result.download({ format: "jpg", filename: "my-capture" });
};

"use client";
import { useEffect } from "react";
import { mindMapExample } from "./mapExample";

export const MindMap = ({ className }: { className: string }) => {
  useEffect(() => {
    import("mind-elixir").then((MindElixir) => {
      const theme = MindElixir.default.DARK_THEME;
      theme.cssVar["--bgcolor"] = "rgba(0,0,0,0)";
      const mei = new MindElixir.default({
        el: "#map",
        direction: 2,
        theme,
      });
      mei.init({
        nodeData: mindMapExample,
      });
      mei.toCenter();
      window.addEventListener("resize", () => {
        mei.toCenter();
      });
    });
  }, []);
  return (
    <div id="wrapper" className={className}>
      <div
        id="map"
        className="pointer-events-none h-[50vh] w-screen"
        onScroll={(e) => e.preventDefault()}
      ></div>
    </div>
  );
};

interface Options {
  // ...
  direction?: number; // ノードの配置方向、0 左 1 右 2 両側
  locale?: Locale; // 言語選択
  contextMenu?: boolean | ContextMenuOption; // 右クリックメニューを有効にするか、オプション追加可能
  toolBar?: boolean; // 内蔵ツールバーを有効にするか
  keypress?: boolean | KeypressOptions; // ショートカットキーを有効にするか、カスタムショートカット追加可能
  mouseSelectionButton?: 0 | 2; // ドラッグボタン、デフォルトは右クリックドラッグ
  before?: Before; // 上記で言及した操作インターセプト
  newTopicName?: string; // 新規ノードのデフォルト値
  allowUndo?: boolean; // 元に戻す/やり直しを有効にするか
  overflowHidden?: boolean; // 画面が移動可能か、マインドマップカード表示時に使用
  alignment?: Alignment; // nodesに設定すると画面中心がマインドマップ中心、rootに設定すると画面中心がルートノード中心、デフォルトはroot
  scaleSensitivity?: number; // スクロールホイールとメニューの拡大縮小感度
  draggable?: boolean; // ノードをドラッグ可能か
  editable?: boolean; // 編集可能か
  // ...
}