feat：project overview重构 初版样式未调整
This commit is contained in:
zhangyu
@@ -0,0 +1,585 @@
|
||||
import {register as registerFlow} from '@topology/flow-diagram'
|
||||
import {register as registerActivity} from '@topology/activity-diagram'
|
||||
import {register as registerSequence} from '@topology/sequence-diagram'
|
||||
import {register as registerChart} from '@topology/chart-diagram';
|
||||
import { Node, Rect,Point, Direction } from '@topology/core';
|
||||
// import { register as registerClass } from './class-diagram/index'
|
||||
export let canvas;
|
||||
|
||||
export function canvasRegister(){
|
||||
registerFlow();
|
||||
registerActivity();
|
||||
registerSequence();
|
||||
registerChart();
|
||||
// registerClass()
|
||||
}
|
||||
|
||||
export const Tools=[
|
||||
{
|
||||
group:'基本形状',
|
||||
children:[
|
||||
{
|
||||
name:'rectangleImg',
|
||||
icon:'icon-rect',
|
||||
data:{
|
||||
text:'rect',
|
||||
rect:{
|
||||
width:100,
|
||||
height:100
|
||||
},
|
||||
paddingLeft:10,
|
||||
paddingRight:10,
|
||||
paddingTop:10,
|
||||
paddingBottom:10,
|
||||
name:'rectangleImg',
|
||||
icon: '\ue680',
|
||||
iconFamily: 'nz-icon',
|
||||
iconColor: ''
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'rectangle',
|
||||
icon: 'icon-cube',
|
||||
data: {
|
||||
rect: {
|
||||
width: 100,
|
||||
height: 100
|
||||
},
|
||||
is3D: true,
|
||||
z: 20,
|
||||
zRotate: 15,
|
||||
name: 'myCube',
|
||||
iconFamily: 'topology',
|
||||
iconColor: '#777',
|
||||
iconSize: 30
|
||||
}
|
||||
},
|
||||
{
|
||||
name:'rectangle',
|
||||
icon:'icon-rect',
|
||||
data:{
|
||||
text:'rect',
|
||||
rect:{
|
||||
width:100,
|
||||
height:100
|
||||
},
|
||||
paddingLeft:10,
|
||||
paddingRight:10,
|
||||
paddingTop:10,
|
||||
paddingBottom:10,
|
||||
name:'rectangle',
|
||||
}
|
||||
},
|
||||
{
|
||||
name:'rectangle',
|
||||
icon:'icon-rectangle',
|
||||
data:{
|
||||
text:'rectangle',
|
||||
rect:{
|
||||
width:200,
|
||||
height:50
|
||||
},
|
||||
paddingLeft:10,
|
||||
paddingRight:10,
|
||||
paddingTop:10,
|
||||
paddingBottom:10,
|
||||
borderRadius:0.1,
|
||||
name:'rectangle',
|
||||
// icon: '\ue680',
|
||||
// iconFamily: 'nz-icon',
|
||||
// iconColor: ''
|
||||
}
|
||||
},
|
||||
{
|
||||
name:'circle',
|
||||
icon:'icon-circle',
|
||||
data:{
|
||||
text:'circle',
|
||||
rect:{
|
||||
width:100,
|
||||
height:100
|
||||
},
|
||||
name:'circle',
|
||||
textMaxLine:1
|
||||
}
|
||||
},
|
||||
{
|
||||
name:'triangle',
|
||||
icon:'icon-triangle',
|
||||
data:{
|
||||
text:'triangle',
|
||||
rect:{
|
||||
width:100,
|
||||
height:100
|
||||
},
|
||||
name:'triangle'
|
||||
}
|
||||
},
|
||||
{
|
||||
name:'diamond',
|
||||
icon:'icon-diamond',
|
||||
data:{
|
||||
text:'diamond',
|
||||
rect:{
|
||||
width:100,
|
||||
height:100
|
||||
},
|
||||
name:'diamond'
|
||||
}
|
||||
},
|
||||
{
|
||||
name:'pentagon',
|
||||
icon:'icon-pentagon',
|
||||
data:{
|
||||
text:'pentagon',
|
||||
rect:{
|
||||
width:100,
|
||||
height:100
|
||||
},
|
||||
name:'pentagon'
|
||||
}
|
||||
},
|
||||
{
|
||||
name:'hexagon',
|
||||
icon:'icon-hexagon',
|
||||
data:{
|
||||
text:'hexagon',
|
||||
rect:{
|
||||
width:100,
|
||||
height:100
|
||||
},
|
||||
paddingTop:10,
|
||||
paddingBottom:10,
|
||||
name:'hexagon'
|
||||
}
|
||||
},
|
||||
{
|
||||
name:'pentagram',
|
||||
icon:'icon-pentagram',
|
||||
data:{
|
||||
text:'pentagram',
|
||||
rect:{
|
||||
width:100,
|
||||
height:100
|
||||
},
|
||||
name:'pentagram'
|
||||
}
|
||||
},
|
||||
{
|
||||
name:'image',
|
||||
icon:'icon-image',
|
||||
data:{
|
||||
text:'Nezha',
|
||||
rect:{
|
||||
width:100,
|
||||
height:100
|
||||
},
|
||||
name:'image',
|
||||
image:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3488940205,2956353665&fm=26&gp=0.jpg'
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
group: '自定义图片',
|
||||
children: [
|
||||
{
|
||||
name: 'rectangle',
|
||||
icon: 'icon-image',
|
||||
data: {
|
||||
text: 'Nezha',
|
||||
rect: {
|
||||
width: 100,
|
||||
height: 100
|
||||
},
|
||||
name: 'rectangle',
|
||||
image: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3488940205,2956353665&fm=26&gp=0.jpg',
|
||||
imageRatio:true,
|
||||
"imageAlign":"center",
|
||||
iconRect:{
|
||||
"width":80,
|
||||
"height":80,
|
||||
},
|
||||
"fullIconRect":{"width":80,"height":90,"center":{"x":972,"y":456},"ex":1012,"ey":496}
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export const imageTemp={
|
||||
name: 'rectangleImg',
|
||||
icon: 'icon-image',
|
||||
data: {
|
||||
"type":0,
|
||||
"rect":{
|
||||
"x":922,
|
||||
"y":406,
|
||||
"width":100,
|
||||
"height":100,
|
||||
},
|
||||
"lineWidth":0,
|
||||
"rotate":0,
|
||||
"offsetRotate":0,
|
||||
"globalAlpha":1,
|
||||
"dash":0,
|
||||
"strokeStyle":"#000000",
|
||||
"animatePos":0,
|
||||
"name":"rectangleImg",
|
||||
"lineDashOffset":0,
|
||||
"text":"",
|
||||
"textOffsetX":0,
|
||||
"textOffsetY":0,
|
||||
"visible":true,
|
||||
"zRotate":0,
|
||||
"animateDuration":0,
|
||||
"animateFrames":[],
|
||||
"animateFrame":0,
|
||||
"borderRadius":0,
|
||||
"icon":"",
|
||||
"image":"",
|
||||
"imageAlign":"center",
|
||||
"bkType":0,
|
||||
"gradientAngle":0,
|
||||
"gradientRadius":0.01,
|
||||
"paddingTop":5,
|
||||
"paddingBottom":5,
|
||||
"paddingLeft":5,
|
||||
"paddingRight":5,
|
||||
"paddingLeftNum":5,
|
||||
"paddingRightNum":5,
|
||||
"paddingTopNum":5,
|
||||
"paddingBottomNum":5,
|
||||
"fullIconRect":{"width":80,"height":90,"center":{"x":972,"y":456},"ex":1012,"ey":496}
|
||||
}
|
||||
};
|
||||
/*自定义图片组件*/
|
||||
export function myShape(ctx, node) { //自定义图片组件
|
||||
|
||||
ctx.beginPath();
|
||||
|
||||
ctx.rect(node.rect.x,node.rect.y,node.rect.width,node.rect.height);
|
||||
if(node.data.lineWidth<=0){
|
||||
ctx.strokeStyle = 'rgba(0,0,0,0)';
|
||||
}
|
||||
// 必须判空再填充
|
||||
(node.fillStyle || node.bkType) && ctx.fill();
|
||||
ctx.stroke();
|
||||
}
|
||||
export function myAnchors(node) {
|
||||
node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height / 2, Direction.Left));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2, Direction.Right));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height, Direction.Bottom));
|
||||
}
|
||||
export function myIconRect(node) {
|
||||
node.iconRect = new Rect(node.rect.x+node.paddingLeft, node.rect.y+node.paddingTop, node.rect.width-(node.paddingLeft+node.paddingRight), node.rect.height-20-(node.paddingTop+node.paddingBottom));
|
||||
node.fullIconRect = node.rect;
|
||||
}
|
||||
export function myTextRect(node) {
|
||||
node.textRect = new Rect(
|
||||
node.rect.x +node.paddingLeft,
|
||||
node.rect.y+node.rect.height-20-node.paddingBottom,
|
||||
node.rect.width -(node.paddingLeft+node.paddingRight),
|
||||
20,
|
||||
);
|
||||
node.fullTextRect = node.rect;
|
||||
}
|
||||
/*自定义图片组件*/
|
||||
|
||||
/*自定义立方体*/
|
||||
export function myCubec(ctx, node) {//立方体
|
||||
// ctx.rect(node.rect.x,node.rect.y,node.rect.width,node.rect.height);
|
||||
let x=node.rect.x+10,y=node.rect.y+10,w=node.rect.width-20,h=node.rect.height-20;
|
||||
|
||||
|
||||
// LINE MODE
|
||||
ctx.lineJoin = "round";
|
||||
|
||||
// center face
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, y+h/3);
|
||||
ctx.lineTo(x + w*2/3, y+h/3 );
|
||||
ctx.lineTo(x + w*2/3, y +h);
|
||||
ctx.lineTo(x, y + h);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = node.fillStyle;
|
||||
ctx.strokeStyle = node.strokeStyle;
|
||||
ctx.stroke();
|
||||
(node.fillStyle || node.bkType) && ctx.fill();
|
||||
|
||||
// top face
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, y+h/3);
|
||||
ctx.lineTo(x + w/3, y);
|
||||
ctx.lineTo(x + w, y);
|
||||
ctx.lineTo(x + w*2/3, y+h/3 );
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = node.fillStyle;
|
||||
ctx.strokeStyle = node.strokeStyle;
|
||||
ctx.stroke();
|
||||
(node.fillStyle || node.bkType) && ctx.fill();
|
||||
|
||||
// right face
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + w*2/3, y+h/3 );
|
||||
ctx.lineTo(x + w, y);
|
||||
ctx.lineTo(x + w, y+h*2/3);
|
||||
ctx.lineTo(x + w*2/3, y + h);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = node.fillStyle;
|
||||
ctx.strokeStyle = node.strokeStyle;
|
||||
ctx.stroke();
|
||||
(node.fillStyle || node.bkType) && ctx.fill();
|
||||
|
||||
// 必须判空再填充
|
||||
|
||||
}
|
||||
export function myCubeAnchors(node) {//立方体锚点
|
||||
node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height / 2, Direction.Left));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2, Direction.Right));
|
||||
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height, Direction.Bottom));
|
||||
}
|
||||
/*自定义立方体*/
|
||||
|
||||
|
||||
|
||||
export function onChangeAnimate(node,animateType) {
|
||||
if (node.animateType === 'custom') {
|
||||
return;
|
||||
}
|
||||
|
||||
node.animateFrames = [];
|
||||
const state = Node.cloneState(node);
|
||||
switch (animateType) {
|
||||
case 'upDown':
|
||||
state.rect.y -= 10;
|
||||
state.rect.ey -= 10;
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state
|
||||
});
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state: Node.cloneState(node)
|
||||
});
|
||||
node.animateFrames.push({
|
||||
duration: 200,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
});
|
||||
break;
|
||||
case 'leftRight':
|
||||
state.rect.x -= 10;
|
||||
state.rect.ex -= 10;
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
});
|
||||
state.rect.x += 20;
|
||||
state.rect.ex += 20;
|
||||
node.animateFrames.push({
|
||||
duration: 80,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
});
|
||||
state.rect.x -= 20;
|
||||
state.rect.ex -= 20;
|
||||
node.animateFrames.push({
|
||||
duration: 50,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
});
|
||||
state.rect.x += 20;
|
||||
state.rect.ex += 20;
|
||||
node.animateFrames.push({
|
||||
duration: 30,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
});
|
||||
node.animateFrames.push({
|
||||
duration: 300,
|
||||
linear: true,
|
||||
state: Node.cloneState(node)
|
||||
});
|
||||
break;
|
||||
case 'heart':
|
||||
state.rect.x -= 5;
|
||||
state.rect.ex += 5;
|
||||
state.rect.y -= 5;
|
||||
state.rect.ey += 5;
|
||||
state.rect.width += 5;
|
||||
state.rect.height += 10;
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state
|
||||
});
|
||||
node.animateFrames.push({
|
||||
duration: 400,
|
||||
linear: true,
|
||||
state: Node.cloneState(node)
|
||||
});
|
||||
break;
|
||||
case 'success':
|
||||
state.strokeStyle = '#237804';
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state
|
||||
});
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state: Node.cloneState(node)
|
||||
});
|
||||
state.strokeStyle = '#237804';
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state
|
||||
});
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state: Node.cloneState(node)
|
||||
});
|
||||
state.strokeStyle = '#237804';
|
||||
state.fillStyle = '#389e0d22';
|
||||
node.animateFrames.push({
|
||||
duration: 3000,
|
||||
linear: true,
|
||||
state
|
||||
});
|
||||
break;
|
||||
case 'warning':
|
||||
state.strokeStyle = '#fa8c16';
|
||||
state.fillStyle = '#fa8c16';
|
||||
state.lineWidth=5;
|
||||
state.dash = 2;
|
||||
node.animateFrames.push({
|
||||
duration: 500,
|
||||
linear: true,
|
||||
state
|
||||
});
|
||||
state.strokeStyle = '#fa8c16';
|
||||
state.dash = 0;
|
||||
state.lineWidth=1;
|
||||
state.fillStyle = '#ffffff';
|
||||
node.animateFrames.push({
|
||||
duration: 500,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
});
|
||||
state.strokeStyle = '#fa8c16';
|
||||
state.dash = 2;
|
||||
state.lineWidth=5;
|
||||
state.fillStyle = '#fa8c16';
|
||||
node.animateFrames.push({
|
||||
duration: 300,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
});
|
||||
break;
|
||||
case 'error':
|
||||
state.strokeStyle = '#cf1322';
|
||||
// state.fillStyle = '#cf132222';
|
||||
state.lineWidth=5;
|
||||
state.dash = 2;
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state
|
||||
});
|
||||
state.strokeStyle = '#cf1322';
|
||||
state.dash = 0;
|
||||
state.lineWidth=1;
|
||||
node.animateFrames.push({
|
||||
duration: 500,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
});
|
||||
state.strokeStyle = '#cf1322';
|
||||
state.dash = 2;
|
||||
state.lineWidth=5;
|
||||
node.animateFrames.push({
|
||||
duration: 300,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
});
|
||||
break;
|
||||
case 'show':
|
||||
state.strokeStyle = '#fa541c';
|
||||
state.rotate = -10;
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
});
|
||||
state.rotate = 10;
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
});
|
||||
state.rotate = 0;
|
||||
node.animateFrames.push({
|
||||
duration: 100,
|
||||
linear: true,
|
||||
state: Node.cloneState(state)
|
||||
});
|
||||
break;
|
||||
}
|
||||
node.animatePlay=true;
|
||||
}
|
||||
export function onChangeAnimateLine(line,type){
|
||||
line.animateType=type;
|
||||
line.animatePlay=true;
|
||||
}
|
||||
export function changeImage (dataImg, callback) {
|
||||
let self = this;
|
||||
var base64Img = document.createElement("base64Img"),
|
||||
canvas = document.createElement("canvas"),
|
||||
context = canvas.getContext("2d");
|
||||
// 创建新图片
|
||||
var img = new Image();
|
||||
img.src = dataImg;
|
||||
img.addEventListener(
|
||||
"load",
|
||||
function () {
|
||||
// 绘制图片到canvas上
|
||||
canvas.width = img.width;
|
||||
canvas.height = img.height;
|
||||
context.drawImage(img, 0, 0);
|
||||
|
||||
// 将canvas的透明背景设置成白色
|
||||
var imageData = context.getImageData(
|
||||
0,
|
||||
0,
|
||||
canvas.width,
|
||||
canvas.height
|
||||
);
|
||||
for (var i = 0; i < imageData.data.length; i += 4) {
|
||||
//rgb大于250的透明度y均设置成0
|
||||
if (
|
||||
imageData.data[i] > 0 &&
|
||||
imageData.data[i + 1] > 0 &&
|
||||
imageData.data[i + 2] > 0
|
||||
) {
|
||||
imageData.data[i + 3] = 200;
|
||||
}
|
||||
}
|
||||
context.putImageData(imageData, 0, 0);
|
||||
let baseImg = canvas.toDataURL("image/png");//返回base64
|
||||
if (typeof callback !== undefined) {
|
||||
if (callback) callback(baseImg);
|
||||
}
|
||||
img.remove();
|
||||
},
|
||||
false
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user