summaryrefslogtreecommitdiff
path: root/src/js/view/mxCellOverlay.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/js/view/mxCellOverlay.js')
-rw-r--r--src/js/view/mxCellOverlay.js233
1 files changed, 233 insertions, 0 deletions
diff --git a/src/js/view/mxCellOverlay.js b/src/js/view/mxCellOverlay.js
new file mode 100644
index 0000000..316e2c4
--- /dev/null
+++ b/src/js/view/mxCellOverlay.js
@@ -0,0 +1,233 @@
+/**
+ * $Id: mxCellOverlay.js,v 1.18 2012-12-06 15:58:44 gaudenz Exp $
+ * Copyright (c) 2006-2010, JGraph Ltd
+ */
+/**
+ * Class: mxCellOverlay
+ *
+ * Extends <mxEventSource> to implement a graph overlay, represented by an icon
+ * and a tooltip. Overlays can handle and fire <click> events and are added to
+ * the graph using <mxGraph.addCellOverlay>, and removed using
+ * <mxGraph.removeCellOverlay>, or <mxGraph.removeCellOverlays> to remove all overlays.
+ * The <mxGraph.getCellOverlays> function returns the array of overlays for a given
+ * cell in a graph. If multiple overlays exist for the same cell, then
+ * <getBounds> should be overridden in at least one of the overlays.
+ *
+ * Overlays appear on top of all cells in a special layer. If this is not
+ * desirable, then the image must be rendered as part of the shape or label of
+ * the cell instead.
+ *
+ * Example:
+ *
+ * The following adds a new overlays for a given vertex and selects the cell
+ * if the overlay is clicked.
+ *
+ * (code)
+ * var overlay = new mxCellOverlay(img, html);
+ * graph.addCellOverlay(vertex, overlay);
+ * overlay.addListener(mxEvent.CLICK, function(sender, evt)
+ * {
+ * var cell = evt.getProperty('cell');
+ * graph.setSelectionCell(cell);
+ * });
+ * (end)
+ *
+ * For cell overlays to be printed use <mxPrintPreview.printOverlays>.
+ *
+ * Event: mxEvent.CLICK
+ *
+ * Fires when the user clicks on the overlay. The <code>event</code> property
+ * contains the corresponding mouse event and the <code>cell</code> property
+ * contains the cell. For touch devices this is fired if the element receives
+ * a touchend event.
+ *
+ * Constructor: mxCellOverlay
+ *
+ * Constructs a new overlay using the given image and tooltip.
+ *
+ * Parameters:
+ *
+ * image - <mxImage> that represents the icon to be displayed.
+ * tooltip - Optional string that specifies the tooltip.
+ * align - Optional horizontal alignment for the overlay. Possible
+ * values are <ALIGN_LEFT>, <ALIGN_CENTER> and <ALIGN_RIGHT>
+ * (default).
+ * verticalAlign - Vertical alignment for the overlay. Possible
+ * values are <ALIGN_TOP>, <ALIGN_MIDDLE> and <ALIGN_BOTTOM>
+ * (default).
+ */
+function mxCellOverlay(image, tooltip, align, verticalAlign, offset, cursor)
+{
+ this.image = image;
+ this.tooltip = tooltip;
+ this.align = (align != null) ? align : this.align;
+ this.verticalAlign = (verticalAlign != null) ? verticalAlign : this.verticalAlign;
+ this.offset = (offset != null) ? offset : new mxPoint();
+ this.cursor = (cursor != null) ? cursor : 'help';
+};
+
+/**
+ * Extends mxEventSource.
+ */
+mxCellOverlay.prototype = new mxEventSource();
+mxCellOverlay.prototype.constructor = mxCellOverlay;
+
+/**
+ * Variable: image
+ *
+ * Holds the <mxImage> to be used as the icon.
+ */
+mxCellOverlay.prototype.image = null;
+
+/**
+ * Variable: tooltip
+ *
+ * Holds the optional string to be used as the tooltip.
+ */
+mxCellOverlay.prototype.tooltip = null;
+
+/**
+ * Variable: align
+ *
+ * Holds the horizontal alignment for the overlay. Default is
+ * <mxConstants.ALIGN_RIGHT>. For edges, the overlay always appears in the
+ * center of the edge.
+ */
+mxCellOverlay.prototype.align = mxConstants.ALIGN_RIGHT;
+
+/**
+ * Variable: verticalAlign
+ *
+ * Holds the vertical alignment for the overlay. Default is
+ * <mxConstants.ALIGN_BOTTOM>. For edges, the overlay always appears in the
+ * center of the edge.
+ */
+mxCellOverlay.prototype.verticalAlign = mxConstants.ALIGN_BOTTOM;
+
+/**
+ * Variable: offset
+ *
+ * Holds the offset as an <mxPoint>. The offset will be scaled according to the
+ * current scale.
+ */
+mxCellOverlay.prototype.offset = null;
+
+/**
+ * Variable: cursor
+ *
+ * Holds the cursor for the overlay. Default is 'help'.
+ */
+mxCellOverlay.prototype.cursor = null;
+
+/**
+ * Variable: defaultOverlap
+ *
+ * Defines the overlapping for the overlay, that is, the proportional distance
+ * from the origin to the point defined by the alignment. Default is 0.5.
+ */
+mxCellOverlay.prototype.defaultOverlap = 0.5;
+
+/**
+ * Function: getBounds
+ *
+ * Returns the bounds of the overlay for the given <mxCellState> as an
+ * <mxRectangle>. This should be overridden when using multiple overlays
+ * per cell so that the overlays do not overlap.
+ *
+ * The following example will place the overlay along an edge (where
+ * x=[-1..1] from the start to the end of the edge and y is the
+ * orthogonal offset in px).
+ *
+ * (code)
+ * overlay.getBounds = function(state)
+ * {
+ * var bounds = mxCellOverlay.prototype.getBounds.apply(this, arguments);
+ *
+ * if (state.view.graph.getModel().isEdge(state.cell))
+ * {
+ * var pt = state.view.getPoint(state, {x: 0, y: 0, relative: true});
+ *
+ * bounds.x = pt.x - bounds.width / 2;
+ * bounds.y = pt.y - bounds.height / 2;
+ * }
+ *
+ * return bounds;
+ * };
+ * (end)
+ *
+ * Parameters:
+ *
+ * state - <mxCellState> that represents the current state of the
+ * associated cell.
+ */
+mxCellOverlay.prototype.getBounds = function(state)
+{
+ var isEdge = state.view.graph.getModel().isEdge(state.cell);
+ var s = state.view.scale;
+ var pt = null;
+
+ var w = this.image.width;
+ var h = this.image.height;
+
+ if (isEdge)
+ {
+ var pts = state.absolutePoints;
+
+ if (pts.length % 2 == 1)
+ {
+ pt = pts[Math.floor(pts.length / 2)];
+ }
+ else
+ {
+ var idx = pts.length / 2;
+ var p0 = pts[idx-1];
+ var p1 = pts[idx];
+ pt = new mxPoint(p0.x + (p1.x - p0.x) / 2,
+ p0.y + (p1.y - p0.y) / 2);
+ }
+ }
+ else
+ {
+ pt = new mxPoint();
+
+ if (this.align == mxConstants.ALIGN_LEFT)
+ {
+ pt.x = state.x;
+ }
+ else if (this.align == mxConstants.ALIGN_CENTER)
+ {
+ pt.x = state.x + state.width / 2;
+ }
+ else
+ {
+ pt.x = state.x + state.width;
+ }
+
+ if (this.verticalAlign == mxConstants.ALIGN_TOP)
+ {
+ pt.y = state.y;
+ }
+ else if (this.verticalAlign == mxConstants.ALIGN_MIDDLE)
+ {
+ pt.y = state.y + state.height / 2;
+ }
+ else
+ {
+ pt.y = state.y + state.height;
+ }
+ }
+
+ return new mxRectangle(pt.x - (w * this.defaultOverlap - this.offset.x) * s,
+ pt.y - (h * this.defaultOverlap - this.offset.y) * s, w * s, h * s);
+};
+
+/**
+ * Function: toString
+ *
+ * Returns the textual representation of the overlay to be used as the
+ * tooltip. This implementation returns <tooltip>.
+ */
+mxCellOverlay.prototype.toString = function()
+{
+ return this.tooltip;
+};