2200 lines
68 KiB
JavaScript
2200 lines
68 KiB
JavaScript
/**
|
|
* $Id: Shapes.js,v 1.26 2014/01/27 20:45:08 gaudenz Exp $
|
|
* Copyright (c) 2006-2012, JGraph Ltd
|
|
*/
|
|
|
|
/**
|
|
* Registers shapes.
|
|
*/
|
|
(function()
|
|
{
|
|
// Cube Shape, supports size style
|
|
function CubeShape()
|
|
{
|
|
mxCylinder.call(this);
|
|
};
|
|
mxUtils.extend(CubeShape, mxCylinder);
|
|
CubeShape.prototype.size = 20;
|
|
CubeShape.prototype.redrawPath = function(path, x, y, w, h, isForeground)
|
|
{
|
|
var s = Math.min(w, Math.min(h, mxUtils.getValue(this.style, 'size', this.size)));
|
|
|
|
if (isForeground)
|
|
{
|
|
path.moveTo(s, h);
|
|
path.lineTo(s, s);
|
|
path.lineTo(0, 0);
|
|
path.moveTo(s, s);
|
|
path.lineTo(w, s);
|
|
path.end();
|
|
}
|
|
else
|
|
{
|
|
path.moveTo(0, 0);
|
|
path.lineTo(w - s, 0);
|
|
path.lineTo(w, s);
|
|
path.lineTo(w, h);
|
|
path.lineTo(s, h);
|
|
path.lineTo(0, h - s);
|
|
path.lineTo(0, 0);
|
|
path.close();
|
|
path.end();
|
|
}
|
|
};
|
|
|
|
mxCellRenderer.prototype.defaultShapes['cube'] = CubeShape;
|
|
|
|
// Note Shape, supports size style
|
|
function NoteShape()
|
|
{
|
|
mxCylinder.call(this);
|
|
};
|
|
mxUtils.extend(NoteShape, mxCylinder);
|
|
NoteShape.prototype.size = 30;
|
|
NoteShape.prototype.redrawPath = function(path, x, y, w, h, isForeground)
|
|
{
|
|
var s = Math.min(w, Math.min(h, mxUtils.getValue(this.style, 'size', this.size)));
|
|
|
|
if (isForeground)
|
|
{
|
|
path.moveTo(w - s, 0);
|
|
path.lineTo(w - s, s);
|
|
path.lineTo(w, s);
|
|
path.end();
|
|
}
|
|
else
|
|
{
|
|
path.moveTo(0, 0);
|
|
path.lineTo(w - s, 0);
|
|
path.lineTo(w, s);
|
|
path.lineTo(w, h);
|
|
path.lineTo(0, h);
|
|
path.lineTo(0, 0);
|
|
path.close();
|
|
path.end();
|
|
}
|
|
};
|
|
|
|
mxCellRenderer.prototype.defaultShapes['note'] = NoteShape;
|
|
|
|
// Folder Shape, supports tabWidth, tabHeight styles
|
|
function FolderShape()
|
|
{
|
|
mxCylinder.call(this);
|
|
};
|
|
mxUtils.extend(FolderShape, mxCylinder);
|
|
FolderShape.prototype.tabWidth = 60;
|
|
FolderShape.prototype.tabHeight = 20;
|
|
FolderShape.prototype.tabPosition = 'right';
|
|
FolderShape.prototype.redrawPath = function(path, x, y, w, h, isForeground)
|
|
{
|
|
var tw = mxUtils.getValue(this.style, 'tabWidth', this.tabWidth);
|
|
var th = mxUtils.getValue(this.style, 'tabHeight', this.tabHeight);
|
|
var tp = mxUtils.getValue(this.style, 'tabPosition', this.tabPosition);
|
|
var dx = Math.min(w, tw);
|
|
var dy = Math.min(h, th);
|
|
|
|
if (isForeground)
|
|
{
|
|
if (tp == 'left')
|
|
{
|
|
path.moveTo(0, dy);
|
|
path.lineTo(dx, dy);
|
|
}
|
|
// Right is default
|
|
else
|
|
{
|
|
path.moveTo(w - dx, dy);
|
|
path.lineTo(w, dy);
|
|
}
|
|
|
|
path.end();
|
|
}
|
|
else
|
|
{
|
|
if (tp == 'left')
|
|
{
|
|
path.moveTo(0, 0);
|
|
path.lineTo(dx, 0);
|
|
path.lineTo(dx, dy);
|
|
path.lineTo(w, dy);
|
|
}
|
|
// Right is default
|
|
else
|
|
{
|
|
path.moveTo(0, dy);
|
|
path.lineTo(w - dx, dy);
|
|
path.lineTo(w - dx, 0);
|
|
path.lineTo(w, 0);
|
|
}
|
|
|
|
path.lineTo(w, h);
|
|
path.lineTo(0, h);
|
|
path.lineTo(0, dy);
|
|
path.close();
|
|
path.end();
|
|
}
|
|
};
|
|
|
|
mxCellRenderer.prototype.defaultShapes['folder'] = FolderShape;
|
|
|
|
// Card shape
|
|
function CardShape()
|
|
{
|
|
mxActor.call(this);
|
|
};
|
|
mxUtils.extend(CardShape, mxActor);
|
|
CardShape.prototype.size = 30;
|
|
CardShape.prototype.redrawPath = function(c, x, y, w, h)
|
|
{
|
|
var s = Math.min(w, Math.min(h, mxUtils.getValue(this.style, 'size', this.size)));
|
|
c.moveTo(s, 0);
|
|
c.lineTo(w, 0);
|
|
c.lineTo(w, h);
|
|
c.lineTo(0, h);
|
|
c.lineTo(0, s);
|
|
c.close();
|
|
c.end();
|
|
};
|
|
|
|
mxCellRenderer.prototype.defaultShapes['card'] = CardShape;
|
|
|
|
// Tape shape
|
|
function TapeShape()
|
|
{
|
|
mxActor.call(this);
|
|
};
|
|
mxUtils.extend(TapeShape, mxActor);
|
|
TapeShape.prototype.size = 0.4;
|
|
TapeShape.prototype.redrawPath = function(c, x, y, w, h)
|
|
{
|
|
var s = mxUtils.getValue(this.style, 'size', this.size);
|
|
var dy = h * s;
|
|
var fy = 1.4;
|
|
c.moveTo(0, dy / 2);
|
|
c.quadTo(w / 4, dy * fy, w / 2, dy / 2);
|
|
c.quadTo(w * 3 / 4, dy * (1 - fy), w, dy / 2);
|
|
c.lineTo(w, h - dy / 2);
|
|
c.quadTo(w * 3 / 4, h - dy * fy, w / 2, h - dy / 2);
|
|
c.quadTo(w / 4, h - dy * (1 - fy), 0, h - dy / 2);
|
|
c.lineTo(0, dy / 2);
|
|
c.close();
|
|
c.end();
|
|
};
|
|
|
|
mxCellRenderer.prototype.defaultShapes['tape'] = TapeShape;
|
|
|
|
// Document shape
|
|
function DocumentShape()
|
|
{
|
|
mxActor.call(this);
|
|
};
|
|
mxUtils.extend(DocumentShape, mxActor);
|
|
DocumentShape.prototype.size = 0.3;
|
|
DocumentShape.prototype.redrawPath = function(c, x, y, w, h)
|
|
{
|
|
var s = mxUtils.getValue(this.style, 'size', this.size);
|
|
var dy = h * s;
|
|
var fy = 1.4;
|
|
c.moveTo(0, 0);
|
|
c.lineTo(w, 0);
|
|
c.lineTo(w, h - dy / 2);
|
|
c.quadTo(w * 3 / 4, h - dy * fy, w / 2, h - dy / 2);
|
|
c.quadTo(w / 4, h - dy * (1 - fy), 0, h - dy / 2);
|
|
c.lineTo(0, dy / 2);
|
|
c.close();
|
|
c.end();
|
|
};
|
|
|
|
mxCellRenderer.prototype.defaultShapes['document'] = DocumentShape;
|
|
|
|
// Parallelogram shape
|
|
function ParallelogramShape()
|
|
{
|
|
mxActor.call(this);
|
|
};
|
|
mxUtils.extend(ParallelogramShape, mxActor);
|
|
ParallelogramShape.prototype.size = 0.2;
|
|
ParallelogramShape.prototype.redrawPath = function(c, x, y, w, h)
|
|
{
|
|
var dx = Math.min(w, Math.min(w, mxUtils.getValue(this.style, 'size', this.size) * w));
|
|
c.moveTo(0, h);
|
|
c.lineTo(dx, 0);
|
|
c.lineTo(w, 0);
|
|
c.lineTo(w - dx, h);
|
|
c.close();
|
|
c.end();
|
|
};
|
|
|
|
mxCellRenderer.prototype.defaultShapes['parallelogram'] = ParallelogramShape;
|
|
|
|
// Trapezoid shape
|
|
function TrapezoidShape()
|
|
{
|
|
mxActor.call(this);
|
|
};
|
|
mxUtils.extend(TrapezoidShape, mxActor);
|
|
TrapezoidShape.prototype.size = 0.2;
|
|
TrapezoidShape.prototype.redrawPath = function(c, x, y, w, h)
|
|
{
|
|
var dx = Math.min(w, Math.min(w, mxUtils.getValue(this.style, 'size', this.size) * w));
|
|
c.moveTo(0, h);
|
|
c.lineTo(dx, 0);
|
|
c.lineTo(w - dx, 0);
|
|
c.lineTo(w, h);
|
|
c.close();
|
|
c.end();
|
|
};
|
|
|
|
mxCellRenderer.prototype.defaultShapes['trapezoid'] = TrapezoidShape;
|
|
|
|
// Process Shape
|
|
function ProcessShape()
|
|
{
|
|
mxRectangleShape.call(this);
|
|
};
|
|
mxUtils.extend(ProcessShape, mxRectangleShape);
|
|
ProcessShape.prototype.size = 0.1;
|
|
ProcessShape.prototype.isHtmlAllowed = function()
|
|
{
|
|
return false;
|
|
};
|
|
ProcessShape.prototype.getLabelBounds = function(rect)
|
|
{
|
|
if (mxUtils.getValue(this.state.style, mxConstants.STYLE_HORIZONTAL, true) ==
|
|
(this.direction == null ||
|
|
this.direction == mxConstants.DIRECTION_EAST ||
|
|
this.direction == mxConstants.DIRECTION_WEST))
|
|
{
|
|
var w = rect.width;
|
|
var h = rect.height;
|
|
var r = new mxRectangle(rect.x, rect.y, w, h);
|
|
|
|
var inset = Math.min(w, Math.min(w, mxUtils.getValue(this.style, 'size', this.size) * w) + this.strokewidth);
|
|
|
|
if (this.isRounded)
|
|
{
|
|
var f = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE,
|
|
mxConstants.RECTANGLE_ROUNDING_FACTOR * 100) / 100;
|
|
inset = Math.max(inset, Math.min(w * f, h * f));
|
|
}
|
|
|
|
r.x += inset;
|
|
r.width -= 2 * inset;
|
|
|
|
return r;
|
|
}
|
|
|
|
return rect;
|
|
};
|
|
ProcessShape.prototype.paintForeground = function(c, x, y, w, h)
|
|
{
|
|
var inset = Math.min(w, Math.min(w, mxUtils.getValue(this.style, 'size', this.size) * w) + this.strokewidth);
|
|
|
|
if (this.isRounded)
|
|
{
|
|
var f = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE,
|
|
mxConstants.RECTANGLE_ROUNDING_FACTOR * 100) / 100;
|
|
inset = Math.max(inset, Math.min(w * f, h * f));
|
|
}
|
|
|
|
c.begin();
|
|
c.moveTo(x + inset, y);
|
|
c.lineTo(x + inset, y + h);
|
|
c.moveTo(x + w - inset, y);
|
|
c.lineTo(x + w - inset, y + h);
|
|
c.end();
|
|
c.stroke();
|
|
mxRectangleShape.prototype.paintForeground.apply(this, arguments);
|
|
};
|
|
|
|
mxCellRenderer.prototype.defaultShapes['process'] = ProcessShape;
|
|
|
|
// Step shape
|
|
function StepShape()
|
|
{
|
|
mxActor.call(this);
|
|
};
|
|
mxUtils.extend(StepShape, mxActor);
|
|
StepShape.prototype.size = 0.2;
|
|
StepShape.prototype.redrawPath = function(c, x, y, w, h)
|
|
{
|
|
var s = w * mxUtils.getValue(this.style, 'size', this.size);
|
|
c.moveTo(0, 0);
|
|
c.lineTo(w - s, 0);
|
|
c.lineTo(w, h / 2);
|
|
c.lineTo(w - s, h);
|
|
c.lineTo(0, h);
|
|
c.lineTo(s, h / 2);
|
|
c.close();
|
|
c.end();
|
|
};
|
|
|
|
mxCellRenderer.prototype.defaultShapes['step'] = StepShape;
|
|
|
|
// Plus Shape
|
|
function PlusShape()
|
|
{
|
|
mxRectangleShape.call(this);
|
|
};
|
|
mxUtils.extend(PlusShape, mxRectangleShape);
|
|
PlusShape.prototype.isHtmlAllowed = function()
|
|
{
|
|
return false;
|
|
};
|
|
PlusShape.prototype.paintForeground = function(c, x, y, w, h)
|
|
{
|
|
var border = Math.min(w / 5, h / 5) + 1;
|
|
|
|
c.begin();
|
|
c.moveTo(x + w / 2, y + border);
|
|
c.lineTo(x + w / 2, y + h - border);
|
|
c.moveTo(x + border, y + h / 2);
|
|
c.lineTo(x + w - border, y + h / 2);
|
|
c.end();
|
|
c.stroke();
|
|
mxRectangleShape.prototype.paintForeground.apply(this, arguments);
|
|
};
|
|
|
|
mxCellRenderer.prototype.defaultShapes['plus'] = PlusShape;
|
|
|
|
// CompositeShape
|
|
function ExtendedShape()
|
|
{
|
|
mxRectangleShape.call(this);
|
|
};
|
|
mxUtils.extend(ExtendedShape, mxRectangleShape);
|
|
ExtendedShape.prototype.isHtmlAllowed = function()
|
|
{
|
|
return false;
|
|
};
|
|
ExtendedShape.prototype.paintForeground = function(c, x, y, w, h)
|
|
{
|
|
if (this.style != null)
|
|
{
|
|
if (!this.outline && this.style['double'] == 1)
|
|
{
|
|
var inset = Math.max(2, this.strokewidth + 1);
|
|
|
|
if (w - 2 * inset > 0 && h - 2 * inset > 0)
|
|
{
|
|
mxRectangleShape.prototype.paintBackground.call(this, c, x + inset, y + inset, w - 2 * inset, h - 2 * inset);
|
|
}
|
|
|
|
mxRectangleShape.prototype.paintForeground.apply(this, arguments);
|
|
|
|
x += inset;
|
|
y += inset;
|
|
w -= 2 * inset;
|
|
h -= 2 * inset;
|
|
}
|
|
|
|
c.setDashed(false);
|
|
|
|
// Draws the symbols defined in the style. The symbols are
|
|
// numbered from 1...n. Possible postfixes are align,
|
|
// verticalAlign, spacing, arcSpacing, width, height
|
|
var counter = 0;
|
|
var shape = null;
|
|
|
|
do
|
|
{
|
|
shape = mxCellRenderer.prototype.defaultShapes[this.style['symbol' + counter]];
|
|
|
|
if (shape != null)
|
|
{
|
|
var align = this.style['symbol' + counter + 'Align'];
|
|
var valign = this.style['symbol' + counter + 'VerticalAlign'];
|
|
var width = this.style['symbol' + counter + 'Width'];
|
|
var height = this.style['symbol' + counter + 'Height'];
|
|
var spacing = this.style['symbol' + counter + 'Spacing'] || 0;
|
|
var arcspacing = this.style['symbol' + counter + 'ArcSpacing'];
|
|
|
|
if (arcspacing != null)
|
|
{
|
|
spacing += this.getArcSize(w + this.strokewidth, h + this.strokewidth) * arcspacing;
|
|
}
|
|
|
|
var x2 = x;
|
|
var y2 = y;
|
|
|
|
if (align == mxConstants.ALIGN_CENTER)
|
|
{
|
|
x2 += (w - width) / 2;
|
|
}
|
|
else if (align == mxConstants.ALIGN_RIGHT)
|
|
{
|
|
x2 += w - width - spacing;
|
|
}
|
|
else
|
|
{
|
|
x2 += spacing;
|
|
}
|
|
|
|
if (valign == mxConstants.ALIGN_MIDDLE)
|
|
{
|
|
y2 += (h - height) / 2;
|
|
}
|
|
else if (valign == mxConstants.ALIGN_BOTTOM)
|
|
{
|
|
y2 += h - height - spacing;
|
|
}
|
|
else
|
|
{
|
|
y2 += spacing;
|
|
}
|
|
|
|
c.save();
|
|
|
|
// Small hack to pass style along into subshape
|
|
var tmp = new shape();
|
|
// TODO: Clone style and override settings (eg. strokewidth)
|
|
tmp.style = this.style;
|
|
shape.prototype.paintVertexShape.call(tmp, c, x2, y2, width, height);
|
|
c.restore();
|
|
}
|
|
|
|
counter++;
|
|
}
|
|
while (shape != null);
|
|
}
|
|
};
|
|
|
|
mxCellRenderer.prototype.defaultShapes['ext'] = ExtendedShape;
|
|
|
|
// Tape Shape, supports size style
|
|
function MessageShape()
|
|
{
|
|
mxCylinder.call(this);
|
|
};
|
|
mxUtils.extend(MessageShape, mxCylinder);
|
|
MessageShape.prototype.redrawPath = function(path, x, y, w, h, isForeground)
|
|
{
|
|
if (isForeground)
|
|
{
|
|
path.moveTo(0, 0);
|
|
path.lineTo(w / 2, h / 2);
|
|
path.lineTo(w, 0);
|
|
path.end();
|
|
}
|
|
else
|
|
{
|
|
path.moveTo(0, 0);
|
|
path.lineTo(w, 0);
|
|
path.lineTo(w, h);
|
|
path.lineTo(0, h);
|
|
path.close();
|
|
}
|
|
};
|
|
|
|
mxCellRenderer.prototype.defaultShapes['message'] = MessageShape;
|
|
|
|
// UML Actor Shape
|
|
function UmlActorShape()
|
|
{
|
|
mxShape.call(this);
|
|
};
|
|
mxUtils.extend(UmlActorShape, mxShape);
|
|
UmlActorShape.prototype.paintBackground = function(c, x, y, w, h)
|
|
{
|
|
c.translate(x, y);
|
|
|
|
// Head
|
|
c.ellipse(w / 4, 0, w / 2, h / 4);
|
|
c.fillAndStroke();
|
|
|
|
c.begin();
|
|
c.moveTo(w / 2, h / 4);
|
|
c.lineTo(w / 2, 2 * h / 3);
|
|
|
|
// Arms
|
|
c.moveTo(w / 2, h / 3);
|
|
c.lineTo(0, h / 3);
|
|
c.moveTo(w / 2, h / 3);
|
|
c.lineTo(w, h / 3);
|
|
|
|
// Legs
|
|
c.moveTo(w / 2, 2 * h / 3);
|
|
c.lineTo(0, h);
|
|
c.moveTo(w / 2, 2 * h / 3);
|
|
c.lineTo(w, h);
|
|
c.end();
|
|
|
|
c.stroke();
|
|
};
|
|
|
|
// Replaces existing actor shape
|
|
mxCellRenderer.prototype.defaultShapes['umlActor'] = UmlActorShape;
|
|
|
|
// UML Lifeline Shape
|
|
function UmlLifeline()
|
|
{
|
|
mxRectangleShape.call(this);
|
|
};
|
|
mxUtils.extend(UmlLifeline, mxRectangleShape);
|
|
UmlLifeline.prototype.size = 40;
|
|
UmlLifeline.prototype.isHtmlAllowed = function()
|
|
{
|
|
return false;
|
|
};
|
|
UmlLifeline.prototype.getLabelBounds = function(rect)
|
|
{
|
|
var size = mxUtils.getValue(this.style, 'size', this.size);
|
|
|
|
return new mxRectangle(rect.x, rect.y, rect.width, size * this.scale);
|
|
};
|
|
UmlLifeline.prototype.paintBackground = function(c, x, y, w, h)
|
|
{
|
|
var size = mxUtils.getValue(this.style, 'size', this.size);
|
|
mxRectangleShape.prototype.paintBackground.call(this, c, x, y, w, Math.min(h, size));
|
|
|
|
if (size < h)
|
|
{
|
|
c.setDashed(true);
|
|
c.begin();
|
|
c.moveTo(x + w / 2, y + size);
|
|
c.lineTo(x + w / 2, y + h);
|
|
c.end();
|
|
c.stroke();
|
|
}
|
|
};
|
|
UmlLifeline.prototype.paintForeground = function(c, x, y, w, h)
|
|
{
|
|
var size = mxUtils.getValue(this.style, 'size', this.size);
|
|
mxRectangleShape.prototype.paintForeground.call(this, c, x, y, w, Math.min(h, size));
|
|
};
|
|
|
|
mxCellRenderer.prototype.defaultShapes['umlLifeline'] = UmlLifeline;
|
|
|
|
mxPerimeter.LifelinePerimeter = function (bounds, vertex, next, orthogonal)
|
|
{
|
|
var size = mxUtils.getValue(vertex.style, 'size', UmlLifeline.prototype.size) * vertex.view.scale;
|
|
|
|
return new mxPoint(bounds.getCenterX(), Math.min(bounds.y + bounds.height,
|
|
Math.max(bounds.y + size, next.y)));
|
|
};
|
|
|
|
mxStyleRegistry.putValue('lifelinePerimeter', mxPerimeter.LifelinePerimeter);
|
|
|
|
// Lollipop Shape
|
|
function LollipopShape()
|
|
{
|
|
mxShape.call(this);
|
|
};
|
|
mxUtils.extend(LollipopShape, mxShape);
|
|
LollipopShape.prototype.size = 10;
|
|
LollipopShape.prototype.paintBackground = function(c, x, y, w, h)
|
|
{
|
|
var sz = mxUtils.getValue(this.style, 'size', this.size);
|
|
c.translate(x, y);
|
|
|
|
c.ellipse((w - sz) / 2, 0, sz, sz);
|
|
c.fillAndStroke();
|
|
|
|
c.begin();
|
|
c.moveTo(w / 2, sz);
|
|
c.lineTo(w / 2, h);
|
|
c.end();
|
|
c.stroke();
|
|
};
|
|
|
|
// Replaces existing actor shape
|
|
mxCellRenderer.prototype.defaultShapes['lollipop'] = LollipopShape;
|
|
|
|
// Component shape
|
|
function ComponentShape()
|
|
{
|
|
mxCylinder.call(this);
|
|
};
|
|
mxUtils.extend(ComponentShape, mxCylinder);
|
|
ComponentShape.prototype.jettyWidth = 32;
|
|
ComponentShape.prototype.jettyHeight = 12;
|
|
ComponentShape.prototype.redrawPath = function(path, x, y, w, h, isForeground)
|
|
{
|
|
var dx = mxUtils.getValue(this.style, 'jettyWidth', this.jettyWidth);
|
|
var dy = mxUtils.getValue(this.style, 'jettyHeight', this.jettyHeight);
|
|
var x0 = dx / 2;
|
|
var x1 = x0 + dx / 2;
|
|
var y0 = 0.3 * h - dy / 2;
|
|
var y1 = 0.7 * h - dy / 2;
|
|
|
|
if (isForeground)
|
|
{
|
|
path.moveTo(x0, y0);
|
|
path.lineTo(x1, y0);
|
|
path.lineTo(x1, y0 + dy);
|
|
path.lineTo(x0, y0 + dy);
|
|
path.moveTo(x0, y1);
|
|
path.lineTo(x1, y1);
|
|
path.lineTo(x1, y1 + dy);
|
|
path.lineTo(x0, y1 + dy);
|
|
path.end();
|
|
}
|
|
else
|
|
{
|
|
path.moveTo(x0, 0);
|
|
path.lineTo(w, 0);
|
|
path.lineTo(w, h);
|
|
path.lineTo(x0, h);
|
|
path.lineTo(x0, y1 + dy);
|
|
path.lineTo(0, y1 + dy);
|
|
path.lineTo(0, y1);
|
|
path.lineTo(x0, y1);
|
|
path.lineTo(x0, y0 + dy);
|
|
path.lineTo(0, y0 + dy);
|
|
path.lineTo(0, y0);
|
|
path.lineTo(x0, y0);
|
|
path.close();
|
|
path.end();
|
|
}
|
|
};
|
|
|
|
mxCellRenderer.prototype.defaultShapes['component'] = ComponentShape;
|
|
|
|
// State Shapes derives from double ellipse
|
|
function StateShape()
|
|
{
|
|
mxDoubleEllipse.call(this);
|
|
};
|
|
mxUtils.extend(StateShape, mxDoubleEllipse);
|
|
StateShape.prototype.outerStroke = true;
|
|
StateShape.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
var inset = Math.min(4, Math.min(w / 5, h / 5));
|
|
|
|
if (w > 0 && h > 0)
|
|
{
|
|
c.ellipse(x + inset, y + inset, w - 2 * inset, h - 2 * inset);
|
|
c.fillAndStroke();
|
|
}
|
|
|
|
c.setShadow(false);
|
|
|
|
if (this.outerStroke)
|
|
{
|
|
c.ellipse(x, y, w, h);
|
|
c.stroke();
|
|
}
|
|
};
|
|
|
|
mxCellRenderer.prototype.defaultShapes['endState'] = StateShape;
|
|
|
|
function StartStateShape()
|
|
{
|
|
StateShape.call(this);
|
|
};
|
|
mxUtils.extend(StartStateShape, StateShape);
|
|
StartStateShape.prototype.outerStroke = false;
|
|
|
|
mxCellRenderer.prototype.defaultShapes['startState'] = StartStateShape;
|
|
|
|
// Defines custom edge shape
|
|
function LinkShape()
|
|
{
|
|
mxArrow.call(this);
|
|
};
|
|
mxUtils.extend(LinkShape, mxArrow);
|
|
LinkShape.prototype.paintEdgeShape = function(c, pts)
|
|
{
|
|
var width = 10;
|
|
|
|
// Base vector (between end points)
|
|
var p0 = pts[0];
|
|
var pe = pts[pts.length - 1];
|
|
|
|
var dx = pe.x - p0.x;
|
|
var dy = pe.y - p0.y;
|
|
var dist = Math.sqrt(dx * dx + dy * dy);
|
|
var length = dist;
|
|
|
|
// Computes the norm and the inverse norm
|
|
var nx = dx / dist;
|
|
var ny = dy / dist;
|
|
var basex = length * nx;
|
|
var basey = length * ny;
|
|
var floorx = width * ny/3;
|
|
var floory = -width * nx/3;
|
|
|
|
// Computes points
|
|
var p0x = p0.x - floorx / 2;
|
|
var p0y = p0.y - floory / 2;
|
|
var p1x = p0x + floorx;
|
|
var p1y = p0y + floory;
|
|
var p2x = p1x + basex;
|
|
var p2y = p1y + basey;
|
|
var p3x = p2x + floorx;
|
|
var p3y = p2y + floory;
|
|
// p4 not necessary
|
|
var p5x = p3x - 3 * floorx;
|
|
var p5y = p3y - 3 * floory;
|
|
|
|
c.begin();
|
|
c.moveTo(p1x, p1y);
|
|
c.lineTo(p2x, p2y);
|
|
c.moveTo(p5x + floorx, p5y + floory);
|
|
c.lineTo(p0x, p0y);
|
|
c.stroke();
|
|
};
|
|
|
|
// Registers the link shape
|
|
mxCellRenderer.prototype.defaultShapes['link'] = LinkShape;
|
|
|
|
// Manual Input shape
|
|
function ManualInputShape()
|
|
{
|
|
mxActor.call(this);
|
|
};
|
|
mxUtils.extend(ManualInputShape, mxActor);
|
|
ManualInputShape.prototype.size = 30;
|
|
ManualInputShape.prototype.redrawPath = function(c, x, y, w, h)
|
|
{
|
|
var s = Math.min(h, mxUtils.getValue(this.style, 'size', this.size));
|
|
c.moveTo(0, h);
|
|
c.lineTo(0, s);
|
|
c.lineTo(w, 0);
|
|
c.lineTo(w, h);
|
|
c.close();
|
|
c.end();
|
|
};
|
|
|
|
mxCellRenderer.prototype.defaultShapes['manualInput'] = ManualInputShape;
|
|
|
|
// Internal storage
|
|
function InternalStorageShape()
|
|
{
|
|
mxRectangleShape.call(this);
|
|
};
|
|
mxUtils.extend(InternalStorageShape, mxRectangleShape);
|
|
InternalStorageShape.prototype.dx = 20;
|
|
InternalStorageShape.prototype.dy = 20;
|
|
InternalStorageShape.prototype.isHtmlAllowed = function()
|
|
{
|
|
return false;
|
|
};
|
|
InternalStorageShape.prototype.paintForeground = function(c, x, y, w, h)
|
|
{
|
|
mxRectangleShape.prototype.paintForeground.apply(this, arguments);
|
|
var inset = 0;
|
|
|
|
if (this.isRounded)
|
|
{
|
|
var f = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE,
|
|
mxConstants.RECTANGLE_ROUNDING_FACTOR * 100) / 100;
|
|
inset = Math.max(inset, Math.min(w * f, h * f));
|
|
}
|
|
|
|
var dx = Math.max(inset, Math.min(w, mxUtils.getValue(this.style, 'dx', this.dx)));
|
|
var dy = Math.max(inset, Math.min(h, mxUtils.getValue(this.style, 'dy', this.dy)));
|
|
|
|
c.begin();
|
|
c.moveTo(x, y + dy);
|
|
c.lineTo(x + w, y + dy);
|
|
c.end();
|
|
c.stroke();
|
|
|
|
c.begin();
|
|
c.moveTo(x + dx, y);
|
|
c.lineTo(x + dx, y + h);
|
|
c.end();
|
|
c.stroke();
|
|
};
|
|
|
|
mxCellRenderer.prototype.defaultShapes['internalStorage'] = InternalStorageShape;
|
|
|
|
// Arrow
|
|
function SingleArrowShape()
|
|
{
|
|
mxActor.call(this);
|
|
};
|
|
mxUtils.extend(SingleArrowShape, mxActor);
|
|
SingleArrowShape.prototype.arrowWidth = 0.3;
|
|
SingleArrowShape.prototype.arrowSize = 0.2;
|
|
SingleArrowShape.prototype.redrawPath = function(c, x, y, w, h)
|
|
{
|
|
var aw = Math.max(0, Math.min(h, mxUtils.getValue(this.style, 'arrowWidth', this.arrowWidth) * h));
|
|
var as = Math.max(0, Math.min(w, mxUtils.getValue(this.style, 'arrowSize', this.arrowSize) * w));
|
|
var at = (h - aw) / 2;
|
|
var ab = at + aw;
|
|
|
|
c.moveTo(0, at);
|
|
c.lineTo(w - as, at);
|
|
c.lineTo(w - as, 0);
|
|
c.lineTo(w, h / 2);
|
|
c.lineTo(w - as, h);
|
|
c.lineTo(w - as, ab);
|
|
c.lineTo(0, ab);
|
|
c.close();
|
|
c.end();
|
|
};
|
|
|
|
mxCellRenderer.prototype.defaultShapes['singleArrow'] = SingleArrowShape;
|
|
|
|
// Arrow
|
|
function DoubleArrowShape()
|
|
{
|
|
mxActor.call(this);
|
|
};
|
|
mxUtils.extend(DoubleArrowShape, mxActor);
|
|
DoubleArrowShape.prototype.redrawPath = function(c, x, y, w, h)
|
|
{
|
|
var aw = Math.max(0, Math.min(h, mxUtils.getValue(this.style, 'arrowWidth', SingleArrowShape.prototype.arrowWidth) * h));
|
|
var as = Math.max(0, Math.min(w / 2, mxUtils.getValue(this.style, 'arrowSize', SingleArrowShape.prototype.arrowSize) * w));
|
|
var at = (h - aw) / 2;
|
|
var ab = at + aw;
|
|
|
|
c.moveTo(0, h / 2);
|
|
c.lineTo(as, 0);
|
|
c.lineTo(as, at);
|
|
c.lineTo(w - as, at);
|
|
c.lineTo(w - as, 0);
|
|
c.lineTo(w, h / 2);
|
|
c.lineTo(w - as, h);
|
|
c.lineTo(w - as, ab);
|
|
c.lineTo(as, ab);
|
|
c.lineTo(as, h);
|
|
c.close();
|
|
c.end();
|
|
};
|
|
|
|
mxCellRenderer.prototype.defaultShapes['doubleArrow'] = DoubleArrowShape;
|
|
|
|
// Data storage
|
|
function DataStorageShape()
|
|
{
|
|
mxActor.call(this);
|
|
};
|
|
mxUtils.extend(DataStorageShape, mxActor);
|
|
DataStorageShape.prototype.size = 0.1;
|
|
DataStorageShape.prototype.redrawPath = function(c, x, y, w, h)
|
|
{
|
|
var s = Math.min(w, mxUtils.getValue(this.style, 'size', this.size) * w);
|
|
|
|
c.moveTo(s, 0);
|
|
c.lineTo(w, 0);
|
|
c.quadTo(w - s * 2, h / 2, w, h);
|
|
c.lineTo(s, h);
|
|
c.quadTo(s - s * 2, h / 2, s, 0);
|
|
c.close();
|
|
c.end();
|
|
};
|
|
|
|
mxCellRenderer.prototype.defaultShapes['dataStorage'] = DataStorageShape;
|
|
|
|
// Or
|
|
function OrShape()
|
|
{
|
|
mxActor.call(this);
|
|
};
|
|
mxUtils.extend(OrShape, mxActor);
|
|
OrShape.prototype.redrawPath = function(c, x, y, w, h)
|
|
{
|
|
c.moveTo(0, 0);
|
|
c.quadTo(w, 0, w, h / 2);
|
|
c.quadTo(w, h, 0, h);
|
|
c.close();
|
|
c.end();
|
|
};
|
|
|
|
mxCellRenderer.prototype.defaultShapes['or'] = OrShape;
|
|
|
|
// Xor
|
|
function XorShape()
|
|
{
|
|
mxActor.call(this);
|
|
};
|
|
mxUtils.extend(XorShape, mxActor);
|
|
XorShape.prototype.redrawPath = function(c, x, y, w, h)
|
|
{
|
|
c.moveTo(0, 0);
|
|
c.quadTo(w, 0, w, h / 2);
|
|
c.quadTo(w, h, 0, h);
|
|
c.quadTo(w / 2, h / 2, 0, 0);
|
|
c.close();
|
|
c.end();
|
|
};
|
|
|
|
mxCellRenderer.prototype.defaultShapes['xor'] = XorShape;
|
|
|
|
// Loop limit
|
|
function LoopLimitShape()
|
|
{
|
|
mxActor.call(this);
|
|
};
|
|
mxUtils.extend(LoopLimitShape, mxActor);
|
|
LoopLimitShape.prototype.size = 20;
|
|
LoopLimitShape.prototype.redrawPath = function(c, x, y, w, h)
|
|
{
|
|
var s = Math.min(w / 2, Math.min(h, mxUtils.getValue(this.style, 'size', this.size)));
|
|
|
|
c.moveTo(s, 0);
|
|
c.lineTo(w - s, 0);
|
|
c.lineTo(w, s * 0.8);
|
|
c.lineTo(w, h);
|
|
c.lineTo(0, h);
|
|
c.lineTo(0, s * 0.8);
|
|
c.close();
|
|
c.end();
|
|
};
|
|
|
|
mxCellRenderer.prototype.defaultShapes['loopLimit'] = LoopLimitShape;
|
|
|
|
// Off page connector
|
|
function OffPageConnectorShape()
|
|
{
|
|
mxActor.call(this);
|
|
};
|
|
mxUtils.extend(OffPageConnectorShape, mxActor);
|
|
OffPageConnectorShape.prototype.size = 3 / 8;
|
|
OffPageConnectorShape.prototype.redrawPath = function(c, x, y, w, h)
|
|
{
|
|
var s = Math.min(h, mxUtils.getValue(this.style, 'size', this.size) * h);
|
|
|
|
c.moveTo(0, 0);
|
|
c.lineTo(w, 0);
|
|
c.lineTo(w, h - s);
|
|
c.lineTo(w / 2, h);
|
|
c.lineTo(0, h - s);
|
|
c.close();
|
|
c.end();
|
|
};
|
|
|
|
mxCellRenderer.prototype.defaultShapes['offPageConnector'] = OffPageConnectorShape;
|
|
|
|
// Internal storage
|
|
function TapeDataShape()
|
|
{
|
|
mxEllipse.call(this);
|
|
};
|
|
mxUtils.extend(TapeDataShape, mxEllipse);
|
|
TapeDataShape.prototype.paintVertexShape = function(c, x, y, w, h)
|
|
{
|
|
mxEllipse.prototype.paintVertexShape.apply(this, arguments);
|
|
|
|
c.begin();
|
|
c.moveTo(x + w / 2, y + h);
|
|
c.lineTo(x + w, y + h);
|
|
c.end();
|
|
c.stroke();
|
|
};
|
|
|
|
mxCellRenderer.prototype.defaultShapes['tapeData'] = TapeDataShape;
|
|
|
|
// Delay
|
|
function DelayShape()
|
|
{
|
|
mxActor.call(this);
|
|
};
|
|
mxUtils.extend(DelayShape, mxActor);
|
|
DelayShape.prototype.redrawPath = function(c, x, y, w, h)
|
|
{
|
|
var dx = Math.min(w, h / 2);
|
|
c.moveTo(0, 0);
|
|
c.lineTo(w - dx, 0);
|
|
c.quadTo(w, 0, w, h / 2);
|
|
c.quadTo(w, h, w - dx, h);
|
|
c.lineTo(0, h);
|
|
c.close();
|
|
c.end();
|
|
};
|
|
|
|
mxCellRenderer.prototype.defaultShapes['delay'] = DelayShape;
|
|
|
|
// Cross Shape
|
|
function CrossShape()
|
|
{
|
|
mxActor.call(this);
|
|
};
|
|
mxUtils.extend(CrossShape, mxActor);
|
|
CrossShape.prototype.size = 0.2;
|
|
CrossShape.prototype.redrawPath = function(c, x, y, w, h)
|
|
{
|
|
var size = Math.min(h, w) * mxUtils.getValue(this.style, 'size', this.size);
|
|
var t = (h - size) / 2;
|
|
var b = t + size;
|
|
var l = (w - size) / 2;
|
|
var r = l + size;
|
|
|
|
c.moveTo(0, t);
|
|
c.lineTo(l, t);
|
|
c.lineTo(l, 0);
|
|
c.lineTo(r, 0);
|
|
c.lineTo(r, t);
|
|
c.lineTo(w, t);
|
|
c.lineTo(w, b);
|
|
c.lineTo(r, b);
|
|
c.lineTo(r, h);
|
|
c.lineTo(l, h);
|
|
c.lineTo(l, b);
|
|
c.lineTo(0, b);
|
|
c.close();
|
|
c.end();
|
|
};
|
|
|
|
mxCellRenderer.prototype.defaultShapes['cross'] = CrossShape;
|
|
|
|
// Display
|
|
function DisplayShape()
|
|
{
|
|
mxActor.call(this);
|
|
};
|
|
mxUtils.extend(DisplayShape, mxActor);
|
|
DisplayShape.prototype.size = 0.25;
|
|
DisplayShape.prototype.redrawPath = function(c, x, y, w, h)
|
|
{
|
|
var dx = Math.min(w, h / 2);
|
|
var s = Math.min(w - dx, Math.max(0, mxUtils.getValue(this.style, 'size', this.size)) * w);
|
|
|
|
c.moveTo(0, h / 2);
|
|
c.lineTo(s, 0);
|
|
c.lineTo(w - dx, 0);
|
|
c.quadTo(w, 0, w, h / 2);
|
|
c.quadTo(w, h, w - dx, h);
|
|
c.lineTo(s, h);
|
|
c.close();
|
|
c.end();
|
|
};
|
|
|
|
mxCellRenderer.prototype.defaultShapes['display'] = DisplayShape;
|
|
|
|
// Registers and defines the custom marker
|
|
mxMarker.addMarker('dash', function(canvas, shape, type, pe, unitX, unitY, size, source, sw, filled)
|
|
{
|
|
var nx = unitX * (size + sw + 1);
|
|
var ny = unitY * (size + sw + 1);
|
|
|
|
return function()
|
|
{
|
|
canvas.begin();
|
|
canvas.moveTo(pe.x - nx / 2 - ny / 2, pe.y - ny / 2 + nx / 2);
|
|
canvas.lineTo(pe.x + ny / 2 - 3 * nx / 2, pe.y - 3 * ny / 2 - nx / 2);
|
|
canvas.stroke();
|
|
};
|
|
});
|
|
|
|
// Implements custom handlers
|
|
var SPECIAL_HANDLE_INDEX = -99;
|
|
|
|
// Handlers are only added if mxVertexHandler is defined (ie. not in embedded graph)
|
|
if (typeof(mxVertexHandler) != 'undefined')
|
|
{
|
|
function mxExtVertexHandler(state)
|
|
{
|
|
mxVertexHandler.call(this, state);
|
|
};
|
|
|
|
mxUtils.extend(mxExtVertexHandler, mxVertexHandler);
|
|
|
|
mxExtVertexHandler.prototype.useGridForSpecialHandle = false;
|
|
|
|
// Installs custom image
|
|
mxExtVertexHandler.prototype.specialHandleImage = mxVertexHandler.prototype.secondaryHandleImage;
|
|
|
|
mxExtVertexHandler.prototype.init = function()
|
|
{
|
|
this.horizontal = mxUtils.getValue(this.state.style, mxConstants.STYLE_HORIZONTAL, true);
|
|
var graph = this.state.view.graph;
|
|
|
|
var size = 10;
|
|
var bounds = new mxRectangle(0, 0, size, size);
|
|
|
|
if (this.handleImage != null)
|
|
{
|
|
bounds = new mxRectangle(0, 0, this.specialHandleImage.width, this.specialHandleImage.height);
|
|
this.specialHandle = new mxImageShape(bounds, this.specialHandleImage.src);
|
|
this.specialHandle.preserveImageAspect = false;
|
|
}
|
|
|
|
if (this.state.text != null && this.state.text.node.parentNode == graph.container)
|
|
{
|
|
if (this.specialHandle == null)
|
|
{
|
|
this.specialHandle = new mxRectangleShape(bounds, mxConstants.HANDLE_FILLCOLOR, mxConstants.HANDLE_STROKECOLOR);
|
|
this.specialHandle.bounds.height -= 4;
|
|
this.specialHandle.bounds.width -= 4;
|
|
}
|
|
|
|
this.specialHandle.dialect = mxConstants.DIALECT_STRICTHTML;
|
|
this.specialHandle.init(graph.container);
|
|
}
|
|
else
|
|
{
|
|
if (this.specialHandle == null)
|
|
{
|
|
this.specialHandle = new mxRhombus(bounds, mxConstants.HANDLE_FILLCOLOR, mxConstants.HANDLE_STROKECOLOR);
|
|
}
|
|
|
|
this.specialHandle.dialect = (graph.dialect != mxConstants.DIALECT_SVG) ?
|
|
mxConstants.DIALECT_MIXEDHTML : mxConstants.DIALECT_SVG;
|
|
this.specialHandle.init(graph.getView().getOverlayPane());
|
|
}
|
|
|
|
mxEvent.redirectMouseEvents(this.specialHandle.node, graph, this.state);
|
|
this.specialHandle.node.style.cursor = this.getSpecialHandleCursor();
|
|
|
|
// Locked state is implemented via rotatable flag
|
|
if (!graph.isCellRotatable(this.state.cell) || !graph.isEnabled())
|
|
{
|
|
this.specialHandle.node.style.display = 'none';
|
|
}
|
|
|
|
mxVertexHandler.prototype.init.apply(this, arguments);
|
|
};
|
|
|
|
mxExtVertexHandler.prototype.getSpecialHandleCursor = function()
|
|
{
|
|
return 'default';
|
|
};
|
|
|
|
mxExtVertexHandler.prototype.hideSizers = function()
|
|
{
|
|
mxVertexHandler.prototype.hideSizers.apply(this, arguments);
|
|
|
|
this.specialHandle.node.style.display = 'none';
|
|
};
|
|
|
|
mxExtVertexHandler.prototype.start = function(x, y, index)
|
|
{
|
|
mxVertexHandler.prototype.start.apply(this, arguments);
|
|
|
|
if (this.livePreview && index == SPECIAL_HANDLE_INDEX)
|
|
{
|
|
this.specialHandle.node.style.display = '';
|
|
}
|
|
};
|
|
|
|
mxExtVertexHandler.prototype.reset = function()
|
|
{
|
|
mxVertexHandler.prototype.reset.apply(this, arguments);
|
|
|
|
if (this.specialHandle != null)
|
|
{
|
|
this.specialHandle.node.style.display = '';
|
|
}
|
|
};
|
|
|
|
mxExtVertexHandler.prototype.redrawHandles = function()
|
|
{
|
|
mxVertexHandler.prototype.redrawHandles.apply(this, arguments);
|
|
|
|
if (this.state.shape != null && this.specialHandle != null)
|
|
{
|
|
var size = this.specialHandle.bounds.width;
|
|
this.specialHandle.bounds = this.getSpecialHandleBounds(size);
|
|
this.specialHandle.redraw();
|
|
|
|
// Hides special handle if shape too small
|
|
if (this.state.width < 2 * this.specialHandle.bounds.width && this.state.height < 2 * this.specialHandle.bounds.height)
|
|
{
|
|
this.specialHandle.node.style.visibility = 'hidden';
|
|
}
|
|
}
|
|
};
|
|
|
|
mxExtVertexHandler.prototype.destroy = function()
|
|
{
|
|
mxVertexHandler.prototype.destroy.apply(this, arguments);
|
|
|
|
if (this.specialHandle != null)
|
|
{
|
|
this.specialHandle.destroy();
|
|
this.specialHandle = null;
|
|
}
|
|
};
|
|
|
|
mxExtVertexHandler.prototype.getHandleForEvent = function(me)
|
|
{
|
|
// Connection highlight may consume events before they reach sizer handle
|
|
var tol = (!mxEvent.isMouseEvent(me.getEvent())) ? this.tolerance : 0;
|
|
var hit = (this.allowHandleBoundsCheck && (mxClient.IS_IE || tol > 0)) ?
|
|
new mxRectangle(me.getGraphX() - tol, me.getGraphY() - tol, 2 * tol, 2 * tol) : null;
|
|
|
|
function checkShape(shape)
|
|
{
|
|
if (shape != null && (me.isSource(shape) || (hit != null && mxUtils.intersects(shape.bounds, hit) &&
|
|
shape.node.style.display != 'none' && shape.node.style.visibility != 'hidden')))
|
|
{
|
|
var dx = me.getGraphX() - shape.bounds.getCenterX();
|
|
var dy = me.getGraphY() - shape.bounds.getCenterY();
|
|
var tmp = dx * dx + dy * dy;
|
|
|
|
if (minDistSq == null || tmp <= minDistSq)
|
|
{
|
|
minDistSq = tmp;
|
|
|
|
return true;
|
|
}
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
if ((me.isSource(this.specialHandle) || (hit != null &&
|
|
mxUtils.intersects(this.specialHandle.bounds, hit))) &&
|
|
this.specialHandle.node.style.display != 'none' &&
|
|
this.specialHandle.node.style.visibility != 'hidden')
|
|
{
|
|
return SPECIAL_HANDLE_INDEX;
|
|
}
|
|
|
|
return mxVertexHandler.prototype.getHandleForEvent.apply(this, arguments);
|
|
};
|
|
|
|
mxExtVertexHandler.prototype.mouseMove = function(sender, me)
|
|
{
|
|
if (!me.isConsumed() && this.index == SPECIAL_HANDLE_INDEX)
|
|
{
|
|
// Checks tolerance for ignoring single clicks
|
|
this.checkTolerance(me);
|
|
|
|
if (!this.inTolerance)
|
|
{
|
|
var gridEnabled = this.graph.isGridEnabledEvent(me.getEvent());
|
|
var point = new mxPoint(me.getGraphX(), me.getGraphY());
|
|
var scale = this.graph.getView().scale;
|
|
|
|
this.constrainPoint(point);
|
|
|
|
if (gridEnabled && this.useGridForSpecialHandle)
|
|
{
|
|
point.x = this.graph.snap(point.x / scale) * scale;
|
|
point.y = this.graph.snap(point.y / scale) * scale;
|
|
}
|
|
|
|
this.updateStyle(point);
|
|
this.state.view.graph.cellRenderer.redraw(this.state, true);
|
|
|
|
this.moveSizerTo(this.specialHandle, point.x, point.y);
|
|
me.consume();
|
|
}
|
|
}
|
|
else
|
|
{
|
|
mxVertexHandler.prototype.mouseMove.apply(this, arguments);
|
|
}
|
|
};
|
|
|
|
mxExtVertexHandler.prototype.mouseUp = function(sender, me)
|
|
{
|
|
if (!me.isConsumed() && !this.inTolerance && this.index == SPECIAL_HANDLE_INDEX)
|
|
{
|
|
this.applyStyle();
|
|
this.reset();
|
|
me.consume();
|
|
}
|
|
else
|
|
{
|
|
mxVertexHandler.prototype.mouseUp.apply(this, arguments);
|
|
}
|
|
};
|
|
|
|
mxExtVertexHandler.prototype.getRotation = function()
|
|
{
|
|
return this.state.shape.getShapeRotation();
|
|
};
|
|
|
|
mxExtVertexHandler.prototype.getSpecialHandleBounds = function(size)
|
|
{
|
|
var rotation = this.getRotation();
|
|
var alpha = mxUtils.toRadians(rotation);
|
|
var cos = Math.cos(alpha);
|
|
var sin = Math.sin(alpha);
|
|
|
|
var bounds = new mxRectangle(this.state.x, this.state.y, this.state.width, this.state.height);
|
|
|
|
if (this.state.shape.isPaintBoundsInverted())
|
|
{
|
|
var t = (bounds.width - bounds.height) / 2;
|
|
bounds.x += t;
|
|
bounds.y -= t;
|
|
var tmp = bounds.width;
|
|
bounds.width = bounds.height;
|
|
bounds.height = tmp;
|
|
}
|
|
|
|
var pt = this.getSpecialHandlePoint(bounds);
|
|
|
|
if (this.state.shape.flipH)
|
|
{
|
|
pt.x = 2 * bounds.x + bounds.width - pt.x;
|
|
}
|
|
|
|
if (this.state.shape.flipV)
|
|
{
|
|
pt.y = 2 * bounds.y + bounds.height - pt.y;
|
|
}
|
|
|
|
pt = mxUtils.getRotatedPoint(pt, cos, sin,
|
|
new mxPoint(this.state.getCenterX(), this.state.getCenterY()));
|
|
|
|
return new mxRectangle(pt.x - size / 2, pt.y - size / 2, size, size);
|
|
};
|
|
|
|
mxExtVertexHandler.prototype.getSpecialHandlePoint = function(bounds)
|
|
{
|
|
// Hook for subclassers
|
|
return null;
|
|
};
|
|
|
|
mxExtVertexHandler.prototype.updateStyle = function(point)
|
|
{
|
|
// Hook for subclassers
|
|
};
|
|
|
|
mxExtVertexHandler.prototype.constrainPoint = function(point)
|
|
{
|
|
point.x = Math.max(this.state.x, Math.min(this.state.x + this.state.width, point.x));
|
|
point.y = Math.max(this.state.y, Math.min(this.state.y + this.state.height, point.y));
|
|
};
|
|
|
|
mxExtVertexHandler.prototype.applyStyle = function()
|
|
{
|
|
// Hook for subclassers
|
|
};
|
|
|
|
// Folder Handler
|
|
function mxFolderHandler(state)
|
|
{
|
|
mxExtVertexHandler.call(this, state);
|
|
};
|
|
|
|
mxUtils.extend(mxFolderHandler, mxExtVertexHandler);
|
|
|
|
mxFolderHandler.prototype.getSpecialHandlePoint = function(bounds)
|
|
{
|
|
var scale = this.graph.getView().scale;
|
|
var tw = Math.min(bounds.width, mxUtils.getValue(this.state.style, 'tabWidth', 60) * scale);
|
|
var th = Math.min(bounds.height, mxUtils.getValue(this.state.style, 'tabHeight', 20) * scale);
|
|
|
|
var tp = mxUtils.getValue(this.state.style, 'tabPosition', 'right');
|
|
var x = (tp == 'left') ? bounds.x + tw : bounds.x + bounds.width - tw;
|
|
|
|
return new mxPoint(x, bounds.y + th);
|
|
};
|
|
|
|
mxFolderHandler.prototype.updateStyle = function(point)
|
|
{
|
|
var rotation = this.getRotation();
|
|
var alpha = mxUtils.toRadians(rotation);
|
|
var cos = Math.cos(-alpha);
|
|
var sin = Math.sin(-alpha);
|
|
|
|
var bounds = new mxRectangle(this.state.x, this.state.y, this.state.width, this.state.height);
|
|
|
|
if (this.state.shape.isPaintBoundsInverted())
|
|
{
|
|
var t = (bounds.width - bounds.height) / 2;
|
|
bounds.x += t;
|
|
bounds.y -= t;
|
|
var tmp = bounds.width;
|
|
bounds.width = bounds.height;
|
|
bounds.height = tmp;
|
|
}
|
|
|
|
var pt = new mxPoint(point.x, point.y);
|
|
pt = mxUtils.getRotatedPoint(pt, cos, sin,
|
|
new mxPoint(this.state.getCenterX(), this.state.getCenterY()));
|
|
|
|
if (this.state.shape.flipH)
|
|
{
|
|
pt.x = 2 * bounds.x + bounds.width - pt.x;
|
|
}
|
|
|
|
if (this.state.shape.flipV)
|
|
{
|
|
pt.y = 2 * bounds.y + bounds.height - pt.y;
|
|
}
|
|
|
|
var result = this.updateStyleUnrotated(pt, bounds);
|
|
|
|
// Modifies point to use rotated coordinates of return value
|
|
if (result != null)
|
|
{
|
|
if (this.state.shape.flipH)
|
|
{
|
|
result.x = 2 * bounds.x + bounds.width - result.x;
|
|
}
|
|
|
|
if (this.state.shape.flipV)
|
|
{
|
|
result.y = 2 * bounds.y + bounds.height - result.y;
|
|
}
|
|
|
|
cos = Math.cos(alpha);
|
|
sin = Math.sin(alpha);
|
|
result = mxUtils.getRotatedPoint(result, cos, sin,
|
|
new mxPoint(this.state.getCenterX(), this.state.getCenterY()));
|
|
point.x = result.x;
|
|
point.y = result.y;
|
|
}
|
|
};
|
|
|
|
mxFolderHandler.prototype.updateStyleUnrotated = function(pt, bounds)
|
|
{
|
|
var tp = mxUtils.getValue(this.state.style, 'tabPosition', 'right');
|
|
var tw = (tp == 'left') ? pt.x - bounds.x : bounds.x + bounds.width - pt.x;
|
|
var th = pt.y - bounds.y;
|
|
|
|
var scale = this.graph.getView().scale;
|
|
this.state.style['tabWidth'] = Math.round(Math.max(1, tw) / scale);
|
|
this.state.style['tabHeight'] = Math.round(Math.max(1, th) / scale);
|
|
};
|
|
|
|
mxFolderHandler.prototype.applyStyle = function()
|
|
{
|
|
var model = this.graph.getModel();
|
|
model.beginUpdate();
|
|
try
|
|
{
|
|
this.state.view.graph.setCellStyles('tabWidth', this.state.style['tabWidth'], [this.state.cell]);
|
|
this.state.view.graph.setCellStyles('tabHeight', this.state.style['tabHeight'], [this.state.cell]);
|
|
}
|
|
finally
|
|
{
|
|
model.endUpdate();
|
|
}
|
|
};
|
|
|
|
// Internal Storage Handler
|
|
function mxInternalStorageHandler(state)
|
|
{
|
|
mxFolderHandler.call(this, state);
|
|
};
|
|
|
|
mxUtils.extend(mxInternalStorageHandler, mxFolderHandler);
|
|
|
|
mxInternalStorageHandler.prototype.getSpecialHandlePoint = function(bounds)
|
|
{
|
|
var scale = this.graph.getView().scale;
|
|
var dx = Math.min(bounds.width, mxUtils.getValue(this.state.style, 'dx', 20) * scale);
|
|
var dy = Math.min(bounds.height, mxUtils.getValue(this.state.style, 'dy', 20) * scale);
|
|
|
|
if (mxUtils.getValue(this.state.style, mxConstants.STYLE_ROUNDED, null) == '1')
|
|
{
|
|
var f = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE,
|
|
mxConstants.RECTANGLE_ROUNDING_FACTOR * 100) / 100;
|
|
var inset = Math.max(0, Math.min(bounds.width * f, bounds.height * f));
|
|
dx = Math.min(bounds.width - inset, Math.max(dx, inset));
|
|
dy = Math.min(bounds.height - inset, Math.max(dy, inset));
|
|
}
|
|
|
|
return new mxPoint(bounds.x + dx, bounds.y + dy);
|
|
};
|
|
|
|
mxInternalStorageHandler.prototype.updateStyleUnrotated = function(point, bounds)
|
|
{
|
|
var scale = this.graph.getView().scale;
|
|
var dx = Math.round(Math.max(0, point.x - bounds.x) / scale);
|
|
var dy = Math.round(Math.max(0, point.y - bounds.y) / scale);
|
|
|
|
if (mxUtils.getValue(this.state.style, mxConstants.STYLE_ROUNDED, null) == '1')
|
|
{
|
|
var f = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE,
|
|
mxConstants.RECTANGLE_ROUNDING_FACTOR * 100) / 100;
|
|
var inset = Math.max(0, Math.min(bounds.width * f, bounds.height * f));
|
|
dx = Math.min(bounds.width - inset, Math.max(dx, inset));
|
|
dy = Math.min(bounds.height - inset, Math.max(dy, inset));
|
|
}
|
|
|
|
this.state.style['dx'] = dx;
|
|
this.state.style['dy'] = dy;
|
|
|
|
return new mxPoint(bounds.x + dx * scale, bounds.y + dy * scale);
|
|
};
|
|
|
|
mxInternalStorageHandler.prototype.applyStyle = function()
|
|
{
|
|
this.state.view.graph.setCellStyles('dx', this.state.style['dx'], [this.state.cell]);
|
|
this.state.view.graph.setCellStyles('dy', this.state.style['dy'], [this.state.cell]);
|
|
};
|
|
|
|
// Arrow Handler
|
|
function mxArrowHandler(state)
|
|
{
|
|
mxFolderHandler.call(this, state);
|
|
};
|
|
|
|
mxUtils.extend(mxArrowHandler, mxFolderHandler);
|
|
|
|
mxArrowHandler.prototype.getSpecialHandlePoint = function(bounds)
|
|
{
|
|
var aw = Math.min(bounds.height, mxUtils.getValue(this.state.style, 'arrowWidth', SingleArrowShape.prototype.arrowWidth) * bounds.height);
|
|
var as = Math.min(bounds.width, mxUtils.getValue(this.state.style, 'arrowSize', SingleArrowShape.prototype.arrowSize) * bounds.width);
|
|
|
|
return new mxPoint(bounds.x + bounds.width - as, bounds.y + (bounds.height - aw) / 2);
|
|
};
|
|
|
|
mxArrowHandler.prototype.updateStyleUnrotated = function(point, bounds)
|
|
{
|
|
var aw = (Math.abs(bounds.y + bounds.height / 2 - point.y) / bounds.height) * 2;
|
|
var as = (bounds.x + bounds.width - point.x) / bounds.width;
|
|
|
|
this.state.style['arrowWidth'] = aw;
|
|
this.state.style['arrowSize'] = as;
|
|
|
|
return new mxPoint(bounds.x + bounds.width * (1 - as), bounds.y + (bounds.height - aw * bounds.height) / 2);
|
|
};
|
|
|
|
mxArrowHandler.prototype.applyStyle = function()
|
|
{
|
|
this.state.view.graph.setCellStyles('arrowWidth', this.state.style['arrowWidth'], [this.state.cell]);
|
|
this.state.view.graph.setCellStyles('arrowSize', this.state.style['arrowSize'], [this.state.cell]);
|
|
};
|
|
|
|
// Arrow Handler
|
|
function mxCrossHandler(state)
|
|
{
|
|
mxFolderHandler.call(this, state);
|
|
};
|
|
|
|
mxUtils.extend(mxCrossHandler, mxFolderHandler);
|
|
|
|
mxCrossHandler.prototype.getSpecialHandlePoint = function(bounds)
|
|
{
|
|
var m = Math.min(bounds.width, bounds.height);
|
|
var size = mxUtils.getValue(this.state.style, 'size', CrossShape.prototype.size) * m;
|
|
|
|
return new mxPoint(bounds.x + (bounds.width - size) / 2, bounds.y + (bounds.height - size) / 2);
|
|
};
|
|
|
|
mxCrossHandler.prototype.updateStyleUnrotated = function(point, bounds)
|
|
{
|
|
var m = Math.min(bounds.width, bounds.height);
|
|
var size = Math.min((Math.abs(bounds.y + bounds.height / 2 - point.y) / m) * 2,
|
|
(Math.abs(bounds.x + bounds.width / 2 - point.x) / m) * 2);
|
|
|
|
this.state.style['size'] = size;
|
|
|
|
return new mxPoint(bounds.x + (bounds.width - size * m) / 2, bounds.y + (bounds.height - size * m) / 2);
|
|
};
|
|
|
|
mxCrossHandler.prototype.applyStyle = function()
|
|
{
|
|
this.state.view.graph.setCellStyles('size', this.state.style['size'], [this.state.cell]);
|
|
};
|
|
|
|
// Swimlane Handler
|
|
function mxSwimlaneHandler(state)
|
|
{
|
|
mxFolderHandler.call(this, state);
|
|
};
|
|
|
|
mxUtils.extend(mxSwimlaneHandler, mxFolderHandler);
|
|
|
|
mxSwimlaneHandler.prototype.getSpecialHandlePoint = function(bounds)
|
|
{
|
|
var scale = this.graph.getView().scale;
|
|
var startSize = mxUtils.getValue(this.state.style, mxConstants.STYLE_STARTSIZE, mxConstants.DEFAULT_STARTSIZE);
|
|
|
|
if (mxUtils.getValue(this.state.style, mxConstants.STYLE_HORIZONTAL, true))
|
|
{
|
|
return new mxPoint(bounds.x + bounds.width / 2, bounds.y + Math.min(bounds.height, startSize * scale));
|
|
}
|
|
else
|
|
{
|
|
return new mxPoint(bounds.x + Math.min(bounds.width, startSize * scale), bounds.y + bounds.height / 2);
|
|
}
|
|
};
|
|
|
|
mxSwimlaneHandler.prototype.updateStyleUnrotated = function(point, bounds)
|
|
{
|
|
var startSize = 0;
|
|
|
|
if (mxUtils.getValue(this.state.style, mxConstants.STYLE_HORIZONTAL, true))
|
|
{
|
|
point.x = bounds.x + bounds.width / 2;
|
|
startSize = point.y - bounds.y;
|
|
}
|
|
else
|
|
{
|
|
point.y = bounds.y + bounds.height / 2;
|
|
startSize = point.x - bounds.x;
|
|
}
|
|
|
|
var scale = this.graph.getView().scale;
|
|
this.state.style['startSize'] = Math.round(Math.max(1, startSize) / scale);
|
|
|
|
return point;
|
|
};
|
|
|
|
mxSwimlaneHandler.prototype.applyStyle = function()
|
|
{
|
|
this.state.view.graph.setCellStyles('startSize', this.state.style['startSize'], [this.state.cell]);
|
|
};
|
|
|
|
// Cube Handler
|
|
function mxCubeHandler(state)
|
|
{
|
|
mxFolderHandler.call(this, state);
|
|
};
|
|
|
|
mxUtils.extend(mxCubeHandler, mxFolderHandler);
|
|
|
|
mxCubeHandler.prototype.defaultValue = 20;
|
|
|
|
mxCubeHandler.prototype.scaleFactor = 1;
|
|
|
|
mxCubeHandler.prototype.getSpecialHandlePoint = function(bounds)
|
|
{
|
|
var scale = this.graph.getView().scale;
|
|
var sz = Math.min(bounds.width, Math.min(bounds.height,
|
|
mxUtils.getValue(this.state.style, 'size', this.defaultValue) * scale / this.scaleFactor));
|
|
|
|
return new mxPoint(bounds.x + sz, bounds.y + sz);
|
|
};
|
|
|
|
mxCubeHandler.prototype.updateStyleUnrotated = function(pt, bounds)
|
|
{
|
|
var size = Math.max(0, Math.min(Math.min(bounds.width / this.scaleFactor, pt.x - bounds.x),
|
|
Math.min(bounds.height / this.scaleFactor, pt.y - bounds.y)));
|
|
var scale = this.graph.getView().scale;
|
|
this.state.style['size'] = Math.round(Math.max(1, size) / scale) * this.scaleFactor;
|
|
|
|
// Stays on the diagonal
|
|
return new mxPoint(bounds.x + size, bounds.y + size);
|
|
};
|
|
|
|
mxCubeHandler.prototype.applyStyle = function()
|
|
{
|
|
this.state.view.graph.setCellStyles('size', this.state.style['size'], [this.state.cell]);
|
|
};
|
|
|
|
// Loop Limit Handler
|
|
function mxLoopLimitHandler(state)
|
|
{
|
|
mxCubeHandler.call(this, state);
|
|
};
|
|
|
|
mxUtils.extend(mxLoopLimitHandler, mxCubeHandler);
|
|
|
|
mxLoopLimitHandler.prototype.defaultValue = 20;
|
|
|
|
mxLoopLimitHandler.prototype.scaleFactor = 2;
|
|
|
|
// Card Handler
|
|
function mxCardHandler(state)
|
|
{
|
|
mxCubeHandler.call(this, state);
|
|
};
|
|
|
|
mxUtils.extend(mxCardHandler, mxCubeHandler);
|
|
|
|
mxCardHandler.prototype.defaultValue = 30;
|
|
|
|
mxCardHandler.prototype.scaleFactor = 2;
|
|
|
|
// Manual Input Handler
|
|
function mxManualInputHandler(state)
|
|
{
|
|
mxCubeHandler.call(this, state);
|
|
};
|
|
|
|
mxUtils.extend(mxManualInputHandler, mxCubeHandler);
|
|
|
|
mxManualInputHandler.prototype.defaultValue = 30;
|
|
|
|
mxManualInputHandler.prototype.scaleFactor = 2;
|
|
|
|
mxManualInputHandler.prototype.getSpecialHandlePoint = function(bounds)
|
|
{
|
|
var scale = this.graph.getView().scale;
|
|
var size = Math.min(bounds.height, mxUtils.getValue(this.state.style, 'size', this.defaultValue) * scale / this.scaleFactor);
|
|
|
|
return new mxPoint(bounds.x + bounds.width / 4, bounds.y + size * 3 / 2);
|
|
};
|
|
|
|
mxManualInputHandler.prototype.updateStyleUnrotated = function(pt, bounds)
|
|
{
|
|
var size = Math.max(0, Math.min(bounds.height, (pt.y - bounds.y) * (2 * this.scaleFactor) / 3));
|
|
var scale = this.graph.getView().scale;
|
|
this.state.style['size'] = Math.round(size / scale);
|
|
|
|
// Stays on the diagonal
|
|
return new mxPoint(bounds.x + bounds.width / 4, bounds.y + size * 3 / (2 * this.scaleFactor));
|
|
};
|
|
|
|
// Note Handler
|
|
function mxNoteHandler(state)
|
|
{
|
|
mxCubeHandler.call(this, state);
|
|
};
|
|
|
|
mxUtils.extend(mxNoteHandler, mxCubeHandler);
|
|
|
|
mxNoteHandler.prototype.defaultValue = 30;
|
|
|
|
mxNoteHandler.prototype.scaleFactor = 1;
|
|
|
|
mxNoteHandler.prototype.getSpecialHandlePoint = function(bounds)
|
|
{
|
|
var scale = this.graph.getView().scale;
|
|
var sz = Math.min(bounds.width, Math.min(bounds.height,
|
|
mxUtils.getValue(this.state.style, 'size', this.defaultValue) * scale / this.scaleFactor));
|
|
|
|
return new mxPoint(bounds.x + bounds.width - sz, bounds.y + sz);
|
|
};
|
|
|
|
mxNoteHandler.prototype.updateStyleUnrotated = function(pt, bounds)
|
|
{
|
|
var size = Math.max(0, Math.min(Math.min(bounds.width / this.scaleFactor, pt.x - bounds.x + bounds.width),
|
|
Math.min(bounds.height / this.scaleFactor, pt.y - bounds.y)));
|
|
var scale = this.graph.getView().scale;
|
|
this.state.style['size'] = Math.round(Math.max(1, size) / scale) * this.scaleFactor;
|
|
|
|
// Stays on the diagonal
|
|
return new mxPoint(bounds.x + bounds.width - size, bounds.y + size);
|
|
};
|
|
|
|
// Step Handler
|
|
function mxStepHandler(state)
|
|
{
|
|
mxCubeHandler.call(this, state);
|
|
};
|
|
|
|
mxUtils.extend(mxStepHandler, mxCubeHandler);
|
|
|
|
mxStepHandler.prototype.defaultValue = 0.2;
|
|
|
|
mxStepHandler.prototype.scaleFactor = 1;
|
|
|
|
mxStepHandler.prototype.getSpecialHandlePoint = function(bounds)
|
|
{
|
|
var sz = mxUtils.getValue(this.state.style, 'size', this.defaultValue);
|
|
|
|
return new mxPoint(bounds.x + bounds.width * sz, bounds.y + bounds.height / 2);
|
|
};
|
|
|
|
mxStepHandler.prototype.updateStyleUnrotated = function(pt, bounds)
|
|
{
|
|
//var scale = this.graph.getView().scale;
|
|
var size = Math.min(1, (pt.x - bounds.x) / bounds.width);
|
|
this.state.style['size'] = size;
|
|
|
|
return new mxPoint(bounds.x + size * bounds.width, bounds.y + bounds.height / 2);
|
|
};
|
|
|
|
// Display Handler
|
|
function mxDisplayHandler(state)
|
|
{
|
|
mxCubeHandler.call(this, state);
|
|
};
|
|
|
|
mxUtils.extend(mxDisplayHandler, mxCubeHandler);
|
|
|
|
mxDisplayHandler.prototype.defaultValue = 0.25;
|
|
|
|
mxDisplayHandler.prototype.scaleFactor = 1;
|
|
|
|
mxDisplayHandler.prototype.getSpecialHandlePoint = function(bounds)
|
|
{
|
|
var size = Math.max(0, Math.min(bounds.width, mxUtils.getValue(this.state.style, 'size', this.defaultValue) * bounds.width));
|
|
|
|
return new mxPoint(bounds.x + size, bounds.y + bounds.height / 2);
|
|
};
|
|
|
|
mxDisplayHandler.prototype.updateStyleUnrotated = function(pt, bounds)
|
|
{
|
|
var size = Math.max(0, Math.min(bounds.width, (pt.x - bounds.x) / bounds.width));
|
|
this.state.style['size'] = size;
|
|
|
|
return new mxPoint(bounds.x + size * bounds.width, bounds.y + bounds.height / 2);
|
|
};
|
|
|
|
// Data Storage Handler
|
|
function mxDataStorageHandler(state)
|
|
{
|
|
mxCubeHandler.call(this, state);
|
|
};
|
|
|
|
mxUtils.extend(mxDataStorageHandler, mxCubeHandler);
|
|
|
|
mxDataStorageHandler.prototype.defaultValue = 0.1;
|
|
|
|
mxDataStorageHandler.prototype.scaleFactor = 1;
|
|
|
|
mxDataStorageHandler.prototype.getSpecialHandlePoint = function(bounds)
|
|
{
|
|
var size = Math.max(0, Math.min(bounds.width, mxUtils.getValue(this.state.style, 'size', this.defaultValue) * bounds.width));
|
|
|
|
return new mxPoint(bounds.x + bounds.width - size, bounds.y + bounds.height / 2);
|
|
};
|
|
|
|
mxDataStorageHandler.prototype.updateStyleUnrotated = function(pt, bounds)
|
|
{
|
|
var size = Math.max(0, Math.min(bounds.width, (bounds.x + bounds.width - pt.x) / bounds.width));
|
|
this.state.style['size'] = size;
|
|
|
|
return new mxPoint(bounds.x + bounds.width * (1 - size), bounds.y + bounds.height / 2);
|
|
};
|
|
|
|
// OffPage Handler
|
|
function mxOffPageHandler(state)
|
|
{
|
|
mxCubeHandler.call(this, state);
|
|
};
|
|
|
|
mxUtils.extend(mxOffPageHandler, mxCubeHandler);
|
|
|
|
mxOffPageHandler.prototype.defaultValue = 3 / 8;
|
|
|
|
mxOffPageHandler.prototype.scaleFactor = 1;
|
|
|
|
mxOffPageHandler.prototype.getSpecialHandlePoint = function(bounds)
|
|
{
|
|
var size = Math.max(0, Math.min(bounds.height, mxUtils.getValue(this.state.style, 'size', this.defaultValue) * bounds.height));
|
|
|
|
return new mxPoint(bounds.x + bounds.width / 2, bounds.y + bounds.height - size);
|
|
};
|
|
|
|
mxOffPageHandler.prototype.updateStyleUnrotated = function(pt, bounds)
|
|
{
|
|
var size = Math.max(0, Math.min(bounds.height, (bounds.y + bounds.height - pt.y) / bounds.height));
|
|
this.state.style['size'] = size;
|
|
|
|
return new mxPoint(bounds.x + bounds.width / 2, bounds.y + bounds.height * (1 - size));
|
|
};
|
|
|
|
// Tape Handler
|
|
function mxTapeHandler(state)
|
|
{
|
|
mxCubeHandler.call(this, state);
|
|
};
|
|
|
|
mxUtils.extend(mxTapeHandler, mxCubeHandler);
|
|
|
|
mxTapeHandler.prototype.defaultValue = 0.4;
|
|
|
|
mxTapeHandler.prototype.scaleFactor = 1;
|
|
|
|
mxTapeHandler.prototype.getSpecialHandlePoint = function(bounds)
|
|
{
|
|
var sz = mxUtils.getValue(this.state.style, 'size', this.defaultValue);
|
|
|
|
return new mxPoint(bounds.x + bounds.width / 2, bounds.y + sz * bounds.height / 2);
|
|
};
|
|
|
|
mxTapeHandler.prototype.updateStyleUnrotated = function(pt, bounds)
|
|
{
|
|
var size = Math.max(0, Math.min(1, ((pt.y - bounds.y) / bounds.height) * 2));
|
|
this.state.style['size'] = size;
|
|
|
|
return new mxPoint(bounds.x + bounds.width / 2, bounds.y + size * bounds.height / 2);
|
|
};
|
|
|
|
// Process Handler
|
|
function mxProcessHandler(state)
|
|
{
|
|
mxCubeHandler.call(this, state);
|
|
};
|
|
|
|
mxUtils.extend(mxProcessHandler, mxCubeHandler);
|
|
|
|
mxProcessHandler.prototype.defaultValue = 0.1;
|
|
|
|
mxProcessHandler.prototype.scaleFactor = 1;
|
|
|
|
mxProcessHandler.prototype.getSpecialHandlePoint = function(bounds)
|
|
{
|
|
var sz = mxUtils.getValue(this.state.style, 'size', this.defaultValue);
|
|
|
|
return new mxPoint(bounds.x + sz * bounds.width, bounds.y + bounds.height / 4);
|
|
};
|
|
|
|
mxProcessHandler.prototype.updateStyleUnrotated = function(pt, bounds)
|
|
{
|
|
var size = Math.max(0, Math.min(1, (pt.x - bounds.x) / bounds.width));
|
|
this.state.style['size'] = size;
|
|
|
|
return new mxPoint(bounds.x + size * bounds.width, bounds.y + bounds.height / 4);
|
|
};
|
|
|
|
// Lifeline Handler
|
|
function mxLifelineHandler(state)
|
|
{
|
|
mxCubeHandler.call(this, state);
|
|
};
|
|
|
|
mxUtils.extend(mxLifelineHandler, mxCubeHandler);
|
|
|
|
mxLifelineHandler.prototype.defaultValue = UmlLifeline.prototype.size;
|
|
|
|
mxLifelineHandler.prototype.getSpecialHandlePoint = function(bounds)
|
|
{
|
|
var scale = this.graph.getView().scale;
|
|
var sz = mxUtils.getValue(this.state.style, 'size', this.defaultValue) * scale;
|
|
|
|
return new mxPoint(bounds.x + bounds.width / 2, Math.max(bounds.y,
|
|
Math.min(bounds.y + bounds.height, bounds.y + sz)));
|
|
};
|
|
|
|
mxLifelineHandler.prototype.updateStyleUnrotated = function(pt, bounds)
|
|
{
|
|
var scale = this.graph.getView().scale;
|
|
var size = Math.max(0, Math.min(bounds.height, pt.y - bounds.y));
|
|
this.state.style['size'] = size / scale;
|
|
|
|
return new mxPoint(bounds.x + bounds.width / 2, bounds.y + size);
|
|
};
|
|
|
|
// Trapezoid Handler
|
|
function mxTrapezoidHandler(state)
|
|
{
|
|
mxCubeHandler.call(this, state);
|
|
};
|
|
|
|
mxUtils.extend(mxTrapezoidHandler, mxCubeHandler);
|
|
|
|
mxTrapezoidHandler.prototype.defaultValue = 0.2;
|
|
|
|
mxTrapezoidHandler.prototype.scaleFactor = 1;
|
|
|
|
mxTrapezoidHandler.prototype.maxSize = 0.5;
|
|
|
|
mxTrapezoidHandler.prototype.getSpecialHandlePoint = function(bounds)
|
|
{
|
|
var size = mxUtils.getValue(this.state.style, 'size', this.defaultValue);
|
|
|
|
return new mxPoint(bounds.x + size * bounds.width * 0.75, bounds.y + bounds.height / 4);
|
|
};
|
|
|
|
mxTrapezoidHandler.prototype.updateStyleUnrotated = function(pt, bounds)
|
|
{
|
|
var size = Math.max(0, Math.min(this.maxSize, (pt.x - bounds.x) / (bounds.width * 0.75)));
|
|
this.state.style['size'] = size;
|
|
|
|
return new mxPoint(bounds.x + size * bounds.width * 0.75, bounds.y + bounds.height / 4);
|
|
};
|
|
|
|
// Parallelogram Handler
|
|
function mxParallelogramHandler(state)
|
|
{
|
|
mxTrapezoidHandler.call(this, state);
|
|
};
|
|
|
|
mxUtils.extend(mxParallelogramHandler, mxTrapezoidHandler);
|
|
|
|
mxParallelogramHandler.prototype.maxSize = 1;
|
|
|
|
// Document Handler
|
|
function mxDocumentHandler(state)
|
|
{
|
|
mxCubeHandler.call(this, state);
|
|
};
|
|
|
|
mxUtils.extend(mxDocumentHandler, mxCubeHandler);
|
|
|
|
mxDocumentHandler.prototype.defaultValue = 0.3;
|
|
|
|
mxDocumentHandler.prototype.fy = 1.4;
|
|
|
|
mxDocumentHandler.prototype.scaleFactor = 1;
|
|
|
|
mxDocumentHandler.prototype.getSpecialHandlePoint = function(bounds)
|
|
{
|
|
var dy = mxUtils.getValue(this.state.style, 'size', this.defaultValue) * bounds.height;
|
|
|
|
return new mxPoint(bounds.x + 3 * bounds.width / 4, bounds.y + bounds.height - dy);
|
|
};
|
|
|
|
mxDocumentHandler.prototype.updateStyleUnrotated = function(pt, bounds)
|
|
{
|
|
var size = Math.max(0, Math.min(1, (bounds.y + bounds.height - pt.y) / bounds.height));
|
|
this.state.style['size'] = size;
|
|
|
|
return new mxPoint(bounds.x + 3 * bounds.width / 4, bounds.y + bounds.height - size * bounds.height);
|
|
};
|
|
|
|
var handlers = {'swimlane': mxSwimlaneHandler, 'folder': mxFolderHandler, 'cube': mxCubeHandler,
|
|
'card': mxCardHandler, 'note': mxNoteHandler, 'step': mxStepHandler, 'tape': mxTapeHandler,
|
|
'process': mxProcessHandler, 'document': mxDocumentHandler, 'trapezoid': mxTrapezoidHandler,
|
|
'manualInput': mxManualInputHandler, 'parallelogram': mxParallelogramHandler,
|
|
'internalStorage': mxInternalStorageHandler, 'loopLimit': mxLoopLimitHandler,
|
|
'dataStorage': mxDataStorageHandler, 'umlLifeline': mxLifelineHandler,
|
|
'offPageConnector': mxOffPageHandler, 'display': mxDisplayHandler,
|
|
'singleArrow': mxArrowHandler, 'doubleArrow': mxArrowHandler,
|
|
'cross': mxCrossHandler};
|
|
|
|
var mxGraphCreateHandler = mxGraph.prototype.createHandler;
|
|
mxGraph.prototype.createHandler = function(state)
|
|
{
|
|
if (state != null)
|
|
{
|
|
var ctor = handlers[state.style['shape']];
|
|
|
|
if (ctor != null)
|
|
{
|
|
return new ctor(state);
|
|
}
|
|
}
|
|
|
|
return mxGraphCreateHandler.apply(this, arguments);
|
|
};
|
|
}
|
|
|
|
mxRectangleShape.prototype.constraints = [new mxConnectionConstraint(new mxPoint(0.25, 0), true),
|
|
new mxConnectionConstraint(new mxPoint(0.5, 0), true),
|
|
new mxConnectionConstraint(new mxPoint(0.75, 0), true),
|
|
new mxConnectionConstraint(new mxPoint(0, 0.25), true),
|
|
new mxConnectionConstraint(new mxPoint(0, 0.5), true),
|
|
new mxConnectionConstraint(new mxPoint(0, 0.75), true),
|
|
new mxConnectionConstraint(new mxPoint(1, 0.25), true),
|
|
new mxConnectionConstraint(new mxPoint(1, 0.5), true),
|
|
new mxConnectionConstraint(new mxPoint(1, 0.75), true),
|
|
new mxConnectionConstraint(new mxPoint(0.25, 1), true),
|
|
new mxConnectionConstraint(new mxPoint(0.5, 1), true),
|
|
new mxConnectionConstraint(new mxPoint(0.75, 1), true)];
|
|
mxEllipse.prototype.constraints = [new mxConnectionConstraint(new mxPoint(0, 0), true), new mxConnectionConstraint(new mxPoint(1, 0), true),
|
|
new mxConnectionConstraint(new mxPoint(0, 1), true), new mxConnectionConstraint(new mxPoint(1, 1), true),
|
|
new mxConnectionConstraint(new mxPoint(0.5, 0), true), new mxConnectionConstraint(new mxPoint(0.5, 1), true),
|
|
new mxConnectionConstraint(new mxPoint(0, 0.5), true), new mxConnectionConstraint(new mxPoint(1, 0.5))];
|
|
mxLabel.prototype.constraints = mxRectangleShape.prototype.constraints;
|
|
mxImageShape.prototype.constraints = mxRectangleShape.prototype.constraints;
|
|
mxSwimlane.prototype.constraints = mxRectangleShape.prototype.constraints;
|
|
PlusShape.prototype.constraints = mxRectangleShape.prototype.constraints;
|
|
NoteShape.prototype.constraints = mxRectangleShape.prototype.constraints;
|
|
CardShape.prototype.constraints = mxRectangleShape.prototype.constraints;
|
|
CubeShape.prototype.constraints = mxRectangleShape.prototype.constraints;
|
|
FolderShape.prototype.constraints = mxRectangleShape.prototype.constraints;
|
|
InternalStorageShape.prototype.constraints = mxRectangleShape.prototype.constraints;
|
|
DataStorageShape.prototype.constraints = mxRectangleShape.prototype.constraints;
|
|
TapeDataShape.prototype.constraints = mxEllipse.prototype.constraints;
|
|
ManualInputShape.prototype.constraints = mxRectangleShape.prototype.constraints;
|
|
DelayShape.prototype.constraints = mxRectangleShape.prototype.constraints;
|
|
DisplayShape.prototype.constraints = mxRectangleShape.prototype.constraints;
|
|
LoopLimitShape.prototype.constraints = mxRectangleShape.prototype.constraints;
|
|
OffPageConnectorShape.prototype.constraints = mxRectangleShape.prototype.constraints;
|
|
mxCylinder.prototype.constraints = [new mxConnectionConstraint(new mxPoint(0.15, 0.05), false),
|
|
new mxConnectionConstraint(new mxPoint(0.5, 0), true),
|
|
new mxConnectionConstraint(new mxPoint(0.85, 0.05), false),
|
|
new mxConnectionConstraint(new mxPoint(0, 0.3), true),
|
|
new mxConnectionConstraint(new mxPoint(0, 0.5), true),
|
|
new mxConnectionConstraint(new mxPoint(0, 0.7), true),
|
|
new mxConnectionConstraint(new mxPoint(1, 0.3), true),
|
|
new mxConnectionConstraint(new mxPoint(1, 0.5), true),
|
|
new mxConnectionConstraint(new mxPoint(1, 0.7), true),
|
|
new mxConnectionConstraint(new mxPoint(0.15, 0.95), false),
|
|
new mxConnectionConstraint(new mxPoint(0.5, 1), true),
|
|
new mxConnectionConstraint(new mxPoint(0.85, 0.95), false)];
|
|
UmlActorShape.prototype.constraints = [new mxConnectionConstraint(new mxPoint(0.25, 0.1), false),
|
|
new mxConnectionConstraint(new mxPoint(0.5, 0), false),
|
|
new mxConnectionConstraint(new mxPoint(0.75, 0.1), false),
|
|
new mxConnectionConstraint(new mxPoint(0, 1/3), false),
|
|
new mxConnectionConstraint(new mxPoint(0, 1), false),
|
|
new mxConnectionConstraint(new mxPoint(1, 1/3), false),
|
|
new mxConnectionConstraint(new mxPoint(1, 1), false),
|
|
new mxConnectionConstraint(new mxPoint(0.5, 0.5), false)];
|
|
ComponentShape.prototype.constraints = [new mxConnectionConstraint(new mxPoint(0.25, 0), true),
|
|
new mxConnectionConstraint(new mxPoint(0.5, 0), true),
|
|
new mxConnectionConstraint(new mxPoint(0.75, 0), true),
|
|
new mxConnectionConstraint(new mxPoint(0, 0.3), true),
|
|
new mxConnectionConstraint(new mxPoint(0, 0.7), true),
|
|
new mxConnectionConstraint(new mxPoint(1, 0.25), true),
|
|
new mxConnectionConstraint(new mxPoint(1, 0.5), true),
|
|
new mxConnectionConstraint(new mxPoint(1, 0.75), true),
|
|
new mxConnectionConstraint(new mxPoint(0.25, 1), true),
|
|
new mxConnectionConstraint(new mxPoint(0.5, 1), true),
|
|
new mxConnectionConstraint(new mxPoint(0.75, 1), true)];
|
|
mxActor.prototype.constraints = [new mxConnectionConstraint(new mxPoint(0.5, 0), true),
|
|
new mxConnectionConstraint(new mxPoint(0.25, 0.2), false),
|
|
new mxConnectionConstraint(new mxPoint(0.1, 0.5), false),
|
|
new mxConnectionConstraint(new mxPoint(0, 0.75), true),
|
|
new mxConnectionConstraint(new mxPoint(0.75, 0.25), false),
|
|
new mxConnectionConstraint(new mxPoint(0.9, 0.5), false),
|
|
new mxConnectionConstraint(new mxPoint(1, 0.75), true),
|
|
new mxConnectionConstraint(new mxPoint(0.25, 1), true),
|
|
new mxConnectionConstraint(new mxPoint(0.5, 1), true),
|
|
new mxConnectionConstraint(new mxPoint(0.75, 1), true)];
|
|
TapeShape.prototype.constraints = [new mxConnectionConstraint(new mxPoint(0, 0.35), false),
|
|
new mxConnectionConstraint(new mxPoint(0, 0.5), false),
|
|
new mxConnectionConstraint(new mxPoint(0, 0.65), false),
|
|
new mxConnectionConstraint(new mxPoint(1, 0.35), false),
|
|
new mxConnectionConstraint(new mxPoint(1, 0.5), false),
|
|
new mxConnectionConstraint(new mxPoint(1, 0.65), false),
|
|
new mxConnectionConstraint(new mxPoint(0.25, 1), false),
|
|
new mxConnectionConstraint(new mxPoint(0.75, 0), false)];
|
|
// TODO: Relative ports
|
|
StepShape.prototype.constraints = [new mxConnectionConstraint(new mxPoint(0.25, 0), true),
|
|
new mxConnectionConstraint(new mxPoint(0.5, 0), true),
|
|
new mxConnectionConstraint(new mxPoint(0.75, 0), true),
|
|
new mxConnectionConstraint(new mxPoint(0.25, 1), true),
|
|
new mxConnectionConstraint(new mxPoint(0.5, 1), true),
|
|
new mxConnectionConstraint(new mxPoint(0.75, 1), true),
|
|
new mxConnectionConstraint(new mxPoint(0.1, 0.25), false),
|
|
new mxConnectionConstraint(new mxPoint(0.2, 0.5), false),
|
|
new mxConnectionConstraint(new mxPoint(0.1, 0.75), false),
|
|
new mxConnectionConstraint(new mxPoint(0.9, 0.25), false),
|
|
new mxConnectionConstraint(new mxPoint(1, 0.5), false),
|
|
new mxConnectionConstraint(new mxPoint(0.9, 0.75), false)];
|
|
mxLine.prototype.constraints = [new mxConnectionConstraint(new mxPoint(0, 0.5), false),
|
|
new mxConnectionConstraint(new mxPoint(0.25, 0.5), false),
|
|
new mxConnectionConstraint(new mxPoint(0.75, 0.5), false),
|
|
new mxConnectionConstraint(new mxPoint(1, 0.5), false)];
|
|
LollipopShape.prototype.constraints = [new mxConnectionConstraint(new mxPoint(0.5, 0), false),
|
|
new mxConnectionConstraint(new mxPoint(0.5, 1), false)];
|
|
mxDoubleEllipse.prototype.constraints = mxEllipse.prototype.constraints;
|
|
mxRhombus.prototype.constraints = mxEllipse.prototype.constraints;
|
|
mxTriangle.prototype.constraints = [new mxConnectionConstraint(new mxPoint(0, 0.25), true),
|
|
new mxConnectionConstraint(new mxPoint(0, 0.5), true),
|
|
new mxConnectionConstraint(new mxPoint(0, 0.75), true),
|
|
new mxConnectionConstraint(new mxPoint(0.5, 0), true),
|
|
new mxConnectionConstraint(new mxPoint(0.5, 1), true),
|
|
new mxConnectionConstraint(new mxPoint(1, 0.5), true)];
|
|
mxHexagon.prototype.constraints = [new mxConnectionConstraint(new mxPoint(0.375, 0), true),
|
|
new mxConnectionConstraint(new mxPoint(0.5, 0), true),
|
|
new mxConnectionConstraint(new mxPoint(0.625, 0), true),
|
|
new mxConnectionConstraint(new mxPoint(0.125, 0.25), false),
|
|
new mxConnectionConstraint(new mxPoint(0, 0.5), true),
|
|
new mxConnectionConstraint(new mxPoint(0.125, 0.75), false),
|
|
new mxConnectionConstraint(new mxPoint(0.875, 0.25), false),
|
|
new mxConnectionConstraint(new mxPoint(0, 0.5), true),
|
|
new mxConnectionConstraint(new mxPoint(1, 0.5), true),
|
|
new mxConnectionConstraint(new mxPoint(0.875, 0.75), false),
|
|
new mxConnectionConstraint(new mxPoint(0.375, 1), true),
|
|
new mxConnectionConstraint(new mxPoint(0.5, 1), true),
|
|
new mxConnectionConstraint(new mxPoint(0.625, 1), true)];
|
|
mxCloud.prototype.constraints = [new mxConnectionConstraint(new mxPoint(0.25, 0.25), false),
|
|
new mxConnectionConstraint(new mxPoint(0.4, 0.1), false),
|
|
new mxConnectionConstraint(new mxPoint(0.16, 0.55), false),
|
|
new mxConnectionConstraint(new mxPoint(0.07, 0.4), false),
|
|
new mxConnectionConstraint(new mxPoint(0.31, 0.8), false),
|
|
new mxConnectionConstraint(new mxPoint(0.13, 0.77), false),
|
|
new mxConnectionConstraint(new mxPoint(0.8, 0.8), false),
|
|
new mxConnectionConstraint(new mxPoint(0.55, 0.95), false),
|
|
new mxConnectionConstraint(new mxPoint(0.875, 0.5), false),
|
|
new mxConnectionConstraint(new mxPoint(0.96, 0.7), false),
|
|
new mxConnectionConstraint(new mxPoint(0.625, 0.2), false),
|
|
new mxConnectionConstraint(new mxPoint(0.88, 0.25), false)];
|
|
ParallelogramShape.prototype.constraints = mxRectangleShape.prototype.constraints;
|
|
TrapezoidShape.prototype.constraints = mxRectangleShape.prototype.constraints;
|
|
DocumentShape.prototype.constraints = [new mxConnectionConstraint(new mxPoint(0.25, 0), true),
|
|
new mxConnectionConstraint(new mxPoint(0.5, 0), true),
|
|
new mxConnectionConstraint(new mxPoint(0.75, 0), true),
|
|
new mxConnectionConstraint(new mxPoint(0, 0.25), true),
|
|
new mxConnectionConstraint(new mxPoint(0, 0.5), true),
|
|
new mxConnectionConstraint(new mxPoint(0, 0.75), true),
|
|
new mxConnectionConstraint(new mxPoint(1, 0.25), true),
|
|
new mxConnectionConstraint(new mxPoint(1, 0.5), true),
|
|
new mxConnectionConstraint(new mxPoint(1, 0.75), true)];
|
|
mxArrow.prototype.constraints = null;
|
|
SingleArrowShape.prototype.constraints = [new mxConnectionConstraint(new mxPoint(0, 0.5), false),
|
|
new mxConnectionConstraint(new mxPoint(1, 0.5), false)];
|
|
DoubleArrowShape.prototype.constraints = [new mxConnectionConstraint(new mxPoint(0, 0.5), false),
|
|
new mxConnectionConstraint(new mxPoint(1, 0.5), false)];
|
|
CrossShape.prototype.constraints = [new mxConnectionConstraint(new mxPoint(0, 0.5), false),
|
|
new mxConnectionConstraint(new mxPoint(1, 0.5), false),
|
|
new mxConnectionConstraint(new mxPoint(0.5, 0), false),
|
|
new mxConnectionConstraint(new mxPoint(0.5, 1), false)];
|
|
UmlLifeline.prototype.constraints = null;
|
|
OrShape.prototype.constraints = [new mxConnectionConstraint(new mxPoint(0, 0.25), false),
|
|
new mxConnectionConstraint(new mxPoint(0, 0.5), false),
|
|
new mxConnectionConstraint(new mxPoint(0, 0.75), false),
|
|
new mxConnectionConstraint(new mxPoint(1, 0.5), false),
|
|
new mxConnectionConstraint(new mxPoint(0.7, 0.1), false),
|
|
new mxConnectionConstraint(new mxPoint(0.7, 0.9), false)];
|
|
XorShape.prototype.constraints = [new mxConnectionConstraint(new mxPoint(0.175, 0.25), false),
|
|
new mxConnectionConstraint(new mxPoint(0.25, 0.5), false),
|
|
new mxConnectionConstraint(new mxPoint(0.175, 0.75), false),
|
|
new mxConnectionConstraint(new mxPoint(1, 0.5), false),
|
|
new mxConnectionConstraint(new mxPoint(0.7, 0.1), false),
|
|
new mxConnectionConstraint(new mxPoint(0.7, 0.9), false)];
|
|
})();
|