基礎編 スタイルについて

記事作成日: 2020-12-23

デフォルトスタイル

グラフのstylesheetには2つのbuilt-in styles(defaultVertex,defaultEdge)が含まれており、セルにスタイルが定義されていない場合にはこれらのデフォルトスタイルが使用されます。console.log(graph)で中身を見ると2つ含まれています。

図.画像: コンソール

スタイルの変更

デフォルトスタイルの変更

mxGraphでは以下のようなデフォルトスタイルが設定されていますが、このデフォルトのスタイル自体を変更できます。

図.画像: defaultVertex

以下のコードでは、フォントサイズを40、背景色を赤、図形を角丸に設定しています。

var vertexStyle = graph.stylesheet.getDefaultVertexStyle();
vertexStyle[mxConstants.STYLE_FONTSIZE] = 40;
vertexStyle[mxConstants.STYLE_FILLCOLOR] = 'red';
vertexStyle[mxConstants.STYLE_ROUNDED] = true;

すると、デフォルトスタイルが変更され、以後は新しいスタイルで描画されるようになります。

図.画像: デフォルトスタイル変更

グラフのセルの外観は、mxStylesheetのインスタンスであるスタイルシートによって定義されます。スタイルシートはスタイル名からスタイルにマップします。スタイルは、セルに使用するキーと値のペアの配列です。キーはmxConstantsで定義され、値は文字列や数値、JavaScript のオブジェクトや関数です。デフォルトスタイルの初期値などもこちらで確認できます。

エディタで src/js/util/mxConstants.js ファイルを開き、"STYLE_" で検索すると、この接頭辞で利用可能な様々なスタイルの定義を見ることができます。いくつかのスタイルはverticesに適用され、いくつかはedgesに適用され、いくつかは両方に適用されます。

STYLE_FONTSIZEやmxConstants.STYLE_FILLCOLORの値を見てみると、それぞれfontSize,fillColorなので値を直接使って以下のように書いても動きました。

var vertexStyle = graph.stylesheet.getDefaultVertexStyle();
vertexStyle.fontSize = 40;
vertexStyle.fillColor = 'red';
vertexStyle.rounded = true;

こっちのほうが短くてわかりやすいので公式のサンプルとは異なりますが、以後このように記述させて頂きます。

スタイルの追加

デフォルトのスタイルとは別に、新しく独自のスタイルを定義して使用することができます。

var newStyle = {};
newStyle.fontSize = 40;
newStyle.fillColor = 'red';
newStyle.rounded = true;
graph.getStylesheet().putCellStyle('newStyle', newStyle); // 注1

オブジェクト型でスタイルを定義し、注1のgetStylesheet()でgraphのstylesheetを取得し、putCellStyle()で'newStyle'のいう名前のstyleを追加します。

これにより、graphに新しいスタイルが追加されます。

図.画像: new Style

スタイルを追加すると、このスタイル名でスタイルを適用することができるようになります。

var v1 = graph.insertVertex(parent, null, 'こんにちは', 20, 20, 250, 250, 'newStyle');
graph.model.setStyle(v1, 'newStyle');

Stringでスタイルを変更する

key=value形式のstringでスタイルを適用することもできます。

var v1 = graph.insertVertex(parent, null, 'こんにちは', 20, 20, 250, 250, 'fontSize=40;fillColor=red;rounded=1');

↑このケースではスタイルが指定された部分以外はデフォルトスタイルが適用されます。

var v1 = graph.insertVertex(parent, null, 'こんにちは', 20, 20, 250, 250, ';fontSize=40;fillColor=red;rounded=1');

↑先頭にセミコロンをつけるとデフォルトスタイルを無視してくれます。

var v1 = graph.insertVertex(parent, null, 'こんにちは', 20, 20, 250, 250, 'newStyle;fontSize=40;fillColor=blue;rounded=1');

↑先頭にスタイル名（先ほど作成したnewStyle）をつけると、そのスタイルを適用しつつ、ローカルスタイルとしてスタイルをオーバーライドできます。

