diff --git a/src/DiagramModel.js b/src/DiagramModel.js deleted file mode 100644 index caecbd9..0000000 --- a/src/DiagramModel.js +++ /dev/null @@ -1,75 +0,0 @@ -// @ts-check -import DiagramNode from "./DiagramNode"; -var generateId = function () { - return Math.trunc(Math.random() * 1000); -}; -/** - * @class DiagramModel - */ -class DiagramModel { - _model; - constructor() { - this._model = { - nodes: [], - links: [], - }; - } - /** - * Adds a node to the diagram - */ - addNode(title, x, y, width, height, options) { - if (options === undefined) { - options = {}; - } - const newNode = new DiagramNode(this, generateId(), title, x, y, width, height, options); - this._model.nodes.push(newNode); - return newNode; - } - deleteNode(node) { - const index = this._model.nodes.indexOf(node); - for (let j = 0; j < this._model.links.length; j++) { - const currentLink = this._model.links[j]; - for (let i = 0; i < node.ports.length; i++) { - const currentPort = node.ports[i]; - if (currentLink.from === currentPort.id || currentLink.to === currentPort.id) { - this.deleteLink(currentLink); - j--; - } - } - } - this._model.nodes.splice(index, 1); - } - deleteLink(link) { - const index = this._model.links.indexOf(link); - this._model.links.splice(index, 1); - } - /** - * Adds a link between two ports - */ - addLink(from, to, points = [], options = {}) { - this._model.links.push({ - id: generateId(), - from: from, - to: to, - positionFrom: {}, - positionTo: {}, - points, - options, - }); - } - /** - * Serializes the diagram model into a JSON object - * @return {Object} The diagram model - */ - serialize() { - return JSON.stringify(this._model); - } - /** - * Load into the diagram model a serialized diagram - * @param {Object} serializedModel - */ - deserialize(serializedModel) { - this._model = JSON.parse(serializedModel); - } -} -export default DiagramModel; diff --git a/src/DiagramModel.ts b/src/DiagramModel.ts index b28a4b9..d129985 100644 --- a/src/DiagramModel.ts +++ b/src/DiagramModel.ts @@ -72,7 +72,8 @@ class DiagramModel { * @return {Object} The diagram model */ serialize() { - return JSON.stringify(this._model); + //FIXME + //return JSON.stringify(this._model); } /** diff --git a/src/DiagramNode.js b/src/DiagramNode.js deleted file mode 100644 index 9241abb..0000000 --- a/src/DiagramNode.js +++ /dev/null @@ -1,72 +0,0 @@ -// @ts-check -var generateId = function () { - return Math.trunc(Math.random() * 1000); -}; -const diagramFor = {}; -class DiagramNode { - id; - title; - diagram; - x; - y; - width; - height; - options; - ports; - /** - * This should not be called directly. Use the "addNode" method from the DiagramModel class - */ - constructor(diagram, id, title, x, y, width, height, options) { - //This is done like that to avoid circular deps and keep this class to work with stringify :) - diagramFor[id] = diagram; - this.id = id; - this.title = title; - this.diagram = diagram; - this.x = x; - this.y = y; - this.width = width || 72; - this.height = height || 100; - this.options = options || {}; - this.ports = []; - } - /** - * Adds a new "in" port into the node. - * @param {String} name - * @return {number} The port id - */ - addInPort(name, options) { - let newPort = { - id: generateId(), - type: "in", - name, - options, - }; - this.ports.push(newPort); - return newPort.id; - } - /** - * Adds a new "out" port into the node. - */ - addOutPort(name, options) { - let newPort = { - id: generateId(), - type: "out", - name, - options, - }; - this.ports.push(newPort); - return newPort.id; - } - removePortLinks(id) { - for (let l of diagramFor[id]._model.links) { - if (l.from === id || l.to === id) { - this.diagram.deleteLink(l); - } - } - } - deletePort(id) { - this.removePortLinks(id); - this.ports = this.ports.filter(p => p.id !== id); - } -} -export default DiagramNode; diff --git a/src/NodeResizeHandles.js b/src/NodeResizeHandles.js deleted file mode 100644 index b22e445..0000000 --- a/src/NodeResizeHandles.js +++ /dev/null @@ -1,73 +0,0 @@ -// @ts-check -//We could have put this in a Vue component, but I try to make the lib framework agnostic over time :) -let startDragHandler = undefined; -const directions = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w']; -/** - * @class ResizeHandles - */ -class ResizeHandles { - container; - startDragHandler; - constructor(container, width, height, startDragHandler) { - this.container = container; - container.innerHTML = ` - - - - - - - - - `; - this.startDragHandler = startDragHandler; - this.mouseDownHandler = this.mouseDownHandler.bind(this); - for (let d of directions) { - container.querySelector(`[data-direction="${d}"]`)?.addEventListener('mousedown', this.mouseDownHandler); - } - this.updatePosition(width, height); - } - /** - * @param {number} width - * @param {number} height - */ - updatePosition(width, height) { - const n = this.container.querySelector('[data-direction="n"]'); - const ne = this.container.querySelector('[data-direction="ne"]'); - const e = this.container.querySelector('[data-direction="e"]'); - const se = this.container.querySelector('[data-direction="se"]'); - const s = this.container.querySelector('[data-direction="s"]'); - const sw = this.container.querySelector('[data-direction="sw"]'); - const w = this.container.querySelector('[data-direction="w"]'); - n?.setAttribute('width', width.toString()); - ne?.setAttribute('x', width.toString()); - e?.setAttribute('x', width.toString()); - e?.setAttribute('height', height.toString()); - se?.setAttribute('x', width.toString()); - se?.setAttribute('y', height.toString()); - s?.setAttribute('y', height.toString()); - s?.setAttribute('width', width.toString()); - sw?.setAttribute('y', height.toString()); - w?.setAttribute('height', height.toString()); - } - unmount() { - if (this.startDragHandler) { - for (let d of directions) { - this.container.querySelector(`[data-direction="${d}"]`)?.removeEventListener('mousedown', this.mouseDownHandler); - } - } - this.container.innerHTML = ''; - } - mouseDownHandler(event) { - console.log('mouseDownHandler'); - if (event.target) { - const target = event.target; - const direction = target?.closest('.resize-handle'); - if (this.startDragHandler) { - this.startDragHandler(target.dataset.direction); - } - } - } -} -; -export default ResizeHandles; diff --git a/src/components/__tests__/Diagram.js b/src/components/__tests__/Diagram.js deleted file mode 100644 index c178405..0000000 --- a/src/components/__tests__/Diagram.js +++ /dev/null @@ -1,10 +0,0 @@ -import Vue from "vue"; -import Diagram from "../Diagram"; - -describe("Diagram.vue", () => { - const Constructor = Vue.extend(Diagram); - const vm = new Constructor().$mount(); - test("should match the snapshot", () => { - expect(vm.$el).toMatchSnapshot(); - }); -}); diff --git a/src/index.js b/src/index.js deleted file mode 100644 index a1dcbe7..0000000 --- a/src/index.js +++ /dev/null @@ -1,6 +0,0 @@ -import Diagram from "./components/Diagram.vue"; -import DiagramModel from "./DiagramModel"; -// Export components -export { Diagram }; -export { DiagramModel }; -export default { Diagram, DiagramModel }; diff --git a/src/index.umd.js b/src/index.umd.js deleted file mode 100644 index 74a12aa..0000000 --- a/src/index.umd.js +++ /dev/null @@ -1,6 +0,0 @@ -import LibraryModule, * as LibraryComponents from "./index"; -// Automatically register components if Vue is available globally -if (typeof window !== "undefined" && window.Vue) { - window.Vue.use(LibraryModule); -} -export default LibraryComponents;