This commit is contained in:
Knut Sveidqvist 2022-10-05 13:14:05 +02:00
parent d8c7557ae5
commit c05c98c082
12 changed files with 65 additions and 64 deletions

View File

@ -368,7 +368,6 @@ flowchart TD
</pre>
<!-- <script src="./mermaid.js"></script> -->
<script src="./mermaid-mindmap-detector.js"></script>
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
@ -386,6 +385,7 @@ flowchart TD
htmlLabels: false,
fontFamily: 'courier',
},
extraDiagrams: ['./mermaid-mindmap-detector.js'],
});
function callback() {
alert('It worked');

View File

@ -86,9 +86,10 @@ mindmap
gc7((grand<br/>grand<br/>child 8))
</pre>
<!-- <div id="cy"></div> -->
<script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script>
<script src="./mermaid-example-diagram-detector.js"></script>
<!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
<!-- <script src="./mermaid-example-diagram-detector.js"></script> -->
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
@ -97,8 +98,10 @@ mindmap
theme: 'forest',
startOnLoad: true,
logLevel: 0,
basePath: './packages/',
// basePath: './packages/',
// themeVariables: { darkMode: true },
extraDiagrams: ['./mermaid-mindmap-detector.js'],
// extraDiagrams: ['../../mermaid-mindmap/registry.ts'],
});
function callback() {
alert('It worked');

View File

@ -5,13 +5,10 @@ import mindmapRenderer from './mindmapRenderer';
import mindmapStyles from './styles';
import { injectUtils } from './mermaidUtils';
window.mermaid.connectDiagram(
'mindmap',
{
db: mindmapDb,
renderer: mindmapRenderer,
parser: mindmapParser,
styles: mindmapStyles,
},
injectUtils
);
export const mindmap = {
db: mindmapDb,
renderer: mindmapRenderer,
parser: mindmapParser,
styles: mindmapStyles,
injectUtils,
};

View File

@ -1,3 +0,0 @@
export const mindmapDetector = (txt: string) => {
return txt.match(/^\s*mindmap/) !== null;
};

View File

@ -1,34 +1,26 @@
// @ts-ignore: TODO Fix ts errors
import { mindmapDetector } from './mindmapDetector';
export const id = 'mindmap';
const scriptElement = document.currentScript as HTMLScriptElement;
const path = scriptElement.src;
const lastSlash = path.lastIndexOf('/');
const baseFolder = lastSlash < 0 ? path : path.substring(0, lastSlash + 1);
const detectorFunction = (txt: string) => {
return txt.match(/^\s*mindmap/) !== null;
};
if (typeof document !== 'undefined') {
if (window.mermaid && typeof window.mermaid.detectors === 'object') {
window.mermaid.detectors.push({ id: 'mindmap', detector: mindmapDetector });
export const loadDiagram = async () => {
const diagram = await import('./add-diagram');
return { id, detector, diagram };
};
export const detector = async (txt: string) => {
if (detectorFunction(txt)) {
const diagram = await import('./add-diagram');
return { id, diagram };
} else {
window.mermaid = {};
window.mermaid.detectors = [{ id: 'mindmap', detector: mindmapDetector }];
return false;
}
};
/*!
* Wait for document loaded before starting the execution.
*/
window.addEventListener(
'load',
() => {
if (window.mermaid && typeof window.mermaid.detectors === 'object') {
window.mermaid.detectors.push({
id: 'mindmap',
detector: mindmapDetector,
path: baseFolder,
});
console.error(window.mermaid.detectors); // eslint-disable-line no-console
}
},
false
);
}
export const id = 'mindmap';
export default {
id,
detector,
loadDiagram,
};

View File

@ -1,5 +1,6 @@
{
"extends": "../../tsconfig.json",
"module": "esnext",
"compilerOptions": {
"rootDir": "./src",
"outDir": "./dist"

View File

@ -12,7 +12,7 @@ export class Diagram {
constructor(public txt: string, parseError?: Function) {
const cnf = configApi.getConfig();
this.txt = txt;
this.type = detectType(txt, cnf);
this.type = await detectType(txt, cnf);
const diagram = getDiagram(this.type);
log.debug('Type ' + this.type);
// Setup diagram
@ -76,9 +76,9 @@ export const getDiagramFromText = async (txt: string, parseError?: Function) =>
getDiagram(type);
} catch (error) {
// Diagram not avaiable, loading it
const path = getPathForDiagram(type);
// const path = getPathForDiagram(type);
// await loadDiagram('./packages/mermaid-mindmap/dist/mermaid-mindmap.js');
await loadDiagram(path + 'mermaid-' + type + '.js');
// await loadDiagram(path + 'mermaid-' + type + '.js');
// new diagram will try getDiagram again and if fails then it is a valid throw
}
// If either of the above worked, we have the diagram

View File

@ -3,6 +3,7 @@
import DOMPurify from 'dompurify';
export interface MermaidConfig {
extraDiagrams: any;
theme?: string;
themeVariables?: any;
themeCSS?: string;

View File

@ -1,13 +1,12 @@
import { MermaidConfig } from '../config.type';
export type DiagramDetector = (text: string, config?: MermaidConfig) => boolean;
export type DetectorRecord = { detector: DiagramDetector; path: string };
const directive =
/[%]{2}[{]\s*(?:(?:(\w+)\s*:|(\w+))\s*(?:(?:(\w+))|((?:(?![}][%]{2}).|\r?\n)*))?\s*)(?:[}][%]{2})?/gi;
const anyComment = /\s*%%.*\n/gm;
const detectors: Record<string, DetectorRecord> = {};
const detectors: Record<string, DiagramDetector> = {};
/**
* @function detectType Detects the type of the graph text. Takes into consideration the possible
@ -37,8 +36,9 @@ export const detectType = function (text: string, config?: MermaidConfig): strin
// console.log(detectors);
for (const [key, detectorRecord] of Object.entries(detectors)) {
if (detectorRecord.detector(text, config)) {
for (const [key, detector] of Object.entries(detectors)) {
const diagram = detector(text, config);
if (diagram) {
return key;
}
}
@ -47,13 +47,6 @@ export const detectType = function (text: string, config?: MermaidConfig): strin
return 'flowchart';
};
export const addDetector = (key: string, detector: DiagramDetector, path: string) => {
detectors[key] = { detector, path };
};
export const getPathForDiagram = (id: string) => {
const detectorRecord = detectors[id];
if (detectorRecord) {
return detectorRecord.path;
}
export const addDetector = (key: string, detector: DiagramDetector) => {
detectors[key] = detector;
};

View File

@ -18,6 +18,7 @@ import { compile, serialize, stringify } from 'stylis';
import pkg from '../package.json';
import * as configApi from './config';
import { addDiagrams } from './diagram-api/diagram-orchestration';
import { addDetector } from './diagram-api/detectType';
import classDb from './diagrams/class/classDb';
import flowDb from './diagrams/flowchart/flowDb';
import flowRenderer from './diagrams/flowchart/flowRenderer';
@ -461,7 +462,7 @@ const handleDirective = function (p: any, directive: any, type: string): void {
};
/** @param {MermaidConfig} options */
function initialize(options: MermaidConfig) {
async function initialize(options: MermaidConfig) {
// Handle legacy location of font-family configuration
if (options?.fontFamily) {
if (!options.themeVariables?.fontFamily) {
@ -485,6 +486,14 @@ function initialize(options: MermaidConfig) {
typeof options === 'object' ? configApi.setSiteConfig(options) : configApi.getSiteConfig();
setLogLevel(config.logLevel);
if (typeof config.extraDiagrams !== 'undefined' && config.extraDiagrams.length > 0) {
// config.extraDiagrams.forEach(async (diagram: string) => {
await import(config.extraDiagrams[0]);
const { id, detector } = window['mermaid-mindmap-detector']; //eslint-disable-line
addDetector(id, detector);
// });
}
if (!hasLoadedDiagrams) {
addDiagrams();
hasLoadedDiagrams = true;

View File

@ -27,7 +27,7 @@
// "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
/* Modules */
"module": "ES6" /* Specify what module code is generated. */,
"module": "es2022" /* Specify what module code is generated. */,
// "rootDir": "./packages" /* Specify the root folder within your source files. */,
"moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
// "baseUrl": "./src" /* Specify the base directory to resolve non-relative module names. */,

View File

@ -15,4 +15,12 @@ export default defineConfig({
reporter: ['text', 'json', 'html', 'lcov'],
},
},
build: {
/** If you set esmExternals to true, this plugins assumes that
all external dependencies are ES modules */
commonjsOptions: {
esmExternals: true,
},
},
});