GGEditor 图形编辑器快速入门指南

GGEditor 是一款功能强大的图形编辑器框架，特别适合开发流程图、思维导图等可视化应用。本文将详细介绍如何快速开始使用 GGEditor。

安装方式

GGEditor 提供了两种安装方式，开发者可以根据项目需求选择适合的方式。

npm 安装（推荐）

对于使用现代前端框架（如 React）的项目，推荐使用 npm 进行安装：

npm install gg-editor --save

这种方式可以与现有的前端工程完美集成，支持模块化开发和打包优化。

UMD 方式

对于需要快速在传统网页中使用的场景，可以直接通过 script 标签引入 UMD 格式的包：

<script src="https://unpkg.com/gg-editor@${version}/dist/index.js"></script>

这种方式无需构建步骤，适合简单的页面集成。

核心功能使用

GGEditor 提供了两种主要的图形编辑模式：流程图(Flow)和思维导图(Mind)。

流程图(Flow)模式

流程图模式适合构建节点和边组成的网络结构，常用于工作流、系统架构等场景。

基本使用示例：

import GGEditor, { Flow } from 'gg-editor';

// 定义初始数据
const flowData = {
  nodes: [
    {
      id: 'start',
      label: '开始节点',
      x: 100,
      y: 100,
    },
    {
      id: 'process',
      label: '处理节点',
      x: 100,
      y: 200,
    }
  ],
  edges: [
    {
      source: 'start',
      target: 'process',
      label: '连接线'
    }
  ]
};

function FlowExample() {
  return (
    <GGEditor>
      <Flow data={flowData} />
    </GGEditor>
  );
}

在这个示例中，我们创建了两个节点和一条连接线，构成了一个简单的流程图。

思维导图(Mind)模式

思维导图模式适合构建树状结构的思维导图，常用于知识整理、头脑风暴等场景。

基本使用示例：

import GGEditor, { Mind } from 'gg-editor';

// 定义思维导图数据
const mindData = {
  label: '中心主题',
  children: [
    {
      label: '主要分支1',
      children: [
        { label: '子主题1' },
        { label: '子主题2' }
      ]
    },
    {
      label: '主要分支2'
    }
  ]
};

function MindExample() {
  return (
    <GGEditor>
      <Mind data={mindData} />
    </GGEditor>
  );
}

这个示例创建了一个包含多个分支的思维导图结构。

开发环境搭建

如果你想在本地运行和修改 GGEditor 的示例代码，可以按照以下步骤搭建开发环境：

1. 克隆项目仓库到本地
2. 进入项目目录
3. 安装项目依赖
4. 启动开发服务器

git clone 项目仓库地址
cd gg-editor
npm install
npm start

启动后，你可以在本地访问各种示例，方便学习和调试。

进阶建议

掌握了基本用法后，你可以进一步探索：

1. 自定义节点样式和形状
2. 添加交互事件处理
3. 实现数据持久化和加载
4. 集成到现有项目中
5. 开发自定义插件扩展功能

GGEditor 提供了丰富的 API 和扩展点，可以满足各种复杂的可视化编辑需求。

希望这篇指南能帮助你快速上手 GGEditor，开始构建强大的图形编辑应用！