plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
221 lines (220 loc) • 10.7 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const prop_types_1 = __importDefault(require("prop-types"));
const antd_1 = require("antd");
const uuid_1 = require("uuid");
const i18next_1 = __importDefault(require("i18next"));
const classnames_1 = __importDefault(require("classnames"));
const Icon_1 = __importDefault(require("../icon/Icon"));
const constants_1 = require("./constant/constants");
const flex_1 = require("../flex");
const NodeConfiguration_1 = require("./configuration/NodeConfiguration");
const Scrollbar_1 = __importDefault(require("../common/Scrollbar"));
const CommonButton_1 = __importDefault(require("../common/CommonButton"));
class WorkflowItems extends react_1.Component {
constructor() {
super(...arguments);
this.state = {
activeKey: [],
collapse: false,
textSearch: '',
descriptors: {},
filteredDescriptors: [],
};
this.handlers = {
onAddItem: (item, centered) => {
const { canvasRef } = this.props;
const id = (0, uuid_1.v4)();
const option = Object.assign({}, item, {
id,
subType: item.type,
type: (0, NodeConfiguration_1.getNode)(item.nodeClazz),
configuration: item.defaultConfiguration,
description: '',
});
canvasRef.handler.add(option, centered);
},
onChangeActiveKey: (activeKey) => {
this.setState({
activeKey,
});
},
onCollapse: () => {
this.setState({
collapse: !this.state.collapse,
});
},
onSearchNode: (e) => {
const { descriptors } = this.state;
const filteredDescriptors = descriptors.filter((descriptor) => descriptor.name.toLowerCase().includes(e.target.value.toLowerCase()));
this.setState({
textSearch: e.target.value,
filteredDescriptors,
});
},
};
this.events = {
onDragStart: (e, item) => {
this.item = item;
const { target } = e;
target.classList.add('dragging');
},
onDragOver: (e) => {
if (e.preventDefault) {
e.preventDefault();
}
e.dataTransfer.dropEffect = 'copy';
return false;
},
onDragEnter: (e) => {
const { target } = e;
target.classList.add('over');
},
onDragLeave: (e) => {
const { target } = e;
target.classList.remove('over');
},
onDrop: (e) => {
e = e || window.event;
if (e.preventDefault) {
e.preventDefault();
}
if (e.stopPropagation) {
e.stopPropagation();
}
const { layerX, layerY } = e;
const option = Object.assign({}, this.item, { left: layerX, top: layerY });
this.handlers.onAddItem(option, false);
return false;
},
onDragEnd: (e) => {
this.item = null;
e.target.classList.remove('dragging');
},
};
this.waitForCanvasRender = (canvas) => {
setTimeout(() => {
if (canvas) {
this.attachEventListener(canvas);
return;
}
const { canvasRef } = this.props;
this.waitForCanvasRender(canvasRef);
}, 5);
};
this.attachEventListener = (canvasRef) => {
canvasRef.canvas.wrapperEl.addEventListener('dragenter', this.events.onDragEnter, false);
canvasRef.canvas.wrapperEl.addEventListener('dragover', this.events.onDragOver, false);
canvasRef.canvas.wrapperEl.addEventListener('dragleave', this.events.onDragLeave, false);
canvasRef.canvas.wrapperEl.addEventListener('drop', this.events.onDrop, false);
};
this.detachEventListener = (canvasRef) => {
canvasRef.canvas.wrapperEl.removeEventListener('dragenter', this.events.onDragEnter);
canvasRef.canvas.wrapperEl.removeEventListener('dragover', this.events.onDragOver);
canvasRef.canvas.wrapperEl.removeEventListener('dragleave', this.events.onDragLeave);
canvasRef.canvas.wrapperEl.removeEventListener('drop', this.events.onDrop);
};
this.renderItems = (items) => (react_1.default.createElement(flex_1.Flex, { flexWrap: "wrap", flexDirection: "column", style: { width: '100%' } }, items.map((item) => (react_1.default.createElement("div", { key: item.name, draggable: true, onClick: () => this.handlers.onAddItem(item), onDragStart: (e) => this.events.onDragStart(e, item), onDragEnd: (e) => this.events.onDragEnd(e, item), className: "rde-editor-items-item", style: { justifyContent: this.state.collapse ? 'center' : null } },
react_1.default.createElement("span", { className: "rde-editor-items-item-icon" },
react_1.default.createElement(Icon_1.default, { name: item.icon && item.icon.length ? item.icon : 'image', color: constants_1.NODE_COLORS[item.type].fill })),
this.state.collapse ? null : react_1.default.createElement("span", { className: "rde-editor-items-item-text" }, item.name))))));
}
componentDidMount() {
const { canvasRef } = this.props;
this.waitForCanvasRender(canvasRef);
}
UNSAFE_componentWillReceiveProps(nextProps) {
if (JSON.stringify(this.props.descriptors) !== JSON.stringify(nextProps.descriptors)) {
const descriptors = Object.keys(nextProps.descriptors).reduce((prev, key) => {
return prev.concat(nextProps.descriptors[key]);
}, []);
this.setState({
descriptors,
});
}
}
shouldComponentUpdate(nextProps, nextState) {
if (JSON.stringify(this.props.descriptors) !== JSON.stringify(nextProps.descriptors)) {
return true;
}
else if (JSON.stringify(this.state.filteredDescriptors) !== JSON.stringify(nextState.filteredDescriptors)) {
return true;
}
else if (this.state.textSearch !== nextState.textSearch) {
return true;
}
else if (JSON.stringify(this.state.activeKey) !== JSON.stringify(nextState.activeKey)) {
return true;
}
else if (this.state.collapse !== nextState.collapse) {
return true;
}
return false;
}
componentWillUnmount() {
const { canvasRef } = this.props;
this.detachEventListener(canvasRef);
}
render() {
const { descriptors } = this.props;
const { activeKey, filteredDescriptors, collapse, textSearch } = this.state;
const className = (0, classnames_1.default)('rde-editor-items', {
minimize: collapse,
});
return (react_1.default.createElement("div", { className: className },
react_1.default.createElement(flex_1.Flex, { flex: "1", flexDirection: "column", style: { height: '100%' } },
react_1.default.createElement(flex_1.Flex, { justifyContent: "center", alignItems: "center", style: { height: 40 } },
react_1.default.createElement(CommonButton_1.default, { icon: collapse ? 'angle-double-right' : 'angle-double-left', shape: "circle", className: "rde-action-btn", style: { margin: '0 4px' }, onClick: this.handlers.onCollapse }),
collapse ? null : (react_1.default.createElement(antd_1.Input, { style: { margin: '8px' }, placeholder: i18next_1.default.t('action.search-list'), onChange: this.handlers.onSearchNode, value: textSearch, allowClear: true }))),
react_1.default.createElement(Scrollbar_1.default, null,
react_1.default.createElement(flex_1.Flex, { flex: "1", style: { overflowY: 'hidden' } }, textSearch.length ? (this.renderItems(filteredDescriptors)) : (react_1.default.createElement(antd_1.Collapse, { style: { width: '100%' }, activeKey: activeKey.length ? activeKey : Object.keys(descriptors), onChange: this.handlers.onChangeActiveKey, items: Object.keys(descriptors).map((key) => ({
key,
label: collapse ? '' : key,
showArrow: !collapse,
style: { background: constants_1.NODE_COLORS[key].fill },
children: this.renderItems(descriptors[key]),
})) })))))));
}
}
WorkflowItems.propTypes = {
canvasRef: prop_types_1.default.any,
descriptors: prop_types_1.default.object,
};
exports.default = WorkflowItems;