本文记录了在项目中使用G6-Editor的详细步骤和遇到的问题。从界面布局到优化完善，逐一介绍每个阶段，并特别指出在引用样式、React与Vue语法差异以及API查找上的注意事项。在实现过程中发现，保存的图形数据在刷新后重新绘制时，边的连接点位置发生变化，尽管数据保持一致。目前寻求解决方案。
项目中需要使用G6-Editor。现写个文章记录下。
思路：
到github上面将官网的例子下下来（官网使用react写，项目是使用vue写，但是两者差不多）。接着结合官网的例子和api，弄个demo出来。然后一步步优化和完善。
步骤：
界面布局->toolbar->itemPanel->minimap->page->detailpannel->contextmenu->优化完善
参考官网的例子时，有以下需要注意：
1.样式也要引入。 官网的一些效果和例子也有关系的。比如detailPanel面板。我一开始做的时候只引入了代码，样式文件没引入。这样是没有点击node显示node相关的面板，点击edge显示edge相关的面板这种效果（我的效果是detailPanel那边的内容全部显示，不会根据node、edge动态区分）。后面找了半天才发现是自己样式没引入导致的。（官网的样式默认detailPanel那边隐藏起来，display:none。但是这个我没写）。
2.demo是使用react写的，使用的是react语法，不能直接搬运。 我参考例子的时候，写了个XX.setState()。 然后就报错了。一开始没有想到是react的专有语法，还以为自己用的哪里不对，然后又使用g6 1.2.8版本去写编辑器，后面突然反应过来的，然后又换成g6-editor来写。
这两点都说明在写的时候需要细心点。
3.g6-editor 的api很短。所以很多东西需要去官方的demo里面找，g6的demo里面找。（没办法，谁让他api很不完善。找着找着也就会玩了。） 还有一个办法是打debugger。在editor和page那边打debugger。然后在控制台那边显示出来，看看他们有哪些属性和方法。
希望g6-editor的文档尽快完善，现在真的不怎么方便。
最后效果：
代码：
<template xmlns="http://www.w3.org/1999/html">
<div class="container-fluid" ref = "container">
<div class="editor">
<!-- 工具栏 DOM 结构规约参考 Toolbar API -->
<div id="toolbar">
<i data-command="back" class="command iconfont icon-back" title="返回" ></i>
<span class="separator"></span>
<i data-command="undo" class="command iconfont icon-undo" title="撤销"></i>
<i data-command="redo" class="command iconfont icon-redo" title="重做"></i>
<span class="separator"></span>
<i data-command="addBeginNode" class="command iconfont icon-add-begin-node" title="新增起始节点"></i>
<i data-command="copy" class="command iconfont icon-copy-o" title="复制"></i>
<i data-command="paste" class="command iconfont icon-paster-o" title="粘贴"></i>
<i data-command="delete" class="command iconfont icon-delete-o" title="删除"></i>
<i data-command="clear" class="command iconfont icon-clear" title="清空画布"></i>
<span class="separator"></span>
<i data-command="zoomIn" class="command iconfont icon-zoom-in-o" title="放大"></i>
<i data-command="zoomOut" class="command iconfont icon-zoom-out-o" title="缩小"></i>
<i data-command="autoZoom" class="command iconfont icon-fit" title="适应画布"></i>
<i data-command="resetZoom" class="command iconfont icon-actual-size-o" title="实际尺寸"></i>
<span class="separator"></span>
<i data-command="toBack" class="command iconfont icon-to-back" title="层级后置"></i>
<i data-command="toFront" class="command iconfont icon-to-front" title="层级前置"></i>
<span class="separator"></span>
<i data-command="multiSelect" class="command iconfont icon-select" title="多选"></i>
<span class="separator"></span>
<i data-command="save" class="command iconfont icon-save" title="保存"></i>
</div>
<div style="height:42px;"></div>
<div class="editor-content">
<!-- 元素面板栏 DOM 结构规约参考 Itempannel API -->
<div id="itempannel">
<div class="getItem" data-type="node" data-shape="flow-rect" data-size="120*48" data-color="#1890FF">
<img draggable="false"
src="../../../assets/images/condition-node.png"/>
</div>
<div class="getItem" data-type="node" data-shape="flow-capsule" data-size="80*48"
data-color="#FD0DFF">
<img draggable="false"
src="../../../assets/images/message-node.png"/>
</div>
</div>
<div class="right-side">
<!-- 详情面板栏 DOM 结构规约参考 Detailpannel API -->
<div id="detailpannel">
<div data-status="node-selected" class="pannel">
<div class="pannel-title">节点属性栏</div>
<div class="pannel-container">
<el-form ref="form" label-width="80px">
<el-form-item label="条件" v-if="showCond">
<el-select v-model="condType" placeholder="请选择条件"
@change="condTypeSelectChange">
<el-option v-for="(cItem, cIndex) in conditionList" :label="cItem.name"
:value="cItem.code" :key="cIndex"></el-option>
</el-select>
</el-form-item>
<el-form-item label="判断方法" v-if="showOperator">
<el-select v-model="operator" @change="enableChangeData">
<el-option v-for="(oItem, oIndex) in operatorList" :label="oItem.name"
:value="oItem.code" :key="oIndex"></el-option>
</el-select>
</el-form-item>
<el-form-item label="值" v-if="showValue">
<el-select v-model="value" @change="enableChangeData" filterable>
<el-option v-for="(vItem, vIndex) in valueList" :label="vItem.name"
:value="vItem.code" :key="vItem.code"></el-option>
</el-select>
</el-form-item>
<el-form-item label="疾病" v-if="showDisease">
<el-badge :value="diseaseSelectedLength" class="item">
<div title="选择既往史" class="btn btn-disease-setting" @click = "showDiseaseDialog"><i class="ti-settings"></i></div>
</el-badge>
</el-form-item>
<el-form-item label="级别" v-if="showGrade">
<el-col :span="11">
<el-select v-model="grade" @change="enableChangeData">
<el-option v-for="(gItem, gIndex) in gradeList" :label="gItem.name"
:value="gItem.code" :key="gIndex"></el-option>
</el-select>
</el-col>
<el-col class="line" :span="2"></el-col>
<el-col :span="11">
<el-color-picker v-model="color" size="medium"
:disabled="true"></el-color-picker>
</el-col>
</el-form-item>
<el-form-item label="程度" v-if="showGrade">
<el-col :span="9">
<el-select v-model="level" @change="enableChangeData">
<el-option v-for="(lItem, lIndex) in levelList" :label="lItem.name"
:value="lItem.code" :key="lIndex"></el-option>
</el-select>
</el-col>
<el-col class="line" :span="6">字体</el-col>
<el-col :span="9">
<el-input v-model="fontSize" :disabled="true">
</el-input>
</el-col>
</el-form-item>
</el-form>
</div>
</div>
<div data-status="edge-selected" class="pannel">
<div class="pannel-title">边属性栏</div>
<div class="pannel-container"></div>
</div>
<div data-status="group-selected" class="pannel">
<div class="pannel-title">群组属性栏</div>
<div class="pannel-container"></div>
</div>
<div data-status="canvas-selected" class="pannel">
<div class="pannel-title">画布属性栏</div>
<div class="pannel-container"></div>
</div>
<div data-status="multi-selected" class="pannel">
<div class="pannel-title">多选时属性栏</div>
<div class="pannel-container"></div>
</div>
</div>
<div id="navigator">
<div class="pannel-title">缩略图</div>
<!-- 缩略图 DOM 结构规约参考 Minimap API -->
<div id="minimap"></div>
<div class="zoom-slider">
<div class="slider-outer-ctn">
<el-slider v-model="zoomSlider" :format-tooltip="formatTooltip" @change="changeZoom"
:min="minZoom * 100" :max="maxZoom * 100"></el-slider>
</div>
<el-dropdown class="dropdown-inner-ctn" @command="handleDropdownChange">
<span class="el-dropdown-link">
{
{Math.ceil(curZoom * 100)}} %<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="0.5">50%</el-dropdown-item>
<el-dropdown-item command="1">100%</el-dropdown-item>
<el-dropdown-item command="1.5">150%</el-dropdown-item>
<el-dropdown-item command="2">200%</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</div>
<!-- 右键菜单栏 DOM 结构规约参考 Contextmenu API -->
<div id="contextmenu">
<div data-status="node-selected" class="menu">
<div data-command="copy" class="command">复制</div>
<div data-command="paste" class="command">粘贴</div>
<div data-command="delete" class="command">删除</div>
</div>
<div data-status="edge-selected" class="menu">
<div ton data-command="delete" class="command">删除</div>
</div>
<div data-status="group-selected" class="menu">
<div data-command="copy" class="command">复制</div>
<div data-command="paste" class="command">粘贴</div>
<div data-command="unGroup" class="command">解组</div>
<div data-command="delete" class="command"&
最低0.47元/天 解锁文章
扫一扫
8787
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
