Added proper visualization of the Declare model

Author: delas

src/components/ProcessVisualizer.vue

@@ -30,7 +30,6 @@
 					<v-icon class="mr-2" icon="mdi-download" />
 					Download .decl
 				</v-btn>
-				<!-- <pre class="flex-grow-1 img-container mt-3" v-html="declare_img"></pre> -->
 				<div id="declareContainer" class="flex-fill"></div>
 			</v-container>
 		</v-tabs-window-item>
@@ -96,7 +95,7 @@ export default {
 			});
 
 			// render declare
-			this.declare_img = this.declare;
+			// this.declare_img = this.declare;
 		},
 		handleDownloadFile(type) {
 			let model = "";
@@ -127,7 +126,7 @@ export default {
 		onTabChange() {
 			if (this.tab === 'declare') {
 				setTimeout(() => {
-					let declare = new DeclareContainer(this.declare_js);
+					new DeclareContainer(this.declare_js);
 				}, 100);
 			}
 		}

src/libs/declare-js/main.js

@@ -26,7 +26,7 @@ import { handleFileUpload } from "./interactivity/importMenu.js";
 
 export class DeclareContainer {
 
-    constructor() {
+    constructor(str) {
 
         this.enableEdit = true;
         this.snapToGrid = true;
@@ -35,6 +35,7 @@ export class DeclareContainer {
         this.canvas;
         this.view;
         this.zoomLevel = 1;
+		this.str = str;
 
         this.mode;
         this.editor;
@@ -153,25 +154,25 @@ export class DeclareContainer {
         // generation of random model (activities, existence constraints, relation constraints)
         //const constraintStrings = this.declareModel.generateRandomModel(10, 5, 15);
 
-        const str = `
-        End('hand over car')
-        AtLeastOne('verify problem')
-        ExactlyOne('hand over car')
-        Init('get customer report')
-        ChainResponse('get customer report','verify problem')
-        Precedence('verify problem','ask customer for clarification')
-        AlternateResponse('ask customer for clarification','verify problem')
-        Succession('verify problem','repair car')
-        Response('order spare parts','repair car')
-        ChainSuccession('repair car','check repair')
-        ChainSuccession('check repair','notify customer')
-        ChainSuccession('notify customer','hand over car')
-        NotResponse('repair car','ask customer for clarification')
-        NotResponse('notify customer','repair car')
-        NotResponse('hand over car','repair car')
-        `;
-
-        const constraintStrings = str.split(/\r?\n/);
+        // const str = `
+        // End('hand over car')
+        // AtLeastOne('verify problem')
+        // ExactlyOne('hand over car')
+        // Init('get customer report')
+        // ChainResponse('get customer report','verify problem')
+        // Precedence('verify problem','ask customer for clarification')
+        // AlternateResponse('ask customer for clarification','verify problem')
+        // Succession('verify problem','repair car')
+        // Response('order spare parts','repair car')
+        // ChainSuccession('repair car','check repair')
+        // ChainSuccession('check repair','notify customer')
+        // ChainSuccession('notify customer','hand over car')
+        // NotResponse('repair car','ask customer for clarification')
+        // NotResponse('notify customer','repair car')
+        // NotResponse('hand over car','repair car')
+        // `;
+
+        const constraintStrings = this.str.split(/\r?\n/);
 
         console.log(constraintStrings);