3448 lines
143 KiB
JavaScript
3448 lines
143 KiB
JavaScript
|
import DOMPurify from "dompurify";
|
||
|
|
import dayjs from "dayjs";
|
||
|
|
import { adjust, invert, darken, lighten, rgba } from "khroma";
|
||
|
|
const LEVELS = {
|
||
|
|
trace: 0,
|
||
|
|
debug: 1,
|
||
|
|
info: 2,
|
||
|
|
warn: 3,
|
||
|
|
error: 4,
|
||
|
|
fatal: 5
|
||
|
|
};
|
||
|
|
const log = {
|
||
|
|
trace: (..._args) => {
|
||
|
|
},
|
||
|
|
debug: (..._args) => {
|
||
|
|
},
|
||
|
|
info: (..._args) => {
|
||
|
|
},
|
||
|
|
warn: (..._args) => {
|
||
|
|
},
|
||
|
|
error: (..._args) => {
|
||
|
|
},
|
||
|
|
fatal: (..._args) => {
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const setLogLevel = function(level = "fatal") {
|
||
|
|
let numericLevel = LEVELS.fatal;
|
||
|
|
if (typeof level === "string") {
|
||
|
|
level = level.toLowerCase();
|
||
|
|
if (level in LEVELS) {
|
||
|
|
numericLevel = LEVELS[level];
|
||
|
|
}
|
||
|
|
} else if (typeof level === "number") {
|
||
|
|
numericLevel = level;
|
||
|
|
}
|
||
|
|
log.trace = () => {
|
||
|
|
};
|
||
|
|
log.debug = () => {
|
||
|
|
};
|
||
|
|
log.info = () => {
|
||
|
|
};
|
||
|
|
log.warn = () => {
|
||
|
|
};
|
||
|
|
log.error = () => {
|
||
|
|
};
|
||
|
|
log.fatal = () => {
|
||
|
|
};
|
||
|
|
if (numericLevel <= LEVELS.fatal) {
|
||
|
|
log.fatal = console.error ? console.error.bind(console, format("FATAL"), "color: orange") : console.log.bind(console, "\x1B[35m", format("FATAL"));
|
||
|
|
}
|
||
|
|
if (numericLevel <= LEVELS.error) {
|
||
|
|
log.error = console.error ? console.error.bind(console, format("ERROR"), "color: orange") : console.log.bind(console, "\x1B[31m", format("ERROR"));
|
||
|
|
}
|
||
|
|
if (numericLevel <= LEVELS.warn) {
|
||
|
|
log.warn = console.warn ? console.warn.bind(console, format("WARN"), "color: orange") : console.log.bind(console, `\x1B[33m`, format("WARN"));
|
||
|
|
}
|
||
|
|
if (numericLevel <= LEVELS.info) {
|
||
|
|
log.info = console.info ? console.info.bind(console, format("INFO"), "color: lightblue") : console.log.bind(console, "\x1B[34m", format("INFO"));
|
||
|
|
}
|
||
|
|
if (numericLevel <= LEVELS.debug) {
|
||
|
|
log.debug = console.debug ? console.debug.bind(console, format("DEBUG"), "color: lightgreen") : console.log.bind(console, "\x1B[32m", format("DEBUG"));
|
||
|
|
}
|
||
|
|
if (numericLevel <= LEVELS.trace) {
|
||
|
|
log.trace = console.debug ? console.debug.bind(console, format("TRACE"), "color: lightgreen") : console.log.bind(console, "\x1B[32m", format("TRACE"));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const format = (level) => {
|
||
|
|
const time = dayjs().format("ss.SSS");
|
||
|
|
return `%c${time} : ${level} : `;
|
||
|
|
};
|
||
|
|
const getRows = (s) => {
|
||
|
|
if (!s) {
|
||
|
|
return [""];
|
||
|
|
}
|
||
|
|
const str = breakToPlaceholder(s).replace(/\\n/g, "#br#");
|
||
|
|
return str.split("#br#");
|
||
|
|
};
|
||
|
|
const removeScript = (txt) => {
|
||
|
|
return DOMPurify.sanitize(txt);
|
||
|
|
};
|
||
|
|
const sanitizeMore = (text, config2) => {
|
||
|
|
var _a;
|
||
|
|
if (((_a = config2.flowchart) == null ? void 0 : _a.htmlLabels) !== false) {
|
||
|
|
const level = config2.securityLevel;
|
||
|
|
if (level === "antiscript" || level === "strict") {
|
||
|
|
text = removeScript(text);
|
||
|
|
} else if (level !== "loose") {
|
||
|
|
text = breakToPlaceholder(text);
|
||
|
|
text = text.replace(/</g, "<").replace(/>/g, ">");
|
||
|
|
text = text.replace(/=/g, "=");
|
||
|
|
text = placeholderToBreak(text);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return text;
|
||
|
|
};
|
||
|
|
const sanitizeText = (text, config2) => {
|
||
|
|
if (!text) {
|
||
|
|
return text;
|
||
|
|
}
|
||
|
|
if (config2.dompurifyConfig) {
|
||
|
|
text = DOMPurify.sanitize(sanitizeMore(text, config2), config2.dompurifyConfig).toString();
|
||
|
|
} else {
|
||
|
|
text = DOMPurify.sanitize(sanitizeMore(text, config2), {
|
||
|
|
FORBID_TAGS: ["style"]
|
||
|
|
}).toString();
|
||
|
|
}
|
||
|
|
return text;
|
||
|
|
};
|
||
|
|
const sanitizeTextOrArray = (a, config2) => {
|
||
|
|
if (typeof a === "string") {
|
||
|
|
return sanitizeText(a, config2);
|
||
|
|
}
|
||
|
|
return a.flat().map((x) => sanitizeText(x, config2));
|
||
|
|
};
|
||
|
|
const lineBreakRegex = /<br\s*\/?>/gi;
|
||
|
|
const hasBreaks = (text) => {
|
||
|
|
return lineBreakRegex.test(text);
|
||
|
|
};
|
||
|
|
const splitBreaks = (text) => {
|
||
|
|
return text.split(lineBreakRegex);
|
||
|
|
};
|
||
|
|
const placeholderToBreak = (s) => {
|
||
|
|
return s.replace(/#br#/g, "<br/>");
|
||
|
|
};
|
||
|
|
const breakToPlaceholder = (s) => {
|
||
|
|
return s.replace(lineBreakRegex, "#br#");
|
||
|
|
};
|
||
|
|
const getUrl = (useAbsolute) => {
|
||
|
|
let url = "";
|
||
|
|
if (useAbsolute) {
|
||
|
|
url = window.location.protocol + "//" + window.location.host + window.location.pathname + window.location.search;
|
||
|
|
url = url.replaceAll(/\(/g, "\\(");
|
||
|
|
url = url.replaceAll(/\)/g, "\\)");
|
||
|
|
}
|
||
|
|
return url;
|
||
|
|
};
|
||
|
|
const evaluate = (val) => val === false || ["false", "null", "0"].includes(String(val).trim().toLowerCase()) ? false : true;
|
||
|
|
const parseGenericTypes = function(text) {
|
||
|
|
let cleanedText = text;
|
||
|
|
if (text.split("~").length - 1 >= 2) {
|
||
|
|
let newCleanedText = cleanedText;
|
||
|
|
do {
|
||
|
|
cleanedText = newCleanedText;
|
||
|
|
newCleanedText = cleanedText.replace(/~([^\s,:;]+)~/, "<$1>");
|
||
|
|
} while (newCleanedText != cleanedText);
|
||
|
|
return parseGenericTypes(newCleanedText);
|
||
|
|
} else {
|
||
|
|
return cleanedText;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const common = {
|
||
|
|
getRows,
|
||
|
|
sanitizeText,
|
||
|
|
sanitizeTextOrArray,
|
||
|
|
hasBreaks,
|
||
|
|
splitBreaks,
|
||
|
|
lineBreakRegex,
|
||
|
|
removeScript,
|
||
|
|
getUrl,
|
||
|
|
evaluate
|
||
|
|
};
|
||
|
|
const mkBorder = (col, darkMode) => darkMode ? adjust(col, { s: -40, l: 10 }) : adjust(col, { s: -40, l: -10 });
|
||
|
|
const oldAttributeBackgroundColorOdd = "#ffffff";
|
||
|
|
const oldAttributeBackgroundColorEven = "#f2f2f2";
|
||
|
|
let Theme$4 = class Theme {
|
||
|
|
constructor() {
|
||
|
|
this.background = "#f4f4f4";
|
||
|
|
this.primaryColor = "#fff4dd";
|
||
|
|
this.noteBkgColor = "#fff5ad";
|
||
|
|
this.noteTextColor = "#333";
|
||
|
|
this.THEME_COLOR_LIMIT = 12;
|
||
|
|
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
|
||
|
|
this.fontSize = "16px";
|
||
|
|
}
|
||
|
|
updateColors() {
|
||
|
|
this.primaryTextColor = this.primaryTextColor || (this.darkMode ? "#eee" : "#333");
|
||
|
|
this.secondaryColor = this.secondaryColor || adjust(this.primaryColor, { h: -120 });
|
||
|
|
this.tertiaryColor = this.tertiaryColor || adjust(this.primaryColor, { h: 180, l: 5 });
|
||
|
|
this.primaryBorderColor = this.primaryBorderColor || mkBorder(this.primaryColor, this.darkMode);
|
||
|
|
this.secondaryBorderColor = this.secondaryBorderColor || mkBorder(this.secondaryColor, this.darkMode);
|
||
|
|
this.tertiaryBorderColor = this.tertiaryBorderColor || mkBorder(this.tertiaryColor, this.darkMode);
|
||
|
|
this.noteBorderColor = this.noteBorderColor || mkBorder(this.noteBkgColor, this.darkMode);
|
||
|
|
this.noteBkgColor = this.noteBkgColor || "#fff5ad";
|
||
|
|
this.noteTextColor = this.noteTextColor || "#333";
|
||
|
|
this.secondaryTextColor = this.secondaryTextColor || invert(this.secondaryColor);
|
||
|
|
this.tertiaryTextColor = this.tertiaryTextColor || invert(this.tertiaryColor);
|
||
|
|
this.lineColor = this.lineColor || invert(this.background);
|
||
|
|
this.textColor = this.textColor || this.primaryTextColor;
|
||
|
|
this.nodeBkg = this.nodeBkg || this.primaryColor;
|
||
|
|
this.mainBkg = this.mainBkg || this.primaryColor;
|
||
|
|
this.nodeBorder = this.nodeBorder || this.primaryBorderColor;
|
||
|
|
this.clusterBkg = this.clusterBkg || this.tertiaryColor;
|
||
|
|
this.clusterBorder = this.clusterBorder || this.tertiaryBorderColor;
|
||
|
|
this.defaultLinkColor = this.defaultLinkColor || this.lineColor;
|
||
|
|
this.titleColor = this.titleColor || this.tertiaryTextColor;
|
||
|
|
this.edgeLabelBackground = this.edgeLabelBackground || (this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);
|
||
|
|
this.nodeTextColor = this.nodeTextColor || this.primaryTextColor;
|
||
|
|
this.actorBorder = this.actorBorder || this.primaryBorderColor;
|
||
|
|
this.actorBkg = this.actorBkg || this.mainBkg;
|
||
|
|
this.actorTextColor = this.actorTextColor || this.primaryTextColor;
|
||
|
|
this.actorLineColor = this.actorLineColor || "grey";
|
||
|
|
this.labelBoxBkgColor = this.labelBoxBkgColor || this.actorBkg;
|
||
|
|
this.signalColor = this.signalColor || this.textColor;
|
||
|
|
this.signalTextColor = this.signalTextColor || this.textColor;
|
||
|
|
this.labelBoxBorderColor = this.labelBoxBorderColor || this.actorBorder;
|
||
|
|
this.labelTextColor = this.labelTextColor || this.actorTextColor;
|
||
|
|
this.loopTextColor = this.loopTextColor || this.actorTextColor;
|
||
|
|
this.activationBorderColor = this.activationBorderColor || darken(this.secondaryColor, 10);
|
||
|
|
this.activationBkgColor = this.activationBkgColor || this.secondaryColor;
|
||
|
|
this.sequenceNumberColor = this.sequenceNumberColor || invert(this.lineColor);
|
||
|
|
this.sectionBkgColor = this.sectionBkgColor || this.tertiaryColor;
|
||
|
|
this.altSectionBkgColor = this.altSectionBkgColor || "white";
|
||
|
|
this.sectionBkgColor = this.sectionBkgColor || this.secondaryColor;
|
||
|
|
this.sectionBkgColor2 = this.sectionBkgColor2 || this.primaryColor;
|
||
|
|
this.excludeBkgColor = this.excludeBkgColor || "#eeeeee";
|
||
|
|
this.taskBorderColor = this.taskBorderColor || this.primaryBorderColor;
|
||
|
|
this.taskBkgColor = this.taskBkgColor || this.primaryColor;
|
||
|
|
this.activeTaskBorderColor = this.activeTaskBorderColor || this.primaryColor;
|
||
|
|
this.activeTaskBkgColor = this.activeTaskBkgColor || lighten(this.primaryColor, 23);
|
||
|
|
this.gridColor = this.gridColor || "lightgrey";
|
||
|
|
this.doneTaskBkgColor = this.doneTaskBkgColor || "lightgrey";
|
||
|
|
this.doneTaskBorderColor = this.doneTaskBorderColor || "grey";
|
||
|
|
this.critBorderColor = this.critBorderColor || "#ff8888";
|
||
|
|
this.critBkgColor = this.critBkgColor || "red";
|
||
|
|
this.todayLineColor = this.todayLineColor || "red";
|
||
|
|
this.taskTextColor = this.taskTextColor || this.textColor;
|
||
|
|
this.taskTextOutsideColor = this.taskTextOutsideColor || this.textColor;
|
||
|
|
this.taskTextLightColor = this.taskTextLightColor || this.textColor;
|
||
|
|
this.taskTextColor = this.taskTextColor || this.primaryTextColor;
|
||
|
|
this.taskTextDarkColor = this.taskTextDarkColor || this.textColor;
|
||
|
|
this.taskTextClickableColor = this.taskTextClickableColor || "#003163";
|
||
|
|
this.personBorder = this.personBorder || this.primaryBorderColor;
|
||
|
|
this.personBkg = this.personBkg || this.mainBkg;
|
||
|
|
this.transitionColor = this.transitionColor || this.lineColor;
|
||
|
|
this.transitionLabelColor = this.transitionLabelColor || this.textColor;
|
||
|
|
this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;
|
||
|
|
this.stateBkg = this.stateBkg || this.mainBkg;
|
||
|
|
this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
|
||
|
|
this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
|
||
|
|
this.altBackground = this.altBackground || this.tertiaryColor;
|
||
|
|
this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
|
||
|
|
this.compositeBorder = this.compositeBorder || this.nodeBorder;
|
||
|
|
this.innerEndBackground = this.nodeBorder;
|
||
|
|
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
|
||
|
|
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
|
||
|
|
this.transitionColor = this.transitionColor || this.lineColor;
|
||
|
|
this.specialStateColor = this.lineColor;
|
||
|
|
this.cScale0 = this.cScale0 || this.primaryColor;
|
||
|
|
this.cScale1 = this.cScale1 || this.secondaryColor;
|
||
|
|
this.cScale2 = this.cScale2 || this.tertiaryColor;
|
||
|
|
this.cScale3 = this.cScale3 || adjust(this.primaryColor, { h: 30 });
|
||
|
|
this.cScale4 = this.cScale4 || adjust(this.primaryColor, { h: 60 });
|
||
|
|
this.cScale5 = this.cScale5 || adjust(this.primaryColor, { h: 90 });
|
||
|
|
this.cScale6 = this.cScale6 || adjust(this.primaryColor, { h: 120 });
|
||
|
|
this.cScale7 = this.cScale7 || adjust(this.primaryColor, { h: 150 });
|
||
|
|
this.cScale8 = this.cScale8 || adjust(this.primaryColor, { h: 210, l: 150 });
|
||
|
|
this.cScale9 = this.cScale9 || adjust(this.primaryColor, { h: 270 });
|
||
|
|
this.cScale10 = this.cScale10 || adjust(this.primaryColor, { h: 300 });
|
||
|
|
this.cScale11 = this.cScale11 || adjust(this.primaryColor, { h: 330 });
|
||
|
|
if (this.darkMode) {
|
||
|
|
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
|
||
|
|
this["cScale" + i] = darken(this["cScale" + i], 75);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
|
||
|
|
this["cScale" + i] = darken(this["cScale" + i], 25);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
|
||
|
|
this["cScaleInv" + i] = this["cScaleInv" + i] || invert(this["cScale" + i]);
|
||
|
|
}
|
||
|
|
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
|
||
|
|
if (this.darkMode) {
|
||
|
|
this["cScalePeer" + i] = this["cScalePeer" + i] || lighten(this["cScale" + i], 10);
|
||
|
|
} else {
|
||
|
|
this["cScalePeer" + i] = this["cScalePeer" + i] || darken(this["cScale" + i], 10);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.scaleLabelColor = this.scaleLabelColor || this.labelTextColor;
|
||
|
|
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
|
||
|
|
this["cScaleLabel" + i] = this["cScaleLabel" + i] || this.scaleLabelColor;
|
||
|
|
}
|
||
|
|
const multiplier = this.darkMode ? -4 : -1;
|
||
|
|
for (let i = 0; i < 5; i++) {
|
||
|
|
this["surface" + i] = this["surface" + i] || adjust(this.mainBkg, { h: 180, s: -15, l: multiplier * (5 + i * 3) });
|
||
|
|
this["surfacePeer" + i] = this["surfacePeer" + i] || adjust(this.mainBkg, { h: 180, s: -15, l: multiplier * (8 + i * 3) });
|
||
|
|
}
|
||
|
|
this.classText = this.classText || this.textColor;
|
||
|
|
this.fillType0 = this.fillType0 || this.primaryColor;
|
||
|
|
this.fillType1 = this.fillType1 || this.secondaryColor;
|
||
|
|
this.fillType2 = this.fillType2 || adjust(this.primaryColor, { h: 64 });
|
||
|
|
this.fillType3 = this.fillType3 || adjust(this.secondaryColor, { h: 64 });
|
||
|
|
this.fillType4 = this.fillType4 || adjust(this.primaryColor, { h: -64 });
|
||
|
|
this.fillType5 = this.fillType5 || adjust(this.secondaryColor, { h: -64 });
|
||
|
|
this.fillType6 = this.fillType6 || adjust(this.primaryColor, { h: 128 });
|
||
|
|
this.fillType7 = this.fillType7 || adjust(this.secondaryColor, { h: 128 });
|
||
|
|
this.pie1 = this.pie1 || this.primaryColor;
|
||
|
|
this.pie2 = this.pie2 || this.secondaryColor;
|
||
|
|
this.pie3 = this.pie3 || this.tertiaryColor;
|
||
|
|
this.pie4 = this.pie4 || adjust(this.primaryColor, { l: -10 });
|
||
|
|
this.pie5 = this.pie5 || adjust(this.secondaryColor, { l: -10 });
|
||
|
|
this.pie6 = this.pie6 || adjust(this.tertiaryColor, { l: -10 });
|
||
|
|
this.pie7 = this.pie7 || adjust(this.primaryColor, { h: 60, l: -10 });
|
||
|
|
this.pie8 = this.pie8 || adjust(this.primaryColor, { h: -60, l: -10 });
|
||
|
|
this.pie9 = this.pie9 || adjust(this.primaryColor, { h: 120, l: 0 });
|
||
|
|
this.pie10 = this.pie10 || adjust(this.primaryColor, { h: 60, l: -20 });
|
||
|
|
this.pie11 = this.pie11 || adjust(this.primaryColor, { h: -60, l: -20 });
|
||
|
|
this.pie12 = this.pie12 || adjust(this.primaryColor, { h: 120, l: -10 });
|
||
|
|
this.pieTitleTextSize = this.pieTitleTextSize || "25px";
|
||
|
|
this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;
|
||
|
|
this.pieSectionTextSize = this.pieSectionTextSize || "17px";
|
||
|
|
this.pieSectionTextColor = this.pieSectionTextColor || this.textColor;
|
||
|
|
this.pieLegendTextSize = this.pieLegendTextSize || "17px";
|
||
|
|
this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
|
||
|
|
this.pieStrokeColor = this.pieStrokeColor || "black";
|
||
|
|
this.pieStrokeWidth = this.pieStrokeWidth || "2px";
|
||
|
|
this.pieOpacity = this.pieOpacity || "0.7";
|
||
|
|
this.requirementBackground = this.requirementBackground || this.primaryColor;
|
||
|
|
this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;
|
||
|
|
this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor;
|
||
|
|
this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;
|
||
|
|
this.relationColor = this.relationColor || this.lineColor;
|
||
|
|
this.relationLabelBackground = this.relationLabelBackground || (this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);
|
||
|
|
this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
|
||
|
|
this.git0 = this.git0 || this.primaryColor;
|
||
|
|
this.git1 = this.git1 || this.secondaryColor;
|
||
|
|
this.git2 = this.git2 || this.tertiaryColor;
|
||
|
|
this.git3 = this.git3 || adjust(this.primaryColor, { h: -30 });
|
||
|
|
this.git4 = this.git4 || adjust(this.primaryColor, { h: -60 });
|
||
|
|
this.git5 = this.git5 || adjust(this.primaryColor, { h: -90 });
|
||
|
|
this.git6 = this.git6 || adjust(this.primaryColor, { h: 60 });
|
||
|
|
this.git7 = this.git7 || adjust(this.primaryColor, { h: 120 });
|
||
|
|
if (this.darkMode) {
|
||
|
|
this.git0 = lighten(this.git0, 25);
|
||
|
|
this.git1 = lighten(this.git1, 25);
|
||
|
|
this.git2 = lighten(this.git2, 25);
|
||
|
|
this.git3 = lighten(this.git3, 25);
|
||
|
|
this.git4 = lighten(this.git4, 25);
|
||
|
|
this.git5 = lighten(this.git5, 25);
|
||
|
|
this.git6 = lighten(this.git6, 25);
|
||
|
|
this.git7 = lighten(this.git7, 25);
|
||
|
|
} else {
|
||
|
|
this.git0 = darken(this.git0, 25);
|
||
|
|
this.git1 = darken(this.git1, 25);
|
||
|
|
this.git2 = darken(this.git2, 25);
|
||
|
|
this.git3 = darken(this.git3, 25);
|
||
|
|
this.git4 = darken(this.git4, 25);
|
||
|
|
this.git5 = darken(this.git5, 25);
|
||
|
|
this.git6 = darken(this.git6, 25);
|
||
|
|
this.git7 = darken(this.git7, 25);
|
||
|
|
}
|
||
|
|
this.gitInv0 = this.gitInv0 || invert(this.git0);
|
||
|
|
this.gitInv1 = this.gitInv1 || invert(this.git1);
|
||
|
|
this.gitInv2 = this.gitInv2 || invert(this.git2);
|
||
|
|
this.gitInv3 = this.gitInv3 || invert(this.git3);
|
||
|
|
this.gitInv4 = this.gitInv4 || invert(this.git4);
|
||
|
|
this.gitInv5 = this.gitInv5 || invert(this.git5);
|
||
|
|
this.gitInv6 = this.gitInv6 || invert(this.git6);
|
||
|
|
this.gitInv7 = this.gitInv7 || invert(this.git7);
|
||
|
|
this.branchLabelColor = this.branchLabelColor || (this.darkMode ? "black" : this.labelTextColor);
|
||
|
|
this.gitBranchLabel0 = this.gitBranchLabel0 || this.branchLabelColor;
|
||
|
|
this.gitBranchLabel1 = this.gitBranchLabel1 || this.branchLabelColor;
|
||
|
|
this.gitBranchLabel2 = this.gitBranchLabel2 || this.branchLabelColor;
|
||
|
|
this.gitBranchLabel3 = this.gitBranchLabel3 || this.branchLabelColor;
|
||
|
|
this.gitBranchLabel4 = this.gitBranchLabel4 || this.branchLabelColor;
|
||
|
|
this.gitBranchLabel5 = this.gitBranchLabel5 || this.branchLabelColor;
|
||
|
|
this.gitBranchLabel6 = this.gitBranchLabel6 || this.branchLabelColor;
|
||
|
|
this.gitBranchLabel7 = this.gitBranchLabel7 || this.branchLabelColor;
|
||
|
|
this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
|
||
|
|
this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;
|
||
|
|
this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;
|
||
|
|
this.tagLabelFontSize = this.tagLabelFontSize || "10px";
|
||
|
|
this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
|
||
|
|
this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
|
||
|
|
this.commitLabelFontSize = this.commitLabelFontSize || "10px";
|
||
|
|
this.attributeBackgroundColorOdd = this.attributeBackgroundColorOdd || oldAttributeBackgroundColorOdd;
|
||
|
|
this.attributeBackgroundColorEven = this.attributeBackgroundColorEven || oldAttributeBackgroundColorEven;
|
||
|
|
}
|
||
|
|
calculate(overrides) {
|
||
|
|
if (typeof overrides !== "object") {
|
||
|
|
this.updateColors();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const keys = Object.keys(overrides);
|
||
|
|
keys.forEach((k) => {
|
||
|
|
this[k] = overrides[k];
|
||
|
|
});
|
||
|
|
this.updateColors();
|
||
|
|
keys.forEach((k) => {
|
||
|
|
this[k] = overrides[k];
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const getThemeVariables$4 = (userOverrides) => {
|
||
|
|
const theme2 = new Theme$4();
|
||
|
|
theme2.calculate(userOverrides);
|
||
|
|
return theme2;
|
||
|
|
};
|
||
|
|
let Theme$3 = class Theme2 {
|
||
|
|
constructor() {
|
||
|
|
this.background = "#333";
|
||
|
|
this.primaryColor = "#1f2020";
|
||
|
|
this.secondaryColor = lighten(this.primaryColor, 16);
|
||
|
|
this.tertiaryColor = adjust(this.primaryColor, { h: -160 });
|
||
|
|
this.primaryBorderColor = invert(this.background);
|
||
|
|
this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
|
||
|
|
this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
|
||
|
|
this.primaryTextColor = invert(this.primaryColor);
|
||
|
|
this.secondaryTextColor = invert(this.secondaryColor);
|
||
|
|
this.tertiaryTextColor = invert(this.tertiaryColor);
|
||
|
|
this.lineColor = invert(this.background);
|
||
|
|
this.textColor = invert(this.background);
|
||
|
|
this.mainBkg = "#1f2020";
|
||
|
|
this.secondBkg = "calculated";
|
||
|
|
this.mainContrastColor = "lightgrey";
|
||
|
|
this.darkTextColor = lighten(invert("#323D47"), 10);
|
||
|
|
this.lineColor = "calculated";
|
||
|
|
this.border1 = "#81B1DB";
|
||
|
|
this.border2 = rgba(255, 255, 255, 0.25);
|
||
|
|
this.arrowheadColor = "calculated";
|
||
|
|
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
|
||
|
|
this.fontSize = "16px";
|
||
|
|
this.labelBackground = "#181818";
|
||
|
|
this.textColor = "#ccc";
|
||
|
|
this.THEME_COLOR_LIMIT = 12;
|
||
|
|
this.nodeBkg = "calculated";
|
||
|
|
this.nodeBorder = "calculated";
|
||
|
|
this.clusterBkg = "calculated";
|
||
|
|
this.clusterBorder = "calculated";
|
||
|
|
this.defaultLinkColor = "calculated";
|
||
|
|
this.titleColor = "#F9FFFE";
|
||
|
|
this.edgeLabelBackground = "calculated";
|
||
|
|
this.actorBorder = "calculated";
|
||
|
|
this.actorBkg = "calculated";
|
||
|
|
this.actorTextColor = "calculated";
|
||
|
|
this.actorLineColor = "calculated";
|
||
|
|
this.signalColor = "calculated";
|
||
|
|
this.signalTextColor = "calculated";
|
||
|
|
this.labelBoxBkgColor = "calculated";
|
||
|
|
this.labelBoxBorderColor = "calculated";
|
||
|
|
this.labelTextColor = "calculated";
|
||
|
|
this.loopTextColor = "calculated";
|
||
|
|
this.noteBorderColor = "calculated";
|
||
|
|
this.noteBkgColor = "#fff5ad";
|
||
|
|
this.noteTextColor = "calculated";
|
||
|
|
this.activationBorderColor = "calculated";
|
||
|
|
this.activationBkgColor = "calculated";
|
||
|
|
this.sequenceNumberColor = "black";
|
||
|
|
this.sectionBkgColor = darken("#EAE8D9", 30);
|
||
|
|
this.altSectionBkgColor = "calculated";
|
||
|
|
this.sectionBkgColor2 = "#EAE8D9";
|
||
|
|
this.taskBorderColor = rgba(255, 255, 255, 70);
|
||
|
|
this.taskBkgColor = "calculated";
|
||
|
|
this.taskTextColor = "calculated";
|
||
|
|
this.taskTextLightColor = "calculated";
|
||
|
|
this.taskTextOutsideColor = "calculated";
|
||
|
|
this.taskTextClickableColor = "#003163";
|
||
|
|
this.activeTaskBorderColor = rgba(255, 255, 255, 50);
|
||
|
|
this.activeTaskBkgColor = "#81B1DB";
|
||
|
|
this.gridColor = "calculated";
|
||
|
|
this.doneTaskBkgColor = "calculated";
|
||
|
|
this.doneTaskBorderColor = "grey";
|
||
|
|
this.critBorderColor = "#E83737";
|
||
|
|
this.critBkgColor = "#E83737";
|
||
|
|
this.taskTextDarkColor = "calculated";
|
||
|
|
this.todayLineColor = "#DB5757";
|
||
|
|
this.personBorder = "calculated";
|
||
|
|
this.personBkg = "calculated";
|
||
|
|
this.labelColor = "calculated";
|
||
|
|
this.errorBkgColor = "#a44141";
|
||
|
|
this.errorTextColor = "#ddd";
|
||
|
|
}
|
||
|
|
updateColors() {
|
||
|
|
this.secondBkg = lighten(this.mainBkg, 16);
|
||
|
|
this.lineColor = this.mainContrastColor;
|
||
|
|
this.arrowheadColor = this.mainContrastColor;
|
||
|
|
this.nodeBkg = this.mainBkg;
|
||
|
|
this.nodeBorder = this.border1;
|
||
|
|
this.clusterBkg = this.secondBkg;
|
||
|
|
this.clusterBorder = this.border2;
|
||
|
|
this.defaultLinkColor = this.lineColor;
|
||
|
|
this.edgeLabelBackground = lighten(this.labelBackground, 25);
|
||
|
|
this.actorBorder = this.border1;
|
||
|
|
this.actorBkg = this.mainBkg;
|
||
|
|
this.actorTextColor = this.mainContrastColor;
|
||
|
|
this.actorLineColor = this.mainContrastColor;
|
||
|
|
this.signalColor = this.mainContrastColor;
|
||
|
|
this.signalTextColor = this.mainContrastColor;
|
||
|
|
this.labelBoxBkgColor = this.actorBkg;
|
||
|
|
this.labelBoxBorderColor = this.actorBorder;
|
||
|
|
this.labelTextColor = this.mainContrastColor;
|
||
|
|
this.loopTextColor = this.mainContrastColor;
|
||
|
|
this.noteBorderColor = this.secondaryBorderColor;
|
||
|
|
this.noteBkgColor = this.secondBkg;
|
||
|
|
this.noteTextColor = this.secondaryTextColor;
|
||
|
|
this.activationBorderColor = this.border1;
|
||
|
|
this.activationBkgColor = this.secondBkg;
|
||
|
|
this.altSectionBkgColor = this.background;
|
||
|
|
this.taskBkgColor = lighten(this.mainBkg, 23);
|
||
|
|
this.taskTextColor = this.darkTextColor;
|
||
|
|
this.taskTextLightColor = this.mainContrastColor;
|
||
|
|
this.taskTextOutsideColor = this.taskTextLightColor;
|
||
|
|
this.gridColor = this.mainContrastColor;
|
||
|
|
this.doneTaskBkgColor = this.mainContrastColor;
|
||
|
|
this.taskTextDarkColor = this.darkTextColor;
|
||
|
|
this.transitionColor = this.transitionColor || this.lineColor;
|
||
|
|
this.transitionLabelColor = this.transitionLabelColor || this.textColor;
|
||
|
|
this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;
|
||
|
|
this.stateBkg = this.stateBkg || this.mainBkg;
|
||
|
|
this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
|
||
|
|
this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
|
||
|
|
this.altBackground = this.altBackground || "#555";
|
||
|
|
this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
|
||
|
|
this.compositeBorder = this.compositeBorder || this.nodeBorder;
|
||
|
|
this.innerEndBackground = this.primaryBorderColor;
|
||
|
|
this.specialStateColor = "#f4f4f4";
|
||
|
|
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
|
||
|
|
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
|
||
|
|
this.fillType0 = this.primaryColor;
|
||
|
|
this.fillType1 = this.secondaryColor;
|
||
|
|
this.fillType2 = adjust(this.primaryColor, { h: 64 });
|
||
|
|
this.fillType3 = adjust(this.secondaryColor, { h: 64 });
|
||
|
|
this.fillType4 = adjust(this.primaryColor, { h: -64 });
|
||
|
|
this.fillType5 = adjust(this.secondaryColor, { h: -64 });
|
||
|
|
this.fillType6 = adjust(this.primaryColor, { h: 128 });
|
||
|
|
this.fillType7 = adjust(this.secondaryColor, { h: 128 });
|
||
|
|
this.cScale1 = this.cScale1 || "#0b0000";
|
||
|
|
this.cScale2 = this.cScale2 || "#4d1037";
|
||
|
|
this.cScale3 = this.cScale3 || "#3f5258";
|
||
|
|
this.cScale4 = this.cScale4 || "#4f2f1b";
|
||
|
|
this.cScale5 = this.cScale5 || "#6e0a0a";
|
||
|
|
this.cScale6 = this.cScale6 || "#3b0048";
|
||
|
|
this.cScale7 = this.cScale7 || "#995a01";
|
||
|
|
this.cScale8 = this.cScale8 || "#154706";
|
||
|
|
this.cScale9 = this.cScale9 || "#161722";
|
||
|
|
this.cScale10 = this.cScale10 || "#00296f";
|
||
|
|
this.cScale11 = this.cScale11 || "#01629c";
|
||
|
|
this.cScale12 = this.cScale12 || "#010029";
|
||
|
|
this.cScale0 = this.cScale0 || this.primaryColor;
|
||
|
|
this.cScale1 = this.cScale1 || this.secondaryColor;
|
||
|
|
this.cScale2 = this.cScale2 || this.tertiaryColor;
|
||
|
|
this.cScale3 = this.cScale3 || adjust(this.primaryColor, { h: 30 });
|
||
|
|
this.cScale4 = this.cScale4 || adjust(this.primaryColor, { h: 60 });
|
||
|
|
this.cScale5 = this.cScale5 || adjust(this.primaryColor, { h: 90 });
|
||
|
|
this.cScale6 = this.cScale6 || adjust(this.primaryColor, { h: 120 });
|
||
|
|
this.cScale7 = this.cScale7 || adjust(this.primaryColor, { h: 150 });
|
||
|
|
this.cScale8 = this.cScale8 || adjust(this.primaryColor, { h: 210 });
|
||
|
|
this.cScale9 = this.cScale9 || adjust(this.primaryColor, { h: 270 });
|
||
|
|
this.cScale10 = this.cScale10 || adjust(this.primaryColor, { h: 300 });
|
||
|
|
this.cScale11 = this.cScale11 || adjust(this.primaryColor, { h: 330 });
|
||
|
|
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
|
||
|
|
this["cScaleInv" + i] = this["cScaleInv" + i] || invert(this["cScale" + i]);
|
||
|
|
}
|
||
|
|
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
|
||
|
|
this["cScalePeer" + i] = this["cScalePeer" + i] || lighten(this["cScale" + i], 10);
|
||
|
|
}
|
||
|
|
for (let i = 0; i < 5; i++) {
|
||
|
|
this["surface" + i] = this["surface" + i] || adjust(this.mainBkg, { h: 30, s: -30, l: -(-10 + i * 4) });
|
||
|
|
this["surfacePeer" + i] = this["surfacePeer" + i] || adjust(this.mainBkg, { h: 30, s: -30, l: -(-7 + i * 4) });
|
||
|
|
}
|
||
|
|
this.scaleLabelColor = this.scaleLabelColor || (this.darkMode ? "black" : this.labelTextColor);
|
||
|
|
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
|
||
|
|
this["cScaleLabel" + i] = this["cScaleLabel" + i] || this.scaleLabelColor;
|
||
|
|
}
|
||
|
|
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
|
||
|
|
this["pie" + i] = this["cScale" + i];
|
||
|
|
}
|
||
|
|
this.pieTitleTextSize = this.pieTitleTextSize || "25px";
|
||
|
|
this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;
|
||
|
|
this.pieSectionTextSize = this.pieSectionTextSize || "17px";
|
||
|
|
this.pieSectionTextColor = this.pieSectionTextColor || this.textColor;
|
||
|
|
this.pieLegendTextSize = this.pieLegendTextSize || "17px";
|
||
|
|
this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
|
||
|
|
this.pieStrokeColor = this.pieStrokeColor || "black";
|
||
|
|
this.pieStrokeWidth = this.pieStrokeWidth || "2px";
|
||
|
|
this.pieOpacity = this.pieOpacity || "0.7";
|
||
|
|
this.classText = this.primaryTextColor;
|
||
|
|
this.requirementBackground = this.requirementBackground || this.primaryColor;
|
||
|
|
this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;
|
||
|
|
this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor;
|
||
|
|
this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;
|
||
|
|
this.relationColor = this.relationColor || this.lineColor;
|
||
|
|
this.relationLabelBackground = this.relationLabelBackground || (this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);
|
||
|
|
this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
|
||
|
|
this.git0 = lighten(this.secondaryColor, 20);
|
||
|
|
this.git1 = lighten(this.pie2 || this.secondaryColor, 20);
|
||
|
|
this.git2 = lighten(this.pie3 || this.tertiaryColor, 20);
|
||
|
|
this.git3 = lighten(this.pie4 || adjust(this.primaryColor, { h: -30 }), 20);
|
||
|
|
this.git4 = lighten(this.pie5 || adjust(this.primaryColor, { h: -60 }), 20);
|
||
|
|
this.git5 = lighten(this.pie6 || adjust(this.primaryColor, { h: -90 }), 10);
|
||
|
|
this.git6 = lighten(this.pie7 || adjust(this.primaryColor, { h: 60 }), 10);
|
||
|
|
this.git7 = lighten(this.pie8 || adjust(this.primaryColor, { h: 120 }), 20);
|
||
|
|
this.gitInv0 = this.gitInv0 || invert(this.git0);
|
||
|
|
this.gitInv1 = this.gitInv1 || invert(this.git1);
|
||
|
|
this.gitInv2 = this.gitInv2 || invert(this.git2);
|
||
|
|
this.gitInv3 = this.gitInv3 || invert(this.git3);
|
||
|
|
this.gitInv4 = this.gitInv4 || invert(this.git4);
|
||
|
|
this.gitInv5 = this.gitInv5 || invert(this.git5);
|
||
|
|
this.gitInv6 = this.gitInv6 || invert(this.git6);
|
||
|
|
this.gitInv7 = this.gitInv7 || invert(this.git7);
|
||
|
|
this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
|
||
|
|
this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;
|
||
|
|
this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;
|
||
|
|
this.tagLabelFontSize = this.tagLabelFontSize || "10px";
|
||
|
|
this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
|
||
|
|
this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
|
||
|
|
this.commitLabelFontSize = this.commitLabelFontSize || "10px";
|
||
|
|
this.attributeBackgroundColorOdd = this.attributeBackgroundColorOdd || lighten(this.background, 12);
|
||
|
|
this.attributeBackgroundColorEven = this.attributeBackgroundColorEven || lighten(this.background, 2);
|
||
|
|
}
|
||
|
|
calculate(overrides) {
|
||
|
|
if (typeof overrides !== "object") {
|
||
|
|
this.updateColors();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const keys = Object.keys(overrides);
|
||
|
|
keys.forEach((k) => {
|
||
|
|
this[k] = overrides[k];
|
||
|
|
});
|
||
|
|
this.updateColors();
|
||
|
|
keys.forEach((k) => {
|
||
|
|
this[k] = overrides[k];
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const getThemeVariables$3 = (userOverrides) => {
|
||
|
|
const theme2 = new Theme$3();
|
||
|
|
theme2.calculate(userOverrides);
|
||
|
|
return theme2;
|
||
|
|
};
|
||
|
|
let Theme$2 = class Theme3 {
|
||
|
|
constructor() {
|
||
|
|
this.background = "#f4f4f4";
|
||
|
|
this.primaryColor = "#ECECFF";
|
||
|
|
this.secondaryColor = adjust(this.primaryColor, { h: 120 });
|
||
|
|
this.secondaryColor = "#ffffde";
|
||
|
|
this.tertiaryColor = adjust(this.primaryColor, { h: -160 });
|
||
|
|
this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
|
||
|
|
this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
|
||
|
|
this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
|
||
|
|
this.primaryTextColor = invert(this.primaryColor);
|
||
|
|
this.secondaryTextColor = invert(this.secondaryColor);
|
||
|
|
this.tertiaryTextColor = invert(this.tertiaryColor);
|
||
|
|
this.lineColor = invert(this.background);
|
||
|
|
this.textColor = invert(this.background);
|
||
|
|
this.background = "white";
|
||
|
|
this.mainBkg = "#ECECFF";
|
||
|
|
this.secondBkg = "#ffffde";
|
||
|
|
this.lineColor = "#333333";
|
||
|
|
this.border1 = "#9370DB";
|
||
|
|
this.border2 = "#aaaa33";
|
||
|
|
this.arrowheadColor = "#333333";
|
||
|
|
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
|
||
|
|
this.fontSize = "16px";
|
||
|
|
this.labelBackground = "#e8e8e8";
|
||
|
|
this.textColor = "#333";
|
||
|
|
this.THEME_COLOR_LIMIT = 12;
|
||
|
|
this.nodeBkg = "calculated";
|
||
|
|
this.nodeBorder = "calculated";
|
||
|
|
this.clusterBkg = "calculated";
|
||
|
|
this.clusterBorder = "calculated";
|
||
|
|
this.defaultLinkColor = "calculated";
|
||
|
|
this.titleColor = "calculated";
|
||
|
|
this.edgeLabelBackground = "calculated";
|
||
|
|
this.actorBorder = "calculated";
|
||
|
|
this.actorBkg = "calculated";
|
||
|
|
this.actorTextColor = "black";
|
||
|
|
this.actorLineColor = "grey";
|
||
|
|
this.signalColor = "calculated";
|
||
|
|
this.signalTextColor = "calculated";
|
||
|
|
this.labelBoxBkgColor = "calculated";
|
||
|
|
this.labelBoxBorderColor = "calculated";
|
||
|
|
this.labelTextColor = "calculated";
|
||
|
|
this.loopTextColor = "calculated";
|
||
|
|
this.noteBorderColor = "calculated";
|
||
|
|
this.noteBkgColor = "#fff5ad";
|
||
|
|
this.noteTextColor = "calculated";
|
||
|
|
this.activationBorderColor = "#666";
|
||
|
|
this.activationBkgColor = "#f4f4f4";
|
||
|
|
this.sequenceNumberColor = "white";
|
||
|
|
this.sectionBkgColor = "calculated";
|
||
|
|
this.altSectionBkgColor = "calculated";
|
||
|
|
this.sectionBkgColor2 = "calculated";
|
||
|
|
this.excludeBkgColor = "#eeeeee";
|
||
|
|
this.taskBorderColor = "calculated";
|
||
|
|
this.taskBkgColor = "calculated";
|
||
|
|
this.taskTextLightColor = "calculated";
|
||
|
|
this.taskTextColor = this.taskTextLightColor;
|
||
|
|
this.taskTextDarkColor = "calculated";
|
||
|
|
this.taskTextOutsideColor = this.taskTextDarkColor;
|
||
|
|
this.taskTextClickableColor = "calculated";
|
||
|
|
this.activeTaskBorderColor = "calculated";
|
||
|
|
this.activeTaskBkgColor = "calculated";
|
||
|
|
this.gridColor = "calculated";
|
||
|
|
this.doneTaskBkgColor = "calculated";
|
||
|
|
this.doneTaskBorderColor = "calculated";
|
||
|
|
this.critBorderColor = "calculated";
|
||
|
|
this.critBkgColor = "calculated";
|
||
|
|
this.todayLineColor = "calculated";
|
||
|
|
this.sectionBkgColor = rgba(102, 102, 255, 0.49);
|
||
|
|
this.altSectionBkgColor = "white";
|
||
|
|
this.sectionBkgColor2 = "#fff400";
|
||
|
|
this.taskBorderColor = "#534fbc";
|
||
|
|
this.taskBkgColor = "#8a90dd";
|
||
|
|
this.taskTextLightColor = "white";
|
||
|
|
this.taskTextColor = "calculated";
|
||
|
|
this.taskTextDarkColor = "black";
|
||
|
|
this.taskTextOutsideColor = "calculated";
|
||
|
|
this.taskTextClickableColor = "#003163";
|
||
|
|
this.activeTaskBorderColor = "#534fbc";
|
||
|
|
this.activeTaskBkgColor = "#bfc7ff";
|
||
|
|
this.gridColor = "lightgrey";
|
||
|
|
this.doneTaskBkgColor = "lightgrey";
|
||
|
|
this.doneTaskBorderColor = "grey";
|
||
|
|
this.critBorderColor = "#ff8888";
|
||
|
|
this.critBkgColor = "red";
|
||
|
|
this.todayLineColor = "red";
|
||
|
|
this.personBorder = "calculated";
|
||
|
|
this.personBkg = "calculated";
|
||
|
|
this.labelColor = "black";
|
||
|
|
this.errorBkgColor = "#552222";
|
||
|
|
this.errorTextColor = "#552222";
|
||
|
|
this.updateColors();
|
||
|
|
}
|
||
|
|
updateColors() {
|
||
|
|
this.cScale0 = this.cScale0 || this.primaryColor;
|
||
|
|
this.cScale1 = this.cScale1 || this.secondaryColor;
|
||
|
|
this.cScale2 = this.cScale2 || this.tertiaryColor;
|
||
|
|
this.cScale3 = this.cScale3 || adjust(this.primaryColor, { h: 30 });
|
||
|
|
this.cScale4 = this.cScale4 || adjust(this.primaryColor, { h: 60 });
|
||
|
|
this.cScale5 = this.cScale5 || adjust(this.primaryColor, { h: 90 });
|
||
|
|
this.cScale6 = this.cScale6 || adjust(this.primaryColor, { h: 120 });
|
||
|
|
this.cScale7 = this.cScale7 || adjust(this.primaryColor, { h: 150 });
|
||
|
|
this.cScale8 = this.cScale8 || adjust(this.primaryColor, { h: 210 });
|
||
|
|
this.cScale9 = this.cScale9 || adjust(this.primaryColor, { h: 270 });
|
||
|
|
this.cScale10 = this.cScale10 || adjust(this.primaryColor, { h: 300 });
|
||
|
|
this.cScale11 = this.cScale11 || adjust(this.primaryColor, { h: 330 });
|
||
|
|
this["cScalePeer" + 1] = this["cScalePeer" + 1] || darken(this.secondaryColor, 45);
|
||
|
|
this["cScalePeer" + 2] = this["cScalePeer" + 2] || darken(this.tertiaryColor, 40);
|
||
|
|
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
|
||
|
|
this["cScale" + i] = darken(this["cScale" + i], 10);
|
||
|
|
this["cScalePeer" + i] = this["cScalePeer" + i] || darken(this["cScale" + i], 25);
|
||
|
|
}
|
||
|
|
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
|
||
|
|
this["cScaleInv" + i] = this["cScaleInv" + i] || adjust(this["cScale" + i], { h: 180 });
|
||
|
|
}
|
||
|
|
for (let i = 0; i < 5; i++) {
|
||
|
|
this["surface" + i] = this["surface" + i] || adjust(this.mainBkg, { h: 30, l: -(5 + i * 5) });
|
||
|
|
this["surfacePeer" + i] = this["surfacePeer" + i] || adjust(this.mainBkg, { h: 30, l: -(7 + i * 5) });
|
||
|
|
}
|
||
|
|
this.scaleLabelColor = this.scaleLabelColor !== "calculated" && this.scaleLabelColor ? this.scaleLabelColor : this.labelTextColor;
|
||
|
|
if (this.labelTextColor !== "calculated") {
|
||
|
|
this.cScaleLabel0 = this.cScaleLabel0 || invert(this.labelTextColor);
|
||
|
|
this.cScaleLabel3 = this.cScaleLabel3 || invert(this.labelTextColor);
|
||
|
|
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
|
||
|
|
this["cScaleLabel" + i] = this["cScaleLabel" + i] || this.labelTextColor;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.nodeBkg = this.mainBkg;
|
||
|
|
this.nodeBorder = this.border1;
|
||
|
|
this.clusterBkg = this.secondBkg;
|
||
|
|
this.clusterBorder = this.border2;
|
||
|
|
this.defaultLinkColor = this.lineColor;
|
||
|
|
this.titleColor = this.textColor;
|
||
|
|
this.edgeLabelBackground = this.labelBackground;
|
||
|
|
this.actorBorder = lighten(this.border1, 23);
|
||
|
|
this.actorBkg = this.mainBkg;
|
||
|
|
this.labelBoxBkgColor = this.actorBkg;
|
||
|
|
this.signalColor = this.textColor;
|
||
|
|
this.signalTextColor = this.textColor;
|
||
|
|
this.labelBoxBorderColor = this.actorBorder;
|
||
|
|
this.labelTextColor = this.actorTextColor;
|
||
|
|
this.loopTextColor = this.actorTextColor;
|
||
|
|
this.noteBorderColor = this.border2;
|
||
|
|
this.noteTextColor = this.actorTextColor;
|
||
|
|
this.taskTextColor = this.taskTextLightColor;
|
||
|
|
this.taskTextOutsideColor = this.taskTextDarkColor;
|
||
|
|
this.transitionColor = this.transitionColor || this.lineColor;
|
||
|
|
this.transitionLabelColor = this.transitionLabelColor || this.textColor;
|
||
|
|
this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;
|
||
|
|
this.stateBkg = this.stateBkg || this.mainBkg;
|
||
|
|
this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
|
||
|
|
this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
|
||
|
|
this.altBackground = this.altBackground || "#f0f0f0";
|
||
|
|
this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
|
||
|
|
this.compositeBorder = this.compositeBorder || this.nodeBorder;
|
||
|
|
this.innerEndBackground = this.nodeBorder;
|
||
|
|
this.specialStateColor = this.lineColor;
|
||
|
|
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
|
||
|
|
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
|
||
|
|
this.transitionColor = this.transitionColor || this.lineColor;
|
||
|
|
this.classText = this.primaryTextColor;
|
||
|
|
this.fillType0 = this.primaryColor;
|
||
|
|
this.fillType1 = this.secondaryColor;
|
||
|
|
this.fillType2 = adjust(this.primaryColor, { h: 64 });
|
||
|
|
this.fillType3 = adjust(this.secondaryColor, { h: 64 });
|
||
|
|
this.fillType4 = adjust(this.primaryColor, { h: -64 });
|
||
|
|
this.fillType5 = adjust(this.secondaryColor, { h: -64 });
|
||
|
|
this.fillType6 = adjust(this.primaryColor, { h: 128 });
|
||
|
|
this.fillType7 = adjust(this.secondaryColor, { h: 128 });
|
||
|
|
this.pie1 = this.pie1 || this.primaryColor;
|
||
|
|
this.pie2 = this.pie2 || this.secondaryColor;
|
||
|
|
this.pie3 = this.pie3 || adjust(this.tertiaryColor, { l: -40 });
|
||
|
|
this.pie4 = this.pie4 || adjust(this.primaryColor, { l: -10 });
|
||
|
|
this.pie5 = this.pie5 || adjust(this.secondaryColor, { l: -30 });
|
||
|
|
this.pie6 = this.pie6 || adjust(this.tertiaryColor, { l: -20 });
|
||
|
|
this.pie7 = this.pie7 || adjust(this.primaryColor, { h: 60, l: -20 });
|
||
|
|
this.pie8 = this.pie8 || adjust(this.primaryColor, { h: -60, l: -40 });
|
||
|
|
this.pie9 = this.pie9 || adjust(this.primaryColor, { h: 120, l: -40 });
|
||
|
|
this.pie10 = this.pie10 || adjust(this.primaryColor, { h: 60, l: -40 });
|
||
|
|
this.pie11 = this.pie11 || adjust(this.primaryColor, { h: -90, l: -40 });
|
||
|
|
this.pie12 = this.pie12 || adjust(this.primaryColor, { h: 120, l: -30 });
|
||
|
|
this.pieTitleTextSize = this.pieTitleTextSize || "25px";
|
||
|
|
this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;
|
||
|
|
this.pieSectionTextSize = this.pieSectionTextSize || "17px";
|
||
|
|
this.pieSectionTextColor = this.pieSectionTextColor || this.textColor;
|
||
|
|
this.pieLegendTextSize = this.pieLegendTextSize || "17px";
|
||
|
|
this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
|
||
|
|
this.pieStrokeColor = this.pieStrokeColor || "black";
|
||
|
|
this.pieStrokeWidth = this.pieStrokeWidth || "2px";
|
||
|
|
this.pieOpacity = this.pieOpacity || "0.7";
|
||
|
|
this.requirementBackground = this.requirementBackground || this.primaryColor;
|
||
|
|
this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;
|
||
|
|
this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor;
|
||
|
|
this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;
|
||
|
|
this.relationColor = this.relationColor || this.lineColor;
|
||
|
|
this.relationLabelBackground = this.relationLabelBackground || this.labelBackground;
|
||
|
|
this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
|
||
|
|
this.git0 = this.git0 || this.primaryColor;
|
||
|
|
this.git1 = this.git1 || this.secondaryColor;
|
||
|
|
this.git2 = this.git2 || this.tertiaryColor;
|
||
|
|
this.git3 = this.git3 || adjust(this.primaryColor, { h: -30 });
|
||
|
|
this.git4 = this.git4 || adjust(this.primaryColor, { h: -60 });
|
||
|
|
this.git5 = this.git5 || adjust(this.primaryColor, { h: -90 });
|
||
|
|
this.git6 = this.git6 || adjust(this.primaryColor, { h: 60 });
|
||
|
|
this.git7 = this.git7 || adjust(this.primaryColor, { h: 120 });
|
||
|
|
if (this.darkMode) {
|
||
|
|
this.git0 = lighten(this.git0, 25);
|
||
|
|
this.git1 = lighten(this.git1, 25);
|
||
|
|
this.git2 = lighten(this.git2, 25);
|
||
|
|
this.git3 = lighten(this.git3, 25);
|
||
|
|
this.git4 = lighten(this.git4, 25);
|
||
|
|
this.git5 = lighten(this.git5, 25);
|
||
|
|
this.git6 = lighten(this.git6, 25);
|
||
|
|
this.git7 = lighten(this.git7, 25);
|
||
|
|
} else {
|
||
|
|
this.git0 = darken(this.git0, 25);
|
||
|
|
this.git1 = darken(this.git1, 25);
|
||
|
|
this.git2 = darken(this.git2, 25);
|
||
|
|
this.git3 = darken(this.git3, 25);
|
||
|
|
this.git4 = darken(this.git4, 25);
|
||
|
|
this.git5 = darken(this.git5, 25);
|
||
|
|
this.git6 = darken(this.git6, 25);
|
||
|
|
this.git7 = darken(this.git7, 25);
|
||
|
|
}
|
||
|
|
this.gitInv0 = this.gitInv0 || darken(invert(this.git0), 25);
|
||
|
|
this.gitInv1 = this.gitInv1 || invert(this.git1);
|
||
|
|
this.gitInv2 = this.gitInv2 || invert(this.git2);
|
||
|
|
this.gitInv3 = this.gitInv3 || invert(this.git3);
|
||
|
|
this.gitInv4 = this.gitInv4 || invert(this.git4);
|
||
|
|
this.gitInv5 = this.gitInv5 || invert(this.git5);
|
||
|
|
this.gitInv6 = this.gitInv6 || invert(this.git6);
|
||
|
|
this.gitInv7 = this.gitInv7 || invert(this.git7);
|
||
|
|
this.gitBranchLabel0 = this.gitBranchLabel0 || invert(this.labelTextColor);
|
||
|
|
this.gitBranchLabel1 = this.gitBranchLabel1 || this.labelTextColor;
|
||
|
|
this.gitBranchLabel2 = this.gitBranchLabel2 || this.labelTextColor;
|
||
|
|
this.gitBranchLabel3 = this.gitBranchLabel3 || invert(this.labelTextColor);
|
||
|
|
this.gitBranchLabel4 = this.gitBranchLabel4 || this.labelTextColor;
|
||
|
|
this.gitBranchLabel5 = this.gitBranchLabel5 || this.labelTextColor;
|
||
|
|
this.gitBranchLabel6 = this.gitBranchLabel6 || this.labelTextColor;
|
||
|
|
this.gitBranchLabel7 = this.gitBranchLabel7 || this.labelTextColor;
|
||
|
|
this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
|
||
|
|
this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;
|
||
|
|
this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;
|
||
|
|
this.tagLabelFontSize = this.tagLabelFontSize || "10px";
|
||
|
|
this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
|
||
|
|
this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
|
||
|
|
this.commitLabelFontSize = this.commitLabelFontSize || "10px";
|
||
|
|
this.attributeBackgroundColorOdd = this.attributeBackgroundColorOdd || oldAttributeBackgroundColorOdd;
|
||
|
|
this.attributeBackgroundColorEven = this.attributeBackgroundColorEven || oldAttributeBackgroundColorEven;
|
||
|
|
}
|
||
|
|
calculate(overrides) {
|
||
|
|
if (typeof overrides !== "object") {
|
||
|
|
this.updateColors();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const keys = Object.keys(overrides);
|
||
|
|
keys.forEach((k) => {
|
||
|
|
this[k] = overrides[k];
|
||
|
|
});
|
||
|
|
this.updateColors();
|
||
|
|
keys.forEach((k) => {
|
||
|
|
this[k] = overrides[k];
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const getThemeVariables$2 = (userOverrides) => {
|
||
|
|
const theme2 = new Theme$2();
|
||
|
|
theme2.calculate(userOverrides);
|
||
|
|
return theme2;
|
||
|
|
};
|
||
|
|
let Theme$1 = class Theme4 {
|
||
|
|
constructor() {
|
||
|
|
this.background = "#f4f4f4";
|
||
|
|
this.primaryColor = "#cde498";
|
||
|
|
this.secondaryColor = "#cdffb2";
|
||
|
|
this.background = "white";
|
||
|
|
this.mainBkg = "#cde498";
|
||
|
|
this.secondBkg = "#cdffb2";
|
||
|
|
this.lineColor = "green";
|
||
|
|
this.border1 = "#13540c";
|
||
|
|
this.border2 = "#6eaa49";
|
||
|
|
this.arrowheadColor = "green";
|
||
|
|
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
|
||
|
|
this.fontSize = "16px";
|
||
|
|
this.tertiaryColor = lighten("#cde498", 10);
|
||
|
|
this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
|
||
|
|
this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
|
||
|
|
this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
|
||
|
|
this.primaryTextColor = invert(this.primaryColor);
|
||
|
|
this.secondaryTextColor = invert(this.secondaryColor);
|
||
|
|
this.tertiaryTextColor = invert(this.primaryColor);
|
||
|
|
this.lineColor = invert(this.background);
|
||
|
|
this.textColor = invert(this.background);
|
||
|
|
this.THEME_COLOR_LIMIT = 12;
|
||
|
|
this.nodeBkg = "calculated";
|
||
|
|
this.nodeBorder = "calculated";
|
||
|
|
this.clusterBkg = "calculated";
|
||
|
|
this.clusterBorder = "calculated";
|
||
|
|
this.defaultLinkColor = "calculated";
|
||
|
|
this.titleColor = "#333";
|
||
|
|
this.edgeLabelBackground = "#e8e8e8";
|
||
|
|
this.actorBorder = "calculated";
|
||
|
|
this.actorBkg = "calculated";
|
||
|
|
this.actorTextColor = "black";
|
||
|
|
this.actorLineColor = "grey";
|
||
|
|
this.signalColor = "#333";
|
||
|
|
this.signalTextColor = "#333";
|
||
|
|
this.labelBoxBkgColor = "calculated";
|
||
|
|
this.labelBoxBorderColor = "#326932";
|
||
|
|
this.labelTextColor = "calculated";
|
||
|
|
this.loopTextColor = "calculated";
|
||
|
|
this.noteBorderColor = "calculated";
|
||
|
|
this.noteBkgColor = "#fff5ad";
|
||
|
|
this.noteTextColor = "calculated";
|
||
|
|
this.activationBorderColor = "#666";
|
||
|
|
this.activationBkgColor = "#f4f4f4";
|
||
|
|
this.sequenceNumberColor = "white";
|
||
|
|
this.sectionBkgColor = "#6eaa49";
|
||
|
|
this.altSectionBkgColor = "white";
|
||
|
|
this.sectionBkgColor2 = "#6eaa49";
|
||
|
|
this.excludeBkgColor = "#eeeeee";
|
||
|
|
this.taskBorderColor = "calculated";
|
||
|
|
this.taskBkgColor = "#487e3a";
|
||
|
|
this.taskTextLightColor = "white";
|
||
|
|
this.taskTextColor = "calculated";
|
||
|
|
this.taskTextDarkColor = "black";
|
||
|
|
this.taskTextOutsideColor = "calculated";
|
||
|
|
this.taskTextClickableColor = "#003163";
|
||
|
|
this.activeTaskBorderColor = "calculated";
|
||
|
|
this.activeTaskBkgColor = "calculated";
|
||
|
|
this.gridColor = "lightgrey";
|
||
|
|
this.doneTaskBkgColor = "lightgrey";
|
||
|
|
this.doneTaskBorderColor = "grey";
|
||
|
|
this.critBorderColor = "#ff8888";
|
||
|
|
this.critBkgColor = "red";
|
||
|
|
this.todayLineColor = "red";
|
||
|
|
this.personBorder = "calculated";
|
||
|
|
this.personBkg = "calculated";
|
||
|
|
this.labelColor = "black";
|
||
|
|
this.errorBkgColor = "#552222";
|
||
|
|
this.errorTextColor = "#552222";
|
||
|
|
}
|
||
|
|
updateColors() {
|
||
|
|
this.cScale0 = this.cScale0 || this.primaryColor;
|
||
|
|
this.cScale1 = this.cScale1 || this.secondaryColor;
|
||
|
|
this.cScale2 = this.cScale2 || this.tertiaryColor;
|
||
|
|
this.cScale3 = this.cScale3 || adjust(this.primaryColor, { h: 30 });
|
||
|
|
this.cScale4 = this.cScale4 || adjust(this.primaryColor, { h: 60 });
|
||
|
|
this.cScale5 = this.cScale5 || adjust(this.primaryColor, { h: 90 });
|
||
|
|
this.cScale6 = this.cScale6 || adjust(this.primaryColor, { h: 120 });
|
||
|
|
this.cScale7 = this.cScale7 || adjust(this.primaryColor, { h: 150 });
|
||
|
|
this.cScale8 = this.cScale8 || adjust(this.primaryColor, { h: 210 });
|
||
|
|
this.cScale9 = this.cScale9 || adjust(this.primaryColor, { h: 270 });
|
||
|
|
this.cScale10 = this.cScale10 || adjust(this.primaryColor, { h: 300 });
|
||
|
|
this.cScale11 = this.cScale11 || adjust(this.primaryColor, { h: 330 });
|
||
|
|
this["cScalePeer" + 1] = this["cScalePeer" + 1] || darken(this.secondaryColor, 45);
|
||
|
|
this["cScalePeer" + 2] = this["cScalePeer" + 2] || darken(this.tertiaryColor, 40);
|
||
|
|
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
|
||
|
|
this["cScale" + i] = darken(this["cScale" + i], 10);
|
||
|
|
this["cScalePeer" + i] = this["cScalePeer" + i] || darken(this["cScale" + i], 25);
|
||
|
|
}
|
||
|
|
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
|
||
|
|
this["cScaleInv" + i] = this["cScaleInv" + i] || adjust(this["cScale" + i], { h: 180 });
|
||
|
|
}
|
||
|
|
this.scaleLabelColor = this.scaleLabelColor !== "calculated" && this.scaleLabelColor ? this.scaleLabelColor : this.labelTextColor;
|
||
|
|
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
|
||
|
|
this["cScaleLabel" + i] = this["cScaleLabel" + i] || this.scaleLabelColor;
|
||
|
|
}
|
||
|
|
for (let i = 0; i < 5; i++) {
|
||
|
|
this["surface" + i] = this["surface" + i] || adjust(this.mainBkg, { h: 30, s: -30, l: -(5 + i * 5) });
|
||
|
|
this["surfacePeer" + i] = this["surfacePeer" + i] || adjust(this.mainBkg, { h: 30, s: -30, l: -(8 + i * 5) });
|
||
|
|
}
|
||
|
|
this.nodeBkg = this.mainBkg;
|
||
|
|
this.nodeBorder = this.border1;
|
||
|
|
this.clusterBkg = this.secondBkg;
|
||
|
|
this.clusterBorder = this.border2;
|
||
|
|
this.defaultLinkColor = this.lineColor;
|
||
|
|
this.actorBorder = darken(this.mainBkg, 20);
|
||
|
|
this.actorBkg = this.mainBkg;
|
||
|
|
this.labelBoxBkgColor = this.actorBkg;
|
||
|
|
this.labelTextColor = this.actorTextColor;
|
||
|
|
this.loopTextColor = this.actorTextColor;
|
||
|
|
this.noteBorderColor = this.border2;
|
||
|
|
this.noteTextColor = this.actorTextColor;
|
||
|
|
this.taskBorderColor = this.border1;
|
||
|
|
this.taskTextColor = this.taskTextLightColor;
|
||
|
|
this.taskTextOutsideColor = this.taskTextDarkColor;
|
||
|
|
this.activeTaskBorderColor = this.taskBorderColor;
|
||
|
|
this.activeTaskBkgColor = this.mainBkg;
|
||
|
|
this.transitionColor = this.transitionColor || this.lineColor;
|
||
|
|
this.transitionLabelColor = this.transitionLabelColor || this.textColor;
|
||
|
|
this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;
|
||
|
|
this.stateBkg = this.stateBkg || this.mainBkg;
|
||
|
|
this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
|
||
|
|
this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
|
||
|
|
this.altBackground = this.altBackground || "#f0f0f0";
|
||
|
|
this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
|
||
|
|
this.compositeBorder = this.compositeBorder || this.nodeBorder;
|
||
|
|
this.innerEndBackground = this.primaryBorderColor;
|
||
|
|
this.specialStateColor = this.lineColor;
|
||
|
|
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
|
||
|
|
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
|
||
|
|
this.transitionColor = this.transitionColor || this.lineColor;
|
||
|
|
this.classText = this.primaryTextColor;
|
||
|
|
this.fillType0 = this.primaryColor;
|
||
|
|
this.fillType1 = this.secondaryColor;
|
||
|
|
this.fillType2 = adjust(this.primaryColor, { h: 64 });
|
||
|
|
this.fillType3 = adjust(this.secondaryColor, { h: 64 });
|
||
|
|
this.fillType4 = adjust(this.primaryColor, { h: -64 });
|
||
|
|
this.fillType5 = adjust(this.secondaryColor, { h: -64 });
|
||
|
|
this.fillType6 = adjust(this.primaryColor, { h: 128 });
|
||
|
|
this.fillType7 = adjust(this.secondaryColor, { h: 128 });
|
||
|
|
this.pie1 = this.pie1 || this.primaryColor;
|
||
|
|
this.pie2 = this.pie2 || this.secondaryColor;
|
||
|
|
this.pie3 = this.pie3 || this.tertiaryColor;
|
||
|
|
this.pie4 = this.pie4 || adjust(this.primaryColor, { l: -30 });
|
||
|
|
this.pie5 = this.pie5 || adjust(this.secondaryColor, { l: -30 });
|
||
|
|
this.pie6 = this.pie6 || adjust(this.tertiaryColor, { h: 40, l: -40 });
|
||
|
|
this.pie7 = this.pie7 || adjust(this.primaryColor, { h: 60, l: -10 });
|
||
|
|
this.pie8 = this.pie8 || adjust(this.primaryColor, { h: -60, l: -10 });
|
||
|
|
this.pie9 = this.pie9 || adjust(this.primaryColor, { h: 120, l: 0 });
|
||
|
|
this.pie10 = this.pie10 || adjust(this.primaryColor, { h: 60, l: -50 });
|
||
|
|
this.pie11 = this.pie11 || adjust(this.primaryColor, { h: -60, l: -50 });
|
||
|
|
this.pie12 = this.pie12 || adjust(this.primaryColor, { h: 120, l: -50 });
|
||
|
|
this.pieTitleTextSize = this.pieTitleTextSize || "25px";
|
||
|
|
this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;
|
||
|
|
this.pieSectionTextSize = this.pieSectionTextSize || "17px";
|
||
|
|
this.pieSectionTextColor = this.pieSectionTextColor || this.textColor;
|
||
|
|
this.pieLegendTextSize = this.pieLegendTextSize || "17px";
|
||
|
|
this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
|
||
|
|
this.pieStrokeColor = this.pieStrokeColor || "black";
|
||
|
|
this.pieStrokeWidth = this.pieStrokeWidth || "2px";
|
||
|
|
this.pieOpacity = this.pieOpacity || "0.7";
|
||
|
|
this.requirementBackground = this.requirementBackground || this.primaryColor;
|
||
|
|
this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;
|
||
|
|
this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor;
|
||
|
|
this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;
|
||
|
|
this.relationColor = this.relationColor || this.lineColor;
|
||
|
|
this.relationLabelBackground = this.relationLabelBackground || this.edgeLabelBackground;
|
||
|
|
this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
|
||
|
|
this.git0 = this.git0 || this.primaryColor;
|
||
|
|
this.git1 = this.git1 || this.secondaryColor;
|
||
|
|
this.git2 = this.git2 || this.tertiaryColor;
|
||
|
|
this.git3 = this.git3 || adjust(this.primaryColor, { h: -30 });
|
||
|
|
this.git4 = this.git4 || adjust(this.primaryColor, { h: -60 });
|
||
|
|
this.git5 = this.git5 || adjust(this.primaryColor, { h: -90 });
|
||
|
|
this.git6 = this.git6 || adjust(this.primaryColor, { h: 60 });
|
||
|
|
this.git7 = this.git7 || adjust(this.primaryColor, { h: 120 });
|
||
|
|
if (this.darkMode) {
|
||
|
|
this.git0 = lighten(this.git0, 25);
|
||
|
|
this.git1 = lighten(this.git1, 25);
|
||
|
|
this.git2 = lighten(this.git2, 25);
|
||
|
|
this.git3 = lighten(this.git3, 25);
|
||
|
|
this.git4 = lighten(this.git4, 25);
|
||
|
|
this.git5 = lighten(this.git5, 25);
|
||
|
|
this.git6 = lighten(this.git6, 25);
|
||
|
|
this.git7 = lighten(this.git7, 25);
|
||
|
|
} else {
|
||
|
|
this.git0 = darken(this.git0, 25);
|
||
|
|
this.git1 = darken(this.git1, 25);
|
||
|
|
this.git2 = darken(this.git2, 25);
|
||
|
|
this.git3 = darken(this.git3, 25);
|
||
|
|
this.git4 = darken(this.git4, 25);
|
||
|
|
this.git5 = darken(this.git5, 25);
|
||
|
|
this.git6 = darken(this.git6, 25);
|
||
|
|
this.git7 = darken(this.git7, 25);
|
||
|
|
}
|
||
|
|
this.gitInv0 = this.gitInv0 || invert(this.git0);
|
||
|
|
this.gitInv1 = this.gitInv1 || invert(this.git1);
|
||
|
|
this.gitInv2 = this.gitInv2 || invert(this.git2);
|
||
|
|
this.gitInv3 = this.gitInv3 || invert(this.git3);
|
||
|
|
this.gitInv4 = this.gitInv4 || invert(this.git4);
|
||
|
|
this.gitInv5 = this.gitInv5 || invert(this.git5);
|
||
|
|
this.gitInv6 = this.gitInv6 || invert(this.git6);
|
||
|
|
this.gitInv7 = this.gitInv7 || invert(this.git7);
|
||
|
|
this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
|
||
|
|
this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;
|
||
|
|
this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;
|
||
|
|
this.tagLabelFontSize = this.tagLabelFontSize || "10px";
|
||
|
|
this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
|
||
|
|
this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
|
||
|
|
this.commitLabelFontSize = this.commitLabelFontSize || "10px";
|
||
|
|
this.attributeBackgroundColorOdd = this.attributeBackgroundColorOdd || oldAttributeBackgroundColorOdd;
|
||
|
|
this.attributeBackgroundColorEven = this.attributeBackgroundColorEven || oldAttributeBackgroundColorEven;
|
||
|
|
}
|
||
|
|
calculate(overrides) {
|
||
|
|
if (typeof overrides !== "object") {
|
||
|
|
this.updateColors();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const keys = Object.keys(overrides);
|
||
|
|
keys.forEach((k) => {
|
||
|
|
this[k] = overrides[k];
|
||
|
|
});
|
||
|
|
this.updateColors();
|
||
|
|
keys.forEach((k) => {
|
||
|
|
this[k] = overrides[k];
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const getThemeVariables$1 = (userOverrides) => {
|
||
|
|
const theme2 = new Theme$1();
|
||
|
|
theme2.calculate(userOverrides);
|
||
|
|
return theme2;
|
||
|
|
};
|
||
|
|
class Theme5 {
|
||
|
|
constructor() {
|
||
|
|
this.primaryColor = "#eee";
|
||
|
|
this.contrast = "#707070";
|
||
|
|
this.secondaryColor = lighten(this.contrast, 55);
|
||
|
|
this.background = "#ffffff";
|
||
|
|
this.tertiaryColor = adjust(this.primaryColor, { h: -160 });
|
||
|
|
this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
|
||
|
|
this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
|
||
|
|
this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
|
||
|
|
this.primaryTextColor = invert(this.primaryColor);
|
||
|
|
this.secondaryTextColor = invert(this.secondaryColor);
|
||
|
|
this.tertiaryTextColor = invert(this.tertiaryColor);
|
||
|
|
this.lineColor = invert(this.background);
|
||
|
|
this.textColor = invert(this.background);
|
||
|
|
this.mainBkg = "#eee";
|
||
|
|
this.secondBkg = "calculated";
|
||
|
|
this.lineColor = "#666";
|
||
|
|
this.border1 = "#999";
|
||
|
|
this.border2 = "calculated";
|
||
|
|
this.note = "#ffa";
|
||
|
|
this.text = "#333";
|
||
|
|
this.critical = "#d42";
|
||
|
|
this.done = "#bbb";
|
||
|
|
this.arrowheadColor = "#333333";
|
||
|
|
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
|
||
|
|
this.fontSize = "16px";
|
||
|
|
this.THEME_COLOR_LIMIT = 12;
|
||
|
|
this.nodeBkg = "calculated";
|
||
|
|
this.nodeBorder = "calculated";
|
||
|
|
this.clusterBkg = "calculated";
|
||
|
|
this.clusterBorder = "calculated";
|
||
|
|
this.defaultLinkColor = "calculated";
|
||
|
|
this.titleColor = "calculated";
|
||
|
|
this.edgeLabelBackground = "white";
|
||
|
|
this.actorBorder = "calculated";
|
||
|
|
this.actorBkg = "calculated";
|
||
|
|
this.actorTextColor = "calculated";
|
||
|
|
this.actorLineColor = "calculated";
|
||
|
|
this.signalColor = "calculated";
|
||
|
|
this.signalTextColor = "calculated";
|
||
|
|
this.labelBoxBkgColor = "calculated";
|
||
|
|
this.labelBoxBorderColor = "calculated";
|
||
|
|
this.labelTextColor = "calculated";
|
||
|
|
this.loopTextColor = "calculated";
|
||
|
|
this.noteBorderColor = "calculated";
|
||
|
|
this.noteBkgColor = "calculated";
|
||
|
|
this.noteTextColor = "calculated";
|
||
|
|
this.activationBorderColor = "#666";
|
||
|
|
this.activationBkgColor = "#f4f4f4";
|
||
|
|
this.sequenceNumberColor = "white";
|
||
|
|
this.sectionBkgColor = "calculated";
|
||
|
|
this.altSectionBkgColor = "white";
|
||
|
|
this.sectionBkgColor2 = "calculated";
|
||
|
|
this.excludeBkgColor = "#eeeeee";
|
||
|
|
this.taskBorderColor = "calculated";
|
||
|
|
this.taskBkgColor = "calculated";
|
||
|
|
this.taskTextLightColor = "white";
|
||
|
|
this.taskTextColor = "calculated";
|
||
|
|
this.taskTextDarkColor = "calculated";
|
||
|
|
this.taskTextOutsideColor = "calculated";
|
||
|
|
this.taskTextClickableColor = "#003163";
|
||
|
|
this.activeTaskBorderColor = "calculated";
|
||
|
|
this.activeTaskBkgColor = "calculated";
|
||
|
|
this.gridColor = "calculated";
|
||
|
|
this.doneTaskBkgColor = "calculated";
|
||
|
|
this.doneTaskBorderColor = "calculated";
|
||
|
|
this.critBkgColor = "calculated";
|
||
|
|
this.critBorderColor = "calculated";
|
||
|
|
this.todayLineColor = "calculated";
|
||
|
|
this.personBorder = "calculated";
|
||
|
|
this.personBkg = "calculated";
|
||
|
|
this.labelColor = "black";
|
||
|
|
this.errorBkgColor = "#552222";
|
||
|
|
this.errorTextColor = "#552222";
|
||
|
|
}
|
||
|
|
updateColors() {
|
||
|
|
this.secondBkg = lighten(this.contrast, 55);
|
||
|
|
this.border2 = this.contrast;
|
||
|
|
this.cScale0 = this.cScale0 || "#555";
|
||
|
|
this.cScale1 = this.cScale1 || "#F4F4F4";
|
||
|
|
this.cScale2 = this.cScale2 || "#555";
|
||
|
|
this.cScale3 = this.cScale3 || "#BBB";
|
||
|
|
this.cScale4 = this.cScale4 || "#777";
|
||
|
|
this.cScale5 = this.cScale5 || "#999";
|
||
|
|
this.cScale6 = this.cScale6 || "#DDD";
|
||
|
|
this.cScale7 = this.cScale7 || "#FFF";
|
||
|
|
this.cScale8 = this.cScale8 || "#DDD";
|
||
|
|
this.cScale9 = this.cScale9 || "#BBB";
|
||
|
|
this.cScale10 = this.cScale10 || "#999";
|
||
|
|
this.cScale11 = this.cScale11 || "#777";
|
||
|
|
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
|
||
|
|
this["cScaleInv" + i] = this["cScaleInv" + i] || invert(this["cScale" + i]);
|
||
|
|
}
|
||
|
|
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
|
||
|
|
if (this.darkMode) {
|
||
|
|
this["cScalePeer" + i] = this["cScalePeer" + i] || lighten(this["cScale" + i], 10);
|
||
|
|
} else {
|
||
|
|
this["cScalePeer" + i] = this["cScalePeer" + i] || darken(this["cScale" + i], 10);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.scaleLabelColor = this.scaleLabelColor || (this.darkMode ? "black" : this.labelTextColor);
|
||
|
|
this["cScaleLabel0"] = this["cScaleLabel0"] || this.cScale1;
|
||
|
|
this["cScaleLabel2"] = this["cScaleLabel2"] || this.cScale1;
|
||
|
|
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
|
||
|
|
this["cScaleLabel" + i] = this["cScaleLabel" + i] || this.scaleLabelColor;
|
||
|
|
}
|
||
|
|
for (let i = 0; i < 5; i++) {
|
||
|
|
this["surface" + i] = this["surface" + i] || adjust(this.mainBkg, { l: -(5 + i * 5) });
|
||
|
|
this["surfacePeer" + i] = this["surfacePeer" + i] || adjust(this.mainBkg, { l: -(8 + i * 5) });
|
||
|
|
}
|
||
|
|
this.nodeBkg = this.mainBkg;
|
||
|
|
this.nodeBorder = this.border1;
|
||
|
|
this.clusterBkg = this.secondBkg;
|
||
|
|
this.clusterBorder = this.border2;
|
||
|
|
this.defaultLinkColor = this.lineColor;
|
||
|
|
this.titleColor = this.text;
|
||
|
|
this.actorBorder = lighten(this.border1, 23);
|
||
|
|
this.actorBkg = this.mainBkg;
|
||
|
|
this.actorTextColor = this.text;
|
||
|
|
this.actorLineColor = this.lineColor;
|
||
|
|
this.signalColor = this.text;
|
||
|
|
this.signalTextColor = this.text;
|
||
|
|
this.labelBoxBkgColor = this.actorBkg;
|
||
|
|
this.labelBoxBorderColor = this.actorBorder;
|
||
|
|
this.labelTextColor = this.text;
|
||
|
|
this.loopTextColor = this.text;
|
||
|
|
this.noteBorderColor = "#999";
|
||
|
|
this.noteBkgColor = "#666";
|
||
|
|
this.noteTextColor = "#fff";
|
||
|
|
this.sectionBkgColor = lighten(this.contrast, 30);
|
||
|
|
this.sectionBkgColor2 = lighten(this.contrast, 30);
|
||
|
|
this.taskBorderColor = darken(this.contrast, 10);
|
||
|
|
this.taskBkgColor = this.contrast;
|
||
|
|
this.taskTextColor = this.taskTextLightColor;
|
||
|
|
this.taskTextDarkColor = this.text;
|
||
|
|
this.taskTextOutsideColor = this.taskTextDarkColor;
|
||
|
|
this.activeTaskBorderColor = this.taskBorderColor;
|
||
|
|
this.activeTaskBkgColor = this.mainBkg;
|
||
|
|
this.gridColor = lighten(this.border1, 30);
|
||
|
|
this.doneTaskBkgColor = this.done;
|
||
|
|
this.doneTaskBorderColor = this.lineColor;
|
||
|
|
this.critBkgColor = this.critical;
|
||
|
|
this.critBorderColor = darken(this.critBkgColor, 10);
|
||
|
|
this.todayLineColor = this.critBkgColor;
|
||
|
|
this.transitionColor = this.transitionColor || "#000";
|
||
|
|
this.transitionLabelColor = this.transitionLabelColor || this.textColor;
|
||
|
|
this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;
|
||
|
|
this.stateBkg = this.stateBkg || this.mainBkg;
|
||
|
|
this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
|
||
|
|
this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
|
||
|
|
this.altBackground = this.altBackground || "#f4f4f4";
|
||
|
|
this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
|
||
|
|
this.stateBorder = this.stateBorder || "#000";
|
||
|
|
this.innerEndBackground = this.primaryBorderColor;
|
||
|
|
this.specialStateColor = "#222";
|
||
|
|
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
|
||
|
|
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
|
||
|
|
this.classText = this.primaryTextColor;
|
||
|
|
this.fillType0 = this.primaryColor;
|
||
|
|
this.fillType1 = this.secondaryColor;
|
||
|
|
this.fillType2 = adjust(this.primaryColor, { h: 64 });
|
||
|
|
this.fillType3 = adjust(this.secondaryColor, { h: 64 });
|
||
|
|
this.fillType4 = adjust(this.primaryColor, { h: -64 });
|
||
|
|
this.fillType5 = adjust(this.secondaryColor, { h: -64 });
|
||
|
|
this.fillType6 = adjust(this.primaryColor, { h: 128 });
|
||
|
|
this.fillType7 = adjust(this.secondaryColor, { h: 128 });
|
||
|
|
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
|
||
|
|
this["pie" + i] = this["cScale" + i];
|
||
|
|
}
|
||
|
|
this.pie12 = this.pie0;
|
||
|
|
this.pieTitleTextSize = this.pieTitleTextSize || "25px";
|
||
|
|
this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;
|
||
|
|
this.pieSectionTextSize = this.pieSectionTextSize || "17px";
|
||
|
|
this.pieSectionTextColor = this.pieSectionTextColor || this.textColor;
|
||
|
|
this.pieLegendTextSize = this.pieLegendTextSize || "17px";
|
||
|
|
this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
|
||
|
|
this.pieStrokeColor = this.pieStrokeColor || "black";
|
||
|
|
this.pieStrokeWidth = this.pieStrokeWidth || "2px";
|
||
|
|
this.pieOpacity = this.pieOpacity || "0.7";
|
||
|
|
this.requirementBackground = this.requirementBackground || this.primaryColor;
|
||
|
|
this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;
|
||
|
|
this.requirementBorderSize = this.requirementBorderSize || this.primaryBorderColor;
|
||
|
|
this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;
|
||
|
|
this.relationColor = this.relationColor || this.lineColor;
|
||
|
|
this.relationLabelBackground = this.relationLabelBackground || this.edgeLabelBackground;
|
||
|
|
this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
|
||
|
|
this.git0 = darken(this.pie1, 25) || this.primaryColor;
|
||
|
|
this.git1 = this.pie2 || this.secondaryColor;
|
||
|
|
this.git2 = this.pie3 || this.tertiaryColor;
|
||
|
|
this.git3 = this.pie4 || adjust(this.primaryColor, { h: -30 });
|
||
|
|
this.git4 = this.pie5 || adjust(this.primaryColor, { h: -60 });
|
||
|
|
this.git5 = this.pie6 || adjust(this.primaryColor, { h: -90 });
|
||
|
|
this.git6 = this.pie7 || adjust(this.primaryColor, { h: 60 });
|
||
|
|
this.git7 = this.pie8 || adjust(this.primaryColor, { h: 120 });
|
||
|
|
this.gitInv0 = this.gitInv0 || invert(this.git0);
|
||
|
|
this.gitInv1 = this.gitInv1 || invert(this.git1);
|
||
|
|
this.gitInv2 = this.gitInv2 || invert(this.git2);
|
||
|
|
this.gitInv3 = this.gitInv3 || invert(this.git3);
|
||
|
|
this.gitInv4 = this.gitInv4 || invert(this.git4);
|
||
|
|
this.gitInv5 = this.gitInv5 || invert(this.git5);
|
||
|
|
this.gitInv6 = this.gitInv6 || invert(this.git6);
|
||
|
|
this.gitInv7 = this.gitInv7 || invert(this.git7);
|
||
|
|
this.branchLabelColor = this.branchLabelColor || this.labelTextColor;
|
||
|
|
this.gitBranchLabel0 = this.branchLabelColor;
|
||
|
|
this.gitBranchLabel1 = "white";
|
||
|
|
this.gitBranchLabel2 = this.branchLabelColor;
|
||
|
|
this.gitBranchLabel3 = "white";
|
||
|
|
this.gitBranchLabel4 = this.branchLabelColor;
|
||
|
|
this.gitBranchLabel5 = this.branchLabelColor;
|
||
|
|
this.gitBranchLabel6 = this.branchLabelColor;
|
||
|
|
this.gitBranchLabel7 = this.branchLabelColor;
|
||
|
|
this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
|
||
|
|
this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;
|
||
|
|
this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;
|
||
|
|
this.tagLabelFontSize = this.tagLabelFontSize || "10px";
|
||
|
|
this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
|
||
|
|
this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
|
||
|
|
this.commitLabelFontSize = this.commitLabelFontSize || "10px";
|
||
|
|
this.attributeBackgroundColorOdd = this.attributeBackgroundColorOdd || oldAttributeBackgroundColorOdd;
|
||
|
|
this.attributeBackgroundColorEven = this.attributeBackgroundColorEven || oldAttributeBackgroundColorEven;
|
||
|
|
}
|
||
|
|
calculate(overrides) {
|
||
|
|
if (typeof overrides !== "object") {
|
||
|
|
this.updateColors();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const keys = Object.keys(overrides);
|
||
|
|
keys.forEach((k) => {
|
||
|
|
this[k] = overrides[k];
|
||
|
|
});
|
||
|
|
this.updateColors();
|
||
|
|
keys.forEach((k) => {
|
||
|
|
this[k] = overrides[k];
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const getThemeVariables = (userOverrides) => {
|
||
|
|
const theme2 = new Theme5();
|
||
|
|
theme2.calculate(userOverrides);
|
||
|
|
return theme2;
|
||
|
|
};
|
||
|
|
const theme = {
|
||
|
|
base: {
|
||
|
|
getThemeVariables: getThemeVariables$4
|
||
|
|
},
|
||
|
|
dark: {
|
||
|
|
getThemeVariables: getThemeVariables$3
|
||
|
|
},
|
||
|
|
default: {
|
||
|
|
getThemeVariables: getThemeVariables$2
|
||
|
|
},
|
||
|
|
forest: {
|
||
|
|
getThemeVariables: getThemeVariables$1
|
||
|
|
},
|
||
|
|
neutral: {
|
||
|
|
getThemeVariables
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const config = {
|
||
|
|
/**
|
||
|
|
* Theme , the CSS style sheet
|
||
|
|
*
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------- | --------------- | ------ | -------- | ---------------------------------------------- |
|
||
|
|
* | theme | Built in Themes | string | Optional | 'default', 'forest', 'dark', 'neutral', 'null' |
|
||
|
|
*
|
||
|
|
* **Notes:** To disable any pre-defined mermaid theme, use "null".
|
||
|
|
*
|
||
|
|
* @example
|
||
|
|
*
|
||
|
|
* ```js
|
||
|
|
* {
|
||
|
|
* "theme": "forest",
|
||
|
|
* "themeCSS": ".node rect { fill: red; }"
|
||
|
|
* }
|
||
|
|
* ```
|
||
|
|
*/
|
||
|
|
theme: "default",
|
||
|
|
themeVariables: theme["default"].getThemeVariables(),
|
||
|
|
themeCSS: void 0,
|
||
|
|
/* **maxTextSize** - The maximum allowed size of the users text diagram */
|
||
|
|
maxTextSize: 5e4,
|
||
|
|
darkMode: false,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ---------- | ------------------------------------------------------ | ------ | -------- | --------------------------- |
|
||
|
|
* | fontFamily | specifies the font to be used in the rendered diagrams | string | Required | Any Possible CSS FontFamily |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: '"trebuchet ms", verdana, arial, sans-serif;'.
|
||
|
|
*/
|
||
|
|
fontFamily: '"trebuchet ms", verdana, arial, sans-serif;',
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------- | ----------------------------------------------------- | ---------------- | -------- | --------------------------------------------- |
|
||
|
|
* | logLevel | This option decides the amount of logging to be used. | string \| number | Required | 'trace','debug','info','warn','error','fatal' |
|
||
|
|
*
|
||
|
|
* **Notes:**
|
||
|
|
*
|
||
|
|
* - Trace: 0
|
||
|
|
* - Debug: 1
|
||
|
|
* - Info: 2
|
||
|
|
* - Warn: 3
|
||
|
|
* - Error: 4
|
||
|
|
* - Fatal: 5 (default)
|
||
|
|
*/
|
||
|
|
logLevel: 5,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ |
|
||
|
|
* | securityLevel | Level of trust for parsed diagram | string | Required | 'sandbox', 'strict', 'loose', 'antiscript' |
|
||
|
|
*
|
||
|
|
* **Notes**:
|
||
|
|
*
|
||
|
|
* - **strict**: (**default**) tags in text are encoded, click functionality is disabled
|
||
|
|
* - **loose**: tags in text are allowed, click functionality is enabled
|
||
|
|
* - **antiscript**: html tags in text are allowed, (only script element is removed), click
|
||
|
|
* functionality is enabled
|
||
|
|
* - **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This
|
||
|
|
* prevent any JavaScript from running in the context. This may hinder interactive functionality
|
||
|
|
* of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc.
|
||
|
|
*/
|
||
|
|
securityLevel: "strict",
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ----------- | -------------------------------------------- | ------- | -------- | ----------- |
|
||
|
|
* | startOnLoad | Dictates whether mermaid starts on Page load | boolean | Required | true, false |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: true
|
||
|
|
*/
|
||
|
|
startOnLoad: true,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ------------------- | ---------------------------------------------------------------------------- | ------- | -------- | ----------- |
|
||
|
|
* | arrowMarkerAbsolute | Controls whether or arrow markers in html code are absolute paths or anchors | boolean | Required | true, false |
|
||
|
|
*
|
||
|
|
* **Notes**:
|
||
|
|
*
|
||
|
|
* This matters if you are using base tag settings.
|
||
|
|
*
|
||
|
|
* Default value: false
|
||
|
|
*/
|
||
|
|
arrowMarkerAbsolute: false,
|
||
|
|
/**
|
||
|
|
* This option controls which currentConfig keys are considered _secure_ and can only be changed
|
||
|
|
* via call to mermaidAPI.initialize. Calls to mermaidAPI.reinitialize cannot make changes to the
|
||
|
|
* `secure` keys in the current currentConfig. This prevents malicious graph directives from
|
||
|
|
* overriding a site's default security.
|
||
|
|
*
|
||
|
|
* **Notes**:
|
||
|
|
*
|
||
|
|
* Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
|
||
|
|
*/
|
||
|
|
secure: ["secure", "securityLevel", "startOnLoad", "maxTextSize"],
|
||
|
|
/**
|
||
|
|
* This option controls if the generated ids of nodes in the SVG are generated randomly or based
|
||
|
|
* on a seed. If set to false, the IDs are generated based on the current date and thus are not
|
||
|
|
* deterministic. This is the default behavior.
|
||
|
|
*
|
||
|
|
* **Notes**:
|
||
|
|
*
|
||
|
|
* This matters if your files are checked into source control e.g. git and should not change unless
|
||
|
|
* content is changed.
|
||
|
|
*
|
||
|
|
* Default value: false
|
||
|
|
*/
|
||
|
|
deterministicIds: false,
|
||
|
|
/**
|
||
|
|
* This option is the optional seed for deterministic ids. if set to undefined but
|
||
|
|
* deterministicIds is true, a simple number iterator is used. You can set this attribute to base
|
||
|
|
* the seed on a static string.
|
||
|
|
*/
|
||
|
|
deterministicIDSeed: void 0,
|
||
|
|
/** The object containing configurations specific for flowcharts */
|
||
|
|
flowchart: {
|
||
|
|
/**
|
||
|
|
* ### titleTopMargin
|
||
|
|
*
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | titleTopMargin | Margin top for the text over the flowchart | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 25
|
||
|
|
*/
|
||
|
|
titleTopMargin: 25,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | diagramPadding | Amount of padding around the diagram as a whole | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:**
|
||
|
|
*
|
||
|
|
* The amount of padding around the diagram as a whole so that embedded diagrams have margins,
|
||
|
|
* expressed in pixels
|
||
|
|
*
|
||
|
|
* Default value: 8
|
||
|
|
*/
|
||
|
|
diagramPadding: 8,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ---------- | -------------------------------------------------------------------------------------------- | ------- | -------- | ----------- |
|
||
|
|
* | htmlLabels | Flag for setting whether or not a html tag should be used for rendering labels on the edges. | boolean | Required | true, false |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: true.
|
||
|
|
*/
|
||
|
|
htmlLabels: true,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ----------- | --------------------------------------------------- | ------- | -------- | ------------------- |
|
||
|
|
* | nodeSpacing | Defines the spacing between nodes on the same level | Integer | Required | Any positive Number |
|
||
|
|
*
|
||
|
|
* **Notes:**
|
||
|
|
*
|
||
|
|
* Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, and the
|
||
|
|
* vertical spacing for LR as well as RL graphs.**
|
||
|
|
*
|
||
|
|
* Default value: 50
|
||
|
|
*/
|
||
|
|
nodeSpacing: 50,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ----------- | ----------------------------------------------------- | ------- | -------- | ------------------- |
|
||
|
|
* | rankSpacing | Defines the spacing between nodes on different levels | Integer | Required | Any Positive Number |
|
||
|
|
*
|
||
|
|
* **Notes**:
|
||
|
|
*
|
||
|
|
* Pertains to vertical spacing for TB (top to bottom) or BT (bottom to top), and the horizontal
|
||
|
|
* spacing for LR as well as RL graphs.
|
||
|
|
*
|
||
|
|
* Default value 50
|
||
|
|
*/
|
||
|
|
rankSpacing: 50,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------- | -------------------------------------------------- | ------ | -------- | ----------------------------- |
|
||
|
|
* | curve | Defines how mermaid renders curves for flowcharts. | string | Required | 'basis', 'linear', 'cardinal' |
|
||
|
|
*
|
||
|
|
* **Notes:**
|
||
|
|
*
|
||
|
|
* Default Value: 'basis'
|
||
|
|
*/
|
||
|
|
curve: "basis",
|
||
|
|
// Only used in new experimental rendering
|
||
|
|
// represents the padding between the labels and the shape
|
||
|
|
padding: 15,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ----------- | ----------- | ------- | -------- | ----------- |
|
||
|
|
* | useMaxWidth | See notes | boolean | 4 | true, false |
|
||
|
|
*
|
||
|
|
* **Notes:**
|
||
|
|
*
|
||
|
|
* When this flag is set the height and width is set to 100% and is then scaling with the
|
||
|
|
* available space if not the absolute space required is used.
|
||
|
|
*
|
||
|
|
* Default value: true
|
||
|
|
*/
|
||
|
|
useMaxWidth: true,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------------- | ----------- | ------- | -------- | ----------------------- |
|
||
|
|
* | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper, elk |
|
||
|
|
*
|
||
|
|
* **Notes:**
|
||
|
|
*
|
||
|
|
* Decides which rendering engine that is to be used for the rendering. Legal values are:
|
||
|
|
* dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid, elk for layout using
|
||
|
|
* elkjs
|
||
|
|
*
|
||
|
|
* Default value: 'dagre-wrapper'
|
||
|
|
*/
|
||
|
|
defaultRenderer: "dagre-wrapper"
|
||
|
|
},
|
||
|
|
/** The object containing configurations specific for sequence diagrams */
|
||
|
|
sequence: {
|
||
|
|
hideUnusedParticipants: false,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------------- | ---------------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | activationWidth | Width of the activation rect | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value :10
|
||
|
|
*/
|
||
|
|
activationWidth: 10,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 50
|
||
|
|
*/
|
||
|
|
diagramMarginX: 50,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | -------------- | ------------------------------------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | diagramMarginY | Margin to the over and under the sequence diagram | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 10
|
||
|
|
*/
|
||
|
|
diagramMarginY: 10,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ----------- | --------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | actorMargin | Margin between actors | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 50
|
||
|
|
*/
|
||
|
|
actorMargin: 50,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------- | -------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | width | Width of actor boxes | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 150
|
||
|
|
*/
|
||
|
|
width: 150,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------- | --------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | height | Height of actor boxes | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 65
|
||
|
|
*/
|
||
|
|
height: 65,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------- | ------------------------ | ------- | -------- | ------------------ |
|
||
|
|
* | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 10
|
||
|
|
*/
|
||
|
|
boxMargin: 10,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ------------- | -------------------------------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 5
|
||
|
|
*/
|
||
|
|
boxTextMargin: 5,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ---------- | ------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | noteMargin | margin around notes | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 10
|
||
|
|
*/
|
||
|
|
noteMargin: 10,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ------------- | ---------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | messageMargin | Space between messages | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 35
|
||
|
|
*/
|
||
|
|
messageMargin: 35,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ------------ | --------------------------- | ------ | -------- | ------------------------- |
|
||
|
|
* | messageAlign | Multiline message alignment | string | Required | 'left', 'center', 'right' |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 'center'
|
||
|
|
*/
|
||
|
|
messageAlign: "center",
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ------------ | --------------------------- | ------- | -------- | ----------- |
|
||
|
|
* | mirrorActors | Mirror actors under diagram | boolean | Required | true, false |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: true
|
||
|
|
*/
|
||
|
|
mirrorActors: true,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ---------- | ----------------------------------------------------------------------- | ------- | -------- | ----------- |
|
||
|
|
* | forceMenus | forces actor popup menus to always be visible (to support E2E testing). | Boolean | Required | True, False |
|
||
|
|
*
|
||
|
|
* **Notes:**
|
||
|
|
*
|
||
|
|
* Default value: false.
|
||
|
|
*/
|
||
|
|
forceMenus: false,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------------- | ------------------------------------------ | ------- | -------- | ------------------ |
|
||
|
|
* | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:**
|
||
|
|
*
|
||
|
|
* Depending on css styling this might need adjustment.
|
||
|
|
*
|
||
|
|
* Default value: 1
|
||
|
|
*/
|
||
|
|
bottomMarginAdj: 1,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ----------- | ----------- | ------- | -------- | ----------- |
|
||
|
|
* | useMaxWidth | See Notes | boolean | Required | true, false |
|
||
|
|
*
|
||
|
|
* **Notes:** When this flag is set to true, the height and width is set to 100% and is then
|
||
|
|
* scaling with the available space. If set to false, the absolute space required is used.
|
||
|
|
*
|
||
|
|
* Default value: true
|
||
|
|
*/
|
||
|
|
useMaxWidth: true,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ----------- | ------------------------------------ | ------- | -------- | ----------- |
|
||
|
|
* | rightAngles | display curve arrows as right angles | boolean | Required | true, false |
|
||
|
|
*
|
||
|
|
* **Notes:**
|
||
|
|
*
|
||
|
|
* This will display arrows that start and begin at the same node as right angles, rather than a
|
||
|
|
* curve
|
||
|
|
*
|
||
|
|
* Default value: false
|
||
|
|
*/
|
||
|
|
rightAngles: false,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ------------------- | ------------------------------- | ------- | -------- | ----------- |
|
||
|
|
* | showSequenceNumbers | This will show the node numbers | boolean | Required | true, false |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: false
|
||
|
|
*/
|
||
|
|
showSequenceNumbers: false,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ------------- | -------------------------------------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | actorFontSize | This sets the font size of the actor's description | Integer | Require | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** **Default value 14**..
|
||
|
|
*/
|
||
|
|
actorFontSize: 14,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------------- | ---------------------------------------------------- | ------ | -------- | --------------------------- |
|
||
|
|
* | actorFontFamily | This sets the font family of the actor's description | string | Required | Any Possible CSS FontFamily |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: "'Open Sans", sans-serif'
|
||
|
|
*/
|
||
|
|
actorFontFamily: '"Open Sans", sans-serif',
|
||
|
|
/**
|
||
|
|
* This sets the font weight of the actor's description
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 400.
|
||
|
|
*/
|
||
|
|
actorFontWeight: 400,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ------------ | ----------------------------------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | noteFontSize | This sets the font size of actor-attached notes | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 14
|
||
|
|
*/
|
||
|
|
noteFontSize: 14,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | -------------- | -------------------------------------------------- | ------ | -------- | --------------------------- |
|
||
|
|
* | noteFontFamily | This sets the font family of actor-attached notes. | string | Required | Any Possible CSS FontFamily |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: ''"trebuchet ms", verdana, arial, sans-serif'
|
||
|
|
*/
|
||
|
|
noteFontFamily: '"trebuchet ms", verdana, arial, sans-serif',
|
||
|
|
/**
|
||
|
|
* This sets the font weight of the note's description
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 400
|
||
|
|
*/
|
||
|
|
noteFontWeight: 400,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------- | ---------------------------------------------------- | ------ | -------- | ------------------------- |
|
||
|
|
* | noteAlign | This sets the text alignment of actor-attached notes | string | required | 'left', 'center', 'right' |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 'center'
|
||
|
|
*/
|
||
|
|
noteAlign: "center",
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------------- | ----------------------------------------- | ------- | -------- | ------------------- |
|
||
|
|
* | messageFontSize | This sets the font size of actor messages | Integer | Required | Any Positive Number |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 16
|
||
|
|
*/
|
||
|
|
messageFontSize: 16,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ----------------- | ------------------------------------------- | ------ | -------- | --------------------------- |
|
||
|
|
* | messageFontFamily | This sets the font family of actor messages | string | Required | Any Possible CSS FontFamily |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: '"trebuchet ms", verdana, arial, sans-serif'
|
||
|
|
*/
|
||
|
|
messageFontFamily: '"trebuchet ms", verdana, arial, sans-serif',
|
||
|
|
/**
|
||
|
|
* This sets the font weight of the message's description
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 400.
|
||
|
|
*/
|
||
|
|
messageFontWeight: 400,
|
||
|
|
/**
|
||
|
|
* This sets the auto-wrap state for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: false.
|
||
|
|
*/
|
||
|
|
wrap: false,
|
||
|
|
/**
|
||
|
|
* This sets the auto-wrap padding for the diagram (sides only)
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 0.
|
||
|
|
*/
|
||
|
|
wrapPadding: 10,
|
||
|
|
/**
|
||
|
|
* This sets the width of the loop-box (loop, alt, opt, par)
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 50.
|
||
|
|
*/
|
||
|
|
labelBoxWidth: 50,
|
||
|
|
/**
|
||
|
|
* This sets the height of the loop-box (loop, alt, opt, par)
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 20.
|
||
|
|
*/
|
||
|
|
labelBoxHeight: 20,
|
||
|
|
messageFont: function() {
|
||
|
|
return {
|
||
|
|
fontFamily: this.messageFontFamily,
|
||
|
|
fontSize: this.messageFontSize,
|
||
|
|
fontWeight: this.messageFontWeight
|
||
|
|
};
|
||
|
|
},
|
||
|
|
noteFont: function() {
|
||
|
|
return {
|
||
|
|
fontFamily: this.noteFontFamily,
|
||
|
|
fontSize: this.noteFontSize,
|
||
|
|
fontWeight: this.noteFontWeight
|
||
|
|
};
|
||
|
|
},
|
||
|
|
actorFont: function() {
|
||
|
|
return {
|
||
|
|
fontFamily: this.actorFontFamily,
|
||
|
|
fontSize: this.actorFontSize,
|
||
|
|
fontWeight: this.actorFontWeight
|
||
|
|
};
|
||
|
|
}
|
||
|
|
},
|
||
|
|
/** The object containing configurations specific for gantt diagrams */
|
||
|
|
gantt: {
|
||
|
|
/**
|
||
|
|
* ### titleTopMargin
|
||
|
|
*
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | titleTopMargin | Margin top for the text over the gantt diagram | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 25
|
||
|
|
*/
|
||
|
|
titleTopMargin: 25,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------- | ----------------------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | barHeight | The height of the bars in the graph | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 20
|
||
|
|
*/
|
||
|
|
barHeight: 20,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------- | ---------------------------------------------------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | barGap | The margin between the different activities in the gantt diagram | Integer | Optional | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 4
|
||
|
|
*/
|
||
|
|
barGap: 4,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ---------- | -------------------------------------------------------------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | topPadding | Margin between title and gantt diagram and between axis and gantt diagram. | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 50
|
||
|
|
*/
|
||
|
|
topPadding: 50,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ------------ | ----------------------------------------------------------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | rightPadding | The space allocated for the section name to the right of the activities | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 75
|
||
|
|
*/
|
||
|
|
rightPadding: 75,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ----------- | ---------------------------------------------------------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | leftPadding | The space allocated for the section name to the left of the activities | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 75
|
||
|
|
*/
|
||
|
|
leftPadding: 75,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | -------------------- | -------------------------------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | gridLineStartPadding | Vertical starting position of the grid lines | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 35
|
||
|
|
*/
|
||
|
|
gridLineStartPadding: 35,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------- | ----------- | ------- | -------- | ------------------ |
|
||
|
|
* | fontSize | Font size | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 11
|
||
|
|
*/
|
||
|
|
fontSize: 11,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------------- | ---------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | sectionFontSize | Font size for sections | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 11
|
||
|
|
*/
|
||
|
|
sectionFontSize: 11,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ------------------- | ---------------------------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | numberSectionStyles | The number of alternating section styles | Integer | 4 | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 4
|
||
|
|
*/
|
||
|
|
numberSectionStyles: 4,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ---------- | ---------------------------- | ---- | -------- | ---------------- |
|
||
|
|
* | axisFormat | Date/time format of the axis | 3 | Required | Date in yy-mm-dd |
|
||
|
|
*
|
||
|
|
* **Notes:**
|
||
|
|
*
|
||
|
|
* This might need adjustment to match your locale and preferences
|
||
|
|
*
|
||
|
|
* Default value: '%Y-%m-%d'.
|
||
|
|
*/
|
||
|
|
axisFormat: "%Y-%m-%d",
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ------------ | ------------| ------ | -------- | ------- |
|
||
|
|
* | tickInterval | axis ticks | string | Optional | string |
|
||
|
|
*
|
||
|
|
* **Notes:**
|
||
|
|
*
|
||
|
|
* Pattern is /^([1-9][0-9]*)(minute|hour|day|week|month)$/
|
||
|
|
*
|
||
|
|
* Default value: undefined
|
||
|
|
*/
|
||
|
|
tickInterval: void 0,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ----------- | ----------- | ------- | -------- | ----------- |
|
||
|
|
* | useMaxWidth | See notes | boolean | 4 | true, false |
|
||
|
|
*
|
||
|
|
* **Notes:**
|
||
|
|
*
|
||
|
|
* When this flag is set the height and width is set to 100% and is then scaling with the
|
||
|
|
* available space if not the absolute space required is used.
|
||
|
|
*
|
||
|
|
* Default value: true
|
||
|
|
*/
|
||
|
|
useMaxWidth: true,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------- | ----------- | ------- | -------- | ----------- |
|
||
|
|
* | topAxis | See notes | Boolean | 4 | True, False |
|
||
|
|
*
|
||
|
|
* **Notes:** when this flag is set date labels will be added to the top of the chart
|
||
|
|
*
|
||
|
|
* **Default value false**.
|
||
|
|
*/
|
||
|
|
topAxis: false,
|
||
|
|
useWidth: void 0
|
||
|
|
},
|
||
|
|
/** The object containing configurations specific for journey diagrams */
|
||
|
|
journey: {
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 50
|
||
|
|
*/
|
||
|
|
diagramMarginX: 50,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | -------------- | -------------------------------------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 10
|
||
|
|
*/
|
||
|
|
diagramMarginY: 10,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ----------- | --------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | actorMargin | Margin between actors | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 50
|
||
|
|
*/
|
||
|
|
leftMargin: 150,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------- | -------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | width | Width of actor boxes | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 150
|
||
|
|
*/
|
||
|
|
width: 150,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------- | --------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | height | Height of actor boxes | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 65
|
||
|
|
*/
|
||
|
|
height: 50,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------- | ------------------------ | ------- | -------- | ------------------ |
|
||
|
|
* | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 10
|
||
|
|
*/
|
||
|
|
boxMargin: 10,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ------------- | -------------------------------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 5
|
||
|
|
*/
|
||
|
|
boxTextMargin: 5,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ---------- | ------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | noteMargin | Margin around notes | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 10
|
||
|
|
*/
|
||
|
|
noteMargin: 10,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ------------- | ----------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | messageMargin | Space between messages. | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:**
|
||
|
|
*
|
||
|
|
* Space between messages.
|
||
|
|
*
|
||
|
|
* Default value: 35
|
||
|
|
*/
|
||
|
|
messageMargin: 35,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ------------ | --------------------------- | ---- | -------- | ------------------------- |
|
||
|
|
* | messageAlign | Multiline message alignment | 3 | 4 | 'left', 'center', 'right' |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 'center'
|
||
|
|
*/
|
||
|
|
messageAlign: "center",
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------------- | ------------------------------------------ | ------- | -------- | ------------------ |
|
||
|
|
* | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | 4 | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:**
|
||
|
|
*
|
||
|
|
* Depending on css styling this might need adjustment.
|
||
|
|
*
|
||
|
|
* Default value: 1
|
||
|
|
*/
|
||
|
|
bottomMarginAdj: 1,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ----------- | ----------- | ------- | -------- | ----------- |
|
||
|
|
* | useMaxWidth | See notes | boolean | 4 | true, false |
|
||
|
|
*
|
||
|
|
* **Notes:**
|
||
|
|
*
|
||
|
|
* When this flag is set the height and width is set to 100% and is then scaling with the
|
||
|
|
* available space if not the absolute space required is used.
|
||
|
|
*
|
||
|
|
* Default value: true
|
||
|
|
*/
|
||
|
|
useMaxWidth: true,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ----------- | --------------------------------- | ---- | -------- | ----------- |
|
||
|
|
* | rightAngles | Curved Arrows become Right Angles | 3 | 4 | true, false |
|
||
|
|
*
|
||
|
|
* **Notes:**
|
||
|
|
*
|
||
|
|
* This will display arrows that start and begin at the same node as right angles, rather than a
|
||
|
|
* curves
|
||
|
|
*
|
||
|
|
* Default value: false
|
||
|
|
*/
|
||
|
|
rightAngles: false,
|
||
|
|
taskFontSize: 14,
|
||
|
|
taskFontFamily: '"Open Sans", sans-serif',
|
||
|
|
taskMargin: 50,
|
||
|
|
// width of activation box
|
||
|
|
activationWidth: 10,
|
||
|
|
// text placement as: tspan | fo | old only text as before
|
||
|
|
textPlacement: "fo",
|
||
|
|
actorColours: ["#8FBC8F", "#7CFC00", "#00FFFF", "#20B2AA", "#B0E0E6", "#FFFFE0"],
|
||
|
|
sectionFills: ["#191970", "#8B008B", "#4B0082", "#2F4F4F", "#800000", "#8B4513", "#00008B"],
|
||
|
|
sectionColours: ["#fff"]
|
||
|
|
},
|
||
|
|
/** The object containing configurations specific for timeline diagrams */
|
||
|
|
timeline: {
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 50
|
||
|
|
*/
|
||
|
|
diagramMarginX: 50,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | -------------- | -------------------------------------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 10
|
||
|
|
*/
|
||
|
|
diagramMarginY: 10,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ----------- | --------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | actorMargin | Margin between actors | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 50
|
||
|
|
*/
|
||
|
|
leftMargin: 150,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------- | -------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | width | Width of actor boxes | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 150
|
||
|
|
*/
|
||
|
|
width: 150,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------- | --------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | height | Height of actor boxes | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 65
|
||
|
|
*/
|
||
|
|
height: 50,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------- | ------------------------ | ------- | -------- | ------------------ |
|
||
|
|
* | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 10
|
||
|
|
*/
|
||
|
|
boxMargin: 10,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ------------- | -------------------------------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 5
|
||
|
|
*/
|
||
|
|
boxTextMargin: 5,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ---------- | ------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | noteMargin | Margin around notes | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 10
|
||
|
|
*/
|
||
|
|
noteMargin: 10,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ------------- | ----------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | messageMargin | Space between messages. | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:**
|
||
|
|
*
|
||
|
|
* Space between messages.
|
||
|
|
*
|
||
|
|
* Default value: 35
|
||
|
|
*/
|
||
|
|
messageMargin: 35,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ------------ | --------------------------- | ---- | -------- | ------------------------- |
|
||
|
|
* | messageAlign | Multiline message alignment | 3 | 4 | 'left', 'center', 'right' |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 'center'
|
||
|
|
*/
|
||
|
|
messageAlign: "center",
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------------- | ------------------------------------------ | ------- | -------- | ------------------ |
|
||
|
|
* | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | 4 | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:**
|
||
|
|
*
|
||
|
|
* Depending on css styling this might need adjustment.
|
||
|
|
*
|
||
|
|
* Default value: 1
|
||
|
|
*/
|
||
|
|
bottomMarginAdj: 1,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ----------- | ----------- | ------- | -------- | ----------- |
|
||
|
|
* | useMaxWidth | See notes | boolean | 4 | true, false |
|
||
|
|
*
|
||
|
|
* **Notes:**
|
||
|
|
*
|
||
|
|
* When this flag is set the height and width is set to 100% and is then scaling with the
|
||
|
|
* available space if not the absolute space required is used.
|
||
|
|
*
|
||
|
|
* Default value: true
|
||
|
|
*/
|
||
|
|
useMaxWidth: true,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ----------- | --------------------------------- | ---- | -------- | ----------- |
|
||
|
|
* | rightAngles | Curved Arrows become Right Angles | 3 | 4 | true, false |
|
||
|
|
*
|
||
|
|
* **Notes:**
|
||
|
|
*
|
||
|
|
* This will display arrows that start and begin at the same node as right angles, rather than a
|
||
|
|
* curves
|
||
|
|
*
|
||
|
|
* Default value: false
|
||
|
|
*/
|
||
|
|
rightAngles: false,
|
||
|
|
taskFontSize: 14,
|
||
|
|
taskFontFamily: '"Open Sans", sans-serif',
|
||
|
|
taskMargin: 50,
|
||
|
|
// width of activation box
|
||
|
|
activationWidth: 10,
|
||
|
|
// text placement as: tspan | fo | old only text as before
|
||
|
|
textPlacement: "fo",
|
||
|
|
actorColours: ["#8FBC8F", "#7CFC00", "#00FFFF", "#20B2AA", "#B0E0E6", "#FFFFE0"],
|
||
|
|
sectionFills: ["#191970", "#8B008B", "#4B0082", "#2F4F4F", "#800000", "#8B4513", "#00008B"],
|
||
|
|
sectionColours: ["#fff"],
|
||
|
|
disableMulticolor: false
|
||
|
|
},
|
||
|
|
class: {
|
||
|
|
/**
|
||
|
|
* ### titleTopMargin
|
||
|
|
*
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | titleTopMargin | Margin top for the text over the class diagram | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 25
|
||
|
|
*/
|
||
|
|
titleTopMargin: 25,
|
||
|
|
arrowMarkerAbsolute: false,
|
||
|
|
dividerMargin: 10,
|
||
|
|
padding: 5,
|
||
|
|
textHeight: 10,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ----------- | ----------- | ------- | -------- | ----------- |
|
||
|
|
* | useMaxWidth | See notes | boolean | 4 | true, false |
|
||
|
|
*
|
||
|
|
* **Notes:**
|
||
|
|
*
|
||
|
|
* When this flag is set the height and width is set to 100% and is then scaling with the
|
||
|
|
* available space if not the absolute space required is used.
|
||
|
|
*
|
||
|
|
* Default value: true
|
||
|
|
*/
|
||
|
|
useMaxWidth: true,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------------- | ----------- | ------- | -------- | ----------------------- |
|
||
|
|
* | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper |
|
||
|
|
*
|
||
|
|
* **Notes**:
|
||
|
|
*
|
||
|
|
* Decides which rendering engine that is to be used for the rendering. Legal values are:
|
||
|
|
* dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid
|
||
|
|
*
|
||
|
|
* Default value: 'dagre-d3'
|
||
|
|
*/
|
||
|
|
defaultRenderer: "dagre-wrapper"
|
||
|
|
},
|
||
|
|
state: {
|
||
|
|
/**
|
||
|
|
* ### titleTopMargin
|
||
|
|
*
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | titleTopMargin | Margin top for the text over the state diagram | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 25
|
||
|
|
*/
|
||
|
|
titleTopMargin: 25,
|
||
|
|
dividerMargin: 10,
|
||
|
|
sizeUnit: 5,
|
||
|
|
padding: 8,
|
||
|
|
textHeight: 10,
|
||
|
|
titleShift: -15,
|
||
|
|
noteMargin: 10,
|
||
|
|
forkWidth: 70,
|
||
|
|
forkHeight: 7,
|
||
|
|
// Used
|
||
|
|
miniPadding: 2,
|
||
|
|
// Font size factor, this is used to guess the width of the edges labels before rendering by dagre
|
||
|
|
// layout. This might need updating if/when switching font
|
||
|
|
fontSizeFactor: 5.02,
|
||
|
|
fontSize: 24,
|
||
|
|
labelHeight: 16,
|
||
|
|
edgeLengthFactor: "20",
|
||
|
|
compositTitleSize: 35,
|
||
|
|
radius: 5,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ----------- | ----------- | ------- | -------- | ----------- |
|
||
|
|
* | useMaxWidth | See notes | boolean | 4 | true, false |
|
||
|
|
*
|
||
|
|
* **Notes:**
|
||
|
|
*
|
||
|
|
* When this flag is set the height and width is set to 100% and is then scaling with the
|
||
|
|
* available space if not the absolute space required is used.
|
||
|
|
*
|
||
|
|
* Default value: true
|
||
|
|
*/
|
||
|
|
useMaxWidth: true,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------------- | ----------- | ------- | -------- | ----------------------- |
|
||
|
|
* | defaultRenderer | See notes | boolean | 4 | dagre-d3, dagre-wrapper |
|
||
|
|
*
|
||
|
|
* **Notes:**
|
||
|
|
*
|
||
|
|
* Decides which rendering engine that is to be used for the rendering. Legal values are:
|
||
|
|
* dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid
|
||
|
|
*
|
||
|
|
* Default value: 'dagre-d3'
|
||
|
|
*/
|
||
|
|
defaultRenderer: "dagre-wrapper"
|
||
|
|
},
|
||
|
|
/** The object containing configurations specific for entity relationship diagrams */
|
||
|
|
er: {
|
||
|
|
/**
|
||
|
|
* ### titleTopMargin
|
||
|
|
*
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | titleTopMargin | Margin top for the text over the diagram | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 25
|
||
|
|
*/
|
||
|
|
titleTopMargin: 25,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | diagramPadding | Amount of padding around the diagram as a whole | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:**
|
||
|
|
*
|
||
|
|
* The amount of padding around the diagram as a whole so that embedded diagrams have margins,
|
||
|
|
* expressed in pixels
|
||
|
|
*
|
||
|
|
* Default value: 20
|
||
|
|
*/
|
||
|
|
diagramPadding: 20,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------------- | ---------------------------------------- | ------ | -------- | ---------------------- |
|
||
|
|
* | layoutDirection | Directional bias for layout of entities. | string | Required | "TB", "BT", "LR", "RL" |
|
||
|
|
*
|
||
|
|
* **Notes:**
|
||
|
|
*
|
||
|
|
* 'TB' for Top-Bottom, 'BT'for Bottom-Top, 'LR' for Left-Right, or 'RL' for Right to Left.
|
||
|
|
*
|
||
|
|
* T = top, B = bottom, L = left, and R = right.
|
||
|
|
*
|
||
|
|
* Default value: 'TB'
|
||
|
|
*/
|
||
|
|
layoutDirection: "TB",
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | -------------- | ---------------------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | minEntityWidth | The minimum width of an entity box | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Expressed in pixels. Default value: 100
|
||
|
|
*/
|
||
|
|
minEntityWidth: 100,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------------- | ----------------------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | minEntityHeight | The minimum height of an entity box | Integer | 4 | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Expressed in pixels Default value: 75
|
||
|
|
*/
|
||
|
|
minEntityHeight: 75,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ------------- | ------------------------------------------------------------ | ------- | -------- | ------------------ |
|
||
|
|
* | entityPadding | Minimum internal padding between text in box and box borders | Integer | 4 | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:**
|
||
|
|
*
|
||
|
|
* The minimum internal padding between text in an entity box and the enclosing box borders,
|
||
|
|
* expressed in pixels.
|
||
|
|
*
|
||
|
|
* Default value: 15
|
||
|
|
*/
|
||
|
|
entityPadding: 15,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------- | ----------------------------------- | ------ | -------- | -------------------- |
|
||
|
|
* | stroke | Stroke color of box edges and lines | string | 4 | Any recognized color |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 'gray'
|
||
|
|
*/
|
||
|
|
stroke: "gray",
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------- | -------------------------- | ------ | -------- | -------------------- |
|
||
|
|
* | fill | Fill color of entity boxes | string | 4 | Any recognized color |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 'honeydew'
|
||
|
|
*/
|
||
|
|
fill: "honeydew",
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------- | ------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | fontSize | Font Size in pixels | Integer | | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:**
|
||
|
|
*
|
||
|
|
* Font size (expressed as an integer representing a number of pixels) Default value: 12
|
||
|
|
*/
|
||
|
|
fontSize: 12,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ----------- | ----------- | ------- | -------- | ----------- |
|
||
|
|
* | useMaxWidth | See Notes | boolean | Required | true, false |
|
||
|
|
*
|
||
|
|
* **Notes:**
|
||
|
|
*
|
||
|
|
* When this flag is set to true, the diagram width is locked to 100% and scaled based on
|
||
|
|
* available space. If set to false, the diagram reserves its absolute width.
|
||
|
|
*
|
||
|
|
* Default value: true
|
||
|
|
*/
|
||
|
|
useMaxWidth: true
|
||
|
|
},
|
||
|
|
/** The object containing configurations specific for pie diagrams */
|
||
|
|
pie: {
|
||
|
|
useWidth: void 0,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ----------- | ----------- | ------- | -------- | ----------- |
|
||
|
|
* | useMaxWidth | See Notes | boolean | Required | true, false |
|
||
|
|
*
|
||
|
|
* **Notes:**
|
||
|
|
*
|
||
|
|
* When this flag is set to true, the diagram width is locked to 100% and scaled based on
|
||
|
|
* available space. If set to false, the diagram reserves its absolute width.
|
||
|
|
*
|
||
|
|
* Default value: true
|
||
|
|
*/
|
||
|
|
useMaxWidth: true
|
||
|
|
},
|
||
|
|
/** The object containing configurations specific for req diagrams */
|
||
|
|
requirement: {
|
||
|
|
useWidth: void 0,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ----------- | ----------- | ------- | -------- | ----------- |
|
||
|
|
* | useMaxWidth | See Notes | boolean | Required | true, false |
|
||
|
|
*
|
||
|
|
* **Notes:**
|
||
|
|
*
|
||
|
|
* When this flag is set to true, the diagram width is locked to 100% and scaled based on
|
||
|
|
* available space. If set to false, the diagram reserves its absolute width.
|
||
|
|
*
|
||
|
|
* Default value: true
|
||
|
|
*/
|
||
|
|
useMaxWidth: true,
|
||
|
|
rect_fill: "#f9f9f9",
|
||
|
|
text_color: "#333",
|
||
|
|
rect_border_size: "0.5px",
|
||
|
|
rect_border_color: "#bbb",
|
||
|
|
rect_min_width: 200,
|
||
|
|
rect_min_height: 200,
|
||
|
|
fontSize: 14,
|
||
|
|
rect_padding: 10,
|
||
|
|
line_height: 20
|
||
|
|
},
|
||
|
|
gitGraph: {
|
||
|
|
/**
|
||
|
|
* ### titleTopMargin
|
||
|
|
*
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | titleTopMargin | Margin top for the text over the Git diagram | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 25
|
||
|
|
*/
|
||
|
|
titleTopMargin: 25,
|
||
|
|
diagramPadding: 8,
|
||
|
|
nodeLabel: {
|
||
|
|
width: 75,
|
||
|
|
height: 100,
|
||
|
|
x: -25,
|
||
|
|
y: 0
|
||
|
|
},
|
||
|
|
mainBranchName: "main",
|
||
|
|
mainBranchOrder: 0,
|
||
|
|
showCommitLabel: true,
|
||
|
|
showBranches: true,
|
||
|
|
rotateCommitLabel: true
|
||
|
|
},
|
||
|
|
/** The object containing configurations specific for c4 diagrams */
|
||
|
|
c4: {
|
||
|
|
useWidth: void 0,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | diagramMarginX | Margin to the right and left of the c4 diagram | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 50
|
||
|
|
*/
|
||
|
|
diagramMarginX: 50,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | -------------- | ------------------------------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | diagramMarginY | Margin to the over and under the c4 diagram | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 10
|
||
|
|
*/
|
||
|
|
diagramMarginY: 10,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ------------- | --------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | c4ShapeMargin | Margin between shapes | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 50
|
||
|
|
*/
|
||
|
|
c4ShapeMargin: 50,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | -------------- | ---------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | c4ShapePadding | Padding between shapes | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 20
|
||
|
|
*/
|
||
|
|
c4ShapePadding: 20,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------- | --------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | width | Width of person boxes | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 216
|
||
|
|
*/
|
||
|
|
width: 216,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------- | ---------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | height | Height of person boxes | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 60
|
||
|
|
*/
|
||
|
|
height: 60,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------- | ------------------- | ------- | -------- | ------------------ |
|
||
|
|
* | boxMargin | Margin around boxes | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 10
|
||
|
|
*/
|
||
|
|
boxMargin: 10,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ----------- | ----------- | ------- | -------- | ----------- |
|
||
|
|
* | useMaxWidth | See Notes | boolean | Required | true, false |
|
||
|
|
*
|
||
|
|
* **Notes:** When this flag is set to true, the height and width is set to 100% and is then
|
||
|
|
* scaling with the available space. If set to false, the absolute space required is used.
|
||
|
|
*
|
||
|
|
* Default value: true
|
||
|
|
*/
|
||
|
|
useMaxWidth: true,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | ------------ | ----------- | ------- | -------- | ------------------ |
|
||
|
|
* | c4ShapeInRow | See Notes | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** How many shapes to place in each row.
|
||
|
|
*
|
||
|
|
* Default value: 4
|
||
|
|
*/
|
||
|
|
c4ShapeInRow: 4,
|
||
|
|
nextLinePaddingX: 0,
|
||
|
|
/**
|
||
|
|
* | Parameter | Description | Type | Required | Values |
|
||
|
|
* | --------------- | ----------- | ------- | -------- | ------------------ |
|
||
|
|
* | c4BoundaryInRow | See Notes | Integer | Required | Any Positive Value |
|
||
|
|
*
|
||
|
|
* **Notes:** How many boundaries to place in each row.
|
||
|
|
*
|
||
|
|
* Default value: 2
|
||
|
|
*/
|
||
|
|
c4BoundaryInRow: 2,
|
||
|
|
/**
|
||
|
|
* This sets the font size of Person shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 14.
|
||
|
|
*/
|
||
|
|
personFontSize: 14,
|
||
|
|
/**
|
||
|
|
* This sets the font family of Person shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: "Open Sans", sans-serif.
|
||
|
|
*/
|
||
|
|
personFontFamily: '"Open Sans", sans-serif',
|
||
|
|
/**
|
||
|
|
* This sets the font weight of Person shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: normal.
|
||
|
|
*/
|
||
|
|
personFontWeight: "normal",
|
||
|
|
/**
|
||
|
|
* This sets the font size of External Person shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 14.
|
||
|
|
*/
|
||
|
|
external_personFontSize: 14,
|
||
|
|
/**
|
||
|
|
* This sets the font family of External Person shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: "Open Sans", sans-serif.
|
||
|
|
*/
|
||
|
|
external_personFontFamily: '"Open Sans", sans-serif',
|
||
|
|
/**
|
||
|
|
* This sets the font weight of External Person shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: normal.
|
||
|
|
*/
|
||
|
|
external_personFontWeight: "normal",
|
||
|
|
/**
|
||
|
|
* This sets the font size of System shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 14.
|
||
|
|
*/
|
||
|
|
systemFontSize: 14,
|
||
|
|
/**
|
||
|
|
* This sets the font family of System shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: "Open Sans", sans-serif.
|
||
|
|
*/
|
||
|
|
systemFontFamily: '"Open Sans", sans-serif',
|
||
|
|
/**
|
||
|
|
* This sets the font weight of System shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: normal.
|
||
|
|
*/
|
||
|
|
systemFontWeight: "normal",
|
||
|
|
/**
|
||
|
|
* This sets the font size of External System shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 14.
|
||
|
|
*/
|
||
|
|
external_systemFontSize: 14,
|
||
|
|
/**
|
||
|
|
* This sets the font family of External System shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: "Open Sans", sans-serif.
|
||
|
|
*/
|
||
|
|
external_systemFontFamily: '"Open Sans", sans-serif',
|
||
|
|
/**
|
||
|
|
* This sets the font weight of External System shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: normal.
|
||
|
|
*/
|
||
|
|
external_systemFontWeight: "normal",
|
||
|
|
/**
|
||
|
|
* This sets the font size of System DB shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 14.
|
||
|
|
*/
|
||
|
|
system_dbFontSize: 14,
|
||
|
|
/**
|
||
|
|
* This sets the font family of System DB shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: "Open Sans", sans-serif.
|
||
|
|
*/
|
||
|
|
system_dbFontFamily: '"Open Sans", sans-serif',
|
||
|
|
/**
|
||
|
|
* This sets the font weight of System DB shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: normal.
|
||
|
|
*/
|
||
|
|
system_dbFontWeight: "normal",
|
||
|
|
/**
|
||
|
|
* This sets the font size of External System DB shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 14.
|
||
|
|
*/
|
||
|
|
external_system_dbFontSize: 14,
|
||
|
|
/**
|
||
|
|
* This sets the font family of External System DB shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: "Open Sans", sans-serif.
|
||
|
|
*/
|
||
|
|
external_system_dbFontFamily: '"Open Sans", sans-serif',
|
||
|
|
/**
|
||
|
|
* This sets the font weight of External System DB shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: normal.
|
||
|
|
*/
|
||
|
|
external_system_dbFontWeight: "normal",
|
||
|
|
/**
|
||
|
|
* This sets the font size of System Queue shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 14.
|
||
|
|
*/
|
||
|
|
system_queueFontSize: 14,
|
||
|
|
/**
|
||
|
|
* This sets the font family of System Queue shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: "Open Sans", sans-serif.
|
||
|
|
*/
|
||
|
|
system_queueFontFamily: '"Open Sans", sans-serif',
|
||
|
|
/**
|
||
|
|
* This sets the font weight of System Queue shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: normal.
|
||
|
|
*/
|
||
|
|
system_queueFontWeight: "normal",
|
||
|
|
/**
|
||
|
|
* This sets the font size of External System Queue shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 14.
|
||
|
|
*/
|
||
|
|
external_system_queueFontSize: 14,
|
||
|
|
/**
|
||
|
|
* This sets the font family of External System Queue shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: "Open Sans", sans-serif.
|
||
|
|
*/
|
||
|
|
external_system_queueFontFamily: '"Open Sans", sans-serif',
|
||
|
|
/**
|
||
|
|
* This sets the font weight of External System Queue shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: normal.
|
||
|
|
*/
|
||
|
|
external_system_queueFontWeight: "normal",
|
||
|
|
/**
|
||
|
|
* This sets the font size of Boundary shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 14.
|
||
|
|
*/
|
||
|
|
boundaryFontSize: 14,
|
||
|
|
/**
|
||
|
|
* This sets the font family of Boundary shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: "Open Sans", sans-serif.
|
||
|
|
*/
|
||
|
|
boundaryFontFamily: '"Open Sans", sans-serif',
|
||
|
|
/**
|
||
|
|
* This sets the font weight of Boundary shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: normal.
|
||
|
|
*/
|
||
|
|
boundaryFontWeight: "normal",
|
||
|
|
/**
|
||
|
|
* This sets the font size of Message shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 12.
|
||
|
|
*/
|
||
|
|
messageFontSize: 12,
|
||
|
|
/**
|
||
|
|
* This sets the font family of Message shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: "Open Sans", sans-serif.
|
||
|
|
*/
|
||
|
|
messageFontFamily: '"Open Sans", sans-serif',
|
||
|
|
/**
|
||
|
|
* This sets the font weight of Message shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: normal.
|
||
|
|
*/
|
||
|
|
messageFontWeight: "normal",
|
||
|
|
/**
|
||
|
|
* This sets the font size of Container shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 14.
|
||
|
|
*/
|
||
|
|
containerFontSize: 14,
|
||
|
|
/**
|
||
|
|
* This sets the font family of Container shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: "Open Sans", sans-serif.
|
||
|
|
*/
|
||
|
|
containerFontFamily: '"Open Sans", sans-serif',
|
||
|
|
/**
|
||
|
|
* This sets the font weight of Container shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: normal.
|
||
|
|
*/
|
||
|
|
containerFontWeight: "normal",
|
||
|
|
/**
|
||
|
|
* This sets the font size of External Container shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 14.
|
||
|
|
*/
|
||
|
|
external_containerFontSize: 14,
|
||
|
|
/**
|
||
|
|
* This sets the font family of External Container shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: "Open Sans", sans-serif.
|
||
|
|
*/
|
||
|
|
external_containerFontFamily: '"Open Sans", sans-serif',
|
||
|
|
/**
|
||
|
|
* This sets the font weight of External Container shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: normal.
|
||
|
|
*/
|
||
|
|
external_containerFontWeight: "normal",
|
||
|
|
/**
|
||
|
|
* This sets the font size of Container DB shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 14.
|
||
|
|
*/
|
||
|
|
container_dbFontSize: 14,
|
||
|
|
/**
|
||
|
|
* This sets the font family of Container DB shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: "Open Sans", sans-serif.
|
||
|
|
*/
|
||
|
|
container_dbFontFamily: '"Open Sans", sans-serif',
|
||
|
|
/**
|
||
|
|
* This sets the font weight of Container DB shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: normal.
|
||
|
|
*/
|
||
|
|
container_dbFontWeight: "normal",
|
||
|
|
/**
|
||
|
|
* This sets the font size of External Container DB shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 14.
|
||
|
|
*/
|
||
|
|
external_container_dbFontSize: 14,
|
||
|
|
/**
|
||
|
|
* This sets the font family of External Container DB shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: "Open Sans", sans-serif.
|
||
|
|
*/
|
||
|
|
external_container_dbFontFamily: '"Open Sans", sans-serif',
|
||
|
|
/**
|
||
|
|
* This sets the font weight of External Container DB shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: normal.
|
||
|
|
*/
|
||
|
|
external_container_dbFontWeight: "normal",
|
||
|
|
/**
|
||
|
|
* This sets the font size of Container Queue shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 14.
|
||
|
|
*/
|
||
|
|
container_queueFontSize: 14,
|
||
|
|
/**
|
||
|
|
* This sets the font family of Container Queue shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: "Open Sans", sans-serif.
|
||
|
|
*/
|
||
|
|
container_queueFontFamily: '"Open Sans", sans-serif',
|
||
|
|
/**
|
||
|
|
* This sets the font weight of Container Queue shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: normal.
|
||
|
|
*/
|
||
|
|
container_queueFontWeight: "normal",
|
||
|
|
/**
|
||
|
|
* This sets the font size of External Container Queue shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 14.
|
||
|
|
*/
|
||
|
|
external_container_queueFontSize: 14,
|
||
|
|
/**
|
||
|
|
* This sets the font family of External Container Queue shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: "Open Sans", sans-serif.
|
||
|
|
*/
|
||
|
|
external_container_queueFontFamily: '"Open Sans", sans-serif',
|
||
|
|
/**
|
||
|
|
* This sets the font weight of External Container Queue shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: normal.
|
||
|
|
*/
|
||
|
|
external_container_queueFontWeight: "normal",
|
||
|
|
/**
|
||
|
|
* This sets the font size of Component shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 14.
|
||
|
|
*/
|
||
|
|
componentFontSize: 14,
|
||
|
|
/**
|
||
|
|
* This sets the font family of Component shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: "Open Sans", sans-serif.
|
||
|
|
*/
|
||
|
|
componentFontFamily: '"Open Sans", sans-serif',
|
||
|
|
/**
|
||
|
|
* This sets the font weight of Component shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: normal.
|
||
|
|
*/
|
||
|
|
componentFontWeight: "normal",
|
||
|
|
/**
|
||
|
|
* This sets the font size of External Component shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 14.
|
||
|
|
*/
|
||
|
|
external_componentFontSize: 14,
|
||
|
|
/**
|
||
|
|
* This sets the font family of External Component shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: "Open Sans", sans-serif.
|
||
|
|
*/
|
||
|
|
external_componentFontFamily: '"Open Sans", sans-serif',
|
||
|
|
/**
|
||
|
|
* This sets the font weight of External Component shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: normal.
|
||
|
|
*/
|
||
|
|
external_componentFontWeight: "normal",
|
||
|
|
/**
|
||
|
|
* This sets the font size of Component DB shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 14.
|
||
|
|
*/
|
||
|
|
component_dbFontSize: 14,
|
||
|
|
/**
|
||
|
|
* This sets the font family of Component DB shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: "Open Sans", sans-serif.
|
||
|
|
*/
|
||
|
|
component_dbFontFamily: '"Open Sans", sans-serif',
|
||
|
|
/**
|
||
|
|
* This sets the font weight of Component DB shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: normal.
|
||
|
|
*/
|
||
|
|
component_dbFontWeight: "normal",
|
||
|
|
/**
|
||
|
|
* This sets the font size of External Component DB shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 14.
|
||
|
|
*/
|
||
|
|
external_component_dbFontSize: 14,
|
||
|
|
/**
|
||
|
|
* This sets the font family of External Component DB shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: "Open Sans", sans-serif.
|
||
|
|
*/
|
||
|
|
external_component_dbFontFamily: '"Open Sans", sans-serif',
|
||
|
|
/**
|
||
|
|
* This sets the font weight of External Component DB shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: normal.
|
||
|
|
*/
|
||
|
|
external_component_dbFontWeight: "normal",
|
||
|
|
/**
|
||
|
|
* This sets the font size of Component Queue shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 14.
|
||
|
|
*/
|
||
|
|
component_queueFontSize: 14,
|
||
|
|
/**
|
||
|
|
* This sets the font family of Component Queue shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: "Open Sans", sans-serif.
|
||
|
|
*/
|
||
|
|
component_queueFontFamily: '"Open Sans", sans-serif',
|
||
|
|
/**
|
||
|
|
* This sets the font weight of Component Queue shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: normal.
|
||
|
|
*/
|
||
|
|
component_queueFontWeight: "normal",
|
||
|
|
/**
|
||
|
|
* This sets the font size of External Component Queue shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 14.
|
||
|
|
*/
|
||
|
|
external_component_queueFontSize: 14,
|
||
|
|
/**
|
||
|
|
* This sets the font family of External Component Queue shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: "Open Sans", sans-serif.
|
||
|
|
*/
|
||
|
|
external_component_queueFontFamily: '"Open Sans", sans-serif',
|
||
|
|
/**
|
||
|
|
* This sets the font weight of External Component Queue shape for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: normal.
|
||
|
|
*/
|
||
|
|
external_component_queueFontWeight: "normal",
|
||
|
|
/**
|
||
|
|
* This sets the auto-wrap state for the diagram
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: true.
|
||
|
|
*/
|
||
|
|
wrap: true,
|
||
|
|
/**
|
||
|
|
* This sets the auto-wrap padding for the diagram (sides only)
|
||
|
|
*
|
||
|
|
* **Notes:** Default value: 0.
|
||
|
|
*/
|
||
|
|
wrapPadding: 10,
|
||
|
|
personFont: function() {
|
||
|
|
return {
|
||
|
|
fontFamily: this.personFontFamily,
|
||
|
|
fontSize: this.personFontSize,
|
||
|
|
fontWeight: this.personFontWeight
|
||
|
|
};
|
||
|
|
},
|
||
|
|
external_personFont: function() {
|
||
|
|
return {
|
||
|
|
fontFamily: this.external_personFontFamily,
|
||
|
|
fontSize: this.external_personFontSize,
|
||
|
|
fontWeight: this.external_personFontWeight
|
||
|
|
};
|
||
|
|
},
|
||
|
|
systemFont: function() {
|
||
|
|
return {
|
||
|
|
fontFamily: this.systemFontFamily,
|
||
|
|
fontSize: this.systemFontSize,
|
||
|
|
fontWeight: this.systemFontWeight
|
||
|
|
};
|
||
|
|
},
|
||
|
|
external_systemFont: function() {
|
||
|
|
return {
|
||
|
|
fontFamily: this.external_systemFontFamily,
|
||
|
|
fontSize: this.external_systemFontSize,
|
||
|
|
fontWeight: this.external_systemFontWeight
|
||
|
|
};
|
||
|
|
},
|
||
|
|
system_dbFont: function() {
|
||
|
|
return {
|
||
|
|
fontFamily: this.system_dbFontFamily,
|
||
|
|
fontSize: this.system_dbFontSize,
|
||
|
|
fontWeight: this.system_dbFontWeight
|
||
|
|
};
|
||
|
|
},
|
||
|
|
external_system_dbFont: function() {
|
||
|
|
return {
|
||
|
|
fontFamily: this.external_system_dbFontFamily,
|
||
|
|
fontSize: this.external_system_dbFontSize,
|
||
|
|
fontWeight: this.external_system_dbFontWeight
|
||
|
|
};
|
||
|
|
},
|
||
|
|
system_queueFont: function() {
|
||
|
|
return {
|
||
|
|
fontFamily: this.system_queueFontFamily,
|
||
|
|
fontSize: this.system_queueFontSize,
|
||
|
|
fontWeight: this.system_queueFontWeight
|
||
|
|
};
|
||
|
|
},
|
||
|
|
external_system_queueFont: function() {
|
||
|
|
return {
|
||
|
|
fontFamily: this.external_system_queueFontFamily,
|
||
|
|
fontSize: this.external_system_queueFontSize,
|
||
|
|
fontWeight: this.external_system_queueFontWeight
|
||
|
|
};
|
||
|
|
},
|
||
|
|
containerFont: function() {
|
||
|
|
return {
|
||
|
|
fontFamily: this.containerFontFamily,
|
||
|
|
fontSize: this.containerFontSize,
|
||
|
|
fontWeight: this.containerFontWeight
|
||
|
|
};
|
||
|
|
},
|
||
|
|
external_containerFont: function() {
|
||
|
|
return {
|
||
|
|
fontFamily: this.external_containerFontFamily,
|
||
|
|
fontSize: this.external_containerFontSize,
|
||
|
|
fontWeight: this.external_containerFontWeight
|
||
|
|
};
|
||
|
|
},
|
||
|
|
container_dbFont: function() {
|
||
|
|
return {
|
||
|
|
fontFamily: this.container_dbFontFamily,
|
||
|
|
fontSize: this.container_dbFontSize,
|
||
|
|
fontWeight: this.container_dbFontWeight
|
||
|
|
};
|
||
|
|
},
|
||
|
|
external_container_dbFont: function() {
|
||
|
|
return {
|
||
|
|
fontFamily: this.external_container_dbFontFamily,
|
||
|
|
fontSize: this.external_container_dbFontSize,
|
||
|
|
fontWeight: this.external_container_dbFontWeight
|
||
|
|
};
|
||
|
|
},
|
||
|
|
container_queueFont: function() {
|
||
|
|
return {
|
||
|
|
fontFamily: this.container_queueFontFamily,
|
||
|
|
fontSize: this.container_queueFontSize,
|
||
|
|
fontWeight: this.container_queueFontWeight
|
||
|
|
};
|
||
|
|
},
|
||
|
|
external_container_queueFont: function() {
|
||
|
|
return {
|
||
|
|
fontFamily: this.external_container_queueFontFamily,
|
||
|
|
fontSize: this.external_container_queueFontSize,
|
||
|
|
fontWeight: this.external_container_queueFontWeight
|
||
|
|
};
|
||
|
|
},
|
||
|
|
componentFont: function() {
|
||
|
|
return {
|
||
|
|
fontFamily: this.componentFontFamily,
|
||
|
|
fontSize: this.componentFontSize,
|
||
|
|
fontWeight: this.componentFontWeight
|
||
|
|
};
|
||
|
|
},
|
||
|
|
external_componentFont: function() {
|
||
|
|
return {
|
||
|
|
fontFamily: this.external_componentFontFamily,
|
||
|
|
fontSize: this.external_componentFontSize,
|
||
|
|
fontWeight: this.external_componentFontWeight
|
||
|
|
};
|
||
|
|
},
|
||
|
|
component_dbFont: function() {
|
||
|
|
return {
|
||
|
|
fontFamily: this.component_dbFontFamily,
|
||
|
|
fontSize: this.component_dbFontSize,
|
||
|
|
fontWeight: this.component_dbFontWeight
|
||
|
|
};
|
||
|
|
},
|
||
|
|
external_component_dbFont: function() {
|
||
|
|
return {
|
||
|
|
fontFamily: this.external_component_dbFontFamily,
|
||
|
|
fontSize: this.external_component_dbFontSize,
|
||
|
|
fontWeight: this.external_component_dbFontWeight
|
||
|
|
};
|
||
|
|
},
|
||
|
|
component_queueFont: function() {
|
||
|
|
return {
|
||
|
|
fontFamily: this.component_queueFontFamily,
|
||
|
|
fontSize: this.component_queueFontSize,
|
||
|
|
fontWeight: this.component_queueFontWeight
|
||
|
|
};
|
||
|
|
},
|
||
|
|
external_component_queueFont: function() {
|
||
|
|
return {
|
||
|
|
fontFamily: this.external_component_queueFontFamily,
|
||
|
|
fontSize: this.external_component_queueFontSize,
|
||
|
|
fontWeight: this.external_component_queueFontWeight
|
||
|
|
};
|
||
|
|
},
|
||
|
|
boundaryFont: function() {
|
||
|
|
return {
|
||
|
|
fontFamily: this.boundaryFontFamily,
|
||
|
|
fontSize: this.boundaryFontSize,
|
||
|
|
fontWeight: this.boundaryFontWeight
|
||
|
|
};
|
||
|
|
},
|
||
|
|
messageFont: function() {
|
||
|
|
return {
|
||
|
|
fontFamily: this.messageFontFamily,
|
||
|
|
fontSize: this.messageFontSize,
|
||
|
|
fontWeight: this.messageFontWeight
|
||
|
|
};
|
||
|
|
},
|
||
|
|
// ' Colors
|
||
|
|
// ' ##################################
|
||
|
|
person_bg_color: "#08427B",
|
||
|
|
person_border_color: "#073B6F",
|
||
|
|
external_person_bg_color: "#686868",
|
||
|
|
external_person_border_color: "#8A8A8A",
|
||
|
|
system_bg_color: "#1168BD",
|
||
|
|
system_border_color: "#3C7FC0",
|
||
|
|
system_db_bg_color: "#1168BD",
|
||
|
|
system_db_border_color: "#3C7FC0",
|
||
|
|
system_queue_bg_color: "#1168BD",
|
||
|
|
system_queue_border_color: "#3C7FC0",
|
||
|
|
external_system_bg_color: "#999999",
|
||
|
|
external_system_border_color: "#8A8A8A",
|
||
|
|
external_system_db_bg_color: "#999999",
|
||
|
|
external_system_db_border_color: "#8A8A8A",
|
||
|
|
external_system_queue_bg_color: "#999999",
|
||
|
|
external_system_queue_border_color: "#8A8A8A",
|
||
|
|
container_bg_color: "#438DD5",
|
||
|
|
container_border_color: "#3C7FC0",
|
||
|
|
container_db_bg_color: "#438DD5",
|
||
|
|
container_db_border_color: "#3C7FC0",
|
||
|
|
container_queue_bg_color: "#438DD5",
|
||
|
|
container_queue_border_color: "#3C7FC0",
|
||
|
|
external_container_bg_color: "#B3B3B3",
|
||
|
|
external_container_border_color: "#A6A6A6",
|
||
|
|
external_container_db_bg_color: "#B3B3B3",
|
||
|
|
external_container_db_border_color: "#A6A6A6",
|
||
|
|
external_container_queue_bg_color: "#B3B3B3",
|
||
|
|
external_container_queue_border_color: "#A6A6A6",
|
||
|
|
component_bg_color: "#85BBF0",
|
||
|
|
component_border_color: "#78A8D8",
|
||
|
|
component_db_bg_color: "#85BBF0",
|
||
|
|
component_db_border_color: "#78A8D8",
|
||
|
|
component_queue_bg_color: "#85BBF0",
|
||
|
|
component_queue_border_color: "#78A8D8",
|
||
|
|
external_component_bg_color: "#CCCCCC",
|
||
|
|
external_component_border_color: "#BFBFBF",
|
||
|
|
external_component_db_bg_color: "#CCCCCC",
|
||
|
|
external_component_db_border_color: "#BFBFBF",
|
||
|
|
external_component_queue_bg_color: "#CCCCCC",
|
||
|
|
external_component_queue_border_color: "#BFBFBF"
|
||
|
|
},
|
||
|
|
mindmap: {
|
||
|
|
useMaxWidth: true,
|
||
|
|
padding: 10,
|
||
|
|
maxNodeWidth: 200
|
||
|
|
},
|
||
|
|
fontSize: 16
|
||
|
|
};
|
||
|
|
if (config.class) {
|
||
|
|
config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
|
||
|
|
}
|
||
|
|
if (config.gitGraph) {
|
||
|
|
config.gitGraph.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
|
||
|
|
}
|
||
|
|
const keyify = (obj, prefix = "") => Object.keys(obj).reduce((res, el) => {
|
||
|
|
if (Array.isArray(obj[el])) {
|
||
|
|
return res;
|
||
|
|
} else if (typeof obj[el] === "object" && obj[el] !== null) {
|
||
|
|
return [...res, prefix + el, ...keyify(obj[el], "")];
|
||
|
|
}
|
||
|
|
return [...res, prefix + el];
|
||
|
|
}, []);
|
||
|
|
const configKeys = keyify(config, "");
|
||
|
|
const config$1 = config;
|
||
|
|
const assignWithDepth = function(dst, src, config2) {
|
||
|
|
const { depth, clobber } = Object.assign({ depth: 2, clobber: false }, config2);
|
||
|
|
if (Array.isArray(src) && !Array.isArray(dst)) {
|
||
|
|
src.forEach((s) => assignWithDepth(dst, s, config2));
|
||
|
|
return dst;
|
||
|
|
} else if (Array.isArray(src) && Array.isArray(dst)) {
|
||
|
|
src.forEach((s) => {
|
||
|
|
if (!dst.includes(s)) {
|
||
|
|
dst.push(s);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return dst;
|
||
|
|
}
|
||
|
|
if (dst === void 0 || depth <= 0) {
|
||
|
|
if (dst !== void 0 && dst !== null && typeof dst === "object" && typeof src === "object") {
|
||
|
|
return Object.assign(dst, src);
|
||
|
|
} else {
|
||
|
|
return src;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (src !== void 0 && typeof dst === "object" && typeof src === "object") {
|
||
|
|
Object.keys(src).forEach((key) => {
|
||
|
|
if (typeof src[key] === "object" && (dst[key] === void 0 || typeof dst[key] === "object")) {
|
||
|
|
if (dst[key] === void 0) {
|
||
|
|
dst[key] = Array.isArray(src[key]) ? [] : {};
|
||
|
|
}
|
||
|
|
dst[key] = assignWithDepth(dst[key], src[key], { depth: depth - 1, clobber });
|
||
|
|
} else if (clobber || typeof dst[key] !== "object" && typeof src[key] !== "object") {
|
||
|
|
dst[key] = src[key];
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
return dst;
|
||
|
|
};
|
||
|
|
const assignWithDepth$1 = assignWithDepth;
|
||
|
|
const defaultConfig = Object.freeze(config$1);
|
||
|
|
let siteConfig = assignWithDepth$1({}, defaultConfig);
|
||
|
|
let configFromInitialize;
|
||
|
|
let directives = [];
|
||
|
|
let currentConfig = assignWithDepth$1({}, defaultConfig);
|
||
|
|
const updateCurrentConfig = (siteCfg, _directives) => {
|
||
|
|
let cfg = assignWithDepth$1({}, siteCfg);
|
||
|
|
let sumOfDirectives = {};
|
||
|
|
for (const d of _directives) {
|
||
|
|
sanitize(d);
|
||
|
|
sumOfDirectives = assignWithDepth$1(sumOfDirectives, d);
|
||
|
|
}
|
||
|
|
cfg = assignWithDepth$1(cfg, sumOfDirectives);
|
||
|
|
if (sumOfDirectives.theme && sumOfDirectives.theme in theme) {
|
||
|
|
const tmpConfigFromInitialize = assignWithDepth$1({}, configFromInitialize);
|
||
|
|
const themeVariables = assignWithDepth$1(
|
||
|
|
tmpConfigFromInitialize.themeVariables || {},
|
||
|
|
sumOfDirectives.themeVariables
|
||
|
|
);
|
||
|
|
if (cfg.theme && cfg.theme in theme) {
|
||
|
|
cfg.themeVariables = theme[cfg.theme].getThemeVariables(themeVariables);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
currentConfig = cfg;
|
||
|
|
checkConfig(currentConfig);
|
||
|
|
return currentConfig;
|
||
|
|
};
|
||
|
|
const setSiteConfig = (conf) => {
|
||
|
|
siteConfig = assignWithDepth$1({}, defaultConfig);
|
||
|
|
siteConfig = assignWithDepth$1(siteConfig, conf);
|
||
|
|
if (conf.theme && theme[conf.theme]) {
|
||
|
|
siteConfig.themeVariables = theme[conf.theme].getThemeVariables(conf.themeVariables);
|
||
|
|
}
|
||
|
|
updateCurrentConfig(siteConfig, directives);
|
||
|
|
return siteConfig;
|
||
|
|
};
|
||
|
|
const saveConfigFromInitialize = (conf) => {
|
||
|
|
configFromInitialize = assignWithDepth$1({}, conf);
|
||
|
|
};
|
||
|
|
const updateSiteConfig = (conf) => {
|
||
|
|
siteConfig = assignWithDepth$1(siteConfig, conf);
|
||
|
|
updateCurrentConfig(siteConfig, directives);
|
||
|
|
return siteConfig;
|
||
|
|
};
|
||
|
|
const getSiteConfig = () => {
|
||
|
|
return assignWithDepth$1({}, siteConfig);
|
||
|
|
};
|
||
|
|
const setConfig = (conf) => {
|
||
|
|
checkConfig(conf);
|
||
|
|
assignWithDepth$1(currentConfig, conf);
|
||
|
|
return getConfig();
|
||
|
|
};
|
||
|
|
const getConfig = () => {
|
||
|
|
return assignWithDepth$1({}, currentConfig);
|
||
|
|
};
|
||
|
|
const sanitize = (options) => {
|
||
|
|
["secure", ...siteConfig.secure ?? []].forEach((key) => {
|
||
|
|
if (options[key] !== void 0) {
|
||
|
|
log.debug(`Denied attempt to modify a secure key ${key}`, options[key]);
|
||
|
|
delete options[key];
|
||
|
|
}
|
||
|
|
});
|
||
|
|
Object.keys(options).forEach((key) => {
|
||
|
|
if (key.indexOf("__") === 0) {
|
||
|
|
delete options[key];
|
||
|
|
}
|
||
|
|
});
|
||
|
|
Object.keys(options).forEach((key) => {
|
||
|
|
if (typeof options[key] === "string" && (options[key].includes("<") || options[key].includes(">") || options[key].includes("url(data:"))) {
|
||
|
|
delete options[key];
|
||
|
|
}
|
||
|
|
if (typeof options[key] === "object") {
|
||
|
|
sanitize(options[key]);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
const addDirective = (directive) => {
|
||
|
|
if (directive.fontFamily) {
|
||
|
|
if (!directive.themeVariables) {
|
||
|
|
directive.themeVariables = { fontFamily: directive.fontFamily };
|
||
|
|
} else {
|
||
|
|
if (!directive.themeVariables.fontFamily) {
|
||
|
|
directive.themeVariables = { fontFamily: directive.fontFamily };
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
directives.push(directive);
|
||
|
|
updateCurrentConfig(siteConfig, directives);
|
||
|
|
};
|
||
|
|
const reset = (config2 = siteConfig) => {
|
||
|
|
directives = [];
|
||
|
|
updateCurrentConfig(config2, directives);
|
||
|
|
};
|
||
|
|
var ConfigWarning = /* @__PURE__ */ ((ConfigWarning2) => {
|
||
|
|
ConfigWarning2["LAZY_LOAD_DEPRECATED"] = "The configuration options lazyLoadedDiagrams and loadExternalDiagramsAtStartup are deprecated. Please use registerExternalDiagrams instead.";
|
||
|
|
return ConfigWarning2;
|
||
|
|
})(ConfigWarning || {});
|
||
|
|
const issuedWarnings = {};
|
||
|
|
const issueWarning = (warning) => {
|
||
|
|
if (issuedWarnings[warning]) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
log.warn(ConfigWarning[warning]);
|
||
|
|
issuedWarnings[warning] = true;
|
||
|
|
};
|
||
|
|
const checkConfig = (config2) => {
|
||
|
|
if (!config2) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (config2.lazyLoadedDiagrams || config2.loadExternalDiagramsAtStartup) {
|
||
|
|
issueWarning("LAZY_LOAD_DEPRECATED");
|
||
|
|
}
|
||
|
|
};
|
||
|
|
export {
|
||
|
|
addDirective as a,
|
||
|
|
sanitizeText as b,
|
||
|
|
assignWithDepth$1 as c,
|
||
|
|
common as d,
|
||
|
|
configKeys as e,
|
||
|
|
setConfig as f,
|
||
|
|
getConfig as g,
|
||
|
|
getSiteConfig as h,
|
||
|
|
defaultConfig as i,
|
||
|
|
evaluate as j,
|
||
|
|
saveConfigFromInitialize as k,
|
||
|
|
log as l,
|
||
|
|
setSiteConfig as m,
|
||
|
|
parseGenericTypes as p,
|
||
|
|
reset as r,
|
||
|
|
setLogLevel as s,
|
||
|
|
theme as t,
|
||
|
|
updateSiteConfig as u
|
||
|
|
};
|
||
|
|
//# sourceMappingURL=config-389b86ff.js.map
|