From 3952212870d2ad12c76c23f22917fd9d03cfb35a Mon Sep 17 00:00:00 2001
From: solvedDev <solvedDev@gmail.com>
Date: Sun, 1 May 2022 14:37:00 +0200
Subject: [PATCH 01/12] feat: inital working tab

---
 src/components/Editors/Jigsaw/Tab.ts          | 141 ++++++++++++++++++
 src/components/Editors/Jigsaw/Tab.vue         | 136 +++++++++++++++++
 src/components/TabSystem/TabProvider.ts       |   2 +
 .../Windows/Settings/setupSettings.ts         |   1 +
 4 files changed, 280 insertions(+)
 create mode 100644 src/components/Editors/Jigsaw/Tab.ts
 create mode 100644 src/components/Editors/Jigsaw/Tab.vue

diff --git a/src/components/Editors/Jigsaw/Tab.ts b/src/components/Editors/Jigsaw/Tab.ts
new file mode 100644
index 000000000..9acabe676
--- /dev/null
+++ b/src/components/Editors/Jigsaw/Tab.ts
@@ -0,0 +1,141 @@
+import { FileTab } from '/@/components/TabSystem/FileTab'
+import JigsawTabComponent from './Tab.vue'
+import { App } from '/@/App'
+import { TabSystem } from '/@/components/TabSystem/TabSystem'
+import json5 from 'json5'
+import { settingsState } from '/@/components/Windows/Settings/SettingsState'
+import { debounce } from 'lodash-es'
+import { InformationWindow } from '../../Windows/Common/Information/InformationWindow'
+import { AnyFileHandle } from '../../FileSystem/Types'
+
+const throttledCacheUpdate = debounce<(tab: JigsawTab) => Promise<void> | void>(
+	async (tab) => {
+		const fileContent = JSON.stringify({
+			// TODO: Get JSON from jigsaw tab
+		})
+		const app = await App.getApp()
+
+		app.project.fileChange.dispatch(tab.getPath(), await tab.getFile())
+
+		await app.project.packIndexer.updateFile(
+			tab.getPath(),
+			fileContent,
+			tab.isForeignFile,
+			true
+		)
+		await app.project.jsonDefaults.updateDynamicSchemas(tab.getPath())
+	},
+	600
+)
+
+export class JigsawTab extends FileTab {
+	component = JigsawTabComponent
+
+	constructor(
+		parent: TabSystem,
+		fileHandle: AnyFileHandle,
+		isReadOnly = false
+	) {
+		super(parent, fileHandle, isReadOnly)
+
+		this.fired.then(async () => {
+			const app = await App.getApp()
+			await app.projectManager.projectReady.fired
+
+			app.project.tabActionProvider.addTabActions(this)
+		})
+	}
+
+	get app() {
+		return this.parent.app
+	}
+	get project() {
+		return this.parent.project
+	}
+
+	static is(fileHandle: AnyFileHandle) {
+		return (
+			settingsState?.editor?.jsonEditor === 'jigsawEditor' &&
+			fileHandle.name.endsWith('.json')
+		)
+	}
+	async setup() {
+		let json: unknown
+		try {
+			const fileStr = await this.fileHandle
+				.getFile()
+				.then((file) => file.text())
+
+			if (fileStr === '') json = {}
+			else json = json5.parse(fileStr)
+		} catch {
+			new InformationWindow({
+				name: 'windows.invalidJson.title',
+				description: 'windows.invalidJson.description',
+			})
+			this.close()
+			return
+		}
+
+		await super.setup()
+	}
+	async getFile() {
+		return new File(
+			[
+				JSON.stringify({
+					// TODO: Get JSON from jigsaw tab
+				}),
+			],
+			this.name
+		)
+	}
+
+	updateCache() {
+		throttledCacheUpdate(this)
+	}
+
+	async onActivate() {}
+	onDeactivate() {}
+
+	loadEditor() {}
+	setReadOnly(val: boolean) {
+		this.isReadOnly = val
+	}
+
+	async save() {
+		this.isTemporary = false
+
+		const app = await App.getApp()
+		const fileContent = JSON.stringify(
+			{
+				// TODO: Stringify jigsaw editor here
+			},
+			null,
+			'\t'
+		)
+
+		await app.fileSystem.write(this.fileHandle, fileContent)
+	}
+
+	async paste() {}
+
+	async copy() {}
+
+	async cut() {}
+
+	async close() {
+		const didClose = await super.close()
+
+		// We need to clear the lightning cache store from temporary data if the user doesn't save changes
+		if (!this.isForeignFile && didClose && this.isUnsaved) {
+			const file = await this.fileHandle.getFile()
+			const fileContent = await file.text()
+			await this.project.packIndexer.updateFile(
+				this.getPath(),
+				fileContent
+			)
+		}
+
+		return didClose
+	}
+}
diff --git a/src/components/Editors/Jigsaw/Tab.vue b/src/components/Editors/Jigsaw/Tab.vue
new file mode 100644
index 000000000..d2a8b7e99
--- /dev/null
+++ b/src/components/Editors/Jigsaw/Tab.vue
@@ -0,0 +1,136 @@
+<template>
+	<div
+		class="editor-container px-3 pb-3"
+		:style="{
+			fontSize,
+			fontFamily: codeFontFamily,
+			height: `${height - 12}px`,
+		}"
+		ref="editorContainer"
+		@click="tab.parent.setActive(true)"
+		tabindex="-1"
+	>
+		<div
+			class="grid-container outlined rounded-lg"
+			:style="{ cursor: cursorStyle }"
+			@mousedown="onMouseDown"
+			@mousemove="onMouseMove"
+			@mouseup="onMouseUp"
+		>
+			<div
+				:style="{
+					top: `${(this.currentY % 42) - 42}px`,
+					left: `${(this.currentX % 42) - 42}px`,
+				}"
+				class="grid"
+			></div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { settingsState } from '/@/components/Windows/Settings/SettingsState'
+import { TranslationMixin } from '/@/components/Mixins/TranslationMixin'
+
+export default {
+	name: 'TreeTab',
+	mixins: [TranslationMixin],
+	props: {
+		tab: Object,
+		height: Number,
+	},
+	data: () => ({
+		currentX: 0,
+		currentY: 0,
+		cursorStyle: 'grab',
+		startPosData: null,
+	}),
+	mounted() {
+		// this.treeEditor.receiveContainer(this.$refs.editorContainer)
+	},
+	activated() {
+		// this.treeEditor.receiveContainer(this.$refs.editorContainer)
+	},
+	methods: {
+		onMouseDown(event) {
+			this.startPosData = {
+				containerX: this.currentX,
+				containerY: this.currentY,
+				x: event.clientX,
+				y: event.clientY,
+			}
+			this.cursorStyle = 'grabbing'
+		},
+		onMouseMove(event) {
+			if (!this.startPosData) return
+
+			const { x, y, containerX, containerY } = this.startPosData
+
+			const dx = event.clientX - x
+			const dy = event.clientY - y
+			this.currentX = containerX + dx
+			this.currentY = containerY + dy
+		},
+		onMouseUp(event) {
+			this.startPosData = null
+			this.cursorStyle = 'grab'
+		},
+	},
+	computed: {
+		fontSize() {
+			return settingsState &&
+				settingsState.appearance &&
+				settingsState.appearance.editorFontSize
+				? `${settingsState.appearance.editorFontSize}`
+				: '14px'
+		},
+		codeFontFamily() {
+			return settingsState &&
+				settingsState.appearance &&
+				settingsState.appearance.editorFont
+				? `${settingsState.appearance.editorFont} !important`
+				: 'Menlo !important'
+		},
+		fontFamily() {
+			return this.settingsState &&
+				this.settingsState.appearance &&
+				this.settingsState.appearance.font
+				? `${this.settingsState.appearance.font} !important`
+				: 'Roboto !important'
+		},
+	},
+	watch: {
+		'tab.uuid'() {
+			// this.treeEditor.receiveContainer(this.$refs.editorContainer)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.grid-container {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	user-select: none;
+}
+.grid {
+	position: relative;
+	height: calc(100% + 84px);
+	width: calc(100% + 84px);
+	background-image: repeating-linear-gradient(
+			#555555 0 1px,
+			transparent 1px 100%
+		),
+		repeating-linear-gradient(90deg, #555555 0 1px, transparent 1px 100%);
+	background-size: 42px 42px;
+	background-repeat: repeat;
+}
+.theme--light .grid {
+	background-image: repeating-linear-gradient(
+			#a4a4a4 0 1px,
+			transparent 1px 100%
+		),
+		repeating-linear-gradient(90deg, #a4a4a4 0 1px, transparent 1px 100%);
+}
+</style>
diff --git a/src/components/TabSystem/TabProvider.ts b/src/components/TabSystem/TabProvider.ts
index 8931fd4f8..70369f698 100644
--- a/src/components/TabSystem/TabProvider.ts
+++ b/src/components/TabSystem/TabProvider.ts
@@ -1,5 +1,6 @@
 import { ImageTab } from '../Editors/Image/ImageTab'
 import { TargaTab } from '../Editors/Image/TargaTab'
+import { JigsawTab } from '../Editors/Jigsaw/Tab'
 import { TextTab } from '../Editors/Text/TextTab'
 import { TreeTab } from '../Editors/TreeEditor/Tab'
 import { FileTab } from './FileTab'
@@ -7,6 +8,7 @@ import { FileTab } from './FileTab'
 export class TabProvider {
 	protected static _tabs = new Set<typeof FileTab>([
 		TextTab,
+		JigsawTab,
 		TreeTab,
 		ImageTab,
 		TargaTab,
diff --git a/src/components/Windows/Settings/setupSettings.ts b/src/components/Windows/Settings/setupSettings.ts
index b4f247887..c31949798 100644
--- a/src/components/Windows/Settings/setupSettings.ts
+++ b/src/components/Windows/Settings/setupSettings.ts
@@ -345,6 +345,7 @@ export async function setupSettings(settings: SettingsWindow) {
 			options: [
 				{ text: 'Tree Editor', value: 'treeEditor' },
 				{ text: 'Raw Text', value: 'rawText' },
+				{ text: 'Jigsaw Editor', value: 'jigsawEditor' },
 			],
 			default: 'rawText',
 		})

From ba0740e1bd5e15820707f5d84bdf3a8adc67ddca Mon Sep 17 00:00:00 2001
From: solvedDev <solvedDev@gmail.com>
Date: Sun, 1 May 2022 14:40:35 +0200
Subject: [PATCH 02/12] fix: store current grid position on tab instance

---
 src/components/Editors/Jigsaw/Tab.ts  |  4 ++++
 src/components/Editors/Jigsaw/Tab.vue | 18 ++++++++++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/Editors/Jigsaw/Tab.ts b/src/components/Editors/Jigsaw/Tab.ts
index 9acabe676..722b6da40 100644
--- a/src/components/Editors/Jigsaw/Tab.ts
+++ b/src/components/Editors/Jigsaw/Tab.ts
@@ -30,6 +30,10 @@ const throttledCacheUpdate = debounce<(tab: JigsawTab) => Promise<void> | void>(
 
 export class JigsawTab extends FileTab {
 	component = JigsawTabComponent
+	position = {
+		x: 0,
+		y: 0,
+	}
 
 	constructor(
 		parent: TabSystem,
diff --git a/src/components/Editors/Jigsaw/Tab.vue b/src/components/Editors/Jigsaw/Tab.vue
index d2a8b7e99..f4e0f7f9c 100644
--- a/src/components/Editors/Jigsaw/Tab.vue
+++ b/src/components/Editors/Jigsaw/Tab.vue
@@ -40,8 +40,6 @@ export default {
 		height: Number,
 	},
 	data: () => ({
-		currentX: 0,
-		currentY: 0,
 		cursorStyle: 'grab',
 		startPosData: null,
 	}),
@@ -98,6 +96,22 @@ export default {
 				? `${this.settingsState.appearance.font} !important`
 				: 'Roboto !important'
 		},
+		currentX: {
+			get() {
+				return this.tab.position.x
+			},
+			set(val) {
+				this.tab.position.x = val
+			},
+		},
+		currentY: {
+			get() {
+				return this.tab.position.y
+			},
+			set(val) {
+				this.tab.position.y = val
+			},
+		},
 	},
 	watch: {
 		'tab.uuid'() {

From a0902e9bb7a79864f191a7851882c0f54f643f0e Mon Sep 17 00:00:00 2001
From: solvedDev <solvedDev@gmail.com>
Date: Sun, 1 May 2022 17:48:15 +0200
Subject: [PATCH 03/12] upd: basic UI concept

---
 src/components/Editors/Jigsaw/EventLine.vue  |  43 +++++++
 src/components/Editors/Jigsaw/JigsawNode.vue |  63 +++++++++++
 src/components/Editors/Jigsaw/Tab.vue        | 112 ++++++++++++++++++-
 3 files changed, 214 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Editors/Jigsaw/EventLine.vue
 create mode 100644 src/components/Editors/Jigsaw/JigsawNode.vue

diff --git a/src/components/Editors/Jigsaw/EventLine.vue b/src/components/Editors/Jigsaw/EventLine.vue
new file mode 100644
index 000000000..9c0f19128
--- /dev/null
+++ b/src/components/Editors/Jigsaw/EventLine.vue
@@ -0,0 +1,43 @@
+<template>
+	<div
+		:class="`component rounded-lg`"
+		:style="{
+			position: 'absolute',
+			top: `${containerY + this.y * 42 + 19}px`,
+			left: `${containerX + this.x * 42 + 3}px`,
+			height: '5px',
+			width: '37px',
+			cursor: 'pointer',
+			background: `var(--v-${color}-base)`,
+		}"
+	/>
+</template>
+
+<script>
+import { TranslationMixin } from '/@/components/Mixins/TranslationMixin'
+
+export default {
+	mixins: [TranslationMixin],
+	props: {
+		x: Number,
+		y: Number,
+		containerX: Number,
+		containerY: Number,
+		color: {
+			default: 'info',
+			type: String,
+		},
+	},
+	data: () => ({}),
+}
+</script>
+
+<style scoped>
+.component {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	user-select: none;
+	display: inline-grid;
+}
+</style>
diff --git a/src/components/Editors/Jigsaw/JigsawNode.vue b/src/components/Editors/Jigsaw/JigsawNode.vue
new file mode 100644
index 000000000..03cbd0fe5
--- /dev/null
+++ b/src/components/Editors/Jigsaw/JigsawNode.vue
@@ -0,0 +1,63 @@
+<template>
+	<div
+		:class="`component rounded-${roundedType}`"
+		:style="{
+			position: 'absolute',
+			top: `${containerY + this.y * 42 + 3}px`,
+			left: `${containerX + this.x * 42 + 3}px`,
+			height: '37px',
+			width: '37px',
+			cursor: 'pointer',
+			background: `var(--v-${color}-base)`,
+		}"
+	>
+		<v-icon>{{ icon }}</v-icon>
+	</div>
+</template>
+
+<script>
+import { TranslationMixin } from '/@/components/Mixins/TranslationMixin'
+
+export default {
+	mixins: [TranslationMixin],
+	props: {
+		x: Number,
+		y: Number,
+		containerX: Number,
+		containerY: Number,
+		color: {
+			default: 'error',
+			type: String,
+		},
+		icon: String,
+		type: {
+			type: String,
+			default: 'component',
+			validate: (val) => ['component', 'event'].includes(val),
+		},
+	},
+	data: () => ({}),
+	computed: {
+		roundedType() {
+			switch (this.type) {
+				case 'component':
+					return 'lg'
+				case 'event':
+					return 'circle'
+				default:
+					return '0'
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.component {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	user-select: none;
+	display: inline-grid;
+}
+</style>
diff --git a/src/components/Editors/Jigsaw/Tab.vue b/src/components/Editors/Jigsaw/Tab.vue
index f4e0f7f9c..db08385fd 100644
--- a/src/components/Editors/Jigsaw/Tab.vue
+++ b/src/components/Editors/Jigsaw/Tab.vue
@@ -11,7 +11,7 @@
 		tabindex="-1"
 	>
 		<div
-			class="grid-container outlined rounded-lg"
+			class="grid-container outlined rounded-full"
 			:style="{ cursor: cursorStyle }"
 			@mousedown="onMouseDown"
 			@mousemove="onMouseMove"
@@ -23,7 +23,107 @@
 					left: `${(this.currentX % 42) - 42}px`,
 				}"
 				class="grid"
-			></div>
+			/>
+			<JigsawNode
+				:containerX="currentX"
+				:containerY="currentY"
+				icon="mdi-heart"
+				:x="2"
+				:y="1"
+			/>
+			<JigsawNode
+				:containerX="currentX"
+				:containerY="currentY"
+				icon="mdi-shoe-print"
+				color="info"
+				:x="1"
+				:y="1"
+			/>
+			<JigsawNode
+				:containerX="currentX"
+				:containerY="currentY"
+				icon="mdi-sword"
+				color="toolbar"
+				:x="1"
+				:y="2"
+			/>
+			<JigsawNode
+				:containerX="currentX"
+				:containerY="currentY"
+				icon="mdi-camera-timer"
+				color="info"
+				:x="2"
+				:y="2"
+			/>
+
+			<EventLine
+				:containerX="currentX"
+				:containerY="currentY"
+				:x="3"
+				:y="2"
+			/>
+			<EventLine
+				:containerX="currentX"
+				:containerY="currentY"
+				:x="4"
+				:y="2"
+			/>
+			<EventLine
+				:containerX="currentX"
+				:containerY="currentY"
+				:x="5"
+				:y="2"
+			/>
+
+			<JigsawNode
+				:containerX="currentX"
+				:containerY="currentY"
+				icon="mdi-filter"
+				color="success"
+				:x="6"
+				:y="2"
+			/>
+
+			<EventLine
+				:containerX="currentX"
+				:containerY="currentY"
+				:x="7"
+				:y="2"
+			/>
+			<EventLine
+				:containerX="currentX"
+				:containerY="currentY"
+				:x="8"
+				:y="2"
+			/>
+			<EventLine
+				:containerX="currentX"
+				:containerY="currentY"
+				:x="9"
+				:y="2"
+			/>
+			<EventLine
+				:containerX="currentX"
+				:containerY="currentY"
+				:x="10"
+				:y="2"
+			/>
+
+			<JigsawNode
+				:containerX="currentX"
+				:containerY="currentY"
+				icon="mdi-heart"
+				:x="11"
+				:y="2"
+			/>
+			<JigsawNode
+				:containerX="currentX"
+				:containerY="currentY"
+				icon="mdi-shoe-print"
+				color="info"
+				:x="12"
+				:y="2"
+			/>
 		</div>
 	</div>
 </template>
@@ -31,12 +131,15 @@
 <script>
 import { settingsState } from '/@/components/Windows/Settings/SettingsState'
 import { TranslationMixin } from '/@/components/Mixins/TranslationMixin'
+import JigsawNode from './JigsawNode.vue'
+import EventLine from './EventLine.vue'
 
 export default {
-	name: 'TreeTab',
 	mixins: [TranslationMixin],
+	components: { JigsawNode, EventLine },
 	props: {
 		tab: Object,
+
 		height: Number,
 	},
 	data: () => ({
@@ -123,13 +226,14 @@ export default {
 
 <style scoped>
 .grid-container {
+	position: relative;
 	width: 100%;
 	height: 100%;
 	overflow: hidden;
 	user-select: none;
 }
 .grid {
-	position: relative;
+	position: absolute;
 	height: calc(100% + 84px);
 	width: calc(100% + 84px);
 	background-image: repeating-linear-gradient(

From e7c0560ec780eb19c0b9ad4eda701aa3be9a250f Mon Sep 17 00:00:00 2001
From: solvedDev <solvedDev@gmail.com>
Date: Sun, 1 May 2022 22:30:19 +0200
Subject: [PATCH 04/12] upd: more progress - upd: unified GridElement component
 - upd: extracted Grid component - upd: started component lib UI concept -
 upd: enabled use of EventLine and JigsawNode without grid

---
 .../Jigsaw/ComponentLib/ComponentLib.vue      | 39 ++++++++++++++++++
 src/components/Editors/Jigsaw/EventLine.vue   | 33 ++++++++-------
 .../Editors/Jigsaw/FlowArea/Grid.vue          | 41 +++++++++++++++++++
 .../Editors/Jigsaw/FlowArea/GridElement.vue   | 32 +++++++++++++++
 src/components/Editors/Jigsaw/JigsawNode.vue  | 28 ++++++-------
 src/components/Editors/Jigsaw/Tab.vue         | 39 ++++--------------
 6 files changed, 154 insertions(+), 58 deletions(-)
 create mode 100644 src/components/Editors/Jigsaw/ComponentLib/ComponentLib.vue
 create mode 100644 src/components/Editors/Jigsaw/FlowArea/Grid.vue
 create mode 100644 src/components/Editors/Jigsaw/FlowArea/GridElement.vue

diff --git a/src/components/Editors/Jigsaw/ComponentLib/ComponentLib.vue b/src/components/Editors/Jigsaw/ComponentLib/ComponentLib.vue
new file mode 100644
index 000000000..dc66ba092
--- /dev/null
+++ b/src/components/Editors/Jigsaw/ComponentLib/ComponentLib.vue
@@ -0,0 +1,39 @@
+<template>
+	<div class="outlined rounded-lg pa-2" style="width: 200px; height: 100%">
+		<v-combobox outlined dense />
+		<JigsawNode :boundToGrid="false" icon="mdi-heart" :x="2" :y="1" />
+		<JigsawNode
+			:boundToGrid="false"
+			icon="mdi-shoe-print"
+			color="info"
+			:x="1"
+			:y="1"
+		/>
+		<JigsawNode
+			:boundToGrid="false"
+			icon="mdi-sword"
+			color="toolbar"
+			:x="1"
+			:y="2"
+		/>
+		<JigsawNode
+			:boundToGrid="false"
+			icon="mdi-camera-timer"
+			color="info"
+			:x="2"
+			:y="2"
+		/>
+	</div>
+</template>
+
+<script>
+import JigsawNode from '../JigsawNode.vue'
+
+export default {
+	components: {
+		JigsawNode,
+	},
+}
+</script>
+
+<style></style>
diff --git a/src/components/Editors/Jigsaw/EventLine.vue b/src/components/Editors/Jigsaw/EventLine.vue
index 9c0f19128..1c96cbd55 100644
--- a/src/components/Editors/Jigsaw/EventLine.vue
+++ b/src/components/Editors/Jigsaw/EventLine.vue
@@ -1,24 +1,28 @@
 <template>
-	<div
-		:class="`component rounded-lg`"
-		:style="{
-			position: 'absolute',
-			top: `${containerY + this.y * 42 + 19}px`,
-			left: `${containerX + this.x * 42 + 3}px`,
-			height: '5px',
-			width: '37px',
-			cursor: 'pointer',
-			background: `var(--v-${color}-base)`,
-		}"
+	<GridElement
+		:isEnabled="boundToGrid"
+		:class="`event-line rounded-lg`"
+		:background="`var(--v-${color}-base)`"
+		:x="x"
+		:y="y"
+		:yOffset="16"
+		:containerX="containerX"
+		:containerY="containerY"
 	/>
 </template>
 
 <script>
+import GridElement from './FlowArea/GridElement.vue'
 import { TranslationMixin } from '/@/components/Mixins/TranslationMixin'
 
 export default {
+	components: { GridElement },
 	mixins: [TranslationMixin],
 	props: {
+		boundToGrid: {
+			type: Boolean,
+			default: true,
+		},
 		x: Number,
 		y: Number,
 		containerX: Number,
@@ -33,11 +37,12 @@ export default {
 </script>
 
 <style scoped>
-.component {
-	width: 100%;
-	height: 100%;
+.event-line {
+	width: 37px;
+	height: 5px;
 	overflow: hidden;
 	user-select: none;
+	cursor: pointer;
 	display: inline-grid;
 }
 </style>
diff --git a/src/components/Editors/Jigsaw/FlowArea/Grid.vue b/src/components/Editors/Jigsaw/FlowArea/Grid.vue
new file mode 100644
index 000000000..28f3c48fa
--- /dev/null
+++ b/src/components/Editors/Jigsaw/FlowArea/Grid.vue
@@ -0,0 +1,41 @@
+<template>
+	<div
+		:style="{
+			top: `${(this.y % 42) - 42}px`,
+			left: `${(this.x % 42) - 42}px`,
+		}"
+		class="grid"
+		@mousedown.self="$emit('mousedown', $event)"
+	/>
+</template>
+
+<script>
+export default {
+	props: {
+		x: Number,
+		y: Number,
+	},
+}
+</script>
+
+<style scoped>
+.grid {
+	position: absolute;
+	height: calc(100% + 84px);
+	width: calc(100% + 84px);
+	background-image: repeating-linear-gradient(
+			#555555 0 1px,
+			transparent 1px 100%
+		),
+		repeating-linear-gradient(90deg, #555555 0 1px, transparent 1px 100%);
+	background-size: 42px 42px;
+	background-repeat: repeat;
+}
+.theme--light .grid {
+	background-image: repeating-linear-gradient(
+			#a4a4a4 0 1px,
+			transparent 1px 100%
+		),
+		repeating-linear-gradient(90deg, #a4a4a4 0 1px, transparent 1px 100%);
+}
+</style>
diff --git a/src/components/Editors/Jigsaw/FlowArea/GridElement.vue b/src/components/Editors/Jigsaw/FlowArea/GridElement.vue
new file mode 100644
index 000000000..31c4f27a0
--- /dev/null
+++ b/src/components/Editors/Jigsaw/FlowArea/GridElement.vue
@@ -0,0 +1,32 @@
+<template>
+	<div
+		:style="{
+			position: isEnabled ? 'absolute' : undefined,
+			top: `${containerY + this.y * 42 + 3 + yOffset}px`,
+			left: `${containerX + this.x * 42 + 3}px`,
+			background,
+		}"
+	>
+		<slot />
+	</div>
+</template>
+
+<script>
+import { TranslationMixin } from '/@/components/Mixins/TranslationMixin'
+
+export default {
+	mixins: [TranslationMixin],
+	props: {
+		isEnabled: {
+			type: Boolean,
+			default: true,
+		},
+		x: Number,
+		y: Number,
+		yOffset: { type: Number, default: 0 },
+		containerX: Number,
+		containerY: Number,
+		background: String,
+	},
+}
+</script>
diff --git a/src/components/Editors/Jigsaw/JigsawNode.vue b/src/components/Editors/Jigsaw/JigsawNode.vue
index 03cbd0fe5..d0cbead14 100644
--- a/src/components/Editors/Jigsaw/JigsawNode.vue
+++ b/src/components/Editors/Jigsaw/JigsawNode.vue
@@ -1,26 +1,26 @@
 <template>
-	<div
+	<GridElement
+		:isEnabled="boundToGrid"
 		:class="`component rounded-${roundedType}`"
-		:style="{
-			position: 'absolute',
-			top: `${containerY + this.y * 42 + 3}px`,
-			left: `${containerX + this.x * 42 + 3}px`,
-			height: '37px',
-			width: '37px',
-			cursor: 'pointer',
-			background: `var(--v-${color}-base)`,
-		}"
+		:background="`var(--v-${color}-base)`"
+		:x="x"
+		:y="y"
+		:containerX="containerX"
+		:containerY="containerY"
 	>
 		<v-icon>{{ icon }}</v-icon>
-	</div>
+	</GridElement>
 </template>
 
 <script>
+import GridElement from './FlowArea/GridElement.vue'
 import { TranslationMixin } from '/@/components/Mixins/TranslationMixin'
 
 export default {
+	components: { GridElement },
 	mixins: [TranslationMixin],
 	props: {
+		boundToGrid: { type: Boolean, default: true },
 		x: Number,
 		y: Number,
 		containerX: Number,
@@ -54,10 +54,10 @@ export default {
 
 <style scoped>
 .component {
-	width: 100%;
-	height: 100%;
-	overflow: hidden;
 	user-select: none;
 	display: inline-grid;
+	height: 37px;
+	width: 37px;
+	cursor: pointer;
 }
 </style>
diff --git a/src/components/Editors/Jigsaw/Tab.vue b/src/components/Editors/Jigsaw/Tab.vue
index db08385fd..cf448bea6 100644
--- a/src/components/Editors/Jigsaw/Tab.vue
+++ b/src/components/Editors/Jigsaw/Tab.vue
@@ -1,29 +1,24 @@
 <template>
 	<div
-		class="editor-container px-3 pb-3"
+		class="editor-container d-flex px-3 pb-3"
 		:style="{
 			fontSize,
 			fontFamily: codeFontFamily,
 			height: `${height - 12}px`,
+			gap: '8px',
 		}"
 		ref="editorContainer"
 		@click="tab.parent.setActive(true)"
 		tabindex="-1"
 	>
+		<ComponentLib />
 		<div
-			class="grid-container outlined rounded-full"
+			class="grid-container outlined rounded-lg"
 			:style="{ cursor: cursorStyle }"
-			@mousedown="onMouseDown"
 			@mousemove="onMouseMove"
 			@mouseup="onMouseUp"
 		>
-			<div
-				:style="{
-					top: `${(this.currentY % 42) - 42}px`,
-					left: `${(this.currentX % 42) - 42}px`,
-				}"
-				class="grid"
-			/>
+			<Grid :x="currentX" :y="currentY" @mousedown.self="onMouseDown" />
 			<JigsawNode
 				:containerX="currentX"
 				:containerY="currentY"
@@ -80,6 +75,7 @@
 				:containerY="currentY"
 				icon="mdi-filter"
 				color="success"
+				type="event"
 				:x="6"
 				:y="2"
 			/>
@@ -133,10 +129,12 @@ import { settingsState } from '/@/components/Windows/Settings/SettingsState'
 import { TranslationMixin } from '/@/components/Mixins/TranslationMixin'
 import JigsawNode from './JigsawNode.vue'
 import EventLine from './EventLine.vue'
+import ComponentLib from './ComponentLib/ComponentLib.vue'
+import Grid from './FlowArea/Grid.vue'
 
 export default {
 	mixins: [TranslationMixin],
-	components: { JigsawNode, EventLine },
+	components: { JigsawNode, EventLine, ComponentLib, Grid },
 	props: {
 		tab: Object,
 
@@ -232,23 +230,4 @@ export default {
 	overflow: hidden;
 	user-select: none;
 }
-.grid {
-	position: absolute;
-	height: calc(100% + 84px);
-	width: calc(100% + 84px);
-	background-image: repeating-linear-gradient(
-			#555555 0 1px,
-			transparent 1px 100%
-		),
-		repeating-linear-gradient(90deg, #555555 0 1px, transparent 1px 100%);
-	background-size: 42px 42px;
-	background-repeat: repeat;
-}
-.theme--light .grid {
-	background-image: repeating-linear-gradient(
-			#a4a4a4 0 1px,
-			transparent 1px 100%
-		),
-		repeating-linear-gradient(90deg, #a4a4a4 0 1px, transparent 1px 100%);
-}
 </style>

From 2df784108e9417d6e7defa8d32a7ae4481843a6f Mon Sep 17 00:00:00 2001
From: solvedDev <solvedDev@gmail.com>
Date: Sun, 1 May 2022 22:39:13 +0200
Subject: [PATCH 05/12] feat: event connection UI concept

---
 .../Jigsaw/ComponentLib/ComponentLib.vue      | 31 +++++--------------
 src/components/Editors/Jigsaw/JigsawNode.vue  | 11 +++++++
 src/components/Editors/Jigsaw/Tab.vue         |  6 ++++
 3 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/components/Editors/Jigsaw/ComponentLib/ComponentLib.vue b/src/components/Editors/Jigsaw/ComponentLib/ComponentLib.vue
index dc66ba092..3f18edb02 100644
--- a/src/components/Editors/Jigsaw/ComponentLib/ComponentLib.vue
+++ b/src/components/Editors/Jigsaw/ComponentLib/ComponentLib.vue
@@ -1,39 +1,22 @@
 <template>
 	<div class="outlined rounded-lg pa-2" style="width: 200px; height: 100%">
 		<v-combobox outlined dense />
-		<JigsawNode :boundToGrid="false" icon="mdi-heart" :x="2" :y="1" />
-		<JigsawNode
-			:boundToGrid="false"
-			icon="mdi-shoe-print"
-			color="info"
-			:x="1"
-			:y="1"
-		/>
-		<JigsawNode
-			:boundToGrid="false"
-			icon="mdi-sword"
-			color="toolbar"
-			:x="1"
-			:y="2"
-		/>
-		<JigsawNode
-			:boundToGrid="false"
-			icon="mdi-camera-timer"
-			color="info"
-			:x="2"
-			:y="2"
-		/>
+		<JigsawNode :boundToGrid="false" icon="mdi-heart" />
+		<JigsawNode :boundToGrid="false" icon="mdi-shoe-print" color="info" />
+		<JigsawNode :boundToGrid="false" icon="mdi-sword" color="toolbar" />
+		<JigsawNode :boundToGrid="false" icon="mdi-camera-timer" color="info" />
+		<EventLine :boundToGrid="false" />
 	</div>
 </template>
 
 <script>
+import EventLine from '../EventLine.vue'
 import JigsawNode from '../JigsawNode.vue'
 
 export default {
 	components: {
 		JigsawNode,
+		EventLine,
 	},
 }
 </script>
-
-<style></style>
diff --git a/src/components/Editors/Jigsaw/JigsawNode.vue b/src/components/Editors/Jigsaw/JigsawNode.vue
index d0cbead14..bffa54eb4 100644
--- a/src/components/Editors/Jigsaw/JigsawNode.vue
+++ b/src/components/Editors/Jigsaw/JigsawNode.vue
@@ -8,6 +8,11 @@
 		:containerX="containerX"
 		:containerY="containerY"
 	>
+		<div
+			v-if="connection === 'left'"
+			class="component rounded-lg connection"
+			:style="`background: var(--v-${color}-base)`"
+		></div>
 		<v-icon>{{ icon }}</v-icon>
 	</GridElement>
 </template>
@@ -35,6 +40,7 @@ export default {
 			default: 'component',
 			validate: (val) => ['component', 'event'].includes(val),
 		},
+		connection: String,
 	},
 	data: () => ({}),
 	computed: {
@@ -60,4 +66,9 @@ export default {
 	width: 37px;
 	cursor: pointer;
 }
+.connection {
+	position: absolute;
+	transform: rotate(45deg) scale(0.5);
+	left: 12px;
+}
 </style>
diff --git a/src/components/Editors/Jigsaw/Tab.vue b/src/components/Editors/Jigsaw/Tab.vue
index cf448bea6..69e82b237 100644
--- a/src/components/Editors/Jigsaw/Tab.vue
+++ b/src/components/Editors/Jigsaw/Tab.vue
@@ -45,6 +45,7 @@
 			<JigsawNode
 				:containerX="currentX"
 				:containerY="currentY"
+				connection="left"
 				icon="mdi-camera-timer"
 				color="info"
 				:x="2"
@@ -73,6 +74,7 @@
 			<JigsawNode
 				:containerX="currentX"
 				:containerY="currentY"
+				connection="left"
 				icon="mdi-filter"
 				color="success"
 				type="event"
@@ -83,24 +85,28 @@
 			<EventLine
 				:containerX="currentX"
 				:containerY="currentY"
+				color="success"
 				:x="7"
 				:y="2"
 			/>
 			<EventLine
 				:containerX="currentX"
 				:containerY="currentY"
+				color="success"
 				:x="8"
 				:y="2"
 			/>
 			<EventLine
 				:containerX="currentX"
 				:containerY="currentY"
+				color="success"
 				:x="9"
 				:y="2"
 			/>
 			<EventLine
 				:containerX="currentX"
 				:containerY="currentY"
+				color="success"
 				:x="10"
 				:y="2"
 			/>

From 038ad85bb90a0b7c6bff050a67b886ceb93312c5 Mon Sep 17 00:00:00 2001
From: solvedDev <solvedDev@gmail.com>
Date: Mon, 2 May 2022 10:31:45 +0200
Subject: [PATCH 06/12] upd: move to .flow files

---
 src/components/Editors/Jigsaw/Tab.ts             | 5 +----
 src/components/Windows/Settings/setupSettings.ts | 1 -
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/Editors/Jigsaw/Tab.ts b/src/components/Editors/Jigsaw/Tab.ts
index 722b6da40..381d4045e 100644
--- a/src/components/Editors/Jigsaw/Tab.ts
+++ b/src/components/Editors/Jigsaw/Tab.ts
@@ -58,10 +58,7 @@ export class JigsawTab extends FileTab {
 	}
 
 	static is(fileHandle: AnyFileHandle) {
-		return (
-			settingsState?.editor?.jsonEditor === 'jigsawEditor' &&
-			fileHandle.name.endsWith('.json')
-		)
+		return fileHandle.name.endsWith('.flow')
 	}
 	async setup() {
 		let json: unknown
diff --git a/src/components/Windows/Settings/setupSettings.ts b/src/components/Windows/Settings/setupSettings.ts
index c31949798..b4f247887 100644
--- a/src/components/Windows/Settings/setupSettings.ts
+++ b/src/components/Windows/Settings/setupSettings.ts
@@ -345,7 +345,6 @@ export async function setupSettings(settings: SettingsWindow) {
 			options: [
 				{ text: 'Tree Editor', value: 'treeEditor' },
 				{ text: 'Raw Text', value: 'rawText' },
-				{ text: 'Jigsaw Editor', value: 'jigsawEditor' },
 			],
 			default: 'rawText',
 		})

From 5e11778ad489a8ed0d6fbaf6ec9ffbc7b523fb32 Mon Sep 17 00:00:00 2001
From: solvedDev <solvedDev@gmail.com>
Date: Mon, 2 May 2022 10:39:13 +0200
Subject: [PATCH 07/12] feat: allow nodes to connect into all directions

---
 src/components/Editors/Jigsaw/JigsawNode.vue | 27 +++++++++++++++-----
 src/components/Editors/Jigsaw/Tab.vue        |  4 +--
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/components/Editors/Jigsaw/JigsawNode.vue b/src/components/Editors/Jigsaw/JigsawNode.vue
index bffa54eb4..fe213cb18 100644
--- a/src/components/Editors/Jigsaw/JigsawNode.vue
+++ b/src/components/Editors/Jigsaw/JigsawNode.vue
@@ -9,10 +9,15 @@
 		:containerY="containerY"
 	>
 		<div
-			v-if="connection === 'left'"
-			class="component rounded-lg connection"
-			:style="`background: var(--v-${color}-base)`"
-		></div>
+			v-for="dir in connectTo"
+			:key="dir"
+			class="component rounded-lg connect"
+			:style="{
+				background: `var(--v-${color}-base)`,
+				left: `${dir === 'left' ? 12 : dir === 'right' ? -12 : 0}px`,
+				top: `${dir === 'up' ? -12 : dir === 'down' ? 12 : 0}px`,
+			}"
+		/>
 		<v-icon>{{ icon }}</v-icon>
 	</GridElement>
 </template>
@@ -40,7 +45,11 @@ export default {
 			default: 'component',
 			validate: (val) => ['component', 'event'].includes(val),
 		},
-		connection: String,
+		connect: {
+			type: [Array, String],
+			validate: (val) =>
+				val.every((v) => ['left', 'right', 'up', 'down'].includes(v)),
+		},
 	},
 	data: () => ({}),
 	computed: {
@@ -54,6 +63,11 @@ export default {
 					return '0'
 			}
 		},
+		connectTo() {
+			return typeof this.connect === 'string'
+				? [this.connect]
+				: this.connect
+		},
 	},
 }
 </script>
@@ -66,9 +80,8 @@ export default {
 	width: 37px;
 	cursor: pointer;
 }
-.connection {
+.connect {
 	position: absolute;
 	transform: rotate(45deg) scale(0.5);
-	left: 12px;
 }
 </style>
diff --git a/src/components/Editors/Jigsaw/Tab.vue b/src/components/Editors/Jigsaw/Tab.vue
index 69e82b237..907986619 100644
--- a/src/components/Editors/Jigsaw/Tab.vue
+++ b/src/components/Editors/Jigsaw/Tab.vue
@@ -45,7 +45,7 @@
 			<JigsawNode
 				:containerX="currentX"
 				:containerY="currentY"
-				connection="left"
+				:connect="['left', 'down']"
 				icon="mdi-camera-timer"
 				color="info"
 				:x="2"
@@ -74,7 +74,7 @@
 			<JigsawNode
 				:containerX="currentX"
 				:containerY="currentY"
-				connection="left"
+				:connect="['left']"
 				icon="mdi-filter"
 				color="success"
 				type="event"

From b8dc8f532d72b789ebbadac8be145ee20bb9a26f Mon Sep 17 00:00:00 2001
From: solvedDev <solvedDev@gmail.com>
Date: Mon, 2 May 2022 13:22:20 +0200
Subject: [PATCH 08/12] upd: improved grid dragging

---
 src/components/Editors/Jigsaw/Tab.vue | 11 +++++++++--
 src/utils/disposableListener.ts       | 11 +++++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 src/utils/disposableListener.ts

diff --git a/src/components/Editors/Jigsaw/Tab.vue b/src/components/Editors/Jigsaw/Tab.vue
index 907986619..475690372 100644
--- a/src/components/Editors/Jigsaw/Tab.vue
+++ b/src/components/Editors/Jigsaw/Tab.vue
@@ -15,8 +15,6 @@
 		<div
 			class="grid-container outlined rounded-lg"
 			:style="{ cursor: cursorStyle }"
-			@mousemove="onMouseMove"
-			@mouseup="onMouseUp"
 		>
 			<Grid :x="currentX" :y="currentY" @mousedown.self="onMouseDown" />
 			<JigsawNode
@@ -137,6 +135,7 @@ import JigsawNode from './JigsawNode.vue'
 import EventLine from './EventLine.vue'
 import ComponentLib from './ComponentLib/ComponentLib.vue'
 import Grid from './FlowArea/Grid.vue'
+import { addListener } from '/@/utils/disposableListener'
 
 export default {
 	mixins: [TranslationMixin],
@@ -149,6 +148,7 @@ export default {
 	data: () => ({
 		cursorStyle: 'grab',
 		startPosData: null,
+		disposables: null,
 	}),
 	mounted() {
 		// this.treeEditor.receiveContainer(this.$refs.editorContainer)
@@ -165,6 +165,10 @@ export default {
 				y: event.clientY,
 			}
 			this.cursorStyle = 'grabbing'
+			this.disposables = [
+				addListener('mousemove', this.onMouseMove),
+				addListener('mouseup', this.onMouseUp),
+			]
 		},
 		onMouseMove(event) {
 			if (!this.startPosData) return
@@ -179,6 +183,9 @@ export default {
 		onMouseUp(event) {
 			this.startPosData = null
 			this.cursorStyle = 'grab'
+			if (this.disposables)
+				this.disposables.forEach((disposable) => disposable.dispose())
+			this.disposables = null
 		},
 	},
 	computed: {
diff --git a/src/utils/disposableListener.ts b/src/utils/disposableListener.ts
new file mode 100644
index 000000000..709a8d386
--- /dev/null
+++ b/src/utils/disposableListener.ts
@@ -0,0 +1,11 @@
+export function addListener<K extends keyof DocumentEventMap>(
+	type: K,
+	listener: (this: Document, ev: DocumentEventMap[K]) => any,
+	options?: boolean | AddEventListenerOptions
+) {
+	document.addEventListener(type, listener, options)
+
+	return {
+		dispose: () => document.removeEventListener(type, listener),
+	}
+}

From 8ab15288a59ed621a20811759655cfdc1bcdecb7 Mon Sep 17 00:00:00 2001
From: solvedDev <solvedDev@gmail.com>
Date: Mon, 2 May 2022 14:40:11 +0200
Subject: [PATCH 09/12] feat: support dragging of nodes

---
 .../Editors/Jigsaw/FlowArea/GridElement.vue   |   2 +
 src/components/Editors/Jigsaw/JigsawNode.vue  | 121 +++++++++++++++++-
 2 files changed, 118 insertions(+), 5 deletions(-)

diff --git a/src/components/Editors/Jigsaw/FlowArea/GridElement.vue b/src/components/Editors/Jigsaw/FlowArea/GridElement.vue
index 31c4f27a0..a52c1015f 100644
--- a/src/components/Editors/Jigsaw/FlowArea/GridElement.vue
+++ b/src/components/Editors/Jigsaw/FlowArea/GridElement.vue
@@ -5,6 +5,7 @@
 			top: `${containerY + this.y * 42 + 3 + yOffset}px`,
 			left: `${containerX + this.x * 42 + 3}px`,
 			background,
+			cursor,
 		}"
 	>
 		<slot />
@@ -27,6 +28,7 @@ export default {
 		containerX: Number,
 		containerY: Number,
 		background: String,
+		cursor: String,
 	},
 }
 </script>
diff --git a/src/components/Editors/Jigsaw/JigsawNode.vue b/src/components/Editors/Jigsaw/JigsawNode.vue
index fe213cb18..3f6e249a6 100644
--- a/src/components/Editors/Jigsaw/JigsawNode.vue
+++ b/src/components/Editors/Jigsaw/JigsawNode.vue
@@ -1,12 +1,17 @@
 <template>
 	<GridElement
 		:isEnabled="boundToGrid"
-		:class="`component rounded-${roundedType}`"
+		:class="{
+			[`component rounded-${roundedType}`]: true,
+			'shake elevation-24': isDragging,
+		}"
 		:background="`var(--v-${color}-base)`"
-		:x="x"
-		:y="y"
+		:cursor="cursorStyle"
+		:x="position.x"
+		:y="position.y"
 		:containerX="containerX"
 		:containerY="containerY"
+		@mousedown.native="onMouseDown"
 	>
 		<div
 			v-for="dir in connectTo"
@@ -25,6 +30,8 @@
 <script>
 import GridElement from './FlowArea/GridElement.vue'
 import { TranslationMixin } from '/@/components/Mixins/TranslationMixin'
+import { addListener } from '/@/utils/disposableListener'
+import { disposableTimeout } from '/@/utils/disposableTimeout'
 
 export default {
 	components: { GridElement },
@@ -51,7 +58,22 @@ export default {
 				val.every((v) => ['left', 'right', 'up', 'down'].includes(v)),
 		},
 	},
-	data: () => ({}),
+	data: () => ({
+		position: {
+			x: 0,
+			y: 0,
+		},
+		mouseUpFired: false,
+		isDragging: false,
+		disposables: null,
+		cursorStyle: 'pointer',
+		mouseUpTimeout: null,
+		startPosData: null,
+	}),
+	mounted() {
+		this.position.x = this.x
+		this.position.y = this.y
+	},
 	computed: {
 		roundedType() {
 			switch (this.type) {
@@ -69,6 +91,66 @@ export default {
 				: this.connect
 		},
 	},
+	methods: {
+		onMouseDown(event) {
+			// Wait for last mouseUpTimeout to finish
+			if (this.mouseUpTimeout) return
+			this.mouseUpFired = false
+			this.cursorStyle = 'grab'
+
+			this.startPosData = {
+				elementX: this.position.x,
+				elementY: this.position.y,
+				x: event.clientX,
+				y: event.clientY,
+			}
+
+			this.mouseUpTimeout = disposableTimeout(() => {
+				if (this.mouseUpFired) {
+					this.onClick(event)
+				} else {
+					this.onDrag(event)
+				}
+
+				this.mouseUpTimeout = null
+			}, 200)
+
+			this.disposables = [
+				addListener('mousemove', this.onMouseMove),
+				addListener('mouseup', this.onDragEnd),
+			]
+		},
+		onDrag(event) {
+			this.isDragging = true
+			this.cursorStyle = 'grabbing'
+		},
+		onClick() {
+			console.log('click')
+			this.cursorStyle = 'pointer'
+		},
+		onMouseMove(event) {
+			if (!this.isDragging) {
+				this.onDrag(event)
+			}
+
+			const { x, y, elementX, elementY } = this.startPosData
+
+			const dx = event.clientX - x
+			const dy = event.clientY - y
+			this.position.x = Math.round((elementX * 42 + dx) / 42)
+			this.position.y = Math.round((elementY * 42 + dy) / 42)
+		},
+		onDragEnd() {
+			this.isDragging = false
+			this.cursorStyle = 'pointer'
+
+			this.mouseUpFired = true
+			if (this.disposables)
+				this.disposables.forEach((disposable) => disposable.dispose())
+			this.disposables = null
+			this.startPosData = null
+		},
+	},
 }
 </script>
 
@@ -78,10 +160,39 @@ export default {
 	display: inline-grid;
 	height: 37px;
 	width: 37px;
-	cursor: pointer;
 }
 .connect {
 	position: absolute;
 	transform: rotate(45deg) scale(0.5);
 }
+
+.shake {
+	z-index: 1;
+	animation: shake 1s;
+	animation-iteration-count: infinite;
+	transform: scale(1.2);
+}
+
+@keyframes shake {
+	10%,
+	90% {
+		transform: translate(-1px, 0) rotate(3deg) scale(1.2);
+	}
+
+	20%,
+	80% {
+		transform: translate(2px, 0) rotate(-5deg) scale(1.2);
+	}
+
+	30%,
+	50%,
+	70% {
+		transform: translate(-4px, 0) rotate(7deg) scale(1.2);
+	}
+
+	40%,
+	60% {
+		transform: translate(4px, 0) rotate(-7deg) scale(1.2);
+	}
+}
 </style>

From bcbcdd25e15e33924298e779f1d84034ddc95be7 Mon Sep 17 00:00:00 2001
From: solvedDev <solvedDev@gmail.com>
Date: Sat, 22 Oct 2022 19:40:15 +0200
Subject: [PATCH 10/12] upd: use new event function

---
 src/components/Editors/Jigsaw/JigsawNode.vue | 6 +++---
 src/components/Editors/Jigsaw/Tab.vue        | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Editors/Jigsaw/JigsawNode.vue b/src/components/Editors/Jigsaw/JigsawNode.vue
index 3f6e249a6..588dcba32 100644
--- a/src/components/Editors/Jigsaw/JigsawNode.vue
+++ b/src/components/Editors/Jigsaw/JigsawNode.vue
@@ -30,7 +30,7 @@
 <script>
 import GridElement from './FlowArea/GridElement.vue'
 import { TranslationMixin } from '/@/components/Mixins/TranslationMixin'
-import { addListener } from '/@/utils/disposableListener'
+import { addDisposableEventListener } from '/@/utils/disposableListener'
 import { disposableTimeout } from '/@/utils/disposableTimeout'
 
 export default {
@@ -116,8 +116,8 @@ export default {
 			}, 200)
 
 			this.disposables = [
-				addListener('mousemove', this.onMouseMove),
-				addListener('mouseup', this.onDragEnd),
+				addDisposableEventListener('mousemove', this.onMouseMove),
+				addDisposableEventListener('mouseup', this.onDragEnd),
 			]
 		},
 		onDrag(event) {
diff --git a/src/components/Editors/Jigsaw/Tab.vue b/src/components/Editors/Jigsaw/Tab.vue
index 475690372..ad335c7ca 100644
--- a/src/components/Editors/Jigsaw/Tab.vue
+++ b/src/components/Editors/Jigsaw/Tab.vue
@@ -135,7 +135,7 @@ import JigsawNode from './JigsawNode.vue'
 import EventLine from './EventLine.vue'
 import ComponentLib from './ComponentLib/ComponentLib.vue'
 import Grid from './FlowArea/Grid.vue'
-import { addListener } from '/@/utils/disposableListener'
+import { addDisposableEventListener } from '/@/utils/disposableListener'
 
 export default {
 	mixins: [TranslationMixin],
@@ -166,8 +166,8 @@ export default {
 			}
 			this.cursorStyle = 'grabbing'
 			this.disposables = [
-				addListener('mousemove', this.onMouseMove),
-				addListener('mouseup', this.onMouseUp),
+				addDisposableEventListener('mousemove', this.onMouseMove),
+				addDisposableEventListener('mouseup', this.onMouseUp),
 			]
 		},
 		onMouseMove(event) {

From 01e8f30839195b4e3f7b4f73885f1ac936fe4b30 Mon Sep 17 00:00:00 2001
From: solvedDev <solvedDev@gmail.com>
Date: Sat, 22 Oct 2022 19:42:22 +0200
Subject: [PATCH 11/12] upd: JigsawTab to new FileTab specification

---
 src/components/Editors/Jigsaw/Tab.ts | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/Editors/Jigsaw/Tab.ts b/src/components/Editors/Jigsaw/Tab.ts
index 381d4045e..ec2cbd149 100644
--- a/src/components/Editors/Jigsaw/Tab.ts
+++ b/src/components/Editors/Jigsaw/Tab.ts
@@ -1,4 +1,4 @@
-import { FileTab } from '/@/components/TabSystem/FileTab'
+import { FileTab, TReadOnlyMode } from '/@/components/TabSystem/FileTab'
 import JigsawTabComponent from './Tab.vue'
 import { App } from '/@/App'
 import { TabSystem } from '/@/components/TabSystem/TabSystem'
@@ -38,9 +38,9 @@ export class JigsawTab extends FileTab {
 	constructor(
 		parent: TabSystem,
 		fileHandle: AnyFileHandle,
-		isReadOnly = false
+		readonlyMode?: TReadOnlyMode
 	) {
-		super(parent, fileHandle, isReadOnly)
+		super(parent, fileHandle, readonlyMode)
 
 		this.fired.then(async () => {
 			const app = await App.getApp()
@@ -96,11 +96,11 @@ export class JigsawTab extends FileTab {
 	}
 
 	async onActivate() {}
-	onDeactivate() {}
+	async onDeactivate() {}
 
 	loadEditor() {}
-	setReadOnly(val: boolean) {
-		this.isReadOnly = val
+	setReadOnly(val: TReadOnlyMode) {
+		this.readOnlyMode = val
 	}
 
 	async save() {
@@ -139,4 +139,6 @@ export class JigsawTab extends FileTab {
 
 		return didClose
 	}
+
+	protected _save(): void | Promise<void> {}
 }

From aae429f1f95c7614ba4ae17233cf204174fd7766 Mon Sep 17 00:00:00 2001
From: solvedDev <solvedDev@gmail.com>
Date: Sat, 22 Oct 2022 20:08:07 +0200
Subject: [PATCH 12/12] upd: add readme

---
 src/components/Editors/Jigsaw/README.md | 37 +++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 src/components/Editors/Jigsaw/README.md

diff --git a/src/components/Editors/Jigsaw/README.md b/src/components/Editors/Jigsaw/README.md
new file mode 100644
index 000000000..e36533a2c
--- /dev/null
+++ b/src/components/Editors/Jigsaw/README.md
@@ -0,0 +1,37 @@
+# Flow Editor
+
+Rethinking Minecraft Add-On creation.
+
+## What is Flow Editor?
+
+Flow is an experimental visual entity editor for Minecraft Add-Ons. Components are placed on a grid and component groups and events are inferred naturally by the way the components are connected. This allows for a more intuitive and visual way to create Minecraft Add-Ons.
+
+## Technical Details
+
+### Internal Representation
+
+Flow grids will have a fixed size of horizontal cells and a theoretically infinite number of vertical cells. We are storing components within an one-dimensional array of cells. Each cell can contain a single component or an "event line" to connect components together.
+
+### Adding components
+
+Components can be dragged from an "inventory" onto the grid. A component group is simply defined by having multiple components right next to each other. Events are connecting component groups together. A red line means "remove this group" and a green line means "add this group".
+
+### Editing components
+
+We need to write a small library which can turn a JSON schema into a simple, visual user interface. It will open upon clicking on a component in the grid.
+
+### Turning flow into code
+
+In order to turn the visual representation of an entity into code, we first need to create a data structure that stores all component groups. This is done in the following way:
+
+-   Iterate over each cell line by line
+    -   If the current cell is empty, jump to the next cell
+    -   Otherwise, check if the cell above contains a component and the cell to the left contains a component
+        -   If it does, merge the two components into one group and add the new component to the group as well
+    -   If it doesn't, check if the cell above contains a component
+        -   If it does, add the current component to the group above
+    -   If it doesn't, check if the cell to the left contains a component
+        -   If it does, add the current component to the group to the left
+    -   Otherwise, add the current component to a new group
+
+TODO: Event parsing