277 lines
8.3 KiB
Vue
277 lines
8.3 KiB
Vue
<template>
|
||
<div>
|
||
<h1>Node实例</h1>
|
||
<p>每个节点都会实例化一个<code>node</code>实例</p>
|
||
<h2>属性</h2>
|
||
<h3>nodeData</h3>
|
||
<p>该节点对应的真实数据</p>
|
||
<h3>uid</h3>
|
||
<p>该节点唯一的标识</p>
|
||
<h3>isRoot</h3>
|
||
<p>是否是根节点</p>
|
||
<h3>layerIndex</h3>
|
||
<p>节点层级</p>
|
||
<h3>width</h3>
|
||
<p>节点的宽</p>
|
||
<h3>height</h3>
|
||
<p>节点的高</p>
|
||
<h3>left</h3>
|
||
<p>节点的<code>left</code>位置</p>
|
||
<h3>top</h3>
|
||
<p>节点的<code>top</code>位置</p>
|
||
<h3>parent</h3>
|
||
<p>节点的父节点</p>
|
||
<h3>children</h3>
|
||
<p>节点的子节点列表</p>
|
||
<h3>group</h3>
|
||
<p>节点是内容容器，<code>svg</code>对象</p>
|
||
<h3>isDrag</h3>
|
||
<blockquote>
|
||
<p>v0.1.5+</p>
|
||
</blockquote>
|
||
<p>节点是否正在拖拽中</p>
|
||
<h2>方法</h2>
|
||
<h3>getPureData(removeActiveState = true, removeId = false)</h3>
|
||
<blockquote>
|
||
<p>v0.9.0+</p>
|
||
</blockquote>
|
||
<ul>
|
||
<li>
|
||
<p><code>removeActiveState</code>：是否移除节点的激活状态</p>
|
||
</li>
|
||
<li>
|
||
<p><code>removeId</code>：是否移除节点的uid字段</p>
|
||
</li>
|
||
</ul>
|
||
<p>序列化节点，获取该节点的纯数据，不包含对节点实例的引用。</p>
|
||
<h3>setGeneralizationOpacity(val)</h3>
|
||
<blockquote>
|
||
<p>v0.9.0+</p>
|
||
</blockquote>
|
||
<ul>
|
||
<li><code>val</code>：Number, 0-1，透明度</li>
|
||
</ul>
|
||
<p>设置概要节点及曲线的透明度。</p>
|
||
<h3>formatGetGeneralization()</h3>
|
||
<blockquote>
|
||
<p>v0.9.0+</p>
|
||
</blockquote>
|
||
<p>获取节点概要数据。</p>
|
||
<h3>getIndexInBrothers()</h3>
|
||
<blockquote>
|
||
<p>v0.9.0+</p>
|
||
</blockquote>
|
||
<p>获取该节点在兄弟节点列表中的索引。</p>
|
||
<h3>getRectInSvg()</h3>
|
||
<blockquote>
|
||
<p>v0.9.0+</p>
|
||
</blockquote>
|
||
<p>获取节点的尺寸和位置信息，宽高是应用了缩放效果后的实际宽高，位置信息相对于画布。</p>
|
||
<h3>getRect()</h3>
|
||
<blockquote>
|
||
<p>v0.8.1+</p>
|
||
</blockquote>
|
||
<p>获取节点的尺寸和位置信息，宽高是应用了缩放效果后的实际宽高，位置是相对于浏览器窗口左上角的位置。</p>
|
||
<h3>ancestorHasGeneralization()</h3>
|
||
<blockquote>
|
||
<p>v0.8.1+</p>
|
||
</blockquote>
|
||
<p>检查是否存在有概要的祖先节点。</p>
|
||
<h3>getNoteContentPosition()</h3>
|
||
<blockquote>
|
||
<p>v0.8.1+</p>
|
||
</blockquote>
|
||
<p>获取节点备注显示位置。当节点存在备注且正在显示状态时，如果拖动或缩放会导致备注浮层和节点脱离，那么可以通过该方法获取新位置更新备注浮层。</p>
|
||
<h3>updateNodeByActive(active)</h3>
|
||
<blockquote>
|
||
<p>v0.8.0+</p>
|
||
</blockquote>
|
||
<ul>
|
||
<li><code>active</code>：Boolean，激活状态。</li>
|
||
</ul>
|
||
<p>根据是否激活更新节点。主要是更新节点的展开收起按钮的显示隐藏。</p>
|
||
<h3>setOpacity(val)</h3>
|
||
<blockquote>
|
||
<p>v0.7.2+</p>
|
||
</blockquote>
|
||
<ul>
|
||
<li><code>val</code>：透明度，0-1</li>
|
||
</ul>
|
||
<p>设置节点透明度，包括连接线和下级节点。</p>
|
||
<h3>hideChildren()</h3>
|
||
<blockquote>
|
||
<p>v0.7.2+</p>
|
||
</blockquote>
|
||
<p>隐藏下级节点。</p>
|
||
<h3>showChildren()</h3>
|
||
<blockquote>
|
||
<p>v0.7.2+</p>
|
||
</blockquote>
|
||
<p>显示下级节点。</p>
|
||
<h3>hasCustomStyle()</h3>
|
||
<blockquote>
|
||
<p>v0.6.2+</p>
|
||
</blockquote>
|
||
<p>获取是否设置了自定义样式。</p>
|
||
<h3>getSize()</h3>
|
||
<p>通过重新创建节点内容更新节点的宽高，返回一个布尔值，代表是否宽高发生了变化</p>
|
||
<h3>render()</h3>
|
||
<p>递归渲染该节点及其所有子节点</p>
|
||
<h3>updateNodeShape()</h3>
|
||
<blockquote>
|
||
<p>v0.5.0+</p>
|
||
</blockquote>
|
||
<p>更新节点形状节点。比如当节点状态改变后，调用该方法显示或取消激活样式。</p>
|
||
<h3>remove()</h3>
|
||
<p>递归删除，只是从画布删除，节点容器还在，后续还可以重新插回画布</p>
|
||
<h3>destroy()</h3>
|
||
<blockquote>
|
||
<p>v0.5.0+</p>
|
||
</blockquote>
|
||
<p>销毁节点，不但会从画布删除，而且原节点直接置空，后续无法再插回画布</p>
|
||
<h3>renderLine()</h3>
|
||
<p>重新渲染该节点到其子节点之间的连线</p>
|
||
<h3>removeLine()</h3>
|
||
<p>移除该节点到其子节点之间的连线</p>
|
||
<h3>renderExpandBtn()</h3>
|
||
<p>渲染展开收缩按钮的内容</p>
|
||
<h3>removeExpandBtn()</h3>
|
||
<p>移除展开收缩按钮</p>
|
||
<h3>getStyle(prop, root, isActive)</h3>
|
||
<p>获取某个最终应用到该节点的样式值</p>
|
||
<p><code>prop</code>：要获取的样式属性</p>
|
||
<p><code>root</code>：是否是根节点，默认<code>false</code></p>
|
||
<p><code>isActive</code>：v0.7.0+已废弃，获取的是否是激活状态的样式值，默认<code>false</code></p>
|
||
<h3>setStyle(prop, value, isActive)</h3>
|
||
<p><code>isActive</code>：v0.7.0+已废弃</p>
|
||
<p>修改节点的某个样式，<code>SET_NODE_STYLE</code>命令的快捷方法</p>
|
||
<h3>setStyles(style, isActive)</h3>
|
||
<blockquote>
|
||
<p>v0.6.12+</p>
|
||
</blockquote>
|
||
<p><code>isActive</code>：v0.7.0+已废弃</p>
|
||
<p>修改节点多个样式，<code>SET_NODE_STYLES</code>命令的快捷方法</p>
|
||
<h3>getData(key)</h3>
|
||
<p>获取该节点真实数据<code>nodeData</code>的<code>data</code>对象里的指定值，<code>key</code>不传返回这个<code>data</code>对象</p>
|
||
<h3>setData(data)</h3>
|
||
<p>设置节点数据，<code>SET_NODE_DATA</code>命令的快捷方法，这个方法和命令不会更新视图，所以如果你要修改文本，就使用<code>setText</code>方法，或者用手指文本的命令。</p>
|
||
<h3>setText(text, richText, resetRichText)</h3>
|
||
<ul>
|
||
<li>
|
||
<p><code>richText</code>：v0.4.2+，<code>Boolean</code>，如果要设置的是富文本内容，也就是<code>html</code>字符，<code>richText</code>需要传<code>true</code></p>
|
||
</li>
|
||
<li>
|
||
<p><code>resetRichText</code>：v0.6.10+，<code>Boolean</code>，是否要复位富文本，默认为<code>false</code>，如果传<code>true</code>那么会重置富文本节点的样式</p>
|
||
</li>
|
||
</ul>
|
||
<p>设置节点文本，<code>SET_NODE_TEXT</code>命令的快捷方法</p>
|
||
<h3>setImage(imgData)</h3>
|
||
<p>设置节点图片，<code>SET_NODE_IMAGE</code>命令的快捷方法</p>
|
||
<h3>setIcon(icons)</h3>
|
||
<p>设置节点图标，<code>SET_NODE_ICON</code>命令的快捷方法</p>
|
||
<h3>setHyperlink(link, title)</h3>
|
||
<p>设置节点超链接，<code>SET_NODE_HYPERLINK</code>命令的快捷方法</p>
|
||
<h3>setNote(note)</h3>
|
||
<p>设置节点备注，<code>SET_NODE_NOTE</code>命令的快捷方法</p>
|
||
<h3>setTag(tag)</h3>
|
||
<p>设置节点标签，<code>SET_NODE_TAG</code>的快捷方法</p>
|
||
<h3>hide()</h3>
|
||
<blockquote>
|
||
<p>v0.1.5+</p>
|
||
</blockquote>
|
||
<p>隐藏节点及其下级节点</p>
|
||
<h3>show()</h3>
|
||
<blockquote>
|
||
<p>v0.1.5+</p>
|
||
</blockquote>
|
||
<p>显示节点及其下级节点</p>
|
||
<h3>isParent(node)</h3>
|
||
<blockquote>
|
||
<p>v0.1.5+：检测当前节点是否是某个节点的祖先节点</p>
|
||
</blockquote>
|
||
<blockquote>
|
||
<p>v0.8.1+：检测当前节点是否是某个节点的父节点</p>
|
||
</blockquote>
|
||
<h3>isAncestor(node)</h3>
|
||
<blockquote>
|
||
<p>v0.8.1+</p>
|
||
</blockquote>
|
||
<p>检测当前节点是否是某个节点的祖先节点</p>
|
||
<h3>isBrother(node)</h3>
|
||
<blockquote>
|
||
<p>v0.1.5+</p>
|
||
</blockquote>
|
||
<p>检测当前节点是否是某个节点的兄弟节点</p>
|
||
<h3>checkHasGeneralization()</h3>
|
||
<blockquote>
|
||
<p>v0.2.0+</p>
|
||
</blockquote>
|
||
<p>检查是否存在概要</p>
|
||
<h3>checkHasSelfGeneralization()</h3>
|
||
<blockquote>
|
||
<p>v0.9.0+</p>
|
||
</blockquote>
|
||
<p>检查是否存在自身的概要，非子节点区间概要</p>
|
||
<h3>hideGeneralization()</h3>
|
||
<blockquote>
|
||
<p>v0.2.0+</p>
|
||
</blockquote>
|
||
<p>隐藏概要节点</p>
|
||
<h3>showGeneralization()</h3>
|
||
<blockquote>
|
||
<p>v0.2.0+</p>
|
||
</blockquote>
|
||
<p>显示概要节点</p>
|
||
<h3>updateGeneralization()</h3>
|
||
<blockquote>
|
||
<p>v0.2.0+</p>
|
||
</blockquote>
|
||
<p>更新概要节点</p>
|
||
<h3>hasCustomPosition()</h3>
|
||
<blockquote>
|
||
<p>v0.2.0+</p>
|
||
</blockquote>
|
||
<p>检查节点是否存在自定义数据</p>
|
||
<h3>ancestorHasCustomPosition()</h3>
|
||
<blockquote>
|
||
<p>v0.2.0+</p>
|
||
</blockquote>
|
||
<p>检查节点是否存在自定义位置的祖先节点</p>
|
||
<h3>getShape()</h3>
|
||
<blockquote>
|
||
<p>v0.2.4+</p>
|
||
</blockquote>
|
||
<p>获取节点形状</p>
|
||
<h3>setShape(shape)</h3>
|
||
<blockquote>
|
||
<p>v0.2.4+</p>
|
||
</blockquote>
|
||
<p>设置节点形状，<code>SET_NODE_SHAPE</code>命令的快捷方法</p>
|
||
<h3>getSelfStyle(prop)</h3>
|
||
<blockquote>
|
||
<p>v0.2.5+</p>
|
||
</blockquote>
|
||
<p>获取节点自身的自定义样式</p>
|
||
<h3>getParentSelfStyle(prop)</h3>
|
||
<blockquote>
|
||
<p>v0.2.5+</p>
|
||
</blockquote>
|
||
<p>获取最近一个存在自身自定义样式的祖先节点的自定义样式</p>
|
||
<h3>getSelfInhertStyle(prop)</h3>
|
||
<blockquote>
|
||
<p>v0.2.5+</p>
|
||
</blockquote>
|
||
<p>获取自身可继承的自定义样式</p>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
|
||
</style> |