@maxgraph/core
Version:
maxGraph is a fully client side JavaScript diagramming library that uses SVG and HTML for rendering.
280 lines (276 loc) • 9.38 kB
JavaScript
"use strict";
/*
Copyright 2021-present The maxGraph project Contributors
Copyright (c) 2006-2015, JGraph Ltd
Copyright (c) 2006-2015, Gaudenz Alder
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const InternalEvent_js_1 = __importDefault(require("../event/InternalEvent.js"));
const styleUtils_js_1 = require("../../util/styleUtils.js");
const Constants_js_1 = require("../../util/Constants.js");
const EventUtils_js_1 = require("../../util/EventUtils.js");
const domUtils_js_1 = require("../../util/domUtils.js");
/**
* Graph event handler that displays tooltips.
*
* {@link AbstractGraph.getTooltip} is used to get the tooltip for a cell or handle.
*
* This handler is generally enabled using {@link AbstractGraph.setTooltips}.
*
* @category Plugin
*/
class TooltipHandler {
/**
* Creates the tooltip element and appends it to the document body.
*
*/
init() {
if (document.body) {
this.div = document.createElement('div');
this.div.className = 'mxTooltip';
this.div.style.visibility = 'hidden';
document.body.appendChild(this.div);
InternalEvent_js_1.default.addGestureListeners(this.div, (evt) => {
const source = (0, EventUtils_js_1.getSource)(evt);
// @ts-ignore nodeName may exist
if (source && source.nodeName !== 'A') {
this.hideTooltip();
}
});
// Hides tooltips and resets tooltip timer if mouse leaves container
InternalEvent_js_1.default.addListener(this.graph.getContainer(), 'mouseleave', (evt) => {
if (this.div !== evt.relatedTarget) {
this.hide();
}
});
}
}
/**
* Constructs an event handler that displays tooltips.
*
* @param graph Reference to the enclosing {@link AbstractGraph}.
*/
constructor(graph) {
/**
* Specifies the zIndex for the tooltip and its shadow.
* @default 10005
*/
this.zIndex = 10005;
/**
* Delay to show the tooltip in milliseconds.
* @default 500
*/
this.delay = 500;
/**
* Specifies if touch and pen events should be ignored.
* @default true
*/
this.ignoreTouchEvents = true;
/**
* Specifies if the tooltip should be hidden if the mouse is moved over the current cell.
* @default false
*/
this.hideOnHover = false;
/**
* `true` if this handler was destroyed using {@link onDestroy}.
*/
this.destroyed = false;
this.lastX = 0;
this.lastY = 0;
this.state = null;
this.stateSource = false;
this.thread = null;
/**
* Specifies if events are handled.
* @default false
*/
this.enabled = false;
this.graph = graph;
this.graph.addMouseListener(this);
}
/**
* Returns `true` if events are handled.
*
* This implementation returns {@link enabled}.
*/
isEnabled() {
return this.enabled;
}
/**
* Enables or disables event handling.
*
* This implementation updates {@link enabled}.
*/
setEnabled(enabled) {
this.enabled = enabled;
}
/**
* Returns {@link hideOnHover}.
*/
isHideOnHover() {
return this.hideOnHover;
}
/**
* Sets <hideOnHover>.
*/
setHideOnHover(value) {
this.hideOnHover = value;
}
/**
* Returns the <CellState> to be used for showing a tooltip for this event.
*/
getStateForEvent(me) {
return me.getState();
}
/**
* Handles the event by initiating a rubberband selection.
* By consuming the event all subsequent events of the gesture are redirected to this handler.
*/
mouseDown(_sender, me) {
this.reset(me, false);
this.hideTooltip();
}
/**
* Handles the event by updating the rubberband selection.
*/
mouseMove(_sender, me) {
if (me.getX() !== this.lastX || me.getY() !== this.lastY) {
this.reset(me, true);
const state = this.getStateForEvent(me);
if (this.isHideOnHover() ||
state !== this.state ||
(me.getSource() !== this.node &&
(!this.stateSource ||
(state != null &&
this.stateSource ===
(me.isSource(state.shape) || !me.isSource(state.text)))))) {
this.hideTooltip();
}
}
this.lastX = me.getX();
this.lastY = me.getY();
}
/**
* Handles the event by resetting the tooltip timer or hiding the existing tooltip.
*/
mouseUp(_sender, me) {
this.reset(me, true);
this.hideTooltip();
}
/**
* Resets the timer.
*/
resetTimer() {
if (this.thread) {
window.clearTimeout(this.thread);
this.thread = null;
}
}
/**
* Resets and/or restarts the timer to trigger the display of the tooltip.
*/
reset(me, restart, state = null) {
if (!this.ignoreTouchEvents || (0, EventUtils_js_1.isMouseEvent)(me.getEvent())) {
this.resetTimer();
state = state ?? this.getStateForEvent(me);
if (restart &&
this.isEnabled() &&
state &&
(!this.div || this.div.style.visibility == 'hidden')) {
const node = me.getSource();
const x = me.getX();
const y = me.getY();
const stateSource = me.isSource(state.shape) || me.isSource(state.text);
const popupMenuHandler = this.graph.getPlugin('PopupMenuHandler');
this.thread = window.setTimeout(() => {
if (state &&
node &&
!this.graph.isEditing() &&
popupMenuHandler &&
!popupMenuHandler.isMenuShowing() &&
!this.graph.isMouseDown) {
// Uses information from inside event cause using the event at
// this (delayed) point in time is not possible in IE as it no
// longer contains the required information (member not found)
const tip = this.graph.getTooltip(state, node, x, y);
this.show(tip, x, y);
this.state = state;
this.node = node;
this.stateSource = stateSource;
}
}, this.delay);
}
}
}
/**
* Hides the tooltip and resets the timer.
*/
hide() {
this.resetTimer();
this.hideTooltip();
}
/**
* Hides the tooltip.
*/
hideTooltip() {
if (this.div) {
this.div.style.visibility = 'hidden';
this.div.innerHTML = '';
}
}
/**
* Shows the tooltip for the specified cell and optional index at the
* specified location (with a vertical offset of 10 pixels).
*/
show(tip, x, y) {
if (!this.destroyed && tip && tip !== '') {
const origin = (0, styleUtils_js_1.getScrollOrigin)();
if (!this.div) {
this.init();
}
this.div.style.zIndex = String(this.zIndex);
this.div.style.left = `${x + origin.x}px`;
this.div.style.top = `${y + Constants_js_1.TOOLTIP_VERTICAL_OFFSET + origin.y}px`;
if (!(0, domUtils_js_1.isNode)(tip)) {
this.div.innerHTML = tip.replace(/\n/g, '<br>');
}
else {
this.div.innerHTML = '';
this.div.appendChild(tip);
}
this.div.style.visibility = '';
(0, styleUtils_js_1.fit)(this.div);
}
}
/**
* Destroys the handler and all its resources and DOM nodes.
*/
onDestroy() {
if (!this.destroyed) {
this.resetTimer();
this.graph.removeMouseListener(this);
if (this.div) {
InternalEvent_js_1.default.release(this.div);
}
if (this.div?.parentNode) {
this.div.parentNode.removeChild(this.div);
}
this.destroyed = true;
this.div = null;
}
}
}
TooltipHandler.pluginId = 'TooltipHandler';
exports.default = TooltipHandler;