const width = 800; const height = 600; let realWidth = 800; let realHeight = 600; const radius = 25; const greekLetterNames = ['Alpha', 'Beta', 'Gamma', 'Delta', 'Epsilon', 'Zeta', 'Eta', 'Theta', 'Iota', 'Kappa', 'Lambda', 'Mu', 'Nu', 'Xi', 'Omicron', 'Pi', 'Rho', 'Sigma', 'Tau', 'Upsilon', 'Phi', 'Chi', 'Psi', 'Omega']; const settings = { physics: true, speed: 2, snapToPadding: 6, hitTargetPadding: 6, colors: { default: '#000', active: '#00f', selectionBg: 'rgba(0,0,255,.75)', selectionText: '#ffffff', gridColor: 'rgba(0,0,0,.15)', getColor: (object) => selectedObject === object ? settings.colors.active : settings.colors.default }, drawGrid: true, snapToGrid: true, gridSize: 100, }; const elements = { documents: document.getElementById('document-tabs'), dragOverlay: document.getElementById('dragOverlay'), }; const contextmenu = document.getElementById('contextmenuCanvas'); const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); function onResize() { canvas.width = width * 2; canvas.height = height * 2; canvas.style.maxWidth = width + 'px'; canvas.style.height = canvas.clientWidth * height / width + 'px'; ctx.scale(2, 2); realWidth = canvas.clientWidth; realHeight = canvas.clientHeight; } const documents = []; let activeDocument = null; let assistantLines = []; function switchDocument(doc) { if (doc instanceof FSMDocument) { doc = documents.findIndex(document => document.id === doc.id); } if (doc < 0) { activeDocument = null; } if (typeof doc === 'number' && doc >= 0 && doc < documents.length) { activeDocument = doc; const docElements = document.getElementsByClassName('document-tab'); for (let el of docElements) { el.classList.remove('active'); } docElements[doc].classList.add('active'); resetCaret(); selectedObject = null; currentConnection = null; movingObject = false; originalClick = null; deltaMouseX = 0; deltaMouseY = 0; shiftPressed = false; } } function addDocument(doc) { documents.push(doc); const elem = document.createElement('li'); elem.classList.add('document-tab'); const label = elem.addChild('span', 'document-name', doc.name || 'Unbenannt'); const btn = elem.addChild('button', ['btn', 'btn-close'], 'X'); elem.addEventListener('click', (e) => { if (e.target === elem || e.target === label) switchDocument(doc); }); btn.addEventListener('click', () => { closeDocument(doc); }); doc.element = elem; elements.documents.appendChild(elem); } function closeDocument(doc) { if (doc instanceof FSMDocument) { doc = documents.findIndex(document => document.id === doc.id); } if (typeof doc === 'number') { documents.splice(doc, 1); const docElements = document.getElementsByClassName('document-tab'); docElements[doc].remove(); if (doc < activeDocument) { activeDocument--; } else if (doc === activeDocument) { if (activeDocument >= documents.length) { activeDocument = documents.length - 1; } } switchDocument(activeDocument); } } const animations = []; let isPaused = false; function convertLatexShortcuts(text) { greekLetterNames.forEach((name, i) => { text = text.replace(new RegExp('\\\\' + name, 'g'), String.fromCharCode(913 + i + (i > 16))); text = text.replace(new RegExp('\\\\' + name.toLowerCase(), 'g'), String.fromCharCode(945 + i + (i > 16))); }); for (let i = 0; i < 10; i++) { // TODO: Replace with more general way text = text.replace(new RegExp('_' + i, 'g'), String.fromCharCode(8320 + i)); } return text; } let caretTimer, caretVisible = true, caretPos = 0, caretSelection = null; function resetCaret() { clearInterval(caretTimer); caretTimer = setInterval(() => caretVisible = !caretVisible, 500); caretVisible = true; } function tick() { if (activeDocument !== null) { for (let i = 0; i < 10; i++) { documents[activeDocument].physicsTick(); } documents[activeDocument].tick(); } if (!isPaused) setTimeout(tick, 1000 / 30); } function draw() { ctx.clearRect(0, 0, width, height); ctx.save(); ctx.translate(0.5, 0.5); if (activeDocument !== null) { if (settings.drawGrid) drawGrid(); assistantLines.forEach(line => { ctx.strokeStyle = '#f0f'; ctx.beginPath(); if (!!line.x) { ctx.moveTo(line.x, 0); ctx.lineTo(line.x, height); } else { ctx.moveTo(0, line.y); ctx.lineTo(width, line.y); } ctx.stroke(); }); documents[activeDocument].draw(); if (!!currentConnection) { currentConnection.draw(); } animations.forEach(animation => animation.draw()); } else { ctx.fillStyle = '#eee'; ctx.fillRect(0, 0, width, height); ctx.fillStyle = '#000'; ctx.drawText('Bitte öffne ein Dokument oder erstelle ein neues...', width / 2, height / 2, null, false); } ctx.restore(); if (!isPaused) setTimeout(draw, 1000 / 60); } function drawGrid() { for (let i = settings.gridSize; i < width; i += settings.gridSize) { ctx.strokeStyle = settings.colors.gridColor; ctx.beginPath(); ctx.moveTo(i, 0); ctx.lineTo(i, height); ctx.stroke(); } for (let i = settings.gridSize; i < height; i += settings.gridSize) { ctx.strokeStyle = settings.colors.gridColor; ctx.beginPath(); ctx.moveTo(0, i); ctx.lineTo(width, i); ctx.stroke(); } } function selectObject(x, y) { if (activeDocument === null) { return null; } const doc = documents[activeDocument]; for (let state of doc.states) { if (state.containsPoint(x, y)) { caretPos = state.text.length; return state; } } for (let connection of doc.connections) { if (connection.containsPoint(x, y)) { caretPos = connection.text.length; return connection; } } caretPos = 0; return null; } let cursorVisible = true, selectedObject = null, currentConnection = null, movingObject = false, originalClick = null, deltaMouseX = 0, deltaMouseY = 0, shiftPressed = false, ctrlPressed = false, changedKeys = [], changedValues = []; canvas.addEventListener('mousedown', (event) => { const mouse = cbRelMousePos(event); selectedObject = selectObject(mouse.x, mouse.y); movingObject = false; originalClick = mouse; if (!!selectedObject) { if ((shiftPressed || event.shiftKey) && selectedObject instanceof State) { currentConnection = new SelfConnection(selectedObject, mouse); } else { movingObject = true; deltaMouseX = deltaMouseY = 0; if (selectedObject.setMouseStart) { selectedObject.setMouseStart(mouse.x, mouse.y); } } resetCaret(); if (selectedObject instanceof SelfConnection) { changedKeys = ['anchorAngle']; changedValues = [selectedObject.anchorAngle]; } else if (selectedObject instanceof Connection) { changedKeys = ['parallelPart', 'perpendicularPart']; changedValues = [selectedObject.parallelPart, selectedObject.perpendicularPart]; } else if (selectedObject instanceof StartConnection) { changedKeys = ['deltaX', 'deltaY']; changedValues = [selectedObject.deltaX, selectedObject.deltaY]; } else if (selectedObject instanceof State) { changedKeys = ['x', 'y']; changedValues = [selectedObject.x, selectedObject.y]; } } else if (shiftPressed || event.shiftKey) { currentConnection = new TemporaryConnection(mouse, mouse); } if (canvasHasFocus()) { return false; } else { resetCaret(); return true; } }); canvas.addEventListener('mousemove', (event) => { const mouse = cbRelMousePos(event); if (!!currentConnection) { let targetNode = selectObject(mouse.x, mouse.y); if (!(targetNode instanceof State)) { targetNode = null; } if (!selectedObject) { if (!!targetNode) { currentConnection = new StartConnection(targetNode, originalClick); } else { currentConnection = new TemporaryConnection(originalClick, mouse); } } else { if (targetNode === selectedObject) { currentConnection = new SelfConnection(selectedObject, mouse); } else if (!!targetNode) { currentConnection = new Connection(selectedObject, targetNode); } else { currentConnection = new TemporaryConnection(selectedObject.closestPointOnCircle(mouse.x, mouse.y), mouse) } } } if (movingObject) { if (selectedObject instanceof State) { if(ctrlPressed || event.ctrlKey) { const prevX = changedValues[0]; const prevY = changedValues[1]; selectedObject.setAnchorPoint(mouse.x, mouse.y); const deltaX = Math.abs(selectedObject.x - prevX); const deltaY = Math.abs(selectedObject.y - prevY); if(deltaX > deltaY) { selectedObject.y = prevY; } else { selectedObject.x = prevX; } } else { selectedObject.setAnchorPoint(mouse.x, mouse.y); snapNode(selectedObject); } } else { selectedObject.setAnchorPoint(mouse.x, mouse.y); } } }); document.addEventListener('mouseup', () => { movingObject = false; if (!!selectedObject && activeDocument !== null) { if (selectedObject instanceof State) { documents[activeDocument].addChange('state', selectedObject.id, 'edit', changedKeys, changedValues); } else if (selectedObject instanceof Connection || selectedObject instanceof SelfConnection || selectedObject instanceof StartConnection) { documents[activeDocument].addChange(selectedObject.constructor.name.toLowerCase(), selectedObject.id, 'edit', changedKeys, changedValues); } } if (!!currentConnection && activeDocument !== null) { if (!(currentConnection instanceof TemporaryConnection)) { selectedObject = currentConnection; documents[activeDocument].connections.push(currentConnection); resetCaret(); documents[activeDocument].addChange(selectedObject.constructor.name.toLowerCase(), selectedObject.id, 'add', Object.keys(selectedObject), Object.values(selectedObject)) } currentConnection = null; } assistantLines = []; }); canvas.addEventListener('dblclick', (event) => { const mouse = cbRelMousePos(event); if (activeDocument === null) return; selectedObject = selectObject(mouse.x, mouse.y); documents[activeDocument].onDblClick(mouse.x, mouse.y); }); document.addEventListener('click', (event) => { contextmenu.style.display = 'none'; }); document.addEventListener('contextmenu', (event) => { const mouse = cbRelMousePos(event); event.preventDefault(); if (activeDocument === null) return; // selectedObject = selectObject(mouse.x, mouse.y); if (event.target === contextmenu || event.target === canvas) { contextmenu.style.top = event.y + 'px'; contextmenu.style.left = event.x + 'px'; contextmenu.style.display = 'block'; } else { contextmenu.style.display = 'none'; } // documents[activeDocument].onRightClick(mouse.x, mouse.y); }); document.addEventListener('keydown', (event) => { const key = crossBrowserKey(event); if (!canvasHasFocus()) { return true; } switch (key) { case 16: // Shift shiftPressed = true; break; case 8: // Backspace if (!!selectedObject) { let start = caretPos - 1; let end = caretPos; if (caretSelection !== null) { if (caretSelection < caretPos) { start = caretSelection; } else { start = caretPos; end = caretSelection; } caretSelection = null; } else { caretPos--; caretPos = Math.max(caretPos, 0); } selectedObject.text = selectedObject.text.slice(0, start) + selectedObject.text.slice(end, selectedObject.text.length); resetCaret(); } event.preventDefault(); return false; case 37: // Left Arrow if (!(event.ctrlKey || event.metaKey) && !!selectedObject) { if ((shiftPressed || event.shiftKey) && caretSelection === null) caretSelection = caretPos; caretPos--; caretPos = Math.max(caretPos, 0); resetCaret(); if (!(shiftPressed || event.shiftKey) || caretSelection === caretPos) caretSelection = null; return false; } break; case 39: // Right Arrow if (!(event.ctrlKey || event.metaKey) && !!selectedObject) { if ((shiftPressed || event.shiftKey) && caretSelection === null) caretSelection = caretPos; caretPos++; caretPos = Math.min(caretPos, selectedObject.text.length); resetCaret(); if (!(shiftPressed || event.shiftKey) || caretSelection === caretPos) caretSelection = null; return false; } break; case 36: // Home if (!(event.ctrlKey || event.metaKey) && !!selectedObject) { if ((shiftPressed || event.shiftKey) && caretSelection === null) caretSelection = caretPos; caretPos = 0; resetCaret(); if (!(shiftPressed || event.shiftKey) || caretSelection === caretPos) caretSelection = null; return false; } break; case 35: // End if (!(event.ctrlKey || event.metaKey) && !!selectedObject) { if ((shiftPressed || event.shiftKey) && caretSelection === null) caretSelection = caretPos; caretPos = selectedObject.text.length; if (!(shiftPressed || event.shiftKey) || caretSelection === caretPos) caretSelection = null; return false; } break; case 46: // Delete if (activeDocument !== null) { documents[activeDocument].deleteCurrentObject(); } break; } }); document.addEventListener('keyup', (event) => { const key = crossBrowserKey(event); if (key === 16) { shiftPressed = false; } }); document.addEventListener('keypress', (event) => { const key = crossBrowserKey(event); if (!canvasHasFocus()) { return true; } if (!!selectedObject && 'text' in selectedObject) { if (!event.metaKey && !event.altKey && !event.ctrlKey) { if (key >= 0x20 && key <= 0x7E) { let text = selectedObject.text; if (caretSelection !== null) { if (caretSelection > caretPos) { text = text.slice(0, caretPos) + text.slice(caretSelection, text.length); } else { text = text.slice(0, caretSelection) + text.slice(caretPos, text.length); caretPos = caretSelection; } caretSelection = null; } text = text.substring(0, caretPos) + String.fromCharCode(key) + text.substring(caretPos, text.length); caretPos++; resetCaret(); selectedObject.text = text; return false; } } } if (key === 8) { selectedObject = null; return false; } }); document.addEventListener('paste', (event) => { if (activeDocument !== null && selectedObject !== null) { const pastedText = event.clipboardData.getData('text/plain'); let start = caretPos; let end = caretPos; if (caretSelection !== null) { if (caretSelection < caretPos) { start = caretSelection; caretPos = caretSelection; } else { end = caretSelection; } caretSelection = null; } selectedObject.text = selectedObject.text.slice(0, start) + pastedText + selectedObject.text.slice(end, selectedObject.text.length); caretPos += pastedText.length; } }); window.addEventListener('keydown', (event) => { const keyCode = crossBrowserKey(event); const key = String.fromCharCode(keyCode).toLowerCase(); if ((event.ctrlKey || event.metaKey) && key === 's') { // Ctrl + S if (event.altKey || event.shiftKey) { // Ctrl + Alt + S modalExport.open(); } else { saveToLocalStorage(); } event.preventDefault(); return false; } if ((event.ctrlKey || event.metaKey) && key === 'z') { // Ctrl + Z if (activeDocument !== null) { documents[activeDocument].undo(1); event.preventDefault(); return false; } } if ((event.ctrlKey || event.metaKey) && key === 'y') { // Ctrl + Y if (activeDocument !== null) { documents[activeDocument].undo(-1); event.preventDefault(); return false; } } if ((event.ctrlKey || event.metaKey) && key === 'a') { // Ctrl + A if (activeDocument !== null && selectedObject !== null) { caretPos = selectedObject.text.length; caretSelection = 0; event.preventDefault(); return false; } } if ((event.ctrlKey || event.metaKey) && key === 'e') { // Ctrl + E modalExport.open(); event.preventDefault(); return false; } if ((event.ctrlKey || event.metaKey) && key === 'n') { // Ctrl + N const doc = new FSMDocument(); addDocument(doc); switchDocument(doc); event.preventDefault(); return false; } if ((event.ctrlKey || event.metaKey) && keyCode === 37) { // Ctrl + LeftArrow let activeDoc = activeDocument; activeDoc--; activeDoc = activeDoc < 0 ? documents.length - 1 : activeDoc % documents.length; switchDocument(activeDoc); event.preventDefault(); return false; } if ((event.ctrlKey || event.metaKey) && keyCode === 39) { // Ctrl + RightArrow let activeDoc = activeDocument; activeDoc++; activeDoc = activeDoc < 0 ? documents.length - 1 : activeDoc % documents.length; switchDocument(activeDoc); event.preventDefault(); return false; } }); let prevSelectedObject; window.addEventListener('blur', () => { prevSelectedObject = selectedObject; currentConnection = null; selectedObject = null; shiftPressed = false; }); window.addEventListener('focus', (s) => { selectedObject = prevSelectedObject; resetCaret(); }); CanvasRenderingContext2D.prototype.drawArrow = function (x, y, angle) { const dx = Math.cos(angle); const dy = Math.sin(angle); this.beginPath(); this.moveTo(x, y); this.lineTo(x - 8 * dx + 5 * dy, y - 8 * dy - 5 * dx); this.lineTo(x - 8 * dx - 5 * dy, y - 8 * dy + 5 * dx); this.fill(); }; CanvasRenderingContext2D.prototype.drawText = function (originalText, x, y, angleOrNull, isSelected) { const text = convertLatexShortcuts(originalText); this.font = '20px Roboto'; const width = this.measureText(text).width; x -= width / 2; // Centers the text if (!!angleOrNull) { const dx = Math.cos(angleOrNull), dy = Math.sin(angleOrNull), cornerPointX = (width / 2 + 5) * (dx > 0 ? 1 : -1), cornerPointY = (10 + 5) * (dy > 0 ? 1 : -1), slide = dy * (Math.abs(dy) ** 40) * cornerPointX - dx * (Math.abs(dx) ** 10) * cornerPointY; x += cornerPointX - dy * slide; y += cornerPointY + dx * slide; } // Draw text and caret if ('advancedFillText' in this) { // this.advancedFillText() } else { x = Math.round(x); y = Math.round(y); let drawText = true; if (isSelected && canvasHasFocus() && document.hasFocus()) { const caretX = x + this.measureText(text.substring(0, caretPos)).width; if (caretSelection !== null && caretPos !== caretSelection) { drawText = false; const selectionX = x + this.measureText(text.substring(0, caretSelection)).width; ctx.fillStyle = settings.colors.selectionBg; this.beginPath(); this.moveTo(selectionX, y - 10); this.lineTo(selectionX, y + 10); this.lineTo(caretX, y + 10); this.lineTo(caretX, y - 10); this.closePath(); this.fill(); let start = caretPos; let end = caretSelection; if (caretSelection < caretPos) { [start, end] = [end, start]; } const prevText = text.substring(0, start); const selectedText = text.substring(start, end); const followingText = text.substring(end, text.length); let textX = x; const textY = y + 6; ctx.fillStyle = settings.colors.active; this.fillText(prevText, textX, textY); textX += this.measureText(prevText).width; ctx.fillStyle = settings.colors.selectionText; this.fillText(selectedText, textX, textY); textX += this.measureText(selectedText).width; ctx.fillStyle = settings.colors.active; this.fillText(followingText, textX, textY); } if (caretVisible) { this.beginPath(); this.moveTo(caretX, y - 10); this.lineTo(caretX, y + 10); this.stroke(); this.closePath(); } } if (drawText) this.fillText(text, x, y + 6); } }; Node.prototype.addChild = function (name, classList, text) { const elem = document.createElement(name); if (classList instanceof Array) { elem.classList.add(...classList); } else if (!!classList) { elem.classList.add(classList); } if (!!text) { elem.innerText = text; } this.appendChild(elem); return elem; }; function snapNode(targetState) { let snapX = false, snapY = false; assistantLines = []; for (let state of documents[activeDocument].states) { if (state === targetState) continue; if (!snapX && Math.abs(targetState.x - state.x) < settings.snapToPadding) { targetState.x = state.x; assistantLines.push({x: state.x}); snapX = true; } if (!snapY && Math.abs(targetState.y - state.y) < settings.snapToPadding) { targetState.y = state.y; assistantLines.push({y: state.y}); snapY = true; } if (snapX && snapY) return; } if (settings.drawGrid && settings.snapToGrid) { for (let i = 100; i < width; i += 100) { if (!snapX && Math.abs(targetState.x - i) < settings.snapToPadding) { targetState.x = i; assistantLines.push({x: i}); snapX = true; } if (snapX && snapY) return; } for (let i = settings.gridSize; i < height; i += settings.gridSize) { if (!snapY && Math.abs(targetState.y - i) < settings.snapToPadding) { targetState.y = i; assistantLines.push({y: i}); snapY = true; } if (snapX && snapY) return; } } } function canvasHasFocus() { return (document.activeElement || document.body) === document.body; } function crossBrowserKey(event) { event = event || window.event; return event.which || event.keyCode; } function cbElementPos(event) { event = event || window.event; let obj = event.target || event.srcElement, x = 0, y = 0; while (obj.offsetParent) { x += obj.offsetLeft; y += obj.offsetTop; obj = obj.offsetParent; } return {x, y}; } function cbMousePos(event) { event = event || window.event; return { x: event.pageX || event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft, y: event.pageY || event.clientY + document.body.scrollTop + document.documentElement.scrollTop, } } function cbRelMousePos(event) { const elem = cbElementPos(event), mouse = cbMousePos(event); return { x: (mouse.x - elem.x) / realWidth * width, y: (mouse.y - elem.y) / realHeight * height, }; } function guid() { function s4() { return Math.floor((1 + Math.random()) * 0x10000) .toString(16) .substring(1); } return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4(); } window.addEventListener('load', () => { onResize(); const doc = new FSMDocument('Dokument1'); addDocument(doc); switchDocument(doc); tick(); draw(); }); window.addEventListener('beforeunload', (e) => { if (!!documents.find(item => item.unsaved)) { e.preventDefault(); e.returnValue(''); } }); window.addEventListener('resize', () => { onResize(); }); Object.prototype.hashCode = function () { let baseString = ''; Object.values(this).forEach(entry => { if (entry === null) return; if (typeof entry === 'object' && !(entry instanceof Node)) { baseString += entry.hashCode(); } else { baseString += entry; } }); let hash = 0; for (let i = 0; i < baseString.length; i++) { const char = baseString.charCodeAt(i); hash = ((hash << 5) - hash) + char; hash = hash & hash; } return hash; };