【参考】mxConstants.js内の定数一覧

STYLE_PERIMETER: 'perimeter',
STYLE_SOURCE_PORT: 'sourcePort',
STYLE_TARGET_PORT: 'targetPort',
STYLE_PORT_CONSTRAINT: 'portConstraint',
STYLE_PORT_CONSTRAINT_ROTATION: 'portConstraintRotation',
STYLE_SOURCE_PORT_CONSTRAINT: 'sourcePortConstraint',
STYLE_TARGET_PORT_CONSTRAINT: 'targetPortConstraint',
STYLE_OPACITY: 'opacity',
STYLE_FILL_OPACITY: 'fillOpacity',
STYLE_STROKE_OPACITY: 'strokeOpacity',
STYLE_TEXT_OPACITY: 'textOpacity',
STYLE_TEXT_DIRECTION: 'textDirection',
STYLE_OVERFLOW: 'overflow',
STYLE_ORTHOGONAL: 'orthogonal',
STYLE_EXIT_X: 'exitX',
STYLE_EXIT_Y: 'exitY',
STYLE_EXIT_DX: 'exitDx',
STYLE_EXIT_DY: 'exitDy',
STYLE_EXIT_PERIMETER: 'exitPerimeter',
STYLE_ENTRY_X: 'entryX',
STYLE_ENTRY_Y: 'entryY',
STYLE_ENTRY_DX: 'entryDx',
STYLE_ENTRY_DY: 'entryDy',
STYLE_ENTRY_PERIMETER: 'entryPerimeter',
STYLE_WHITE_SPACE: 'whiteSpace',
STYLE_ROTATION: 'rotation',
STYLE_FILLCOLOR: 'fillColor',
STYLE_POINTER_EVENTS: 'pointerEvents',
STYLE_SWIMLANE_FILLCOLOR: 'swimlaneFillColor',
STYLE_MARGIN: 'margin',
STYLE_GRADIENTCOLOR: 'gradientColor',
STYLE_GRADIENT_DIRECTION: 'gradientDirection',
STYLE_STROKECOLOR: 'strokeColor',
STYLE_SEPARATORCOLOR: 'separatorColor',
STYLE_STROKEWIDTH: 'strokeWidth',
STYLE_ALIGN: 'align',
STYLE_VERTICAL_ALIGN: 'verticalAlign',
STYLE_LABEL_WIDTH: 'labelWidth',
STYLE_LABEL_POSITION: 'labelPosition',
STYLE_VERTICAL_LABEL_POSITION: 'verticalLabelPosition',
STYLE_IMAGE_ASPECT: 'imageAspect',
STYLE_IMAGE_ALIGN: 'imageAlign',
STYLE_IMAGE_VERTICAL_ALIGN: 'imageVerticalAlign',
STYLE_GLASS: 'glass',
STYLE_IMAGE: 'image',
STYLE_IMAGE_WIDTH: 'imageWidth',
STYLE_IMAGE_HEIGHT: 'imageHeight',
STYLE_IMAGE_BACKGROUND: 'imageBackground',
STYLE_IMAGE_BORDER: 'imageBorder',
STYLE_FLIPH: 'flipH',
STYLE_FLIPV: 'flipV',
STYLE_NOLABEL: 'noLabel',
STYLE_NOEDGESTYLE: 'noEdgeStyle',
STYLE_LABEL_BACKGROUNDCOLOR: 'labelBackgroundColor',
STYLE_LABEL_BORDERCOLOR: 'labelBorderColor',
STYLE_LABEL_PADDING: 'labelPadding',
STYLE_INDICATOR_SHAPE: 'indicatorShape',
STYLE_INDICATOR_IMAGE: 'indicatorImage',
STYLE_INDICATOR_COLOR: 'indicatorColor',
STYLE_INDICATOR_STROKECOLOR: 'indicatorStrokeColor',
STYLE_INDICATOR_GRADIENTCOLOR: 'indicatorGradientColor',
STYLE_INDICATOR_SPACING: 'indicatorSpacing',
STYLE_INDICATOR_WIDTH: 'indicatorWidth',
STYLE_INDICATOR_HEIGHT: 'indicatorHeight',
STYLE_INDICATOR_DIRECTION: 'indicatorDirection',
STYLE_SHADOW: 'shadow',
STYLE_SEGMENT: 'segment',
STYLE_ENDARROW: 'endArrow',
STYLE_STARTARROW: 'startArrow',
STYLE_ENDSIZE: 'endSize',
STYLE_STARTSIZE: 'startSize',
STYLE_SWIMLANE_LINE: 'swimlaneLine',
STYLE_ENDFILL: 'endFill',
STYLE_STARTFILL: 'startFill',
STYLE_DASHED: 'dashed',
STYLE_DASH_PATTERN: 'dashPattern',
STYLE_FIX_DASH: 'fixDash',
STYLE_ROUNDED: 'rounded',
STYLE_CURVED: 'curved',
STYLE_ARCSIZE: 'arcSize',
STYLE_ABSOLUTE_ARCSIZE: 'absoluteArcSize',
STYLE_SOURCE_PERIMETER_SPACING: 'sourcePerimeterSpacing',
STYLE_TARGET_PERIMETER_SPACING: 'targetPerimeterSpacing',
STYLE_PERIMETER_SPACING: 'perimeterSpacing',
STYLE_SPACING: 'spacing',
STYLE_SPACING_TOP: 'spacingTop',
STYLE_SPACING_LEFT: 'spacingLeft',
STYLE_SPACING_BOTTOM: 'spacingBottom',
STYLE_SPACING_RIGHT: 'spacingRight',
STYLE_HORIZONTAL: 'horizontal',
STYLE_DIRECTION: 'direction',
STYLE_ANCHOR_POINT_DIRECTION: 'anchorPointDirection',
STYLE_ELBOW: 'elbow',
STYLE_FONTCOLOR: 'fontColor',
STYLE_FONTFAMILY: 'fontFamily',
STYLE_FONTSIZE: 'fontSize',
STYLE_FONTSTYLE: 'fontStyle',
STYLE_ASPECT: 'aspect',
STYLE_AUTOSIZE: 'autosize',
STYLE_FOLDABLE: 'foldable',
STYLE_EDITABLE: 'editable',
STYLE_BACKGROUND_OUTLINE: 'backgroundOutline',
STYLE_BENDABLE: 'bendable',
STYLE_MOVABLE: 'movable',
STYLE_RESIZABLE: 'resizable',
STYLE_RESIZE_WIDTH: 'resizeWidth',
STYLE_RESIZE_HEIGHT: 'resizeHeight',
STYLE_ROTATABLE: 'rotatable',
STYLE_CLONEABLE: 'cloneable',
STYLE_DELETABLE: 'deletable',
STYLE_SHAPE: 'shape',
STYLE_EDGE: 'edgeStyle',
STYLE_JETTY_SIZE: 'jettySize',
STYLE_SOURCE_JETTY_SIZE: 'sourceJettySize',
STYLE_TARGET_JETTY_SIZE: 'targetJettySize',
STYLE_LOOP: 'loopStyle',
STYLE_ORTHOGONAL_LOOP: 'orthogonalLoop',
STYLE_ROUTING_CENTER_X: 'routingCenterX',
STYLE_ROUTING_CENTER_Y: 'routingCenterY',
EDGESTYLE_ELBOW: 'elbowEdgeStyle',
EDGESTYLE_ENTITY_RELATION: 'entityRelationEdgeStyle',
EDGESTYLE_LOOP: 'loopEdgeStyle',
EDGESTYLE_SIDETOSIDE: 'sideToSideEdgeStyle',
EDGESTYLE_TOPTOBOTTOM: 'topToBottomEdgeStyle',
EDGESTYLE_ORTHOGONAL: 'orthogonalEdgeStyle',
EDGESTYLE_SEGMENT: 'segmentEdgeStyle',

参考リンク