@logicflow/vue-node-registry
Version:
LogicFlow Vue Component Node Registry
123 lines • 5.18 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.VueNodeView = void 0;
var vue_demi_1 = require("vue-demi");
var core_1 = require("@logicflow/core");
var registry_1 = require("./registry");
var teleport_1 = require("./teleport");
var VueNodeView = /** @class */ (function (_super) {
__extends(VueNodeView, _super);
function VueNodeView() {
return _super !== null && _super.apply(this, arguments) || this;
}
VueNodeView.prototype.getComponentContainer = function () {
return this.root;
};
VueNodeView.prototype.targetId = function () {
return "".concat(this.props.graphModel.flowId, ":").concat(this.props.model.id);
};
VueNodeView.prototype.componentWillUnmount = function () {
_super.prototype.componentWillUnmount.call(this);
this.unmount();
};
VueNodeView.prototype.setHtml = function (rootEl) {
var el = document.createElement('div');
el.className = 'custom-vue-node-content';
this.root = el;
rootEl.appendChild(el);
this.renderVueComponent();
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
VueNodeView.prototype.confirmUpdate = function (_rootEl) {
// TODO: 如有需要，可以先通过继承的方式，自定义该节点的更新逻辑；我们后续会根据实际需求，丰富该功能
// console.log('_rootEl', _rootEl)
};
VueNodeView.prototype.renderVueComponent = function () {
var _a;
this.unmountVueComponent();
var root = this.getComponentContainer();
var _b = this.props, model = _b.model, graphModel = _b.graphModel;
if (root) {
var component_1 = registry_1.vueNodesMap[model.type].component;
if (component_1) {
if (vue_demi_1.isVue2) {
var Vue = vue_demi_1.Vue2;
this.vm = new Vue({
el: root,
render: function (h) {
return h(component_1, {
node: model,
graph: graphModel,
});
},
provide: function () {
return {
getNode: function () { return model; },
getGraph: function () { return graphModel; },
};
},
});
}
else if (vue_demi_1.isVue3) {
if ((0, teleport_1.isActive)()) {
(0, teleport_1.connect)(this.targetId(), component_1, root, model, graphModel);
}
else {
this.vm = (0, vue_demi_1.createApp)({
render: function () {
return (0, vue_demi_1.h)(component_1, {
node: model,
graph: graphModel,
});
},
provide: function () {
return {
getNode: function () { return model; },
getGraph: function () { return graphModel; },
};
},
});
(_a = this.vm) === null || _a === void 0 ? void 0 : _a.mount(root);
}
}
}
}
};
VueNodeView.prototype.unmountVueComponent = function () {
var root = this.getComponentContainer();
if (this.vm) {
vue_demi_1.isVue2 && this.vm.$destroy();
vue_demi_1.isVue3 && this.vm.unmount();
this.vm = null;
}
if (root) {
root.innerHTML = '';
}
return root;
};
VueNodeView.prototype.unmount = function () {
if ((0, teleport_1.isActive)()) {
(0, teleport_1.disconnect)(this.targetId(), this.props.graphModel.flowId);
}
this.unmountVueComponent();
};
return VueNodeView;
}(core_1.HtmlNode));
exports.VueNodeView = VueNodeView;
exports.default = VueNodeView;
//# sourceMappingURL=view.js.map