|
|
@@ -12,6 +12,11 @@ Format = function(editorUi, container)
|
|
|
*/
|
|
|
Format.prototype.labelIndex = 0;
|
|
|
|
|
|
+/**
|
|
|
+ * Returns information about the current selection.
|
|
|
+ */
|
|
|
+Format.prototype.diagramIndex = 0;
|
|
|
+
|
|
|
/**
|
|
|
* Returns information about the current selection.
|
|
|
*/
|
|
|
@@ -369,17 +374,121 @@ Format.prototype.refresh = function()
|
|
|
{
|
|
|
evt.preventDefault();
|
|
|
}));
|
|
|
+
|
|
|
+ var containsLabel = this.getSelectionState().containsLabel;
|
|
|
+ var currentLabel = null;
|
|
|
+ var currentPanel = null;
|
|
|
+
|
|
|
+ var addClickHandler = mxUtils.bind(this, function(elt, panel, index)
|
|
|
+ {
|
|
|
+ var clickHandler = mxUtils.bind(this, function(evt)
|
|
|
+ {
|
|
|
+ if (currentLabel != elt)
|
|
|
+ {
|
|
|
+ if (containsLabel)
|
|
|
+ {
|
|
|
+ this.labelIndex = index;
|
|
|
+ }
|
|
|
+ else if (graph.isSelectionEmpty())
|
|
|
+ {
|
|
|
+ this.diagramIndex = index;
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ this.currentIndex = index;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (currentLabel != null)
|
|
|
+ {
|
|
|
+ currentLabel.style.backgroundColor = this.inactiveTabBackgroundColor;
|
|
|
+ currentLabel.style.borderBottomWidth = '1px';
|
|
|
+ }
|
|
|
+
|
|
|
+ currentLabel = elt;
|
|
|
+ currentLabel.style.backgroundColor = '';
|
|
|
+ currentLabel.style.borderBottomWidth = '0px';
|
|
|
+
|
|
|
+ if (currentPanel != panel)
|
|
|
+ {
|
|
|
+ if (currentPanel != null)
|
|
|
+ {
|
|
|
+ currentPanel.style.display = 'none';
|
|
|
+ }
|
|
|
+
|
|
|
+ currentPanel = panel;
|
|
|
+ currentPanel.style.display = '';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ mxEvent.addListener(elt, 'click', clickHandler);
|
|
|
+
|
|
|
+ // Prevents text selection
|
|
|
+ mxEvent.addListener(elt, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown',
|
|
|
+ mxUtils.bind(this, function(evt)
|
|
|
+ {
|
|
|
+ evt.preventDefault();
|
|
|
+ }));
|
|
|
+
|
|
|
+ if (index == ((containsLabel) ? this.labelIndex : ((graph.isSelectionEmpty()) ?
|
|
|
+ this.diagramIndex : this.currentIndex)))
|
|
|
+ {
|
|
|
+ // Invokes handler directly as a workaround for no click on DIV in KHTML.
|
|
|
+ clickHandler();
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
+ var idx = 0;
|
|
|
+
|
|
|
if (graph.isSelectionEmpty())
|
|
|
{
|
|
|
mxUtils.write(label, mxResources.get('diagram'));
|
|
|
label.style.borderLeftWidth = '0px';
|
|
|
+
|
|
|
+ div.appendChild(label);
|
|
|
+ var diagramPanel = div.cloneNode(false);
|
|
|
+ this.panels.push(new DiagramFormatPanel(this, ui, diagramPanel));
|
|
|
+ this.container.appendChild(diagramPanel);
|
|
|
+
|
|
|
+ if (Editor.styles != null)
|
|
|
+ {
|
|
|
+ diagramPanel.style.display = 'none';
|
|
|
+ label.style.width = '106px';
|
|
|
+ label.style.cursor = 'pointer';
|
|
|
+ label.style.backgroundColor = this.inactiveTabBackgroundColor;
|
|
|
+
|
|
|
+ var label2 = label.cloneNode(false);
|
|
|
+ label2.style.borderLeftWidth = '1px';
|
|
|
+ label2.style.borderRightWidth = '1px';
|
|
|
+ label2.style.backgroundColor = this.inactiveTabBackgroundColor;
|
|
|
+
|
|
|
+ addClickHandler(label, diagramPanel, idx++);
|
|
|
+
|
|
|
+ var stylePanel = div.cloneNode(false);
|
|
|
+ stylePanel.style.display = 'none';
|
|
|
+ mxUtils.write(label2, mxResources.get('style'));
|
|
|
+ div.appendChild(label2);
|
|
|
+ this.panels.push(new DiagramStylePanel(this, ui, stylePanel));
|
|
|
+ this.container.appendChild(stylePanel);
|
|
|
+
|
|
|
+ addClickHandler(label2, stylePanel, idx++);
|
|
|
+ }
|
|
|
|
|
|
// Adds button to hide the format panel since
|
|
|
// people don't seem to find the toolbar button
|
|
|
// and the menu item in the format menu
|
|
|
if (this.showCloseButton)
|
|
|
{
|
|
|
+ var label2 = label.cloneNode(false);
|
|
|
+ label2.style.borderLeftWidth = '1px';
|
|
|
+ label2.style.borderRightWidth = '1px';
|
|
|
+ label2.style.borderBottomWidth = '1px';
|
|
|
+ label2.style.backgroundColor = this.inactiveTabBackgroundColor;
|
|
|
+ label2.style.position = 'absolute';
|
|
|
+ label2.style.right = '0px';
|
|
|
+ label2.style.top = '0px';
|
|
|
+ label2.style.width = '25px';
|
|
|
+
|
|
|
var img = document.createElement('img');
|
|
|
img.setAttribute('border', '0');
|
|
|
img.setAttribute('src', Dialog.prototype.closeImage);
|
|
|
@@ -390,20 +499,20 @@ Format.prototype.refresh = function()
|
|
|
img.style.top = '8px';
|
|
|
img.style.cursor = 'pointer';
|
|
|
img.style.marginTop = '1px';
|
|
|
- img.style.marginRight = '17px';
|
|
|
+ img.style.marginRight = '6px';
|
|
|
img.style.border = '1px solid transparent';
|
|
|
img.style.padding = '1px';
|
|
|
img.style.opacity = 0.5;
|
|
|
- label.appendChild(img)
|
|
|
+ label2.appendChild(img)
|
|
|
|
|
|
mxEvent.addListener(img, 'click', function()
|
|
|
{
|
|
|
ui.actions.get('formatPanel').funct();
|
|
|
});
|
|
|
+
|
|
|
+ div.appendChild(label2);
|
|
|
}
|
|
|
|
|
|
- div.appendChild(label);
|
|
|
- this.panels.push(new DiagramFormatPanel(this, ui, div));
|
|
|
}
|
|
|
else if (graph.isEditing())
|
|
|
{
|
|
|
@@ -413,71 +522,10 @@ Format.prototype.refresh = function()
|
|
|
}
|
|
|
else
|
|
|
{
|
|
|
- var containsLabel = this.getSelectionState().containsLabel;
|
|
|
- var currentLabel = null;
|
|
|
- var currentPanel = null;
|
|
|
-
|
|
|
- var addClickHandler = mxUtils.bind(this, function(elt, panel, index)
|
|
|
- {
|
|
|
- var clickHandler = mxUtils.bind(this, function(evt)
|
|
|
- {
|
|
|
- if (currentLabel != elt)
|
|
|
- {
|
|
|
- if (containsLabel)
|
|
|
- {
|
|
|
- this.labelIndex = index;
|
|
|
- }
|
|
|
- else
|
|
|
- {
|
|
|
- this.currentIndex = index;
|
|
|
- }
|
|
|
-
|
|
|
- if (currentLabel != null)
|
|
|
- {
|
|
|
- currentLabel.style.backgroundColor = this.inactiveTabBackgroundColor;
|
|
|
- currentLabel.style.borderBottomWidth = '1px';
|
|
|
- }
|
|
|
-
|
|
|
- currentLabel = elt;
|
|
|
- currentLabel.style.backgroundColor = '';
|
|
|
- currentLabel.style.borderBottomWidth = '0px';
|
|
|
-
|
|
|
- if (currentPanel != panel)
|
|
|
- {
|
|
|
- if (currentPanel != null)
|
|
|
- {
|
|
|
- currentPanel.style.display = 'none';
|
|
|
- }
|
|
|
-
|
|
|
- currentPanel = panel;
|
|
|
- currentPanel.style.display = '';
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- mxEvent.addListener(elt, 'click', clickHandler);
|
|
|
-
|
|
|
- // Prevents text selection
|
|
|
- mxEvent.addListener(elt, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown',
|
|
|
- mxUtils.bind(this, function(evt)
|
|
|
- {
|
|
|
- evt.preventDefault();
|
|
|
- }));
|
|
|
-
|
|
|
- if (index == ((containsLabel) ? this.labelIndex : this.currentIndex))
|
|
|
- {
|
|
|
- // Invokes handler directly as a workaround for no click on DIV in KHTML.
|
|
|
- clickHandler();
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- var idx = 0;
|
|
|
-
|
|
|
label.style.backgroundColor = this.inactiveTabBackgroundColor;
|
|
|
label.style.borderLeftWidth = '1px';
|
|
|
label.style.cursor = 'pointer';
|
|
|
label.style.width = (containsLabel) ? '50%' : '33.3%';
|
|
|
- label.style.width = (containsLabel) ? '50%' : '33.3%';
|
|
|
var label2 = label.cloneNode(false);
|
|
|
var label3 = label2.cloneNode(false);
|
|
|
|
|
|
@@ -853,7 +901,7 @@ BaseFormatPanel.prototype.createStepper = function(input, update, step, height,
|
|
|
/**
|
|
|
* Adds the given option.
|
|
|
*/
|
|
|
-BaseFormatPanel.prototype.createOption = function(label, isCheckedFn, setCheckedFn, listener)
|
|
|
+BaseFormatPanel.prototype.createOption = function(label, isCheckedFn, setCheckedFn, listener, fn)
|
|
|
{
|
|
|
var div = document.createElement('div');
|
|
|
div.style.padding = '6px 0px 1px 0px';
|
|
|
@@ -931,6 +979,11 @@ BaseFormatPanel.prototype.createOption = function(label, isCheckedFn, setChecked
|
|
|
listener.install(apply);
|
|
|
this.listeners.push(listener);
|
|
|
}
|
|
|
+
|
|
|
+ if (fn != null)
|
|
|
+ {
|
|
|
+ fn(div);
|
|
|
+ }
|
|
|
|
|
|
return div;
|
|
|
};
|
|
|
@@ -5509,6 +5562,443 @@ StyleFormatPanel.prototype.addStyleOps = function(div)
|
|
|
return div;
|
|
|
};
|
|
|
|
|
|
+/**
|
|
|
+ * Adds the label menu items to the given menu and parent.
|
|
|
+ */
|
|
|
+DiagramStylePanel = function(format, editorUi, container)
|
|
|
+{
|
|
|
+ BaseFormatPanel.call(this, format, editorUi, container);
|
|
|
+ this.init();
|
|
|
+};
|
|
|
+
|
|
|
+mxUtils.extend(DiagramStylePanel, BaseFormatPanel);
|
|
|
+
|
|
|
+/**
|
|
|
+ * Adds the label menu items to the given menu and parent.
|
|
|
+ */
|
|
|
+DiagramStylePanel.prototype.init = function()
|
|
|
+{
|
|
|
+ var ui = this.editorUi;
|
|
|
+ var editor = ui.editor;
|
|
|
+ var graph = editor.graph;
|
|
|
+
|
|
|
+ this.container.appendChild(this.addView(this.createPanel()));
|
|
|
+};
|
|
|
+
|
|
|
+/**
|
|
|
+ * Adds the label menu items to the given menu and parent.
|
|
|
+ */
|
|
|
+DiagramStylePanel.prototype.addView = function(div)
|
|
|
+{
|
|
|
+ var ui = this.editorUi;
|
|
|
+ var editor = ui.editor;
|
|
|
+ var graph = editor.graph;
|
|
|
+ var model = graph.getModel();
|
|
|
+
|
|
|
+ div.style.whiteSpace = 'normal';
|
|
|
+
|
|
|
+ var cells = graph.getCells();
|
|
|
+ var rounded = true;
|
|
|
+ var sketch = true;
|
|
|
+ var curved = true;
|
|
|
+
|
|
|
+ for (var i = 0; i < cells.length; i++)
|
|
|
+ {
|
|
|
+ var style = graph.getCurrentCellStyle(cells[i]);
|
|
|
+
|
|
|
+ sketch = sketch && mxUtils.getValue(style, 'sketch', '0') == '1';
|
|
|
+ rounded = rounded && (!model.isVertex(cells[i]) || mxUtils.getValue(style, 'rounded', '0') == '1');
|
|
|
+ curved = curved && (!model.isEdge(cells[i]) || mxUtils.getValue(style, 'curved', '0') == '1');
|
|
|
+ }
|
|
|
+
|
|
|
+ var opts = document.createElement('div');
|
|
|
+ opts.style.paddingBottom = '12px';
|
|
|
+ opts.style.marginRight = '16px';
|
|
|
+
|
|
|
+
|
|
|
+ var table = document.createElement('table');
|
|
|
+
|
|
|
+ if (mxClient.IS_QUIRKS)
|
|
|
+ {
|
|
|
+ table.style.fontSize = '1em';
|
|
|
+ }
|
|
|
+
|
|
|
+ table.style.width = '100%';
|
|
|
+ table.style.fontWeight = 'bold';
|
|
|
+
|
|
|
+ var tbody = document.createElement('tbody');
|
|
|
+ var row = document.createElement('tr');
|
|
|
+ row.style.padding = '0px';
|
|
|
+
|
|
|
+ var left = document.createElement('td');
|
|
|
+ left.style.padding = '0px';
|
|
|
+ left.style.width = '50%';
|
|
|
+ left.setAttribute('valign', 'middle');
|
|
|
+
|
|
|
+ var right = left.cloneNode(true);
|
|
|
+ right.style.paddingLeft = '8px';
|
|
|
+ row.appendChild(left);
|
|
|
+ row.appendChild(right);
|
|
|
+ tbody.appendChild(row);
|
|
|
+ table.appendChild(tbody);
|
|
|
+
|
|
|
+ // Sketch
|
|
|
+ left.appendChild(this.createOption(mxResources.get('sketch'), function()
|
|
|
+ {
|
|
|
+ return sketch;
|
|
|
+ }, function(checked)
|
|
|
+ {
|
|
|
+ graph.updateCellStyles('sketch', (checked) ? '1' : null, graph.getCells());
|
|
|
+ sketch = checked;
|
|
|
+
|
|
|
+ if (checked)
|
|
|
+ {
|
|
|
+ graph.currentEdgeStyle['sketch'] = '1';
|
|
|
+ graph.currentVertexStyle['sketch'] = '1';
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ delete graph.currentEdgeStyle['sketch'];
|
|
|
+ delete graph.currentVertexStyle['sketch'];
|
|
|
+ }
|
|
|
+ }, null, function(div)
|
|
|
+ {
|
|
|
+ div.style.width = 'auto';
|
|
|
+ }));
|
|
|
+
|
|
|
+ // Rounded
|
|
|
+ right.appendChild(this.createOption(mxResources.get('rounded'), function()
|
|
|
+ {
|
|
|
+ return rounded;
|
|
|
+ }, function(checked)
|
|
|
+ {
|
|
|
+ graph.updateCellStyles('rounded', (checked) ? '1' : null, graph.getCells(true, false));
|
|
|
+ rounded = checked;
|
|
|
+
|
|
|
+ if (checked)
|
|
|
+ {
|
|
|
+ graph.currentVertexStyle['rounded'] = '1';
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ delete graph.currentVertexStyle['rounded'];
|
|
|
+ }
|
|
|
+ }, null, function(div)
|
|
|
+ {
|
|
|
+ div.style.width = 'auto';
|
|
|
+ }));
|
|
|
+
|
|
|
+ left = left.cloneNode(false);
|
|
|
+ right = left.cloneNode(false);
|
|
|
+ row = row.cloneNode(false);
|
|
|
+ row.appendChild(left);
|
|
|
+ row.appendChild(right);
|
|
|
+ tbody.appendChild(row);
|
|
|
+
|
|
|
+ // Curved
|
|
|
+ left.appendChild(this.createOption(mxResources.get('curved'), function()
|
|
|
+ {
|
|
|
+ return curved;
|
|
|
+ }, function(checked)
|
|
|
+ {
|
|
|
+ graph.updateCellStyles('curved', (checked) ? '1' : null, graph.getCells(false, true));
|
|
|
+ curved = checked;
|
|
|
+
|
|
|
+ if (checked)
|
|
|
+ {
|
|
|
+ graph.currentEdgeStyle['curved'] = '1';
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ delete graph.currentEdgeStyle['curved'];
|
|
|
+ }
|
|
|
+ }, null, function(div)
|
|
|
+ {
|
|
|
+ div.style.width = 'auto';
|
|
|
+ }));
|
|
|
+
|
|
|
+ opts.appendChild(table);
|
|
|
+ div.appendChild(opts);
|
|
|
+
|
|
|
+ var defaultStyles = ['fillColor', 'strokeColor', 'fontColor', 'gradientColor'];
|
|
|
+
|
|
|
+ var updateCells = mxUtils.bind(this, function(styles, graphStyle)
|
|
|
+ {
|
|
|
+ var cells = graph.getCells();
|
|
|
+
|
|
|
+ model.beginUpdate();
|
|
|
+ try
|
|
|
+ {
|
|
|
+ for (var i = 0; i < cells.length; i++)
|
|
|
+ {
|
|
|
+ var style = graph.getCellStyle(cells[i]);
|
|
|
+
|
|
|
+ // Handles special label background color
|
|
|
+ if (style['labelBackgroundColor'] != null)
|
|
|
+ {
|
|
|
+ graph.updateCellStyles('labelBackgroundColor', (graphStyle != null) ?
|
|
|
+ graphStyle.background : null, [cells[i]]);
|
|
|
+ }
|
|
|
+
|
|
|
+ var edge = model.isEdge(cells[i]);
|
|
|
+ var newStyle = model.getStyle(cells[i]);
|
|
|
+ var current = (edge) ? graph.currentEdgeStyle : graph.currentVertexStyle;
|
|
|
+
|
|
|
+ for (var j = 0; j < styles.length; j++)
|
|
|
+ {
|
|
|
+ if ((style[styles[j]] != null && style[styles[j]] != mxConstants.NONE) ||
|
|
|
+ (styles[j] != mxConstants.STYLE_FILLCOLOR &&
|
|
|
+ styles[j] != mxConstants.STYLE_STROKECOLOR))
|
|
|
+ {
|
|
|
+ newStyle = mxUtils.setStyle(newStyle, styles[j], current[styles[j]]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ model.setStyle(cells[i], newStyle);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ finally
|
|
|
+ {
|
|
|
+ model.endUpdate();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ var removeStyles = mxUtils.bind(this, function(style, styles, defaultStyle)
|
|
|
+ {
|
|
|
+ if (style != null)
|
|
|
+ {
|
|
|
+ for (var j = 0; j < styles.length; j++)
|
|
|
+ {
|
|
|
+ if (((style[styles[j]] != null &&
|
|
|
+ style[styles[j]] != mxConstants.NONE) ||
|
|
|
+ (styles[j] != mxConstants.STYLE_FILLCOLOR &&
|
|
|
+ styles[j] != mxConstants.STYLE_STROKECOLOR)))
|
|
|
+ {
|
|
|
+ style[styles[j]] = defaultStyle[styles[j]];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ var applyStyle = mxUtils.bind(this, function(style, result, cell, graphStyle, theGraph)
|
|
|
+ {
|
|
|
+ if (style != null)
|
|
|
+ {
|
|
|
+ if (cell != null)
|
|
|
+ {
|
|
|
+ // Handles special label background color
|
|
|
+ if (result['labelBackgroundColor'] != null)
|
|
|
+ {
|
|
|
+ var bg = (graphStyle != null) ? graphStyle.background : null;
|
|
|
+ theGraph = (theGraph != null) ? theGraph : graph;
|
|
|
+
|
|
|
+ if (bg == null)
|
|
|
+ {
|
|
|
+ bg = theGraph.background;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (bg == null)
|
|
|
+ {
|
|
|
+ bg = theGraph.defaultPageBackgroundColor;
|
|
|
+ }
|
|
|
+
|
|
|
+ result['labelBackgroundColor'] = bg;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ for (var key in style)
|
|
|
+ {
|
|
|
+ if (cell == null || ((result[key] != null &&
|
|
|
+ result[key] != mxConstants.NONE) ||
|
|
|
+ (key != mxConstants.STYLE_FILLCOLOR &&
|
|
|
+ key != mxConstants.STYLE_STROKECOLOR)))
|
|
|
+ {
|
|
|
+ result[key] = style[key];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ var createPreview = mxUtils.bind(this, function(commonStyle, vertexStyle, edgeStyle, graphStyle, container)
|
|
|
+ {
|
|
|
+ // Wrapper needed to catch events
|
|
|
+ var div = document.createElement('div');
|
|
|
+ div.style.cssText = 'position:absolute;display:inline-block;position:relative;width:100%;height:100%;overflow:hidden;pointer-events:none;';
|
|
|
+ container.appendChild(div);
|
|
|
+
|
|
|
+ var graph2 = new Graph(div, null, null, graph.getStylesheet());
|
|
|
+ graph2.resetViewOnRootChange = false;
|
|
|
+ graph2.foldingEnabled = false;
|
|
|
+ graph2.gridEnabled = false;
|
|
|
+ graph2.autoScroll = false;
|
|
|
+ graph2.setTooltips(false);
|
|
|
+ graph2.setConnectable(false);
|
|
|
+ graph2.setPanning(false);
|
|
|
+ graph2.setEnabled(false);
|
|
|
+
|
|
|
+ graph2.getCellStyle = function(cell)
|
|
|
+ {
|
|
|
+ var result = mxUtils.clone(Graph.prototype.getCellStyle.apply(this, arguments));
|
|
|
+ var defaultStyle = graph.stylesheet.getDefaultVertexStyle();
|
|
|
+ var appliedStyle = vertexStyle;
|
|
|
+
|
|
|
+ if (model.isEdge(cell))
|
|
|
+ {
|
|
|
+ defaultStyle = graph.stylesheet.getDefaultEdgeStyle();
|
|
|
+ appliedStyle = edgeStyle;
|
|
|
+ }
|
|
|
+
|
|
|
+ removeStyles(result, defaultStyles, defaultStyle);
|
|
|
+ applyStyle(commonStyle, result, cell, graphStyle, graph2);
|
|
|
+ applyStyle(appliedStyle, result, cell, graphStyle, graph2);
|
|
|
+
|
|
|
+ return result;
|
|
|
+ };
|
|
|
+
|
|
|
+ // Avoid HTML labels to capture events in bubble phase
|
|
|
+ graph2.model.beginUpdate();
|
|
|
+ try
|
|
|
+ {
|
|
|
+ var v1 = graph2.insertVertex(graph2.getDefaultParent(), null, 'Shape', 14, 8, 70, 40, 'strokeWidth=2;');
|
|
|
+ var e1 = graph2.insertEdge(graph2.getDefaultParent(), null, 'Connector', v1, v1,
|
|
|
+ 'edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;endSize=5;strokeWidth=2;')
|
|
|
+ e1.geometry.points = [new mxPoint(32, 70)];
|
|
|
+ e1.geometry.offset = new mxPoint(0, 8);
|
|
|
+ }
|
|
|
+ finally
|
|
|
+ {
|
|
|
+ graph2.model.endUpdate();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ var addEntry = mxUtils.bind(this, function(commonStyle, vertexStyle, edgeStyle, graphStyle)
|
|
|
+ {
|
|
|
+ var panel = document.createElement('div');
|
|
|
+ panel.style.cssText = 'display:inline-block;position:relative;width:96px;height:90px;' +
|
|
|
+ 'cursor:pointer;border:1px solid gray;margin:2px;overflow:hidden;';
|
|
|
+
|
|
|
+ if (graphStyle != null && graphStyle.background != null)
|
|
|
+ {
|
|
|
+ panel.style.backgroundColor = graphStyle.background;
|
|
|
+ }
|
|
|
+
|
|
|
+ createPreview(commonStyle, vertexStyle, edgeStyle, graphStyle, panel);
|
|
|
+
|
|
|
+ mxEvent.addGestureListeners(panel, mxUtils.bind(this, function(evt)
|
|
|
+ {
|
|
|
+ panel.style.opacity = 0.5;
|
|
|
+ }), null, mxUtils.bind(this, function(evt)
|
|
|
+ {
|
|
|
+ panel.style.opacity = 1;
|
|
|
+ graph.defaultVertexStyle = mxUtils.clone(ui.initialDefaultVertexStyle);
|
|
|
+ graph.defaultEdgeStyle = mxUtils.clone(ui.initialDefaultEdgeStyle);
|
|
|
+
|
|
|
+ applyStyle(commonStyle, graph.defaultVertexStyle);
|
|
|
+ applyStyle(commonStyle, graph.defaultEdgeStyle);
|
|
|
+ applyStyle(vertexStyle, graph.defaultVertexStyle);
|
|
|
+ applyStyle(edgeStyle, graph.defaultEdgeStyle);
|
|
|
+
|
|
|
+ if (sketch)
|
|
|
+ {
|
|
|
+ graph.currentEdgeStyle['sketch'] = '1';
|
|
|
+ graph.currentVertexStyle['sketch'] = '1';
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ graph.currentEdgeStyle['sketch'] = '0';
|
|
|
+ graph.currentVertexStyle['sketch'] = '0';
|
|
|
+ }
|
|
|
+
|
|
|
+ if (rounded)
|
|
|
+ {
|
|
|
+ graph.currentVertexStyle['rounded'] = '1';
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ graph.currentVertexStyle['rounded'] = '0';
|
|
|
+ }
|
|
|
+
|
|
|
+ if (curved)
|
|
|
+ {
|
|
|
+ graph.currentEdgeStyle['curved'] = '1';
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ graph.currentEdgeStyle['curved'] = '0';
|
|
|
+ }
|
|
|
+
|
|
|
+ model.beginUpdate();
|
|
|
+ try
|
|
|
+ {
|
|
|
+ ui.clearDefaultStyle();
|
|
|
+ updateCells(defaultStyles, graphStyle);
|
|
|
+
|
|
|
+ var change = new ChangePageSetup(ui, (graphStyle != null) ? graphStyle.background : null);
|
|
|
+ change.ignoreImage = true;
|
|
|
+ model.execute(change);
|
|
|
+
|
|
|
+ model.execute(new ChangeGridColor(ui, (graphStyle != null) ? graphStyle.gridColor ||
|
|
|
+ graph.view.defaultGridColor : graph.view.defaultGridColor));
|
|
|
+ }
|
|
|
+ finally
|
|
|
+ {
|
|
|
+ model.endUpdate();
|
|
|
+ }
|
|
|
+ }));
|
|
|
+
|
|
|
+ mxEvent.addListener(panel, 'mouseenter', mxUtils.bind(this, function(evt)
|
|
|
+ {
|
|
|
+ var prev = graph.getCellStyle;
|
|
|
+ var prevBg = graph.background;
|
|
|
+ var prevGrid = graph.view.gridColor;
|
|
|
+
|
|
|
+ graph.background = (graphStyle != null) ? graphStyle.background : null;
|
|
|
+ graph.view.gridColor = (graphStyle != null) ? graphStyle.gridColor ||
|
|
|
+ graph.view.defaultGridColor : graph.view.defaultGridColor;
|
|
|
+
|
|
|
+ graph.getCellStyle = function(cell)
|
|
|
+ {
|
|
|
+ var result = mxUtils.clone(prev.apply(this, arguments));
|
|
|
+
|
|
|
+ var defaultStyle = graph.stylesheet.getDefaultVertexStyle();
|
|
|
+ var appliedStyle = vertexStyle;
|
|
|
+
|
|
|
+ if (model.isEdge(cell))
|
|
|
+ {
|
|
|
+ defaultStyle = graph.stylesheet.getDefaultEdgeStyle();
|
|
|
+ appliedStyle = edgeStyle;
|
|
|
+ }
|
|
|
+
|
|
|
+ removeStyles(result, defaultStyles, defaultStyle);
|
|
|
+ applyStyle(commonStyle, result, cell, graphStyle);
|
|
|
+ applyStyle(appliedStyle, result, cell, graphStyle);
|
|
|
+
|
|
|
+ return result;
|
|
|
+ };
|
|
|
+
|
|
|
+ graph.refresh();
|
|
|
+ graph.getCellStyle = prev;
|
|
|
+ graph.background = prevBg;
|
|
|
+ graph.view.gridColor = prevGrid;
|
|
|
+ }));
|
|
|
+
|
|
|
+ mxEvent.addListener(panel, 'mouseleave', mxUtils.bind(this, function(evt)
|
|
|
+ {
|
|
|
+ graph.refresh();
|
|
|
+ }));
|
|
|
+
|
|
|
+ div.appendChild(panel);
|
|
|
+ });
|
|
|
+
|
|
|
+ for (var i = 0; i < Editor.styles.length; i++)
|
|
|
+ {
|
|
|
+ var s = Editor.styles[i];
|
|
|
+ addEntry(s.commonStyle, s.vertexStyle, s.edgeStyle, s.graph);
|
|
|
+ }
|
|
|
+
|
|
|
+ return div;
|
|
|
+};
|
|
|
+
|
|
|
/**
|
|
|
* Adds the label menu items to the given menu and parent.
|
|
|
*/
|
Gaudenz Alder