WIP
This commit is contained in:
parent
d8c7557ae5
commit
c05c98c082
|
@ -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');
|
||||
|
|
|
@ -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');
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
|
|
|
@ -1,3 +0,0 @@
|
|||
export const mindmapDetector = (txt: string) => {
|
||||
return txt.match(/^\s*mindmap/) !== null;
|
||||
};
|
|
@ -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,
|
||||
};
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"module": "esnext",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"outDir": "./dist"
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
import DOMPurify from 'dompurify';
|
||||
|
||||
export interface MermaidConfig {
|
||||
extraDiagrams: any;
|
||||
theme?: string;
|
||||
themeVariables?: any;
|
||||
themeCSS?: string;
|
||||
|
|
|
@ -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;
|
||||
};
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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. */,
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue