KOGITO-6903: Integrate stunner-based SWF Diagram Editor with multiplying architecture

.github/workflows/release_build.yml

@@ -597,7 +597,7 @@ jobs:
           echo "Copy Chrome Extension resources"
           rm -rf $DEPLOYMENT_DIR
           mkdir -p $DEPLOYMENT_DIR
-          cp -r ${{ github.workspace }}/kie-tools/packages/chrome-extension-serverless-workflow-editor/dist/{fonts,*-envelope.*,*.bundle.js,*.worker.js} $DEPLOYMENT_DIR
+          cp -r ${{ github.workspace }}/kie-tools/packages/chrome-extension-serverless-workflow-editor/dist/{fonts,diagram,*-envelope.*,*.bundle.js,*.worker.js} $DEPLOYMENT_DIR
 
           echo "Commit changes and push"
           git add .

.github/workflows/staging_build.yml

@@ -262,7 +262,7 @@ jobs:
           cp -r ${{ github.workspace }}/kie-tools/packages/chrome-extension-pack-kogito-kie-editors/dist/{bpmn,dmn,scesim,fonts,*-envelope.*} $DEPLOYMENT_DIR/chrome-extension
 
           echo "Copy SWF Editor Chrome Extension resources to the deployment directory"
-          cp -r ${{ github.workspace }}/kie-tools/packages/chrome-extension-serverless-workflow-editor/dist/{fonts,*-envelope.*,*.bundle.js,*.worker.js} $DEPLOYMENT_DIR/swf-chrome-extension
+          cp -r ${{ github.workspace }}/kie-tools/packages/chrome-extension-serverless-workflow-editor/dist/{fonts,diagram,*-envelope.*,*.bundle.js,*.worker.js} $DEPLOYMENT_DIR/swf-chrome-extension
 
           echo "Remove gwt-editors from the Online Editor deployment"
           rm -rf $DEPLOYMENT_DIR/gwt-editors

.syncpackrc.json

