diff --git a/package.json b/package.json index 118efa2..cac3fab 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "jest": "^27.4.3", "jest-resolve": "^27.4.2", "jest-watch-typeahead": "^1.0.0", + "js-yaml": "^4.1.0", "localforage": "^1.10.0", "lodash": "^4.17.21", "match-sorter": "^6.3.4", @@ -99,6 +100,7 @@ }, "devDependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", + "@types/js-yaml": "^4.0.9", "@types/lodash": "^4.17.0", "monaco-editor-webpack-plugin": "^7.1.0" }, diff --git a/public/index.html b/public/index.html index aa069f2..68c5af4 100644 --- a/public/index.html +++ b/public/index.html @@ -24,6 +24,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> + React App diff --git a/src/loadYml.ts b/src/loadYml.ts new file mode 100644 index 0000000..6542cfa --- /dev/null +++ b/src/loadYml.ts @@ -0,0 +1,30 @@ +/* + * @Author : Eleanor Mao + * @Date : 2024-04-10 09:14:31 + * @LastEditTime : 2024-04-10 09:14:31 + * + * Copyright © RingCentral. All rights reserved. + */ + + +import jsYaml from 'js-yaml'; +import { transformDSL } from './transform'; + +function compress(s: string, pre: string): string { + s = unescape(encodeURIComponent(s)); + const arr = []; + for (let i = 0; i < s.length; i++) { + arr.push(s.charCodeAt(i)); + } + // @ts-ignore + const compressor = new Zopfli.RawDeflate(arr); + const compressed = compressor.compress(); + // @ts-ignore + return "http://www.plantuml.com/plantuml" + pre + encode64_(compressed); +} + +export function loadYml(input: string): string { + const definition = jsYaml.load(input); + let outputValue = transformDSL(definition); + return compress(outputValue, '/svg/'); +} diff --git a/src/tool.html b/src/tool.html deleted file mode 100644 index 7ee07d1..0000000 --- a/src/tool.html +++ /dev/null @@ -1,84 +0,0 @@ - - - - - - Input Box and Button - - - - -
- - - - -
- - - - - - - - \ No newline at end of file diff --git a/src/transform.js b/src/transform.ts similarity index 76% rename from src/transform.js rename to src/transform.ts index c69978e..947b022 100644 --- a/src/transform.js +++ b/src/transform.ts @@ -10,39 +10,45 @@ const SCRIPT_NAME = ": Script"; const BOT_NAME = ": Chat"; const EMAIL_SENDER_NAME = ": EmailSender"; -function isHttp(actions) { +interface Action { + actionType: string; +} + +interface State { + name: string; + actions: Action[]; + eventHandlers: any; +} + +function isHttp(actions: Action[]): boolean { return actions - .map((action) => action.actionType) - .some((type) => type == "HttpRequest"); + .some((action) => action.actionType === "HttpRequest"); } -function isScript(actions) { +function isScript(actions: Action[]): boolean { return actions - .map((action) => action.actionType) - .some((type) => type == "Script"); + .some((action) => action.actionType === "Script"); } -function isChat(actions) { +function isChat(actions: Action[]): boolean { return actions - .map((action) => action.actionType) - .some((type) => type == "Chat"); + .some((action) => action.actionType === 'Chat'); } -function isEmailSender(actions) { +function isEmailSender(actions: Action[]): boolean { return actions - .map((action) => action.actionType) - .some((type) => type == "EmailSender"); + .some((action) => action.actionType === "EmailSender"); } -function isEmpty(arr) { - return arr === undefined || arr == null || arr.length == 0; +function isEmpty(arr: any[]): boolean { + return arr === undefined || arr == null || arr.length === 0; } -function isNotBlank(str) { +function isNotBlank(str: string): boolean { return str !== undefined && str !== null && str.trim() !== ""; } -function drawState(eventState, state) { +function drawState(eventState: Map, state: State): string { let sb = ""; const name = state.name; const actions = state.actions; @@ -51,10 +57,10 @@ function drawState(eventState, state) { if (isEmpty(handlers)) { throw Error(`state ${name} handlers must not empty`); } - let events = new Set() + let events = new Set(); for (const handle of handlers) { const stateName = handle.eventType; - events.add(stateName) + events.add(stateName); sb += `state ${stateName} ${EVENT_COLOR} ${EVENT_NAME}\n`; } eventState.set(name, events); @@ -134,15 +140,15 @@ function drawStateLine(eventState, state) { const eventCondition = wrapCond(handler.condition); const actions = handler.actions; for (const action of actions) { - const actionType = action.actionType - let targetState = action.targetState + const actionType = action.actionType; + let targetState = action.targetState; if (actionType === "Transition") { if (eventState.has(targetState)) { - let events = eventState.get(targetState) - if(events.size > 1) { - continue + let events = eventState.get(targetState); + if (events.size > 1) { + continue; } else { - targetState = events.values().next().value + targetState = events.values().next().value; } } const desc = drawTransitionCondition(eventCondition, action); @@ -156,7 +162,7 @@ function drawStateLine(eventState, state) { return sb; } -function transformDSL(definition) { +export function transformDSL(definition: any): string { let sb = ""; const eventState = new Map(); const states = definition["states"]; @@ -173,4 +179,3 @@ ${sb} `; } -module.exports = { transformDSL }; diff --git a/yarn.lock b/yarn.lock index beef721..8a5087c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2343,6 +2343,11 @@ jest-matcher-utils "^27.0.0" pretty-format "^27.0.0" +"@types/js-yaml@^4.0.9": + version "4.0.9" + resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-4.0.9.tgz#cd82382c4f902fed9691a2ed79ec68c5898af4c2" + integrity sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg== + "@types/json-schema@*", "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9": version "7.0.15" resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"