Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
constructor(attrs) {
super();
this.sizeBox = [ 0, 0, 0, 0 ]; // group内部大小
this.renderBox = [ 0, 0, 0, 0 ] // 对于外接容器大小
this.container = new Group();
this.container.attr({ bgcolor: 'rgba(255,255,255,0.1)', size: [ 0.1, 0.1 ], clipOverflow: false });// 将group设置成非常小,不影响其他dom,并且不clip内部元素
this.validatorSchema(attrs);
[ 'dragstart', 'drag', 'dragend', 'dragover', 'dragenter', 'dragleave', 'drop', 'click', 'dblclick', 'mouseenter', 'mouseleave', 'mousemove', 'mousedown' ].forEach(evt => { // 透传container上的事件
this.container.on(evt, (e) => {
this.dispatchEvent(evt, e);
})
});
// workflow append 的时候触发mounted
this.on('mounted', this.mounted);
// 拖动的时候,修改renderBox
this.on('drag', () => {
const [ oX, oY ] = this.container.renderBox;
this.renderBox = [ oX + this.sizeBox[ 0 ], oY + this.sizeBox[ 1 ], oX + this.sizeBox[ 2 ], oY + this.sizeBox[ 3 ] ];
})
draw: function () {
const { text, fillColor, textAttrs, shapeAttrs } = this.attr();
this.points = this.points || shapeAttrs.points;
this.$shape = new Polygon();
let mergeShapeAttr = newObj({
points: this.points,
fillColor,
// anchor: [0.5, 0.5],
}, shapeAttrs);
this.points = mergeShapeAttr.points;
this.attr({ shapeAttrs: mergeShapeAttr });
this.$shape.attr(mergeShapeAttr);
this.append(this.$shape);
addLabel.call(this, text, textAttrs)
}
}
import { install } from 'sprite-extend-shapes'
import { Base } from './base'
import { Step } from './step'
import { Link } from './link'
import * as spritejs from 'spritejs'
import { _steps, _links, _workflow, _render, _isDragging, _hasLinkReject } from './symbolNames'
import * as functions from './functions'
import { getType } from './utils'
import { Ticks } from './ticks'
const { Scene } = spritejs;
spritejs.use(install);
class Workflow extends Base {
constructor(attrs) {
super(attrs);
/*****
* selector:css选择器
* size:canvas大小
* zoom:是缩放
* **/
this.ticks = new Ticks(); // 自身的ticks函数处理
this.attr(Object.assign({
'selector': '',
'size': [ 600, 400 ],
'zoom': [ 0.5, 2 ]
}, attrs));
const { selector, size } = this.attr();
const scene = new Scene(selector, {
draw: function () {
const { text, fillColor, textAttrs, shapeAttrs } = this.attr();
this.$shape = new Ellipse();
let mergeShapeAttr = newObj({
fillColor,
radiusX: 50,
radiusY: 24,
// anchor: [0.5, 0.5]
}, shapeAttrs);
this.attr({ shapeAttrs: mergeShapeAttr });
this.$shape.attr(mergeShapeAttr)
this.append(this.$shape);
addLabel.call(this, text, textAttrs)
}
},
curve: function() {
this.$line = new Polycurve();
const { points, lineAttrs } = this.attr();
let mergeLinkAttrs = newObj({ lineWidth: 1, color: '#eee' }, lineAttrs, { points: points });
this.$line.attr(mergeLinkAttrs);
this.append(this.$line)
},
polyline: function () { // 折线连接
polyline: function () { // 折线连接
this.$line = new Polyline();
this.$arrow = new Triangle();
const { startPoint, endPoint, text, textAttrs, lineAttrs } = this.attr();
const { lineWidth = 1 } = lineAttrs;
let insertPoint = [ endPoint[ 0 ], startPoint[ 1 ] ];
if (Math.abs(endPoint[ 1 ] - startPoint[ 1 ]) < Math.abs(endPoint[ 0 ] - startPoint[ 0 ])) {
insertPoint = [ startPoint[ 0 ], endPoint[ 1 ] ];
}
let lineEndPoint = getPointByDistance(endPoint, insertPoint, lineWidth)
let mergeLinkAttrs = newObj({ lineWidth: 1, color: '#eee', bgcolor: '#f00' }, lineAttrs, { points: [ startPoint, insertPoint, lineEndPoint ] });
this.$line.attr(mergeLinkAttrs);
this.$arrow.attr({ color: mergeLinkAttrs.color, pos: [ endPoint ], sides: [ 8 + lineWidth, 8 + lineWidth ], angle: 45, fillColor: mergeLinkAttrs.color });
this.append(this.$line);
this.append(this.$arrow);
if (getType(text) === 'string') {
this.$label = new Label(text);
this.$label.attr(newObj({}, textAttrs, { anchor: [ 0.5, 0.5 ], clipOverflow: false }))
polyline: function () { // 折线连接
this.$line = new Polyline();
this.$arrow = new Triangle();
const { startPoint, endPoint, text, textAttrs, lineAttrs } = this.attr();
const { lineWidth = 1 } = lineAttrs;
let insertPoint = [ endPoint[ 0 ], startPoint[ 1 ] ];
if (Math.abs(endPoint[ 1 ] - startPoint[ 1 ]) < Math.abs(endPoint[ 0 ] - startPoint[ 0 ])) {
insertPoint = [ startPoint[ 0 ], endPoint[ 1 ] ];
}
let lineEndPoint = getPointByDistance(endPoint, insertPoint, lineWidth)
let mergeLinkAttrs = newObj({ lineWidth: 1, color: '#eee', bgcolor: '#f00' }, lineAttrs, { points: [ startPoint, insertPoint, lineEndPoint ] });
this.$line.attr(mergeLinkAttrs);
this.$arrow.attr({ color: mergeLinkAttrs.color, pos: [ endPoint ], sides: [ 8 + lineWidth, 8 + lineWidth ], angle: 45, fillColor: mergeLinkAttrs.color });
this.append(this.$line);
this.append(this.$arrow);
if (getType(text) === 'string') {
this.$label = new Label(text);
this.$label.attr(newObj({}, textAttrs, { anchor: [ 0.5, 0.5 ], clipOverflow: false }))
this.append(this.$label);
if (!isWeixinApp() && opts.forceFit) {
opts.viewport = 'auto'
} else {
opts.viewport = opts.size ? opts.size : [opts.width, opts.height]
}
/**
{
vwr: 1,
layer: 'fglayer',
}
*/
if (isWeixinApp()) {
let [width, height] = opts.viewport;
let pixelRatio = opts.pixelRatio || 'px';
this.scene = new Scene(Number(width) || null, Number(height) || null, pixelRatio);
} else {
this.scene = new Scene(container, {
displayRatio: 'auto',
...opts
})
}
const layerID = opts.layer || 'default'
if (isWeixinApp()) {
this.layer = this.scene.layer(layerID, opts.component)
} else {
this.layer = this.scene.layer(layerID)
}
if (isDev) {
this.layer.on('update', debounce(() => {
console.info(
} else {
opts.viewport = opts.size ? opts.size : [opts.width, opts.height]
}
/**
{
vwr: 1,
layer: 'fglayer',
}
*/
if (isWeixinApp()) {
let [width, height] = opts.viewport;
let pixelRatio = opts.pixelRatio || 'px';
this.scene = new Scene(Number(width) || null, Number(height) || null, pixelRatio);
} else {
this.scene = new Scene(container, {
displayRatio: 'auto',
...opts
})
}
const layerID = opts.layer || 'default'
if (isWeixinApp()) {
this.layer = this.scene.layer(layerID, opts.component)
} else {
this.layer = this.scene.layer(layerID)
}
if (isDev) {
this.layer.on('update', debounce(() => {
console.info(
`%c如果持续打印该信息,说明 layer 在不断重绘,需要找出问题!`,
'color: red'
let lines = this.renderLines
let patchPoints = {
start: [],
end: []
}
let areaAttrs = { lineWidth: 0, opacity: 0.5 }
let cusAttrs = this.style('area')(areaAttrs, null, 0)
Object.assign(areaAttrs, cusAttrs)
let layer = this.areaLayer
layer.canvas.style.opacity = areaAttrs.opacity
layer.clear()
if (compositeOperation) {
layer.context.globalCompositeOperation = compositeOperation
}
let group = new Group()
group.attr(this.attr())
layer.append(group)
this.renderLines.forEach((line, i) => {
let color = this.color(i)
let areaAttrs = {
fillColor: color,
lineWidth: 0,
strokeColor: 'transparent'
}
let cusAttrs = this.style('area')(
areaAttrs,
line.data.map(item => item.dataOrigin),
i
)
Object.assign(areaAttrs, cusAttrs)
if (cusAttrs !== false) {