@logicflow/vue-node-registry
Version:
LogicFlow Vue Component Node Registry
163 lines • 7.86 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TitleBar = void 0;
var vue_demi_1 = require("vue-demi");
var lodash_es_1 = require("lodash-es");
exports.TitleBar = (0, vue_demi_1.defineComponent)({
name: 'LFVueNodeTitleBar',
props: {
node: { type: Object, required: true },
graph: { type: Object, required: true },
},
data: function () {
return {
showTooltip: false,
};
},
mounted: function () {
var _this = this;
var _a, _b;
var trigger = ((_b = (_a = this.node) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.titleTrigger) === 'hover'
? 'hover'
: 'click';
var moreBtn = this.$refs.moreBtn || null;
var tooltip = this.$refs.tooltip || null;
var onDoc = function (e) {
if (!tooltip || !moreBtn)
return;
var t = e.target;
if (_this.showTooltip && !tooltip.contains(t) && !moreBtn.contains(t)) {
_this.showTooltip = false;
}
};
if (trigger === 'hover' && moreBtn && tooltip) {
moreBtn.addEventListener('mouseenter', function () {
_this.showTooltip = true;
});
moreBtn.addEventListener('mouseleave', function () {
_this.showTooltip = false;
});
}
else if (trigger === 'click' && moreBtn) {
moreBtn.addEventListener('click', function (e) {
e.stopPropagation();
_this.showTooltip = !_this.showTooltip;
});
document.addEventListener('click', onDoc);
this.$once &&
this.$once('hook:beforeDestroy', function () {
document.removeEventListener('click', onDoc);
});
}
},
methods: {
toggleExpand: function () {
var _a, _b, _c;
var cur = !!((_b = (_a = this.node) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b._expanded);
(_c = this.node) === null || _c === void 0 ? void 0 : _c.setProperty('_expanded', !cur);
},
runAction: function (act) {
try {
typeof (act === null || act === void 0 ? void 0 : act.callback) === 'function' &&
act.callback(this.node, this.graph);
}
finally {
this.showTooltip = false;
}
},
},
render: function () {
var _this = this;
var _a, _b;
var props = ((_a = this.node) === null || _a === void 0 ? void 0 : _a.properties) || {};
var icon = props._icon;
var title = props._title || '';
var expanded = !!props._expanded;
var _titleHeight = (0, lodash_es_1.isNumber)(props._titleHeight) ? props._titleHeight : 28;
var actions = ((_b = this.node) === null || _b === void 0 ? void 0 : _b.__actions) || [];
var showMoreAction = !(0, lodash_es_1.isEmpty)(actions);
console.log('showMoreAction', actions, props._titleActions);
var bar = (0, vue_demi_1.h)('div', {
class: expanded
? 'lf-vue-node-title lf-vue-node-title-expanded'
: 'lf-vue-node-title',
style: "height:".concat(expanded ? _titleHeight : 18, "px;"),
title: title,
}, [
(0, vue_demi_1.h)('div', { class: 'lf-vue-node-title-left' }, [
icon
? (0, vue_demi_1.h)('i', {
class: 'lf-vue-node-title-icon',
}, icon)
: null,
(0, vue_demi_1.h)('span', {
class: 'lf-vue-node-title-text',
}, title),
]),
(0, vue_demi_1.h)('div', { class: 'lf-vue-node-title-actions' }, [
(0, vue_demi_1.h)('button', {
ref: 'expandBtn',
class: 'lf-vue-node-title-expand',
onClick: function (e) {
console.log('expandClicked');
e.stopPropagation();
_this.toggleExpand();
},
on: {
click: function (e) {
console.log('expandClicked');
e.stopPropagation();
_this.toggleExpand();
},
},
}, [
(0, vue_demi_1.h)('svg', {
width: 14,
height: 12,
viewBox: '0 0 14 12',
xmlns: 'http://www.w3.org/2000/svg',
class: 'lf-vue-node-title-expand-icon',
style: "transform:".concat(expanded ? 'rotate(180deg)' : 'rotate(0deg)', ";"),
}, [
(0, vue_demi_1.h)('path', {
d: 'M0.5201124,5.47988755C0.23603013,5.7639699,0.24460429,6.2271326,0.53900635,6.5005059L6.3195491,11.8681526C6.7032304,12.2244282,7.2967696,12.2244282,7.6804514,11.8681526L13.460994,6.5005059C13.755396,6.2271326,13.76397,5.7639699,13.479888,5.47988755C13.211547,5.21154633,12.779465,5.20215771,12.499721,5.45858961L7.3378625,10.1902928C7.1467018,10.3655233,6.8532982,10.3655233,6.6621375,10.1902928L1.5002797,5.45858967C1.2205358,5.20215771,0.78845364,5.21154633,0.5201124,5.47988755Z',
fill: '#474747',
}),
(0, vue_demi_1.h)('path', {
d: 'M0.5201124,0.47988755C0.23603013,0.7639699,0.24460429,1.2271326,0.53900635,1.5005059L6.3195491,6.8681526C6.7032304,7.2244282,7.2967696,7.2244282,7.6804514,6.8681526L13.460994,1.5005059C13.755396,1.2271326,13.76397,0.7639699,13.479888,0.47988755C13.211547,0.21154633,12.779465,0.20215771,12.499721,0.45858961L7.3378625,5.1902928C7.1467018,5.3655233,6.8532982,5.3655233,6.6621375,5.1902928L1.5002797,0.45858967C1.2205358,0.20215771,0.78845364,0.21154633,0.5201124,0.47988755Z',
fill: '#9B9B9B',
}),
]),
]),
showMoreAction &&
(0, vue_demi_1.h)('button', {
ref: 'moreBtn',
class: 'lf-vue-node-title-more',
}, [(0, vue_demi_1.h)('i', { class: 'lf-vue-node-title-more-icon' }, '⋯')]),
(0, vue_demi_1.h)('div', {
ref: 'tooltip',
class: 'lf-vue-node-title-tooltip',
style: "opacity:".concat(this.showTooltip ? 1 : 0, ";pointer-events:").concat(this.showTooltip ? 'auto' : 'none', ";"),
}, [
(0, vue_demi_1.h)('div', { class: 'lf-vue-node-title-tooltip-list' }, actions.map(function (act) {
return (0, vue_demi_1.h)('div', {
class: 'lf-vue-node-title-tooltip-item',
onClick: function (e) {
e.stopPropagation();
_this.runAction(act);
},
on: {
click: function (e) {
e.stopPropagation();
_this.runAction(act);
},
},
}, (act === null || act === void 0 ? void 0 : act.name) || '');
})),
]),
]),
]);
return bar;
},
});
//# sourceMappingURL=titleBar.js.map