Rule Node tooltips
This commit is contained in:
Igor Kulikov
parent
46597ebcdd
commit
dff2ca0cb1
@ -16,6 +16,10 @@
|
||||
|
||||
import './rulechain.scss';
|
||||
|
||||
import 'tooltipster/dist/css/tooltipster.bundle.min.css';
|
||||
import 'tooltipster/dist/js/tooltipster.bundle.min.js';
|
||||
import 'tooltipster/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-shadow.min.css';
|
||||
|
||||
/* eslint-disable import/no-unresolved, import/default */
|
||||
|
||||
import addRuleNodeTemplate from './add-rulenode.tpl.html';
|
||||
@ -30,7 +34,7 @@ const aKeyCode = 65;
|
||||
const escKeyCode = 27;
|
||||
|
||||
/*@ngInject*/
|
||||
export function RuleChainController($stateParams, $scope, $q, $mdUtil, $mdExpansionPanel, $document, $mdDialog, $filter, types, ruleChainService, Modelfactory, flowchartConstants, ruleChain, ruleChainMetaData) {
|
||||
export function RuleChainController($stateParams, $scope, $compile, $q, $mdUtil, $timeout, $mdExpansionPanel, $document, $mdDialog, $filter, types, ruleChainService, Modelfactory, flowchartConstants, ruleChain, ruleChainMetaData) {
|
||||
|
||||
var vm = this;
|
||||
|
||||
@ -139,6 +143,82 @@ export function RuleChainController($stateParams, $scope, $q, $mdUtil, $mdExpans
|
||||
vm.editingRuleNodeLink = angular.copy(edge);
|
||||
};
|
||||
|
||||
vm.nodeLibCallbacks = {
|
||||
nodeCallbacks: {
|
||||
'mouseEnter': function (event, node) {
|
||||
displayNodeDescriptionTooltip(event, node);
|
||||
},
|
||||
'mouseLeave': function () {
|
||||
destroyTooltips();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
vm.typeHeaderMouseEnter = function(event, typeId) {
|
||||
displayTooltip(event,
|
||||
'<div class="tb-rule-node-tooltip">' +
|
||||
'<div id="tooltip-content" layout="column">' +
|
||||
'<div class="tb-node-title">' + typeId + '</div>' +
|
||||
'<div class="tb-node-description">' + 'Some description of component type' + '</div>' +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
);
|
||||
};
|
||||
|
||||
vm.destroyTooltips = destroyTooltips;
|
||||
|
||||
function destroyTooltips() {
|
||||
if (vm.tooltipTimeout) {
|
||||
$timeout.cancel(vm.tooltipTimeout);
|
||||
vm.tooltipTimeout = null;
|
||||
}
|
||||
var instances = angular.element.tooltipster.instances();
|
||||
instances.forEach((instance) => {
|
||||
instance.destroy();
|
||||
});
|
||||
}
|
||||
|
||||
function displayNodeDescriptionTooltip(event, node) {
|
||||
displayTooltip(event,
|
||||
'<div class="tb-rule-node-tooltip">' +
|
||||
'<div id="tooltip-content" layout="column">' +
|
||||
'<div class="tb-node-title">' + node.component.name + '</div>' +
|
||||
'<div class="tb-node-description">' + 'Some description of node' + '</div>' +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
|
||||
function displayTooltip(event, content) {
|
||||
destroyTooltips();
|
||||
vm.tooltipTimeout = $timeout(() => {
|
||||
var element = angular.element(event.target);
|
||||
element.tooltipster(
|
||||
{
|
||||
theme: 'tooltipster-shadow',
|
||||
delay: 100,
|
||||
trigger: 'custom',
|
||||
triggerOpen: {
|
||||
click: false,
|
||||
tap: false
|
||||
},
|
||||
triggerClose: {
|
||||
click: true,
|
||||
tap: true,
|
||||
scroll: true
|
||||
},
|
||||
side: 'right',
|
||||
trackOrigin: true
|
||||
}
|
||||
);
|
||||
var contentElement = angular.element(content);
|
||||
$compile(contentElement)($scope);
|
||||
var tooltip = element.tooltipster('instance');
|
||||
tooltip.content(contentElement);
|
||||
tooltip.open();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
vm.editCallbacks = {
|
||||
edgeDoubleClick: function (event, edge) {
|
||||
var sourceNode = vm.modelservice.nodes.getNodeByConnectorId(edge.source);
|
||||
|
||||
@ -23,12 +23,15 @@
|
||||
<div class="tb-rulechain-library">
|
||||
<md-expansion-panel-group ng-if="vm.ruleChainLibraryLoaded" class="tb-rulechain-library-panel-group" md-component-id="libraryPanelGroup" auto-expand="true" multiple>
|
||||
<md-expansion-panel md-component-id="{{typeId}}" id="{{typeId}}" ng-repeat="(typeId, typeModel) in vm.ruleNodeTypesModel">
|
||||
<md-expansion-panel-collapsed>
|
||||
<md-expansion-panel-collapsed ng-mouseenter="vm.typeHeaderMouseEnter($event, typeId)"
|
||||
ng-mouseleave="vm.destroyTooltips()">
|
||||
<div class="tb-panel-title" translate>{{vm.types.ruleNodeType[typeId].name}}</div>
|
||||
<md-expansion-panel-icon></md-expansion-panel-icon>
|
||||
</md-expansion-panel-collapsed>
|
||||
<md-expansion-panel-expanded>
|
||||
<md-expansion-panel-header ng-click="vm.$mdExpansionPanel(typeId).collapse()">
|
||||
<md-expansion-panel-header ng-mouseenter="vm.typeHeaderMouseEnter($event, typeId)"
|
||||
ng-mouseleave="vm.destroyTooltips()"
|
||||
ng-click="vm.$mdExpansionPanel(typeId).collapse()">
|
||||
<div class="tb-panel-title" translate>{{vm.types.ruleNodeType[typeId].name}}</div>
|
||||
<md-expansion-panel-icon></md-expansion-panel-icon>
|
||||
</md-expansion-panel-header>
|
||||
@ -36,6 +39,7 @@
|
||||
<fc-canvas id="tb-rulechain-{{typeId}}"
|
||||
model="vm.ruleNodeTypesModel[typeId].model" selected-objects="vm.ruleNodeTypesModel[typeId].selectedObjects"
|
||||
automatic-resize="false"
|
||||
callbacks="vm.nodeLibCallbacks"
|
||||
node-width="170"
|
||||
node-height="50"
|
||||
drop-target-id="'tb-rulchain-canvas'"></fc-canvas>
|
||||
|
||||
@ -18,7 +18,10 @@
|
||||
<div
|
||||
id="{{node.id}}"
|
||||
ng-attr-style="position: absolute; top: {{ node.y }}px; left: {{ node.x }}px;"
|
||||
ng-dblclick="callbacks.doubleClick($event, node)">
|
||||
ng-dblclick="callbacks.doubleClick($event, node)"
|
||||
ng-mouseover="callbacks.mouseOver($event, node)"
|
||||
ng-mouseenter="callbacks.mouseEnter($event, node)"
|
||||
ng-mouseleave="callbacks.mouseLeave($event, node)">
|
||||
<div class="tb-rule-node {{node.nodeClass}}">
|
||||
<md-icon aria-label="node-type-icon" flex="15"
|
||||
class="material-icons">{{node.icon}}</md-icon>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user