Skip to content

Commit

Permalink
Merge pull request #149 from rwth-acis/lakhoune/issue140
Browse files Browse the repository at this point in the history 
Lakhoune/issue140
  • Loading branch information
@lakhoune
lakhoune authored May 10, 2023
2 parents e2fedc2 + c72d2c2 commit ce50330
Show file tree
Hide file tree
Showing 6 changed files with 142 additions and 87 deletions.
4 changes: 2 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@rwth-acis/syncmeta-widgets",
"description": "SyncMeta is a near real-time collaborative modeling framework. This package only contains the used widgets. If you want to use the SyncMeta app in a docker container, see https://github.com/rwth-acis/syncmeta.",
"version": "2.2.8",
"version": "2.2.9",
"author": {
"name": "ACIS Group, RWTH Aachen",
"email": "[email protected]"
Expand Down
25 changes: 9 additions & 16 deletions src/es6/canvas_widget/JSONtoGraph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import "https://unpkg.com/[email protected]/dist/jquery.js";
import { EntityManagerInstance as EntityManager } from "./Manager";
import _ from "lodash-es";

export default function (json, canvas) {
export default function (json, canvas = window.canvas) {
if (!canvas) return new Error("No canvas object defined!");

function cleanUpYSpace(entity) {
Expand Down Expand Up @@ -78,14 +78,11 @@ export default function (json, canvas) {
jsonNode.type +
" type is defined in the VLS"
);
var $errorMsg = $("#errorMsg");
$("#loading").hide();
$("#canvas-frame").hide();
$errorMsg.parent().css("display", "inline-table");
$errorMsg.text(
"SYNCMETA: Model is not compatible to the current Metamodel! Delete the current model or change the metamodel."
throw new Error(
"SYNCMETA: Node undefined. Check if " +
jsonNode.type +
" type is defined in the VLS"
);
return;
}

node.registerYMap();
Expand Down Expand Up @@ -121,15 +118,11 @@ export default function (json, canvas) {
edges[edgeId].type +
" type is defined in the VLS"
);
var $errorMsg = $("#errorMsg");
$errorMsg.parent().show();
$("#canvas-frame").hide();
$("#loading").hide();
$errorMsg.parent().css("display", "inline-table");
$errorMsg.text(
"SYNCMETA: Model is not compatible to the current Metamodel! Delete the current model or change the metamodel."
throw new Error(
"SYNCMETA: Edge undefined. Check if " +
edges[edgeId].type +
" type is defined in the VLS"
);
continue;
}

//register it to Yjs and draw it to the canvas
Expand Down
3 changes: 2 additions & 1 deletion src/types/index.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { JsPlumbInstance } from "@jsplumb/core";
import { JsPlumbInstance } from "@jsplumb/browser-ui";
import { Doc as YDoc } from "yjs";

export {};
Expand All @@ -11,6 +11,7 @@ declare global {
y: YDoc;
caeFrames: any;
_iwc_instance_: any;
canvas: any;
_addIwcIntentListener: (f: any) => void;
_reloadThisFuckingInstance: () => void;
jsPlumbInstance: JsPlumbInstance;
Expand Down
180 changes: 114 additions & 66 deletions src/widgets/partials/debug.widget.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import init from "../../es6/shared";
import { SyncMetaWidget } from "../../widget";
import { Text as YText, Map as YMap } from "yjs";
import { EntityManagerInstance } from "../../es6/canvas_widget/Manager";
import JSONtoGraph from "../../es6/canvas_widget/JSONtoGraph";
// widget body used by all syncmeta widgets
const guidance = getGuidanceModeling();

Expand All @@ -23,6 +24,11 @@ export class DebugWidget extends SyncMetaWidget(
widgetName = getWidgetTagName(CONFIG.WIDGET.NAME.DEBUG);
$spinner: JQuery<HTMLElement>;
$fileObject: any;
$smallSpinner: JQuery<HTMLElement> = $(
`<div class="spinner-border text-light" role="status" style="height: 20px; width:20px">
<span class="visually-hidden">Loading...</span>
</div>`
);

protected firstUpdated(
_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
Expand Down Expand Up @@ -154,6 +160,10 @@ export class DebugWidget extends SyncMetaWidget(
});

$importMetamodel.click(() => {
const deleteModel = confirm(
"Importing a new metamodel will delete the current model. Are you sure you want to continue ?"
);
if (!deleteModel) return;
this.$spinner.show();
$importMetamodel.prop("disabled", true);
getFileContent()
Expand Down Expand Up @@ -311,7 +321,7 @@ export class DebugWidget extends SyncMetaWidget(
</h6>
<button
id="import-model"
class="btn btn-primary"
class="btn btn-primary flex items-center justify-center"
title="Import a model to the canvas"
@click="${this.importModel}"
>
Expand Down Expand Up @@ -398,83 +408,121 @@ export class DebugWidget extends SyncMetaWidget(
`;
}

disableAllButtons() {
$("#import-model").prop("disabled", true);
$("#export-model").prop("disabled", true);
$("#delete-model").prop("disabled", true);
$("#import-meta-model").prop("disabled", true);
$("#export-meta-model").prop("disabled", true);
$("#delete-meta-model").prop("disabled", true);
$("#import-guidance-model").prop("disabled", true);
$("#export-guidance-model").prop("disabled", true);
$("#delete-guidance-model").prop("disabled", true);
$("#export-activity-list").prop("disabled", true);
$("#delete-activity-list").prop("disabled", true);
}

enableAllButtons() {
$("#import-model").prop("disabled", false);
$("#export-model").prop("disabled", false);
$("#delete-model").prop("disabled", false);
$("#import-meta-model").prop("disabled", false);
$("#export-meta-model").prop("disabled", false);
$("#delete-meta-model").prop("disabled", false);
$("#import-guidance-model").prop("disabled", false);
$("#export-guidance-model").prop("disabled", false);
$("#delete-guidance-model").prop("disabled", false);
$("#export-activity-list").prop("disabled", false);
$("#delete-activity-list").prop("disabled", false);
}

importModel() {
this.$spinner.show();
getFileContent()
.then((data) => {
var initAttributes = function (attrs, map) {
if (attrs.hasOwnProperty("[attributes]")) {
var attr = attrs["[attributes]"].list;
for (var key in attr) {
if (attr.hasOwnProperty(key)) {
if (attr[key].hasOwnProperty("key")) {
var ytext = map.set(attr[key].key.id, new YText());
ytext.insert(0, attr[key].key.value);
} else {
var ytext = map.set(attr[key].value.id, new YText());
ytext.insert(0, attr[key].value.value);
setTimeout(() => {
getFileContent()
.then((data) => {
try {
JSONtoGraph(data);
} catch (error) {
const deleteMetamodel = confirm("The imported model will not be compatible. Do you want to delete the current metamodel?");
if (deleteMetamodel) {
window.y.getMap("data").set("metamodel", null);
}
var initAttributes = function (attrs, map) {
if (attrs.hasOwnProperty("[attributes]")) {
var attr = attrs["[attributes]"].list;
for (var key in attr) {
if (attr.hasOwnProperty(key)) {
if (attr[key].hasOwnProperty("key")) {
var ytext = map.set(attr[key].key.id, new YText());
ytext.insert(0, attr[key].key.value);
} else {
var ytext = map.set(attr[key].value.id, new YText());
ytext.insert(0, attr[key].value.value);
}
}
}
}
} else {
for (var key in attrs) {
if (attrs.hasOwnProperty(key)) {
var value = attrs[key].value;
if (!value.hasOwnProperty("option")) {
if (value.value instanceof String) {
var ytext = map.set(value.id, new YText());
ytext.insert(0, value.value);
} else {
for (var key in attrs) {
if (attrs.hasOwnProperty(key)) {
var value = attrs[key].value;
if (!value.hasOwnProperty("option")) {
if (value.value instanceof String) {
var ytext = map.set(value.id, new YText());
ytext.insert(0, value.value);
}
}
}
}
}
}
};
const dataMap = window.y.getMap("data");
if (guidance.isGuidanceEditor()) {
dataMap.set("guidancemodel", data);
} else dataMap.set("model", data);
for (var key in data.nodes) {
if (data.nodes.hasOwnProperty(key)) {
var entity = data.nodes[key];
const nodesMap = window.y.getMap("nodes");
nodesMap.set(key, new YMap());
var attrs = entity.attributes;
if (entity.hasOwnProperty("label")) {
var ytext = new YText(entity.label.value.id);
nodesMap.set(entity.label.value.id, ytext);
ytext.insert(0, entity.label.value.value);
};
const dataMap = window.y.getMap("data");
if (guidance.isGuidanceEditor()) {
dataMap.set("guidancemodel", data);
} else dataMap.set("model", data);
for (var key in data.nodes) {
if (data.nodes.hasOwnProperty(key)) {
var entity = data.nodes[key];
const nodesMap = window.y.getMap("nodes");
nodesMap.set(key, new YMap());
var attrs = entity.attributes;
if (entity.hasOwnProperty("label")) {
var ytext = new YText(entity.label.value.id);
nodesMap.set(entity.label.value.id, ytext);
ytext.insert(0, entity.label.value.value);
}
initAttributes(attrs, nodesMap);
}
initAttributes(attrs, nodesMap);
}
}
for (var key in data.edges) {
if (data.edges.hasOwnProperty(key)) {
var entity = data.edges[key];
const edgeMap = window.y.getMap("edges");
const map = new YMap();
edgeMap.set(key, map);
var attrs = entity.attributes;
if (entity.hasOwnProperty("label")) {
const ytext = new YText();
map.set(entity.label.value.id, ytext);
ytext.insert(0, entity.label.value.value);
for (var key in data.edges) {
if (data.edges.hasOwnProperty(key)) {
var entity = data.edges[key];
const edgeMap = window.y.getMap("edges");
const map = new YMap();
edgeMap.set(key, map);
var attrs = entity.attributes;
if (entity.hasOwnProperty("label")) {
const ytext = new YText();
map.set(entity.label.value.id, ytext);
ytext.insert(0, entity.label.value.value);
}
initAttributes(attrs, map);
}
initAttributes(attrs, map);
}
}
const canvasMap = window.y.getMap("canvas");
canvasMap.set("ReloadWidgetOperation", "import");
this.feedback(
"Imported model successfully! The page will be reloaded."
);
location.reload();
})
.catch((err) => {
console.error(err);
this.feedback("Error: " + err);
this.$spinner.hide();
});
$("#import-model").remove(".spinner-border");
const canvasMap = window.y.getMap("canvas");
canvasMap.set("ReloadWidgetOperation", "import");
this.feedback(
"Imported model successfully! The page will be reloaded."
);
location.reload();
})
.catch((err) => {
console.error(err);
this.feedback("Error: " + err);
this.$spinner.hide();
});
});
}

exportModel() {
Expand Down
15 changes: 14 additions & 1 deletion src/widgets/partials/main.widget.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,8 @@ export class CanvasWidget extends SyncMetaWidget(
LitElement,
getWidgetTagName(CONFIG.WIDGET.NAME.MAIN)
) {
canvas: Canvas;

render() {
return html`
<link
Expand Down Expand Up @@ -481,6 +483,7 @@ function InitMainWidget(metamodel, model, _iwcw, user, y) {
const userList = [];
const canvasElement = $("#canvas");
const canvas = new Canvas(canvasElement);
window.canvas = canvas;
const joinMap = y.getMap("join");

HistoryManager.init(canvas);
Expand Down Expand Up @@ -1173,7 +1176,17 @@ function InitMainWidget(metamodel, model, _iwcw, user, y) {
});

if (model) {
var report = JSONtoGraph(model, canvas);
try {
var report = JSONtoGraph(model, canvas);
} catch (error) {
var $errorMsg = $("#errorMsg");
$("#loading").hide();
$("#canvas-frame").hide();
$errorMsg.parent().css("display", "inline-table");
$errorMsg.text(
"SYNCMETA: Model is not compatible to the current Metamodel! Delete the current model or change the metamodel. For more information see the console."
);
}
console.info("CANVAS: Initialization of model completed ", report);
//initialize guidance model's if we are in metamodeling layer
const dataMap = y.getMap("data");
Expand Down

0 comments on commit ce50330

Please sign in to comment.