Changed baseStyleName to baseStyleNames.
Junsik Shim
parent
a284987daf
commit
91d9c13286
|
|
@ -25,7 +25,7 @@ export type Properties = {
|
|||
[k: string]: any;
|
||||
};
|
||||
|
||||
export type CellStyle = CellStateStyle & { baseStyleName?: string };
|
||||
export type CellStyle = CellStateStyle & { baseStyleNames?: string[] };
|
||||
|
||||
export type CellStateStyle = {
|
||||
absoluteArcSize?: number;
|
||||
|
|
|
|||
|
|
@ -180,20 +180,25 @@ export class Stylesheet {
|
|||
}
|
||||
|
||||
/**
|
||||
* Returns the cell style for the specified baseStyleName or the given
|
||||
* defaultStyle if no style can be found for the given baseStyleName.
|
||||
* Returns the cell style for the specified baseStyleNames or the given
|
||||
* defaultStyle if no style can be found for the given baseStyleNames.
|
||||
*
|
||||
* @param cellStyle An object that represents the style.
|
||||
* @param defaultStyle Default style to be returned if no style can be found.
|
||||
*/
|
||||
getCellStyle(cellStyle: CellStyle, defaultStyle: CellStateStyle) {
|
||||
let style;
|
||||
let style: CellStateStyle;
|
||||
|
||||
if (cellStyle.baseStyleName) {
|
||||
// creates style with the given baseStyleName.
|
||||
style = { ...this.styles.get(cellStyle.baseStyleName) };
|
||||
} else if (cellStyle.baseStyleName === null) {
|
||||
// baseStyleName is explicitly null, so don't use any default styles.
|
||||
if (cellStyle.baseStyleNames && cellStyle.baseStyleNames.length > 0) {
|
||||
// creates style with the given baseStyleNames. (merges from left to right)
|
||||
style = cellStyle.baseStyleNames.reduce((acc, styleName) => {
|
||||
return (acc = {
|
||||
...acc,
|
||||
...this.styles.get(styleName),
|
||||
});
|
||||
}, {});
|
||||
} else if (cellStyle.baseStyleNames && cellStyle.baseStyleNames.length === 0) {
|
||||
// baseStyleNames is explicitly an empty array, so don't use any default styles.
|
||||
style = {};
|
||||
} else {
|
||||
style = { ...defaultStyle };
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ const Template = ({ label, ...args }) => {
|
|||
10,
|
||||
80,
|
||||
100,
|
||||
{ baseStyleName: 'bottom' }
|
||||
{ baseStyleNames: ['bottom'] }
|
||||
);
|
||||
var v1 = graph.insertVertex(
|
||||
parent,
|
||||
|
|
@ -64,10 +64,10 @@ const Template = ({ label, ...args }) => {
|
|||
10,
|
||||
80,
|
||||
100,
|
||||
{ baseStyleName: 'top' }
|
||||
{ baseStyleNames: ['top'] }
|
||||
);
|
||||
var v1 = graph.insertVertex(parent, null, '', 230, 10, 100, 100, {
|
||||
baseStyleName: 'image',
|
||||
baseStyleNames: ['image'],
|
||||
});
|
||||
var v2 = graph.insertVertex(
|
||||
parent,
|
||||
|
|
@ -77,7 +77,7 @@ const Template = ({ label, ...args }) => {
|
|||
130,
|
||||
140,
|
||||
60,
|
||||
{ baseStyleName: 'right' }
|
||||
{ baseStyleNames: ['right'] }
|
||||
);
|
||||
var v2 = graph.insertVertex(
|
||||
parent,
|
||||
|
|
@ -87,7 +87,7 @@ const Template = ({ label, ...args }) => {
|
|||
130,
|
||||
140,
|
||||
60,
|
||||
{ baseStyleName: 'left' }
|
||||
{ baseStyleNames: ['left'] }
|
||||
);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -114,7 +114,7 @@ const Template = ({ label, ...args }) => {
|
|||
1,
|
||||
0,
|
||||
0,
|
||||
{ baseStyleName: null },
|
||||
{ baseStyleNames: [] },
|
||||
true
|
||||
);
|
||||
const label12 = graph.insertVertex(
|
||||
|
|
@ -125,7 +125,7 @@ const Template = ({ label, ...args }) => {
|
|||
0,
|
||||
0,
|
||||
0,
|
||||
{ baseStyleName: null },
|
||||
{ baseStyleNames: [] },
|
||||
true
|
||||
);
|
||||
|
||||
|
|
@ -150,7 +150,7 @@ const Template = ({ label, ...args }) => {
|
|||
1,
|
||||
0,
|
||||
0,
|
||||
{ baseStyleName: null },
|
||||
{ baseStyleNames: [] },
|
||||
true
|
||||
);
|
||||
const label22 = graph.insertVertex(
|
||||
|
|
@ -161,7 +161,7 @@ const Template = ({ label, ...args }) => {
|
|||
0,
|
||||
0,
|
||||
0,
|
||||
{ baseStyleName: null },
|
||||
{ baseStyleNames: [] },
|
||||
true
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -329,14 +329,14 @@ const Template = ({ label, ...args }) => {
|
|||
parent: lane1a,
|
||||
position: [40, 40],
|
||||
size: [30, 30],
|
||||
style: { baseStyleName: 'state' },
|
||||
style: { baseStyleNames: ['state'] },
|
||||
});
|
||||
const end1 = insertVertex({
|
||||
parent: lane1a,
|
||||
value: 'A',
|
||||
position: [560, 40],
|
||||
size: [30, 30],
|
||||
style: { baseStyleName: 'end' },
|
||||
style: { baseStyleNames: ['end'] },
|
||||
});
|
||||
|
||||
const step1 = insertVertex({
|
||||
|
|
@ -344,28 +344,28 @@ const Template = ({ label, ...args }) => {
|
|||
value: 'Contact\nProvider',
|
||||
position: [90, 30],
|
||||
size: [80, 50],
|
||||
style: { baseStyleName: 'process' },
|
||||
style: { baseStyleNames: ['process'] },
|
||||
});
|
||||
const step11 = insertVertex({
|
||||
parent: lane1a,
|
||||
value: 'Complete\nAppropriate\nRequest',
|
||||
position: [190, 30],
|
||||
size: [80, 50],
|
||||
style: { baseStyleName: 'process' },
|
||||
style: { baseStyleNames: ['process'] },
|
||||
});
|
||||
const step111 = insertVertex({
|
||||
parent: lane1a,
|
||||
value: 'Receive and\nAcknowledge',
|
||||
position: [385, 30],
|
||||
size: [80, 50],
|
||||
style: { baseStyleName: 'process' },
|
||||
style: { baseStyleNames: ['process'] },
|
||||
});
|
||||
|
||||
const start2 = insertVertex({
|
||||
parent: lane2b,
|
||||
position: [40, 40],
|
||||
size: [30, 30],
|
||||
style: { baseStyleName: 'state' },
|
||||
style: { baseStyleNames: ['state'] },
|
||||
});
|
||||
|
||||
const step2 = insertVertex({
|
||||
|
|
@ -373,14 +373,14 @@ const Template = ({ label, ...args }) => {
|
|||
value: 'Receive\nRequest',
|
||||
position: [90, 30],
|
||||
size: [80, 50],
|
||||
style: { baseStyleName: 'process' },
|
||||
style: { baseStyleNames: ['process'] },
|
||||
});
|
||||
const step22 = insertVertex({
|
||||
parent: lane2b,
|
||||
value: 'Refer to Tap\nSystems\nCoordinator',
|
||||
position: [190, 30],
|
||||
size: [80, 50],
|
||||
style: { baseStyleName: 'process' },
|
||||
style: { baseStyleNames: ['process'] },
|
||||
});
|
||||
|
||||
const step3 = insertVertex({
|
||||
|
|
@ -388,14 +388,14 @@ const Template = ({ label, ...args }) => {
|
|||
value: 'Request 1st-\nGate\nInformation',
|
||||
position: [190, 30],
|
||||
size: [80, 50],
|
||||
style: { baseStyleName: 'process' },
|
||||
style: { baseStyleNames: ['process'] },
|
||||
});
|
||||
const step33 = insertVertex({
|
||||
parent: lane1b,
|
||||
value: 'Receive 1st-\nGate\nInformation',
|
||||
position: [290, 30],
|
||||
size: [80, 50],
|
||||
style: { baseStyleName: 'process' },
|
||||
style: { baseStyleNames: ['process'] },
|
||||
});
|
||||
|
||||
const step4 = insertVertex({
|
||||
|
|
@ -403,21 +403,21 @@ const Template = ({ label, ...args }) => {
|
|||
value: 'Receive and\nAcknowledge',
|
||||
position: [290, 20],
|
||||
size: [80, 50],
|
||||
style: { baseStyleName: 'process' },
|
||||
style: { baseStyleNames: ['process'] },
|
||||
});
|
||||
const step44 = insertVertex({
|
||||
parent: lane2a,
|
||||
value: 'Contract\nConstraints?',
|
||||
position: [400, 20],
|
||||
size: [50, 50],
|
||||
style: { baseStyleName: 'condition' },
|
||||
style: { baseStyleNames: ['condition'] },
|
||||
});
|
||||
const step444 = insertVertex({
|
||||
parent: lane2a,
|
||||
value: 'Tap for gas\ndelivery?',
|
||||
position: [480, 20],
|
||||
size: [50, 50],
|
||||
style: { baseStyleName: 'condition' },
|
||||
style: { baseStyleNames: ['condition'] },
|
||||
});
|
||||
|
||||
const end2 = insertVertex({
|
||||
|
|
@ -425,14 +425,14 @@ const Template = ({ label, ...args }) => {
|
|||
value: 'B',
|
||||
position: [560, 30],
|
||||
size: [30, 30],
|
||||
style: { baseStyleName: 'end' },
|
||||
style: { baseStyleNames: ['end'] },
|
||||
});
|
||||
const end3 = insertVertex({
|
||||
parent: lane2a,
|
||||
value: 'C',
|
||||
position: [560, 84],
|
||||
size: [30, 30],
|
||||
style: { baseStyleName: 'end' },
|
||||
style: { baseStyleNames: ['end'] },
|
||||
});
|
||||
|
||||
let e = null;
|
||||
|
|
@ -520,19 +520,19 @@ const Template = ({ label, ...args }) => {
|
|||
parent,
|
||||
source: step1,
|
||||
target: step2,
|
||||
style: { baseStyleName: 'crossover' },
|
||||
style: { baseStyleNames: ['crossover'] },
|
||||
});
|
||||
insertEdge({
|
||||
parent,
|
||||
source: step3,
|
||||
target: step11,
|
||||
style: { baseStyleName: 'crossover' },
|
||||
style: { baseStyleNames: ['crossover'] },
|
||||
});
|
||||
e = insertEdge({
|
||||
parent: lane1a,
|
||||
source: step11,
|
||||
target: step33,
|
||||
style: { baseStyleName: 'crossover' },
|
||||
style: { baseStyleNames: ['crossover'] },
|
||||
});
|
||||
|
||||
e.geometry.points = [
|
||||
|
|
|
|||
|
|
@ -26,14 +26,27 @@ export default {
|
|||
const Template = ({ label, ...args }) => {
|
||||
const div = document.createElement('div');
|
||||
|
||||
const container = document.createElement('div');
|
||||
container.style.position = 'relative';
|
||||
container.style.overflow = 'hidden';
|
||||
container.style.width = `${args.width}px`;
|
||||
container.style.height = `${args.height}px`;
|
||||
container.style.background = 'url(/images/grid.gif)';
|
||||
container.style.cursor = 'default';
|
||||
div.appendChild(container);
|
||||
const table = document.createElement('table');
|
||||
table.style.position = 'relative';
|
||||
|
||||
table.innerHTML = `
|
||||
<tr>
|
||||
<td>
|
||||
<div
|
||||
id="graphContainer"
|
||||
style="border:solid 1px black;overflow:hidden;width:321px;height:241px;cursor:default"
|
||||
></div>
|
||||
</td>
|
||||
<td valign="top">
|
||||
<div
|
||||
id="properties"
|
||||
style="border:solid 1px black;padding:10px"
|
||||
></div>
|
||||
</tr>
|
||||
`;
|
||||
div.appendChild(table);
|
||||
|
||||
const container = document.getElementById('graphContainer');
|
||||
|
||||
// Note that these XML nodes will be enclosing the
|
||||
// Cell nodes for the model cells in the output
|
||||
|
|
@ -142,9 +155,6 @@ const Template = ({ label, ...args }) => {
|
|||
const buttons = document.createElement('div');
|
||||
div.appendChild(buttons);
|
||||
|
||||
const properties = document.createElement('div');
|
||||
div.appendChild(properties);
|
||||
|
||||
// Adds an option to view the XML of the graph
|
||||
buttons.appendChild(
|
||||
DomHelpers.button('View XML', function () {
|
||||
|
|
@ -198,7 +208,7 @@ const Template = ({ label, ...args }) => {
|
|||
* Updates the properties panel
|
||||
*/
|
||||
function selectionChanged(graph) {
|
||||
const div = properties;
|
||||
const div = document.getElementById('properties');
|
||||
|
||||
// Forces focusout in IE
|
||||
graph.container.focus();
|
||||
|
|
|
|||
Loading…
Reference in New Issue