aomao_plugin-mind
Version:
877 lines (734 loc) • 26.9 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var aomao_engine = require('aomao_engine');
var x6 = require('@antv/x6');
var Hierarchy = require('@antv/hierarchy');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var Hierarchy__default = /*#__PURE__*/_interopDefaultLegacy(Hierarchy);
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
enumerableOnly && (symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
})), keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = null != arguments[i] ? arguments[i] : {};
i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
_defineProperty(target, key, source[key]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
return target;
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
Object.defineProperty(Constructor, "prototype", {
writable: false
});
return Constructor;
}
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function");
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
writable: true,
configurable: true
}
});
Object.defineProperty(subClass, "prototype", {
writable: false
});
if (superClass) _setPrototypeOf(subClass, superClass);
}
function _getPrototypeOf(o) {
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
return o.__proto__ || Object.getPrototypeOf(o);
};
return _getPrototypeOf(o);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
}
function _isNativeReflectConstruct() {
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
if (Reflect.construct.sham) return false;
if (typeof Proxy === "function") return true;
try {
Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
return true;
} catch (e) {
return false;
}
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
function _assertThisInitialized(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return self;
}
function _possibleConstructorReturn(self, call) {
if (call && (typeof call === "object" || typeof call === "function")) {
return call;
} else if (call !== void 0) {
throw new TypeError("Derived constructors may only return object or undefined");
}
return _assertThisInitialized(self);
}
function _createSuper(Derived) {
var hasNativeReflectConstruct = _isNativeReflectConstruct();
return function _createSuperInternal() {
var Super = _getPrototypeOf(Derived),
result;
if (hasNativeReflectConstruct) {
var NewTarget = _getPrototypeOf(this).constructor;
result = Reflect.construct(Super, arguments, NewTarget);
} else {
result = Super.apply(this, arguments);
}
return _possibleConstructorReturn(this, result);
};
}
function _superPropBase(object, property) {
while (!Object.prototype.hasOwnProperty.call(object, property)) {
object = _getPrototypeOf(object);
if (object === null) break;
}
return object;
}
function _get() {
if (typeof Reflect !== "undefined" && Reflect.get) {
_get = Reflect.get;
} else {
_get = function _get(target, property, receiver) {
var base = _superPropBase(target, property);
if (!base) return;
var desc = Object.getOwnPropertyDescriptor(base, property);
if (desc.get) {
return desc.get.call(arguments.length < 3 ? target : receiver);
}
return desc.value;
};
}
return _get.apply(this, arguments);
}
var id = 0;
function _classPrivateFieldLooseKey(name) {
return "__private_" + id++ + "_" + name;
}
function _classPrivateFieldLooseBase(receiver, privateKey) {
if (!Object.prototype.hasOwnProperty.call(receiver, privateKey)) {
throw new TypeError("attempted to use private field on non-instance");
}
return receiver;
}
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(aomao_engine.DATA_ELEMENT, "=\"").concat(aomao_engine.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 aomao_engine.$(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: _objectSpread2({}, 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 = aomao_engine.$(template);
var body = base.find('.mind-body');
var editableElement = base.find('.mind-content');
editableElement.each(function (element) {
var _node$closest;
var node = aomao_engine.$(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 x6.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 x6.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__default['default'].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 _objectSpread2(_objectSpread2({}, 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 aomao_engine.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 aomao_engine.CardType.BLOCK;
}
}]);
return MindCard;
}(aomao_engine.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 (!aomao_engine.isEngine(this.editor)) return;
var card = this.editor.card;
card.insert(MindCard.cardName);
}
}], [{
key: "pluginName",
get: function get() {
return 'mind';
}
}]);
return Mind;
}(aomao_engine.Plugin);
exports.MindComponent = MindCard;
exports.default = Mind;