Feature/upgrade joint 4

app/angular/conceptual/conceptual.js

@@ -1,16 +1,20 @@
-import "backbone";
-import $ from "jquery";
+import * as joint from "@joint/core/dist/joint"
 
-import * as joint from "jointjs/dist/joint";
+// import "../editor/editorManager";
+// import "../editor/editorScroller";
+// import "../editor/editorActions";
+// import "../editor/elementActions";
+// import "../editor/elementSelector";
 
-import "../editor/editorManager";
-import "../editor/editorScroller";
-import "../editor/editorActions";
-import "../editor/elementActions";
-import "../editor/elementSelector";
+console.log(joint);
 
-import shapes from "../../joint/shapes";
-joint.shapes.erd = shapes;
+import erd from "../../joint/shapes";
+
+const shapes = {
+    ...joint.shapes,
+    erd: erd,
+	link: erd.Link
+};
 
 import angular from "angular";
 import template from "./conceptual.html";
@@ -315,7 +319,6 @@ const controller = function (ModelAPI, $stateParams, $rootScope, $timeout, $uibM
 		const posY = model.attributes.position.y;
 		const block = ctrl.shapeFactory.createBlockAssociative({ "position": { x: posX, y: posY }});
 		const auto = ctrl.shapeFactory.createRelationship({ position: { x: posX + 6, y: posY + 2 }});
-
 		block.embed(auto);
 		configs.graph.addCells([block, auto]);
 
@@ -447,54 +450,58 @@ const controller = function (ModelAPI, $stateParams, $rootScope, $timeout, $uibM
 	}
 
 	const buildWorkspace = () => {
-		configs.graph = new joint.dia.Graph({}, { cellNamespace: joint.shapes });
+		console.log(joint);
+		configs.graph = new joint.dia.Graph({}, { cellNamespace: shapes });
 
-		registerGraphEvents(configs.graph);
+		// registerGraphEvents(configs.graph);
 
-		const content = $("#content");
+		const content = joint.mvc.$("#content");
 
 		configs.paper = new joint.dia.Paper({
 			width: content.width(),
 			height: content.height(),
+			el: content,
 			gridSize: 10,
 			drawGrid: true,
 			model: configs.graph,
 			linkConnectionPoint: joint.util.shapePerimeterConnectionPoint,
-			cellViewNamespace: joint.shapes,
+			cellViewNamespace: shapes,
 			linkPinning: false
 		});
 
-		configs.keyboardController = new KeyboardController(configs.paper.$document);
+		console.log(configs.paper);
+
+		configs.keyboardController = new KeyboardController(configs.paper.$el);
 
 		registerPaperEvents(configs.paper);
 
-		configs.editorScroller = new joint.ui.EditorScroller({
-			paper: configs.paper,
-			cursor: "grabbing",
-			autoResizePaper: true,
-		});
-		content.append(configs.editorScroller.render().el);
+		// configs.editorScroller = new joint.ui.EditorScroller({
+		// 	paper: configs.paper,
+		// 	cursor: "grabbing",
+		// 	autoResizePaper: true,
+		// });
+		// content.append(configs.editorScroller.render().el);
 
-		const enditorManager = new joint.ui.EditorManager({
-			graph: configs.graph,
-			paper: configs.paper,
-		});
+		// const enditorManager = new joint.ui.EditorManager({
+		// 	graph: configs.graph,
+		// 	paper: configs.paper,
+		// });
 
-		configs.editorActions = new joint.ui.EditorActions({ graph: configs.graph, paper: configs.paper });
+		// configs.editorActions = new joint.ui.EditorActions({ graph: configs.graph, paper: configs.paper });
 
-		$(".elements-holder").append(enditorManager.render().el);
+		// $(".elements-holder").append(enditorManager.render().el);
 
-		configs.elementSelector = new joint.ui.ElementSelector({ paper: configs.paper, graph: configs.graph, model: new Backbone.Collection });
+		// configs.elementSelector = new joint.ui.ElementSelector({ paper: configs.paper, graph: configs.graph, model: new Backbone.Collection });
 
-		enditorManager.loadElements([
-			ctrl.shapeFactory.createEntity({ position: { x: 25, y: 10 } }),
-			ctrl.shapeFactory.createIsa({ position: { x: 40, y: 70 } }),
-			ctrl.shapeFactory.createRelationship({ position: { x: 25, y: 130 } }),
-			ctrl.shapeFactory.createAssociative({ position: { x: 15, y: 185 } }),
-			ctrl.shapeFactory.createAttribute({ position: { x: 65, y: 265 } }),
-			ctrl.shapeFactory.createKey({ position: { x: 65, y: 305 } }),
-			ctrl.shapeFactory.createComposedAttribute({ position: { x: 30, y: 345 } }),
-		]);
+		// enditorManager.loadElements([
+		// 	ctrl.shapeFactory.createEntity({ position: { x: 25, y: 10 } }),
+		// 	ctrl.shapeFactory.createIsa({ position: { x: 40, y: 70 } }),
+		// 	ctrl.shapeFactory.createRelationship({ position: { x: 25, y: 130 } }),
+		// 	ctrl.shapeFactory.createAssociative({ position: { x: 15, y: 185 } }),
+		// 	ctrl.shapeFactory.createAttribute({ position: { x: 65, y: 265 } }),
+		// 	ctrl.shapeFactory.createKey({ position: { x: 65, y: 305 } }),
+		// 	ctrl.shapeFactory.createComposedAttribute({ position: { x: 30, y: 345 } }),
+		// ]);
 
 		registerShortcuts();
 	};
@@ -508,16 +515,16 @@ const controller = function (ModelAPI, $stateParams, $rootScope, $timeout, $uibM
 		ctrl.shapeValidator = new Validator();
 		ctrl.shapeLinker = new Linker(ctrl.shapeFactory, ctrl.shapeValidator);
 		ctrl.entityExtensor = new EntityExtensor(ctrl.shapeFactory, ctrl.shapeValidator, ctrl.shapeLinker);
-		ctrl.toolsViewService = new ToolsViewService();
+		ctrl.toolsViewService = new ToolsViewService(new erd.InfoButton());
 		ctrl.setLoading(true);
 		ModelAPI.getModel($stateParams.modelid, $rootScope.loggeduser).then((resp) => {
-			const jsonModel = (typeof resp.data.model == "string") ? JSON.parse(resp.data.model) : resp.data.model;
-			ctrl.model = resp.data;
-			ctrl.model.id = resp.data._id;
-			ctrl.model.model = jsonModel;
-			configs.graph.fromJSON(jsonModel);
-			ctrl.modelState.updatedAt = resp.data.updated
-			ctrl.setLoading(false);
+		 	const jsonModel = (typeof resp.data.model == "string") ? JSON.parse(resp.data.model) : resp.data.model;
+		 	ctrl.model = resp.data;
+		 	ctrl.model.id = resp.data._id;
+		 	ctrl.model.model = jsonModel;
+		 	configs.graph.fromJSON(jsonModel);
+		 	ctrl.modelState.updatedAt = resp.data.updated
+		 	ctrl.setLoading(false);
 		});
 	}
 

app/angular/index.js

@@ -6,22 +6,22 @@ import "angular-cookies";
 import "angular-translate";
 import "textangular";
 
-import "jointjs";
-import jointCss from "jointjs/dist/joint.min.css";
+//import "jointjs";
+//import jointCss from "jointjs/dist/joint.min.css";
 import "bootstrap/dist/css/bootstrap.css";
 import "font-awesome/css/font-awesome.min.css";
 import "../sass/app.scss";
 
 import "oclazyload";
 
-import sidebarControlConceptual from "./conceptual/sidebarControl";
-import sidebarControlLogic from "./logic/sidebarControl";
+//import sidebarControlConceptual from "./conceptual/sidebarControl";
+//import sidebarControlLogic from "./logic/sidebarControl";
 import authService from "./service/authService";
 import modelService from "./service/modelAPI";
-import dropdownComponent from "./components/dropdown";
-import dropdownIconComponent from "./components/dropdownIcon";
-import logicService from "./service/logicService";
-import logicFactory from "./service/logicFactory";
+//import dropdownComponent from "./components/dropdown";
+//import dropdownIconComponent from "./components/dropdownIcon";
+//import logicService from "./service/logicService";
+//import logicFactory from "./service/logicFactory";
 
 import pt_BR from "../i18n/languages/pt_BR";
 import en from "../i18n/languages/en";
@@ -30,7 +30,7 @@ import en from "../i18n/languages/en";
  * This line prevent a sideEffect issue in jointjs library that make webpack ignore joint css imports
  * See more: https://github.com/webpack/webpack/issues/8814
  */
-console.log(jointCss)
+//console.log(jointCss)
 
 const app = angular.module("app", [
 	"ui.router",
@@ -40,12 +40,12 @@ const app = angular.module("app", [
 	"oc.lazyLoad",
 	authService,
 	modelService,
-	logicService,
-	dropdownComponent,
-	logicFactory,
-	sidebarControlConceptual,
-	dropdownIconComponent,
-	sidebarControlLogic
+	//logicService,
+	// dropdownComponent,
+	// logicFactory,
+	// sidebarControlConceptual,
+	// dropdownIconComponent,
+	// sidebarControlLogic
 ]);
 
 app.config([
@@ -165,28 +165,28 @@ app.config([
 			},
 		});
 
-		$stateProvider.state("logic", {
-			title: "Logic model - BRMW",
-			url: "/logic/{references:json}",
-			component: "editorLogic",
-			data: {
-				requireLogin: true,
-			},
-			lazyLoad($transition$) {
-				const $ocLazyLoad = $transition$.injector().get("$ocLazyLoad");
-				return import("./logic/logic.js").then((mod) =>
-					$ocLazyLoad.inject(mod.default)
-				);
-			},
-		});
-
-		$stateProvider.state("sql", {
-			url: "/sql/{code}",
-			templateUrl: "angular/view/sql.html",
-			data: {
-				requireLogin: true,
-			},
-		});
+		// $stateProvider.state("logic", {
+		// 	title: "Logic model - BRMW",
+		// 	url: "/logic/{references:json}",
+		// 	component: "editorLogic",
+		// 	data: {
+		// 		requireLogin: true,
+		// 	},
+		// 	lazyLoad($transition$) {
+		// 		const $ocLazyLoad = $transition$.injector().get("$ocLazyLoad");
+		// 		return import("./logic/logic.js").then((mod) =>
+		// 			$ocLazyLoad.inject(mod.default)
+		// 		);
+		// 	},
+		// });
+
+		// $stateProvider.state("sql", {
+		// 	url: "/sql/{code}",
+		// 	templateUrl: "angular/view/sql.html",
+		// 	data: {
+		// 		requireLogin: true,
+		// 	},
+		// });
 
 		$stateProvider.state("preferences", {
 			title: "Preferences - BRMW",

app/angular/service/logicFactory.js

@@ -1,7 +1,7 @@
 import angular from "angular";
 
 import * as joint from "jointjs/dist/joint";
-import "jointjs/dist/joint.min.css";
+//import "jointjs/dist/joint.min.css";
 
 const logicFactory = ($filter) => {
 	var logic = joint.shapes.uml;

app/angular/service/logicService.js

@@ -3,12 +3,12 @@ import angular from "angular";
 import "backbone";
 import $ from "jquery";
 
-import * as joint from "jointjs/dist/joint";
+import * as joint from "@joint/core/dist/joint";
 import erd from "../../joint/shapes";
 import uml from "../../joint/table";
 joint.shapes.erd = erd;
 joint.shapes.uml = uml;
-import "jointjs/dist/joint.min.css";
+//import "jointjs/dist/joint.min.css";
 
 import "../editor/editorManager"
 import "../editor/editorScroller"

app/angular/service/toolsViewService.js

@@ -1,9 +1,9 @@
-import * as joint from "jointjs/dist/joint";
+import * as joint from "@joint/core/dist/joint";
 
 export default class ToolsViewService {
-	constructor() {
+	constructor(infoButton) {
 		const defaultTools = this.#createDefaultTools();
-		this.toolsWithInfo = new joint.dia.ToolsView({ tools: [...defaultTools, new joint.shapes.erd.InfoButton(), new joint.linkTools.Remove()] });
+		this.toolsWithInfo = new joint.dia.ToolsView({ tools: [...defaultTools, infoButton, new joint.linkTools.Remove()] });
 		this.tools = new joint.dia.ToolsView({ tools: [...defaultTools, new joint.linkTools.Remove()] })
 		this.toolsWithoutRemove = new joint.dia.ToolsView({ tools: defaultTools });
 	}
@@ -23,5 +23,4 @@ export default class ToolsViewService {
 			new joint.linkTools.Boundary(),
 		]
 	}
-
 };