Feature note component

app/angular/components/noteEditor.html

@@ -0,0 +1,96 @@
+<!-- ########## start notes ######## -->
+<div class="form-group">
+	<label for="user-note">{{ 'Note' | translate }}</label>
+	<textarea
+		id="user-note"
+		class="form-control user-note-input"
+		data-ng-model="$ctrl.selected.value"
+		ng-change="$ctrl.updateNoteText($ctrl.selected.value)"
+		autofocus
+	></textarea>
+</div><!-- End .form-group -->
+<div class="form-group">
+	<label for="note-color">{{'Color' | translate }}</label>
+	<ul class="note-color-list">
+		<li>
+			<label for="color-gray">{{'Gray' | translate }}</label>
+			<input
+				type="radio"
+				name="note-color-option"
+				id="color-gray"
+				value="color-gray"
+				ng-click="$ctrl.updateNoteColor('#afbccf')"
+			/>
+		</li>
+		<li>
+			<label for="color-salmon">{{'Salmon' | translate }}</label>
+			<input
+				type="radio"
+				name="note-color-option"
+				id="color-salmon"
+				value="color-salmon"
+				ng-click="$ctrl.updateNoteColor('#fca397')"
+			/>
+		</li>
+		<li>
+			<label for="color-orange">{{'Orange' | translate }}</label>
+			<input
+				type="radio"
+				name="note-color-option"
+				id="color-orange"
+				value="color-orange"
+				ng-click="$ctrl.updateNoteColor('#ffc470')"
+			/>
+		</li>
+		<li>
+			<label for="color-yellow">{{'Yellow' | translate }}</label>
+			<input
+				type="radio"
+				name="note-color-option"
+				id="color-yellow"
+				value="color-yellow"
+				ng-click="$ctrl.updateNoteColor('#ffff88')"
+			/>
+		</li>
+		<li>
+			<label for="color-green">{{'Green' | translate }}</label>
+			<input
+				type="radio"
+				name="note-color-option"
+				id="color-green"
+				value="color-green"
+				ng-click="$ctrl.updateNoteColor('#79d297')"
+			/>
+		</li>
+		<li>
+			<label for="color-blue">{{'Blue' | translate }}</label>
+			<input
+				type="radio"
+				name="note-color-option"
+				id="color-blue"
+				value="color-blue"
+				ng-click="$ctrl.updateNoteColor('#7cc4f8')"
+			/>
+		</li>
+		<li>
+			<label for="color-purple">{{'Purple' | translate }}</label>
+			<input
+				type="radio"
+				name="note-color-option"
+				id="color-purple"
+				value="color-purple"
+				ng-click="$ctrl.updateNoteColor('#d1a8ff')"
+			/>
+		</li>
+		<li>
+			<label for="color-pink">{{'Pink' | translate }}</label>
+			<input
+				type="radio"
+				name="note-color-option"
+				id="color-pink"
+				value="color-pink"
+				ng-click="$ctrl.updateNoteColor('#fd9ce0')"
+			/>
+		</li>
+	</ul>
+</div>

app/angular/components/noteEditor.js

@@ -0,0 +1,25 @@
+import angular from "angular";
+import template from "./noteEditor.html";
+
+const app = angular.module("app.noteEditor", []);
+
+const Controller = function () {
+	const $ctrl = this;
+	$ctrl.submitted = false;
+
+	$ctrl.updateNoteText = (newText) => {
+		$ctrl.selected.element.setText(newText);
+	}
+
+	$ctrl.updateNoteColor = (newColor) => {
+		$ctrl.selected.element.setColor(newColor);
+	}
+};
+
+export default app.component("noteEditor", {
+	template: template,
+	bindings: {
+		selected: "<",
+	},
+	controller: Controller,
+}).name;

app/angular/conceptual/conceptual.js

@@ -12,6 +12,9 @@ import "../editor/elementSelector";
 import shapes from "../../joint/shapes";
 joint.shapes.erd = shapes;
 
+import note from "../../joint/notes"
+joint.shapes.custom = note;
+
 import angular from "angular";
 import template from "./conceptual.html";
 
@@ -413,7 +416,7 @@ const controller = function (ModelAPI, $stateParams, $rootScope, $timeout, $uibM
 
 			configs.selectedElementActions = elementActions;
 			elementActions.on('action:link:add', function (link) {
-				ctrl.shapeLinker.onLink(link);
+				ctrl.shapeLinker.onLink(link, configs.paper);
 			});
 
 			if (ctrl.shapeValidator.isAttribute(cellView.model) || ctrl.shapeValidator.isExtension(cellView.model)) {
@@ -530,6 +533,8 @@ const controller = function (ModelAPI, $stateParams, $rootScope, $timeout, $uibM
 
 		configs.elementSelector = new joint.ui.ElementSelector({ paper: configs.paper, graph: configs.graph, model: new Backbone.Collection });
 
+		const note = new joint.shapes.custom.Note({ position: { x: 25, y: 430 } });
+
 		enditorManager.loadElements([
 			ctrl.shapeFactory.createEntity({ position: { x: 25, y: 10 } }),
 			ctrl.shapeFactory.createIsa({ position: { x: 40, y: 70 } }),
@@ -538,6 +543,7 @@ const controller = function (ModelAPI, $stateParams, $rootScope, $timeout, $uibM
 			ctrl.shapeFactory.createAttribute({ position: { x: 65, y: 265 } }),
 			ctrl.shapeFactory.createKey({ position: { x: 65, y: 305 } }),
 			ctrl.shapeFactory.createComposedAttribute({ position: { x: 30, y: 345 } }),
+			note
 		]);
 
 		registerShortcuts();
@@ -566,6 +572,7 @@ const controller = function (ModelAPI, $stateParams, $rootScope, $timeout, $uibM
 			if(error.status == 404 || error.status == 401) {
 				$state.go("noaccess");
 			}
+			console.log(error);
 		});
 	}