Comments (11)
@Yeung2017 可以参考以下注册代码:
<RegisterNode
name="model-card"
config={{
draw(item) {
const group = item.getGraphicGroup();
const model = item.getModel();
const width = 184;
const height = 40;
const x = -width / 2;
const y = -height / 2;
const borderRadius = 4;
const keyShape = group.addShape('rect', {
attrs: {
x,
y,
width,
height,
radius: borderRadius,
fill: 'white',
stroke: '#CED4D9',
},
});
// 左侧色条
group.addShape('path', {
attrs: {
path: [
['M', x, y + borderRadius],
['L', x, y + height - borderRadius],
['A', borderRadius, borderRadius, 0, 0, 0, x + borderRadius, y + height],
['L', x + borderRadius, y],
['A', borderRadius, borderRadius, 0, 0, 0, x, y + borderRadius],
],
fill: this.color_type,
},
});
// 类型 logo
group.addShape('image', {
attrs: {
img: this.type_icon_url,
x: x + 16,
y: y + 12,
width: 20,
height: 16,
},
});
// 名称文本
const label = model.label ? model.label : this.label;
group.addShape('text', {
attrs: {
text: label,
x: x + 52,
y: y + 13,
textAlign: 'start',
textBaseline: 'top',
fill: 'rgba(0,0,0,0.65)',
},
});
// 状态 logo
group.addShape('image', {
attrs: {
img: this.state_icon_url,
x: x + 158,
y: y + 12,
width: 16,
height: 16,
},
});
return keyShape;
},
// 设置锚点
anchor: [
[0.5, 0], // 上面边的中点
[0.5, 1], // 下边边的中点
],
}}
/>
from ggeditor.
想问一下 ggeditor自定义组件 出了text img之类 能自定义dom元素吗
from ggeditor.
是的,模型流程图中的 Item
并非内置形状,需要自己封装。
from ggeditor.
@gaoli 谢谢.
参考了你的代码才发现是没有返回正确元素的keyShape的原因.
最开始,我做了如下return,所以导致锚点不对:
return group.addShape('text', {
attrs: {
// 截取文本避免超长
text: fp.truncate({
length: maxLableLength,
omission: '…'
}, label),
x: x + 52,
y: y + (height - fontSize) / 2,
textAlign: 'start',
textBaseline: 'top',
fill: 'rgba(0,0,0,0.65)',
fontSize,
color
}
});
还是文档没吃透,导致花了很多时间查这个bug
from ggeditor.
👍
from ggeditor.
@Yeung2017 请问下,这里是如何实现的?
我参考了上面的注册代码,但是拖拽面板元素的实现还是很模糊,请指教,谢谢!
from ggeditor.
@Yeung2017 请问下,这里是如何实现的?
我参考了上面的注册代码,但是拖拽面板元素的实现还是很模糊,请指教,谢谢!
请问是如何引用自定义节点的
from ggeditor.
@Yeung2017 可以参考以下注册代码:
<RegisterNode name="model-card" config={{ draw(item) { const group = item.getGraphicGroup(); const model = item.getModel(); const width = 184; const height = 40; const x = -width / 2; const y = -height / 2; const borderRadius = 4; const keyShape = group.addShape('rect', { attrs: { x, y, width, height, radius: borderRadius, fill: 'white', stroke: '#CED4D9', }, }); // 左侧色条 group.addShape('path', { attrs: { path: [ ['M', x, y + borderRadius], ['L', x, y + height - borderRadius], ['A', borderRadius, borderRadius, 0, 0, 0, x + borderRadius, y + height], ['L', x + borderRadius, y], ['A', borderRadius, borderRadius, 0, 0, 0, x, y + borderRadius], ], fill: this.color_type, }, }); // 类型 logo group.addShape('image', { attrs: { img: this.type_icon_url, x: x + 16, y: y + 12, width: 20, height: 16, }, }); // 名称文本 const label = model.label ? model.label : this.label; group.addShape('text', { attrs: { text: label, x: x + 52, y: y + 13, textAlign: 'start', textBaseline: 'top', fill: 'rgba(0,0,0,0.65)', }, }); // 状态 logo group.addShape('image', { attrs: { img: this.state_icon_url, x: x + 158, y: y + 12, width: 16, height: 16, }, }); return keyShape; }, // 设置锚点 anchor: [ [0.5, 0], // 上面边的中点 [0.5, 1], // 下边边的中点 ], }} />
力哥,请问这段自定义节点代码怎么挂载到Flow流程图
from ggeditor.
@Yeung2017 请问你的代码里面的item是什么?不会用啊
from ggeditor.
想问一下 ggeditor自定义组件 出了text img之类 能自定义dom元素吗
同问
from ggeditor.
@Yeung2017 请问你的代码里面的item是什么?不会用啊
@blindperson 你好,这个问题怎么解决的?
from ggeditor.
Related Issues (20)
- 3.x 如何阻止双击FlowNode可以编辑节点名 HOT 1
- Mind删除节点会调用什么接口
- 这个文档后续能继续更新吗,现在文档不全很多功能没法使用 HOT 2
- 哪位大牛告知下使用文档在哪里?找不到..... HOT 1
- 如何更新自定义节点的局部样式呢?graph.updateItem报错不是方法 HOT 4
- Mind Editor Drag and Drop nodes
- 通过ENV变量控制埋点开关 HOT 1
- 麻烦看下https://www.yuque.com/ggeditor/api/flow 提供的文档404 HOT 1
- editor区域大小发生变化时视口并未随之更新 HOT 2
- 两个锚点只能是直线链接
- ERROR when using with Next.js. GGEditor is no longer maintained?
- http://ggeditor.com/docs/api/command.zh-CN.html 这个文档打不开了吗? HOT 1
- 您好,Flow组件如何设置只读,Flow上的顶点和线只读不能拖动和修改,这个可以设置吗? HOT 1
- koni支持自动拓扑
- koni如何提供点击展开功能
- 是否提供流程图导出功能?以及导出后的二次编辑功能呢? HOT 1
- When redo command is trigger no edges are restored
- 拖进一个新节点时, 默认的虚线框能修改吗
- 还有人维护吗 HOT 1
- 理性讨论:创建这个项目的人是不是有病? HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ggeditor.