hrw-certificate-editor
Version:
Design Editor Tools with React.js + ant.design + fabric.js
141 lines • 5.06 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const fabric_1 = require("fabric");
const LogicNode_1 = __importDefault(require("./LogicNode"));
const NodeConfiguration_1 = require("../../../workflow/configuration/NodeConfiguration");
const objects_1 = require("../../../../canvas/objects");
const uuidv4_1 = require("uuidv4");
const SwitchNode = fabric_1.fabric.util.createClass(LogicNode_1.default, {
initialize(options) {
options = options || {};
options.left += 20;
this.callSuper('initialize', options);
},
createFromPort(x, y) {
const isEven = this.configuration.routes.length % 2 === 0;
const calcOdd = (port, i) => {
const centerIndex = Math.ceil(this.configuration.routes.length / 2);
const index = i + 1;
let left;
let leftDiff;
if (centerIndex === index) {
left = x;
}
else if (centerIndex > index) {
left = x - port.width * (centerIndex - index);
leftDiff = -port.width * (centerIndex - index);
}
else {
left = x + port.width * (index - centerIndex);
leftDiff = port.width * (index - centerIndex);
}
return {
left,
leftDiff,
};
};
const calcEven = (port, i) => {
const centerIndex = this.configuration.routes.length / 2;
const index = i + 1;
let left;
let leftDiff;
if (centerIndex >= index) {
left = x - port.width / 2 - port.width * (centerIndex - index);
leftDiff = -(port.width / 2) - port.width * (centerIndex - index);
}
else {
left = x - port.width / 2 + port.width * (index - centerIndex);
leftDiff = -(port.width / 2) + port.width * (index - centerIndex);
}
return {
left,
leftDiff,
};
};
this.ports = this.configuration.routes.map((outPort, i) => {
const rect = new fabric_1.fabric.Rect({
width: 80,
height: 40,
fill: 'rgba(0, 0, 0, 0.2)',
originFill: 'rgba(0, 0, 0, 0.2)',
hoverFill: 'green',
rx: 7,
ry: 7,
});
const label = new fabric_1.fabric.Text(NodeConfiguration_1.getEllipsis(outPort, 7), {
fontSize: 18,
lineHeight: 2,
fontFamily: 'polestar',
fill: 'rgba(255, 255, 255, 0.8)',
});
let coords;
if (isEven) {
coords = calcEven(rect, i);
}
else {
coords = calcOdd(rect, i);
}
const portLabel = new fabric_1.fabric.Group([rect, label], {
id: outPort,
width: 80,
height: 40,
rx: 7,
ry: 7,
left: coords.left,
top: y + 20,
leftDiff: coords.leftDiff,
topDiff: 20,
fill: 'rgba(0, 0, 0, 0.1)',
originX: 'center',
originY: 'center',
});
label.set({
top: rect.top + 10,
left: rect.center().x,
});
return portLabel;
});
this.ports.forEach(port => {
this.addWithUpdate(port);
port.setCoords();
});
this.fromPort = this.ports.map((port, i) => {
let coords;
if (isEven) {
coords = calcEven(port, i);
}
else {
coords = calcOdd(port, i);
}
port.fromPort = new objects_1.Port({
id: port.id,
type: 'fromPort',
left: coords.left,
angle: 180,
top: y + port.height,
leftDiff: coords.leftDiff,
width: 10,
height: 10,
...this.fromPortOption(),
});
return port.fromPort;
});
return this.fromPort;
},
duplicate() {
const options = this.toObject();
options.id = uuidv4_1.uuid();
options.name = `${options.name}_clone`;
const clonedObj = new SwitchNode(options);
return clonedObj;
},
});
SwitchNode.fromObject = function (options, callback) {
return callback(new SwitchNode(options));
};
window.fabric.SwitchNode = SwitchNode;
exports.default = SwitchNode;
//# sourceMappingURL=SwitchNode.js.map