简柏林 / thingskit · Commits

Commit dff2ca0cb18fe5e03e95fa76dcb9f2ec465fd96f

Authored by Igor Kulikov
1 parent 46597ebc

Rule Node tooltips

Inline Side-by-side
Showing 3 changed files with 91 additions and 4 deletions
@@ -16,6 +16,10 @@ @@ -16,6 +16,10 @@
16 16
17 import './rulechain.scss'; 17 import './rulechain.scss';
18 18
  19 +import 'tooltipster/dist/css/tooltipster.bundle.min.css';
  20 +import 'tooltipster/dist/js/tooltipster.bundle.min.js';
  21 +import 'tooltipster/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-shadow.min.css';
  22 +
19 /* eslint-disable import/no-unresolved, import/default */ 23 /* eslint-disable import/no-unresolved, import/default */
20 24
21 import addRuleNodeTemplate from './add-rulenode.tpl.html'; 25 import addRuleNodeTemplate from './add-rulenode.tpl.html';
@@ -30,7 +34,7 @@ const aKeyCode = 65; @@ -30,7 +34,7 @@ const aKeyCode = 65;
30 const escKeyCode = 27; 34 const escKeyCode = 27;
31 35
32 /*@ngInject*/ 36 /*@ngInject*/
33 -export function RuleChainController($stateParams, $scope, $q, $mdUtil, $mdExpansionPanel, $document, $mdDialog, $filter, types, ruleChainService, Modelfactory, flowchartConstants, ruleChain, ruleChainMetaData) { 37 +export function RuleChainController($stateParams, $scope, $compile, $q, $mdUtil, $timeout, $mdExpansionPanel, $document, $mdDialog, $filter, types, ruleChainService, Modelfactory, flowchartConstants, ruleChain, ruleChainMetaData) {
34 38
35 var vm = this; 39 var vm = this;
36 40
@@ -139,6 +143,82 @@ export function RuleChainController($stateParams, $scope, $q, $mdUtil, $mdExpans @@ -139,6 +143,82 @@ export function RuleChainController($stateParams, $scope, $q, $mdUtil, $mdExpans
139 vm.editingRuleNodeLink = angular.copy(edge); 143 vm.editingRuleNodeLink = angular.copy(edge);
140 }; 144 };
141 145
  146 + vm.nodeLibCallbacks = {
  147 + nodeCallbacks: {
  148 + 'mouseEnter': function (event, node) {
  149 + displayNodeDescriptionTooltip(event, node);
  150 + },
  151 + 'mouseLeave': function () {
  152 + destroyTooltips();
  153 + }
  154 + }
  155 + };
  156 +
  157 + vm.typeHeaderMouseEnter = function(event, typeId) {
  158 + displayTooltip(event,
  159 + '<div class="tb-rule-node-tooltip">' +
  160 + '<div id="tooltip-content" layout="column">' +
  161 + '<div class="tb-node-title">' + typeId + '</div>' +
  162 + '<div class="tb-node-description">' + 'Some description of component type' + '</div>' +
  163 + '</div>' +
  164 + '</div>'
  165 + );
  166 + };
  167 +
  168 + vm.destroyTooltips = destroyTooltips;
  169 +
  170 + function destroyTooltips() {
  171 + if (vm.tooltipTimeout) {
  172 + $timeout.cancel(vm.tooltipTimeout);
  173 + vm.tooltipTimeout = null;
  174 + }
  175 + var instances = angular.element.tooltipster.instances();
  176 + instances.forEach((instance) => {
  177 + instance.destroy();
  178 + });
  179 + }
  180 +
  181 + function displayNodeDescriptionTooltip(event, node) {
  182 + displayTooltip(event,
  183 + '<div class="tb-rule-node-tooltip">' +
  184 + '<div id="tooltip-content" layout="column">' +
  185 + '<div class="tb-node-title">' + node.component.name + '</div>' +
  186 + '<div class="tb-node-description">' + 'Some description of node' + '</div>' +
  187 + '</div>' +
  188 + '</div>'
  189 + );
  190 + }
  191 +
  192 + function displayTooltip(event, content) {
  193 + destroyTooltips();
  194 + vm.tooltipTimeout = $timeout(() => {
  195 + var element = angular.element(event.target);
  196 + element.tooltipster(
  197 + {
  198 + theme: 'tooltipster-shadow',
  199 + delay: 100,
  200 + trigger: 'custom',
  201 + triggerOpen: {
  202 + click: false,
  203 + tap: false
  204 + },
  205 + triggerClose: {
  206 + click: true,
  207 + tap: true,
  208 + scroll: true
  209 + },
  210 + side: 'right',
  211 + trackOrigin: true
  212 + }
  213 + );
  214 + var contentElement = angular.element(content);
  215 + $compile(contentElement)($scope);
  216 + var tooltip = element.tooltipster('instance');
  217 + tooltip.content(contentElement);
  218 + tooltip.open();
  219 + }, 500);
  220 + }
  221 +
142 vm.editCallbacks = { 222 vm.editCallbacks = {
143 edgeDoubleClick: function (event, edge) { 223 edgeDoubleClick: function (event, edge) {
144 var sourceNode = vm.modelservice.nodes.getNodeByConnectorId(edge.source); 224 var sourceNode = vm.modelservice.nodes.getNodeByConnectorId(edge.source);
@@ -23,12 +23,15 @@ @@ -23,12 +23,15 @@
23 <div class="tb-rulechain-library"> 23 <div class="tb-rulechain-library">
24 <md-expansion-panel-group ng-if="vm.ruleChainLibraryLoaded" class="tb-rulechain-library-panel-group" md-component-id="libraryPanelGroup" auto-expand="true" multiple> 24 <md-expansion-panel-group ng-if="vm.ruleChainLibraryLoaded" class="tb-rulechain-library-panel-group" md-component-id="libraryPanelGroup" auto-expand="true" multiple>
25 <md-expansion-panel md-component-id="{{typeId}}" id="{{typeId}}" ng-repeat="(typeId, typeModel) in vm.ruleNodeTypesModel"> 25 <md-expansion-panel md-component-id="{{typeId}}" id="{{typeId}}" ng-repeat="(typeId, typeModel) in vm.ruleNodeTypesModel">
26 - <md-expansion-panel-collapsed> 26 + <md-expansion-panel-collapsed ng-mouseenter="vm.typeHeaderMouseEnter($event, typeId)"
  27 + ng-mouseleave="vm.destroyTooltips()">
27 <div class="tb-panel-title" translate>{{vm.types.ruleNodeType[typeId].name}}</div> 28 <div class="tb-panel-title" translate>{{vm.types.ruleNodeType[typeId].name}}</div>
28 <md-expansion-panel-icon></md-expansion-panel-icon> 29 <md-expansion-panel-icon></md-expansion-panel-icon>
29 </md-expansion-panel-collapsed> 30 </md-expansion-panel-collapsed>
30 <md-expansion-panel-expanded> 31 <md-expansion-panel-expanded>
31 - <md-expansion-panel-header ng-click="vm.$mdExpansionPanel(typeId).collapse()"> 32 + <md-expansion-panel-header ng-mouseenter="vm.typeHeaderMouseEnter($event, typeId)"
  33 + ng-mouseleave="vm.destroyTooltips()"
  34 + ng-click="vm.$mdExpansionPanel(typeId).collapse()">
32 <div class="tb-panel-title" translate>{{vm.types.ruleNodeType[typeId].name}}</div> 35 <div class="tb-panel-title" translate>{{vm.types.ruleNodeType[typeId].name}}</div>
33 <md-expansion-panel-icon></md-expansion-panel-icon> 36 <md-expansion-panel-icon></md-expansion-panel-icon>
34 </md-expansion-panel-header> 37 </md-expansion-panel-header>
@@ -36,6 +39,7 @@ @@ -36,6 +39,7 @@
36 <fc-canvas id="tb-rulechain-{{typeId}}" 39 <fc-canvas id="tb-rulechain-{{typeId}}"
37 model="vm.ruleNodeTypesModel[typeId].model" selected-objects="vm.ruleNodeTypesModel[typeId].selectedObjects" 40 model="vm.ruleNodeTypesModel[typeId].model" selected-objects="vm.ruleNodeTypesModel[typeId].selectedObjects"
38 automatic-resize="false" 41 automatic-resize="false"
  42 + callbacks="vm.nodeLibCallbacks"
39 node-width="170" 43 node-width="170"
40 node-height="50" 44 node-height="50"
41 drop-target-id="'tb-rulchain-canvas'"></fc-canvas> 45 drop-target-id="'tb-rulchain-canvas'"></fc-canvas>
@@ -18,7 +18,10 @@ @@ -18,7 +18,10 @@
18 <div 18 <div
19 id="{{node.id}}" 19 id="{{node.id}}"
20 ng-attr-style="position: absolute; top: {{ node.y }}px; left: {{ node.x }}px;" 20 ng-attr-style="position: absolute; top: {{ node.y }}px; left: {{ node.x }}px;"
21 - ng-dblclick="callbacks.doubleClick($event, node)"> 21 + ng-dblclick="callbacks.doubleClick($event, node)"
  22 + ng-mouseover="callbacks.mouseOver($event, node)"
  23 + ng-mouseenter="callbacks.mouseEnter($event, node)"
  24 + ng-mouseleave="callbacks.mouseLeave($event, node)">
22 <div class="tb-rule-node {{node.nodeClass}}"> 25 <div class="tb-rule-node {{node.nodeClass}}">
23 <md-icon aria-label="node-type-icon" flex="15" 26 <md-icon aria-label="node-type-icon" flex="15"
24 class="material-icons">{{node.icon}}</md-icon> 27 class="material-icons">{{node.icon}}</md-icon>