@@ -3,7 +3,8 @@
     {
       "dependencies": ["monaco-editor"],
       "packages": [
-        "@kie-tools/serverless-workflow-editor",
+        "@kie-tools/serverless-workflow-text-editor",
+        "@kie-tools/serverless-workflow-combined-editor",
         "@kie-tools/yard-editor",
         "chrome-extension-serverless-workflow-editor",
         "vscode-extension-serverless-workflow-editor",

packages/build-env/graph.dot

@@ -30,7 +30,7 @@ digraph G {
   "@kie-tools/kie-bc-editors" [ color = "blue", fontcolor = "blue", style = "rounded" ];
   "@kie-tools/stunner-editors" [ color = "black", fontcolor = "black", style = "dashed, rounded" ];
   "chrome-extension-serverless-workflow-editor" [ color = "black", fontcolor = "black", style = "dashed, rounded" ];
-  "@kie-tools/serverless-workflow-editor" [ color = "blue", fontcolor = "blue", style = "rounded" ];
+  "@kie-tools/serverless-workflow-combined-editor" [ color = "blue", fontcolor = "blue", style = "rounded" ];
   "@kie-tools/cors-proxy-image" [ color = "black", fontcolor = "black", style = "dashed, rounded" ];
   "@kie-tools/dashbuilder" [ color = "black", fontcolor = "black", style = "dashed, rounded" ];
   "@kie-tools/dashbuilder-component-assembler" [ color = "black", fontcolor = "black", style = "dashed, rounded" ];
@@ -76,6 +76,9 @@ digraph G {
   "@kie-tools/pmml-editor" [ color = "blue", fontcolor = "blue", style = "rounded" ];
   "@kie-tools/unitables-dmn" [ color = "blue", fontcolor = "blue", style = "rounded" ];
   "@kie-tools/serverless-workflow-diagram-editor" [ color = "black", fontcolor = "black", style = "dashed, rounded" ];
+  "@kie-tools/serverless-workflow-diagram-editor-envelope" [ color = "blue", fontcolor = "blue", style = "rounded" ];
+  "@kie-tools/serverless-workflow-mermaid-viewer" [ color = "blue", fontcolor = "blue", style = "rounded" ];
+  "@kie-tools/serverless-workflow-text-editor" [ color = "blue", fontcolor = "blue", style = "rounded" ];
   "@kie-tools/serverless-workflow-language-service" [ color = "blue", fontcolor = "blue", style = "rounded" ];
   "@kie-tools/serverless-workflow-service-catalog" [ color = "blue", fontcolor = "blue", style = "rounded" ];
   "@kie-tools/stunner-editors-dmn-loader" [ color = "blue", fontcolor = "blue", style = "rounded" ];
@@ -121,7 +124,7 @@ digraph G {
   "chrome-extension-pack-kogito-kie-editors" -> "@kie-tools/kie-bc-editors" [ style = "solid", color = "black" ];
   "chrome-extension-pack-kogito-kie-editors" -> "@kie-tools/stunner-editors" [ style = "dashed", color = "black" ];
   "chrome-extension-serverless-workflow-editor" -> "@kie-tools-core/chrome-extension" [ style = "dashed", color = "black" ];
-  "chrome-extension-serverless-workflow-editor" -> "@kie-tools/serverless-workflow-editor" [ style = "dashed", color = "black" ];
+  "chrome-extension-serverless-workflow-editor" -> "@kie-tools/serverless-workflow-combined-editor" [ style = "dashed", color = "black" ];
   "@kie-tools/cors-proxy-image" -> "@kie-tools-core/run-script-if" [ style = "dashed", color = "black" ];
   "@kie-tools/dashbuilder" -> "@kie-tools/dashbuilder-component-assembler" [ style = "solid", color = "black" ];
   "@kie-tools/dashbuilder-client" -> "@kie-tools-core/run-script-if" [ style = "dashed", color = "blue" ];
@@ -218,12 +221,19 @@ digraph G {
   "@kie-tools/pmml-editor" -> "@kie-tools-core/webpack-base" [ style = "dashed", color = "blue" ];
   "@kie-tools/pmml-editor-marshaller" -> "@kie-tools-core/run-script-if" [ style = "dashed", color = "blue" ];
   "@kie-tools-core/run-script-if" -> "@kie-tools/build-env" [ style = "dashed", color = "purple" ];
+  "@kie-tools/serverless-workflow-combined-editor" -> "@kie-tools/serverless-workflow-diagram-editor" [ style = "solid", color = "blue" ];
+  "@kie-tools/serverless-workflow-combined-editor" -> "@kie-tools/serverless-workflow-diagram-editor-envelope" [ style = "solid", color = "blue" ];
+  "@kie-tools/serverless-workflow-combined-editor" -> "@kie-tools/serverless-workflow-mermaid-viewer" [ style = "solid", color = "blue" ];
+  "@kie-tools/serverless-workflow-combined-editor" -> "@kie-tools/serverless-workflow-text-editor" [ style = "solid", color = "blue" ];
   "@kie-tools/serverless-workflow-diagram-editor" -> "@kie-tools-core/run-script-if" [ style = "dashed", color = "black" ];
-  "@kie-tools/serverless-workflow-editor" -> "@kie-tools-core/editor" [ style = "solid", color = "blue" ];
-  "@kie-tools/serverless-workflow-editor" -> "@kie-tools/serverless-workflow-language-service" [ style = "solid", color = "blue" ];
-  "@kie-tools/serverless-workflow-editor" -> "@kie-tools-core/webpack-base" [ style = "dashed", color = "blue" ];
+  "@kie-tools/serverless-workflow-diagram-editor-envelope" -> "@kie-tools/kie-bc-editors" [ style = "solid", color = "blue" ];
   "@kie-tools/serverless-workflow-language-service" -> "@kie-tools/serverless-workflow-service-catalog" [ style = "solid", color = "blue" ];
+  "@kie-tools/serverless-workflow-mermaid-viewer" -> "@kie-tools-core/editor" [ style = "solid", color = "blue" ];
+  "@kie-tools/serverless-workflow-mermaid-viewer" -> "@kie-tools-core/webpack-base" [ style = "dashed", color = "blue" ];
   "@kie-tools/serverless-workflow-service-catalog" -> "@kie-tools-core/envelope-bus" [ style = "solid", color = "blue" ];
+  "@kie-tools/serverless-workflow-text-editor" -> "@kie-tools-core/editor" [ style = "solid", color = "blue" ];
+  "@kie-tools/serverless-workflow-text-editor" -> "@kie-tools/serverless-workflow-language-service" [ style = "solid", color = "blue" ];
+  "@kie-tools/serverless-workflow-text-editor" -> "@kie-tools-core/webpack-base" [ style = "dashed", color = "blue" ];
   "@kie-tools/stunner-editors" -> "@kie-tools/stunner-editors-dmn-loader" [ style = "solid", color = "black" ];
   "@kie-tools/stunner-editors-dmn-loader" -> "@kie-tools-core/keyboard-shortcuts" [ style = "solid", color = "blue" ];
   "@kie-tools/stunner-editors-dmn-loader" -> "@kie-tools/boxed-expression-component" [ style = "solid", color = "blue" ];
@@ -258,7 +268,10 @@ digraph G {
   "vscode-extension-pmml-editor" -> "@kie-tools/pmml-editor" [ style = "solid", color = "blue" ];
   "vscode-extension-red-hat-business-automation-bundle" -> "@kie-tools-core/webpack-base" [ style = "dashed", color = "blue" ];
   "vscode-extension-serverless-workflow-editor" -> "@kie-tools-core/vscode-extension" [ style = "solid", color = "blue" ];
-  "vscode-extension-serverless-workflow-editor" -> "@kie-tools/serverless-workflow-editor" [ style = "solid", color = "blue" ];
+  "vscode-extension-serverless-workflow-editor" -> "@kie-tools/serverless-workflow-diagram-editor-envelope" [ style = "solid", color = "blue" ];
+  "vscode-extension-serverless-workflow-editor" -> "@kie-tools/serverless-workflow-language-service" [ style = "solid", color = "blue" ];
+  "vscode-extension-serverless-workflow-editor" -> "@kie-tools/serverless-workflow-mermaid-viewer" [ style = "solid", color = "blue" ];
+  "vscode-extension-serverless-workflow-editor" -> "@kie-tools/serverless-workflow-diagram-editor" [ style = "dashed", color = "blue" ];
   "vscode-extension-yard-editor" -> "@kie-tools-core/vscode-extension" [ style = "solid", color = "blue" ];
   "vscode-extension-yard-editor" -> "@kie-tools/yard-editor" [ style = "solid", color = "blue" ];
   "@kie-tools-core/vscode-java-code-completion" -> "@kie-tools-core/run-script-if" [ style = "dashed", color = "purple" ];

packages/build-env/index.js

@@ -426,9 +426,21 @@ module.exports = {
     },
   },
 
-  serverlessWorkflowEditor: {
+  serverlessWorkflowCombinedEditor: {
     dev: {
-      port: 9007,
+      port: 9002,
+    },
+  },
+
+  serverlessWorkflowTextEditor: {
+    dev: {
+      port: 9003,
+    },
+  },
+
+  serverlessWorkflowMermaidViewer: {
+    dev: {
+      port: 9004,
     },
   },
 

packages/chrome-extension-serverless-workflow-editor/package.json

@@ -9,16 +9,23 @@
     "url": "https://github.com/kiegroup/kie-tools.git"
   },
   "devDependencies": {
+    "@kie-tools/build-env": "0.0.0",
+    "@kie-tools/serverless-workflow-diagram-editor": "0.0.0",
+    "@kie-tools/serverless-workflow-combined-editor": "0.0.0",
+    "@kie-tools/serverless-workflow-diagram-editor-envelope": "0.0.0",
+    "@kie-tools/serverless-workflow-mermaid-viewer": "0.0.0",
+    "@kie-tools/serverless-workflow-text-editor": "0.0.0",
+    "monaco-editor-webpack-plugin": "^7.0.1",
     "@kie-tools-core/chrome-extension": "0.0.0",
     "@kie-tools-core/editor": "0.0.0",
+    "@kie-tools-core/keyboard-shortcuts": "0.0.0",
     "@kie-tools-core/patternfly-base": "0.0.0",
-    "@kie-tools/serverless-workflow-editor": "0.0.0",
-    "@kie-tools/build-env": "0.0.0",
     "@kie-tools-core/run-script-if": "0.0.0",
     "@kie-tools-core/webpack-base": "0.0.0",
-    "monaco-editor-webpack-plugin": "^7.0.1",
     "monaco-editor": "^0.33.0",
-    "monaco-yaml": "^3.2.1"
+    "monaco-yaml": "^3.2.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "scripts": {
     "lint": "pnpm run-script-if --bool \"$(build-env global.build.lint)\" --then \"pnpm eslint ./src --ext .ts,.tsx\"",

packages/chrome-extension-serverless-workflow-editor/src/envelope/ServerlessWorkflowCombinedEditorEnvelopeApp.ts

@@ -0,0 +1,26 @@
+/*
+ * Copyright 2022 Red Hat, Inc. and/or its affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { init } from "@kie-tools-core/editor/dist/envelope";
+import { NoOpKeyboardShortcutsService } from "@kie-tools-core/keyboard-shortcuts/dist/envelope";
+import { ServerlessWorkflowCombinedEditorFactory } from "@kie-tools/serverless-workflow-combined-editor/dist/editor";
+
+init({
+  container: document.getElementById("combined-envelope-app")!,
+  bus: { postMessage: (message, targetOrigin, _) => window.parent.postMessage(message, targetOrigin!, _) },
+  editorFactory: new ServerlessWorkflowCombinedEditorFactory(),
+  keyboardShortcutsService: new NoOpKeyboardShortcutsService(),
+});

packages/chrome-extension-serverless-workflow-editor/src/envelope/ServerlessWorkflowDiagramEditorEnvelopeApp.ts

@@ -0,0 +1,38 @@
+/*
+ * Copyright 2022 Red Hat, Inc. and/or its affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { initCustom } from "@kie-tools-core/editor/dist/envelope";
+import {
+  ServerlessWorkflowDiagramEditorChannelApi,
+  ServerlessWorkflowDiagramEditorEnvelopeApi,
+} from "@kie-tools/serverless-workflow-diagram-editor-envelope/dist/api";
+import {
+  ServerlessWorkflowDiagramEditor,
+  ServerlessWorkflowDiagramEditorEnvelopeApiImpl,
+} from "@kie-tools/serverless-workflow-diagram-editor-envelope/dist/envelope";
+
+initCustom<
+  ServerlessWorkflowDiagramEditor,
+  ServerlessWorkflowDiagramEditorEnvelopeApi,
+  ServerlessWorkflowDiagramEditorChannelApi
+>({
+  container: document.getElementById("diagram-envelope-app")!,
+  bus: { postMessage: (message, targetOrigin, _) => window.parent.postMessage(message, targetOrigin!, _) },
+  apiImplFactory: {
+    create: (args) =>
+      new ServerlessWorkflowDiagramEditorEnvelopeApiImpl(args, { shouldLoadResourcesDynamically: true }),
+  },
+});

packages/chrome-extension-serverless-workflow-editor/src/envelope/ServerlessWorkflowMermaidViewerEnvelopeApp.ts

@@ -0,0 +1,26 @@
+/*
+ * Copyright 2022 Red Hat, Inc. and/or its affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { init } from "@kie-tools-core/editor/dist/envelope";
+import { NoOpKeyboardShortcutsService } from "@kie-tools-core/keyboard-shortcuts/dist/envelope";
+import { ServerlessWorkflowMermaidViewerFactory } from "@kie-tools/serverless-workflow-mermaid-viewer/dist/viewer";
+
+init({
+  container: document.getElementById("mermaid-envelope-app")!,
+  bus: { postMessage: (message, targetOrigin, _) => window.parent.postMessage(message, targetOrigin!, _) },
+  editorFactory: new ServerlessWorkflowMermaidViewerFactory(),
+  keyboardShortcutsService: new NoOpKeyboardShortcutsService(),
+});

packages/chrome-extension-serverless-workflow-editor/src/envelope/ServerlessWorkflowTextEditorEnvelopeApp.ts

@@ -0,0 +1,24 @@
+/*
+ * Copyright 2022 Red Hat, Inc. and/or its affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { init } from "@kie-tools-core/editor/dist/envelope";
+import { ServerlessWorkflowTextEditorFactory } from "@kie-tools/serverless-workflow-text-editor/dist/editor";
+
+init({
+  container: document.getElementById("text-envelope-app")!,
+  bus: { postMessage: (message, targetOrigin, _) => window.parent.postMessage(message, targetOrigin!, _) },
+  editorFactory: new ServerlessWorkflowTextEditorFactory(),
+});

packages/chrome-extension-serverless-workflow-editor/src/github-content-script.ts

@@ -25,10 +25,10 @@ startExtension({
   githubAuthTokenCookieName: "github-oauth-token-kie-editors",
   editorEnvelopeLocator: new EditorEnvelopeLocator(window.location.origin, [
     new EnvelopeMapping(
-      "sw",
+      "swf",
       "**/*.sw.+(json|yml|yaml)",
-      `${resourcesPathPrefix}/sw`,
-      `${resourcesPathPrefix}/serverless-workflow-editor-envelope.html`
+      `${resourcesPathPrefix}`,
+      `${resourcesPathPrefix}/serverless-workflow-combined-editor-envelope.html`
     ),
   ]),
 });

packages/chrome-extension-serverless-workflow-editor/static/serverless-workflow-combined-editor-envelope.html

@@ -0,0 +1,42 @@
+<!--
+  ~ Copyright 2022 Red Hat, Inc. and/or its affiliates.
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~        http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+      html,
+      body,
+      div#envelope-app {
+        margin: 0;
+        border: 0;
+        padding: 0;
+        overflow: hidden;
+        height: 100%;
+        width: 100%;
+      }
+    </style>
+
+    <title></title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  </head>
+  <body>
+    <div id="combined-envelope-app"></div>
+    <script src="serverless-workflow-combined-editor-envelope.js"></script>
+  </body>
+</html>

packages/chrome-extension-serverless-workflow-editor/static/serverless-workflow-diagram-editor-envelope.html

@@ -0,0 +1,42 @@
+<!--
+  ~ Copyright 2022 Red Hat, Inc. and/or its affiliates.
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~        http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+      html,
+      body,
+      div#envelope-app {
+        margin: 0;
+        border: 0;
+        padding: 0;
+        overflow: hidden;
+        height: 100%;
+        width: 100%;
+      }
+    </style>
+
+    <title></title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  </head>
+  <body>
+    <div id="diagram-envelope-app"></div>
+    <script src="serverless-workflow-diagram-editor-envelope.js"></script>
+  </body>
+</html>