aomao_plugin-mind
Version:
649 lines (556 loc) • 21.1 kB
JavaScript
import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
import _createClass from '@babel/runtime/helpers/esm/createClass';
import _inherits from '@babel/runtime/helpers/esm/inherits';
import _createSuper from '@babel/runtime/helpers/esm/createSuper';
import { $, DATA_ELEMENT, EDITABLE, Parser, CardType, Card, isEngine, Plugin } from 'aomao_engine';
import _get from '@babel/runtime/helpers/esm/get';
import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
import _classPrivateFieldLooseBase from '@babel/runtime/helpers/esm/classPrivateFieldLooseBase';
import _classPrivateFieldLooseKey from '@babel/runtime/helpers/esm/classPrivateFieldLooseKey';
import { Graph, Addon } from '@antv/x6';
import Hierarchy from '@antv/hierarchy';
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
var _excluded = ["x", "y", "width", "height"];
var template = "<div class=\"mind-container\" readonly=\"true\">\n <div class=\"mind-body\">\n <div class=\"mind-content\" ".concat(DATA_ELEMENT, "=\"").concat(EDITABLE, "\"></div>\n </div>\n <div class=\"mind-tool-add\">\n add\n </div>\n</div>");
var _options = /*#__PURE__*/_classPrivateFieldLooseKey("options");
var HtmlNode = /*#__PURE__*/function () {
function HtmlNode(graph, options) {
_classCallCheck(this, HtmlNode);
this.graph = void 0;
Object.defineProperty(this, _options, {
writable: true,
value: void 0
});
this.graph = graph;
_classPrivateFieldLooseBase(this, _options)[_options] = options;
}
/**
* 获取可编辑节点
* @param node 节点
* @returns
*/
_createClass(HtmlNode, [{
key: "getEditableElement",
value: function getEditableElement(node) {
var _node$findView;
var container = (_node$findView = node.findView(this.graph)) === null || _node$findView === void 0 ? void 0 : _node$findView.container;
if (!container) return;
return $(container).find('div.mind-content');
}
}, {
key: "getNodeConfig",
value: function getNodeConfig(options) {
var _this = this;
var x = options.x,
y = options.y,
width = options.width,
height = options.height,
data = _objectWithoutProperties(options, _excluded);
return {
shape: 'html',
x: x,
y: y,
width: width || 16,
height: height || 24,
attributes: {
body: {
fill: 'transparent',
strokeWidth: 0
}
},
data: _objectSpread({}, data),
html: {
render: function render(node) {
return _this.render(node);
},
shouldComponentUpdate: function shouldComponentUpdate(node) {
return node.hasChanged('data');
}
}
};
}
}, {
key: "render",
value: function render(node) {
var _this2 = this;
var data = node.getData();
var value = data.value,
editable = data.editable,
attributes = data.attributes,
styles = data.styles,
classNames = data.classNames;
var base = $(template);
var body = base.find('.mind-body');
var editableElement = base.find('.mind-content');
editableElement.each(function (element) {
var _node$closest;
var node = $(element);
node.attributes('contenteditable', "".concat(!!editable));
(_node$closest = node.closest('.mind-container')) === null || _node$closest === void 0 ? void 0 : _node$closest.attributes('readonly', "".concat(!editable));
editableElement.html(value || '<p>Heelo</p>');
if (editable) {
setTimeout(function () {
var _node$get;
(_node$get = node.get()) === null || _node$get === void 0 ? void 0 : _node$get.focus();
}, 50);
}
});
Object.keys(attributes || {}).forEach(function (name) {
body.attributes(name, attributes[name]);
});
Object.keys(styles || {}).forEach(function (name) {
body.css(name, styles[name]);
});
if (Array.isArray(classNames)) {
classNames.forEach(function (className) {
body.addClass(className);
});
} else if (typeof classNames === 'string') {
body.addClass(classNames);
}
var addTool = base.find('.mind-tool-add');
addTool.on('click', function () {
var bbox = node.getBBox();
var data = node.getData();
var edgeBeginX = bbox.x + bbox.width - 5;
var edgeBeginY = bbox.y + bbox.height / 2;
var nodeX = bbox.x + bbox.width + 80;
var nodeY = bbox.y - 80;
var target = _this2.graph.addNode(_this2.getNodeConfig({
x: nodeX,
y: nodeY,
width: 60,
height: 25,
hierarchy: (data.hierarchy || 0) + 1
}));
node.addChild(target);
var onAdded = _classPrivateFieldLooseBase(_this2, _options)[_options].onAdded;
if (onAdded) onAdded(target);
/*const targetBBox = target.getBBox();
const edgeEndX = nodeX + targetBBox.width;
const edgeEndY = nodeY + targetBBox.height + 4;
const edge = this.graph.addEdge({
shape: 'edge', // 指定使用何种图形，默认值为 'edge'
source: { x: edgeBeginX, y: edgeBeginY },
target: { x: edgeEndX, y: edgeEndY },
vertices: [
{
x: edgeBeginX + 18,
y: edgeBeginY - 24,
},
{
x: edgeBeginX + 24 + 18,
y: edgeEndY,
},
],
connector: {
name: 'rounded',
args: {
radius: 20,
},
},
attributes: {
line: {
stroke: '#ccc',
strokeWidth: 3,
targetMarker: null,
},
},
});
node.addChild(edge);*/
});
return base.get();
}
}]);
return HtmlNode;
}();
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z = ".mind-container {\n border: 1px solid transparent;\n width: 100%;\n height: 100%;\n padding: 2px;\n position: relative;\n}\n.x6-node-selected .mind-container {\n border: 1px solid #096dd9;\n background: rgba(52, 155, 249, .15);\n}\n\n.mind-container[readonly=\"false\"] {\n cursor: text;\n}\n\n.mind-container[readonly=\"true\"] .mind-content {\n cursor: move !important;\n}\n\n.mind-body {\n width: 100%;\n height: 100%;\n}\n\n.mind-main-node {\n background-color: #596086;\n}\n\n.mind-tool-add {\n position: absolute;\n right: -40px;\n top: 10px;\n width: 40px;\n display: none;\n cursor: pointer;\n}\n\n.mind-container:hover .mind-tool-add {\n display: block;\n}";
styleInject(css_248z);
var _options$1 = /*#__PURE__*/_classPrivateFieldLooseKey("options");
var _editableCell = /*#__PURE__*/_classPrivateFieldLooseKey("editableCell");
var _htmlNode = /*#__PURE__*/_classPrivateFieldLooseKey("htmlNode");
var _graph = /*#__PURE__*/_classPrivateFieldLooseKey("graph");
var _dnd = /*#__PURE__*/_classPrivateFieldLooseKey("dnd");
var GraphEditor = /*#__PURE__*/function () {
function GraphEditor(container, options) {
var _this = this;
_classCallCheck(this, GraphEditor);
Object.defineProperty(this, _options$1, {
writable: true,
value: void 0
});
Object.defineProperty(this, _editableCell, {
writable: true,
value: void 0
});
Object.defineProperty(this, _htmlNode, {
writable: true,
value: void 0
});
Object.defineProperty(this, _graph, {
writable: true,
value: void 0
});
Object.defineProperty(this, _dnd, {
writable: true,
value: void 0
});
_classPrivateFieldLooseBase(this, _options$1)[_options$1] = options;
_classPrivateFieldLooseBase(this, _graph)[_graph] = new Graph({
container: container.get(),
width: options.width,
height: options.height || 600,
selecting: {
enabled: true
},
getHTMLComponent: function getHTMLComponent(node) {
return _classPrivateFieldLooseBase(_this, _htmlNode)[_htmlNode].render(node);
},
interacting: function interacting(_ref) {
var cell = _ref.cell;
if (cell.isNode() && cell.id === 'main') return true;
return {
nodeMovable: false,
edgeMovable: false
};
}
});
_classPrivateFieldLooseBase(this, _graph)[_graph].on('cell:changed', function () {
var onChange = _classPrivateFieldLooseBase(_this, _options$1)[_options$1].onChange;
if (onChange) onChange(_this.getData());
});
_classPrivateFieldLooseBase(this, _htmlNode)[_htmlNode] = new HtmlNode(_classPrivateFieldLooseBase(this, _graph)[_graph], {
onAdded: function onAdded() {
console.log('added');
var data = _this.getData();
var nodes = _classPrivateFieldLooseBase(_this, _graph)[_graph].getNodes();
var hierarchy = _this.getHierarchy(data);
/*const updatePosition = (data: Array<ShapeData>) => {
data.forEach((item) => {
const node = nodes.find((node) => node.id === item.id);
if (node && node.parent) {
const { x, y } = node.getBBox();
const newX =
item.x + item.data.width / 2 + item.hgap;
const newY =
item.y + item.data.height / 2 + item.vgap;
if (newX !== x || newY !== y) {
node.position(newX, newY, {
relative: true,
deep: true,
});
}
}
if (item.children) updatePosition(item.children);
});
};
updatePosition(hierarchy);*/
}
});
_classPrivateFieldLooseBase(this, _dnd)[_dnd] = new Addon.Dnd({
target: _classPrivateFieldLooseBase(this, _graph)[_graph],
getDragNode: function getDragNode(sourceNode) {
return sourceNode;
}
});
_classPrivateFieldLooseBase(this, _graph)[_graph].on('node:mousedown', function (_ref2) {//this.#dnd.start(node, e);
var e = _ref2.e,
node = _ref2.node;
});
}
_createClass(GraphEditor, [{
key: "getData",
value: function getData() {
var nodes = _classPrivateFieldLooseBase(this, _graph)[_graph].getNodes();
var data = [];
nodes.forEach(function (node) {
if (!node.isNode()) return;
var getItem = function getItem(node) {
var _node$children;
var bbox = node.getBBox();
var children = [];
(_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children.forEach(function (child) {
if (!child.isNode()) return;
children.push(getItem(child));
});
var data = node.getData();
return {
id: node.id,
x: bbox.x,
y: bbox.y,
width: bbox.width,
height: bbox.height,
data: node.getData(),
children: children,
hierarchy: data.hierarchy || 1
};
};
if (node.parent) return;
data.push(getItem(node));
});
return data;
}
}, {
key: "getHierarchy",
value: function getHierarchy(data) {
return data.map(function (data) {
return Hierarchy.mindmap(data, {
direction: 'H',
getSubTreeSep: function getSubTreeSep(node) {
if (node.children && node.children.length > 0) {
var _node$data, _node$data2;
if (((_node$data = node.data) === null || _node$data === void 0 ? void 0 : _node$data.hierarchy) && ((_node$data2 = node.data) === null || _node$data2 === void 0 ? void 0 : _node$data2.hierarchy) <= 2) {
return 8;
}
return 2;
}
return 0;
},
getHGap: function getHGap(node) {
var _node$data3, _node$data4, _node$data5, _node$data6;
if (((_node$data3 = node.data) === null || _node$data3 === void 0 ? void 0 : _node$data3.hierarchy) && ((_node$data4 = node.data) === null || _node$data4 === void 0 ? void 0 : _node$data4.hierarchy) === 1) {
return 8;
}
if (((_node$data5 = node.data) === null || _node$data5 === void 0 ? void 0 : _node$data5.hierarchy) && ((_node$data6 = node.data) === null || _node$data6 === void 0 ? void 0 : _node$data6.hierarchy) === 2) {
return 24;
}
return 18;
},
getVGap: function getVGap(node) {
var _node$data7, _node$data8, _node$data9, _node$data10;
if (((_node$data7 = node.data) === null || _node$data7 === void 0 ? void 0 : _node$data7.hierarchy) && ((_node$data8 = node.data) === null || _node$data8 === void 0 ? void 0 : _node$data8.hierarchy) === 1) {
return 8;
}
if (((_node$data9 = node.data) === null || _node$data9 === void 0 ? void 0 : _node$data9.hierarchy) && ((_node$data10 = node.data) === null || _node$data10 === void 0 ? void 0 : _node$data10.hierarchy) === 2) {
return 12;
}
return 2;
},
getSide: function getSide(node) {
/*if (node.data.side) {
return node.data.side
}*/
return 'right';
}
});
});
}
}, {
key: "setEditableNodeValue",
value: function setEditableNodeValue(value) {
if (!_classPrivateFieldLooseBase(this, _editableCell)[_editableCell]) return;
_classPrivateFieldLooseBase(this, _editableCell)[_editableCell].setData({
value: value
}, {
silent: true
});
}
}, {
key: "render",
value: function render(data) {
var _this2 = this;
var getNode = function getNode(item) {
var newX = item.x + item.data.width / 2 + item.hgap;
var newY = item.y + item.data.height / 2 + item.vgap;
return _objectSpread(_objectSpread({}, item), {}, {
x: newX,
y: newY,
data: item.data.data,
shape: 'html',
attributes: {
body: {
fill: 'transparent',
strokeWidth: 0
}
},
html: {
render: function render(node) {
return _classPrivateFieldLooseBase(_this2, _htmlNode)[_htmlNode].render(node);
},
shouldComponentUpdate: function shouldComponentUpdate(node) {
return node.hasChanged('data');
}
}
});
};
var hierarchyData = this.getHierarchy(data);
hierarchyData.forEach(function (hierarchy) {
var node = _classPrivateFieldLooseBase(_this2, _graph)[_graph].addNode(getNode(hierarchy));
var appendChild = function appendChild(root, item) {
var _item$children;
(_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.forEach(function (child) {
var node = _classPrivateFieldLooseBase(_this2, _graph)[_graph].addNode(getNode(child));
root.addChild(node);
appendChild(node, child);
});
};
appendChild(node, hierarchy);
});
}
}, {
key: "didRender",
value: function didRender() {
var _this3 = this;
_classPrivateFieldLooseBase(this, _graph)[_graph].on('node:dblclick', function (_ref3) {
var cell = _ref3.cell;
if (cell.shape !== 'html') return;
cell.setData({
editable: true
});
console.log('node:dblclick');
_classPrivateFieldLooseBase(_this3, _editableCell)[_editableCell] = cell;
var onSelectedEditable = _classPrivateFieldLooseBase(_this3, _options$1)[_options$1].onSelectedEditable;
if (onSelectedEditable) onSelectedEditable(cell);
});
_classPrivateFieldLooseBase(this, _graph)[_graph].on('node:unselected', function () {
var _classPrivateFieldLoo;
console.log('node:unselected');
(_classPrivateFieldLoo = _classPrivateFieldLooseBase(_this3, _editableCell)[_editableCell]) === null || _classPrivateFieldLoo === void 0 ? void 0 : _classPrivateFieldLoo.setData({
editable: false
});
_classPrivateFieldLooseBase(_this3, _editableCell)[_editableCell] = undefined;
});
}
}, {
key: "destroy",
value: function destroy() {
_classPrivateFieldLooseBase(this, _graph)[_graph].dispose();
}
}]);
return GraphEditor;
}();
var MindCard = /*#__PURE__*/function (_Card) {
_inherits(MindCard, _Card);
var _super = _createSuper(MindCard);
function MindCard() {
var _this;
_classCallCheck(this, MindCard);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_this.graphEditor = void 0;
_this.contenteditable = ['div.mind-content'];
return _this;
}
_createClass(MindCard, [{
key: "onChange",
value: function onChange(_, node) {
var _this$graphEditor;
var height = node.height();
var width = node.width();
console.log(width, height);
var _this$editor = this.editor,
schema = _this$editor.schema,
conversion = _this$editor.conversion;
var parser = new Parser(node.clone(true), this.editor);
var value = parser.toValue(schema, conversion, false, true);
(_this$graphEditor = this.graphEditor) === null || _this$graphEditor === void 0 ? void 0 : _this$graphEditor.setEditableNodeValue(value);
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var height = 600;
if (!this.graphEditor) {
this.graphEditor = new GraphEditor(this.getCenter(), {
height: height,
onChange: function onChange(data) {
_this2.setValue({
data: data
});
}
});
}
var value = this.getValue();
var data = (value === null || value === void 0 ? void 0 : value.data) || [{
id: 'main',
shape: 'html',
totalHeight: height,
totalWidth: 690,
x: 40,
y: 40,
width: 180,
height: 40,
data: {
hierarchy: 1,
value: "<p><span style=\"color:#ffffff\"><span style=\"font-size:16px\">\u601D\u7EF4\u5BFC\u56FE</span></span></p>",
classNames: 'mind-main-node'
}
}];
this.graphEditor.render(data);
}
}, {
key: "didRender",
value: function didRender() {
var _this$graphEditor2;
_get(_getPrototypeOf(MindCard.prototype), "didRender", this).call(this);
(_this$graphEditor2 = this.graphEditor) === null || _this$graphEditor2 === void 0 ? void 0 : _this$graphEditor2.didRender();
}
}, {
key: "destroy",
value: function destroy() {
var _this$graphEditor3;
(_this$graphEditor3 = this.graphEditor) === null || _this$graphEditor3 === void 0 ? void 0 : _this$graphEditor3.destroy();
this.graphEditor = undefined;
}
}], [{
key: "cardName",
get: function get() {
return 'mind';
}
}, {
key: "cardType",
get: function get() {
return CardType.BLOCK;
}
}]);
return MindCard;
}(Card);
var Mind = /*#__PURE__*/function (_Plugin) {
_inherits(Mind, _Plugin);
var _super = _createSuper(Mind);
function Mind() {
_classCallCheck(this, Mind);
return _super.apply(this, arguments);
}
_createClass(Mind, [{
key: "execute",
value: function execute() {
if (!isEngine(this.editor)) return;
var card = this.editor.card;
card.insert(MindCard.cardName);
}
}], [{
key: "pluginName",
get: function get() {
return 'mind';
}
}]);
return Mind;
}(Plugin);
export default Mind;
export { MindCard as MindComponent };