From e57777e337cb9890a52329db1352b3346097788f Mon Sep 17 00:00:00 2001
From: jenesius <lokargenia@gmail.com>
Date: Tue, 23 May 2023 21:12:25 +0300
Subject: [PATCH] feat: modify dispatch event. Add recursive dispatching event
 to children depends.

---
 project/pages/test/App.vue              |  9 ++-
 project/pages/test/input-coord.vue      |  8 ++-
 project/pages/test/widget-composite.vue |  8 ++-
 src/classes/CompareEvent.ts             | 13 ++++
 src/classes/DependencyQueue.ts          | 13 ++--
 src/classes/Form.ts                     | 87 +++++++++++++++++--------
 6 files changed, 97 insertions(+), 41 deletions(-)

diff --git a/project/pages/test/App.vue b/project/pages/test/App.vue
index 6d27170..c78b3f6 100644
--- a/project/pages/test/App.vue
+++ b/project/pages/test/App.vue
@@ -9,7 +9,7 @@
 
 		<button @click = "setDefaultValues">set default values</button>
 
-		<div :key = "count">{{values}}</div>
+		<div :key = "count">{{count}}</div>
 	</div>
 </template>
 
@@ -19,6 +19,7 @@ import FormField from "./../../../src/widgets/form-field.vue";
 import {ref} from "vue";
 import WidgetComposite from "./widget-composite.vue";
 import WidgetAddress from "./widget-address.vue"
+import copyObject from "./../../../src/utils/copy-object";
 
 const form = new Form({
 	name: "main"
@@ -27,8 +28,9 @@ const form = new Form({
 window.form = form
 
 const count = ref(0);
-setInterval(() => count.value++, 50);
-const values = ref(form.values);
+setInterval(() => {
+	count.value = copyObject(form.values);
+}, 50);
 
 const name = ref('username');
 
@@ -41,6 +43,7 @@ function clean() {
 function setDefaultValues() {
 	return form.cleanValues({
 		username: "Jenesius",
+		"coordinate.x": "123"
 	})
 }
 
diff --git a/project/pages/test/input-coord.vue b/project/pages/test/input-coord.vue
index 89666f5..b32c4a0 100644
--- a/project/pages/test/input-coord.vue
+++ b/project/pages/test/input-coord.vue
@@ -1,5 +1,6 @@
 <template>
-	<div>
+	<div class = "widget-coordinate">
+		<p>Coordinate</p>
 		<input-field name = "X" label = "X"/>
 		<input-field name = "Y" label = "Y"/>
 		<button @click = "random">test</button>
@@ -28,5 +29,8 @@ const values = useFormValues(form)
 </script>
 
 <style scoped>
-
+	.widget-coordinate {
+		padding: 4px;
+		background-color: #eab0f5;
+	}
 </style>
\ No newline at end of file
diff --git a/project/pages/test/widget-composite.vue b/project/pages/test/widget-composite.vue
index 7d1af0b..3c46f46 100644
--- a/project/pages/test/widget-composite.vue
+++ b/project/pages/test/widget-composite.vue
@@ -1,5 +1,6 @@
 <template>
-	<div>
+	<div class = "widget-composite">
+		<p>Coordinate</p>
 		<form-field name="x"/>
 		<form-field name="y"/>
 
@@ -29,5 +30,8 @@ const values = ref(form.values);
 </script>
 
 <style scoped>
-
+	.widget-composite{
+		padding: 5px;
+		background-color: rgba(194, 154, 49, 0.13);
+	}
 </style>
\ No newline at end of file
diff --git a/src/classes/CompareEvent.ts b/src/classes/CompareEvent.ts
index 9f636da..e4a74f7 100644
--- a/src/classes/CompareEvent.ts
+++ b/src/classes/CompareEvent.ts
@@ -22,6 +22,19 @@ export default class CompareEvent extends FormEvent{
 	 * Используется для передачи только части объекта изменений в дочерний элемент.
 	 * */
 	static restoreByName(compareEvent: CompareEvent, name: string) {
+
+		const array: CompareItem[] = [];
+
+		compareEvent.comparison.forEach(item => {
+			if (!item.name.startsWith(name)) return;
+
+			array.push({
+				...item,
+				name: item.name.slice(name.length + 1)
+			})
+		})
+		return new CompareEvent(array)
+
 		return new CompareEvent(
 			compareEvent.comparison
 			.filter(comp => comp.name.startsWith(name))
diff --git a/src/classes/DependencyQueue.ts b/src/classes/DependencyQueue.ts
index 694210c..e0ee723 100644
--- a/src/classes/DependencyQueue.ts
+++ b/src/classes/DependencyQueue.ts
@@ -1,7 +1,7 @@
 import Form from "./Form";
 
 export default class DependencyQueue<T extends DependencyItem> {
-	private array: DependencyItem[] = []
+	private array: T[] = []
 	private readonly form: Form
 
 	constructor(form: Form) {
@@ -16,20 +16,19 @@ export default class DependencyQueue<T extends DependencyItem> {
 		object.parent = parentForm
 		this.array.push(object);
 
-
-
-		parentForm.oninput(object.name, (event: any) => {
-			object.notify('value', event)
-		})
 	}
 	remove(object: T) {
 		console.log('Псевдо удаление ')
 	}
 
+	forEach(callback: (elem: T) => void) {
+		this.array.forEach(callback);
+	}
 }
 
 export interface DependencyItem {
 	parent?: Form | undefined,
 	name?: string,
-	notify: any
+	notify: any,
+	dispatchEvent?: any
 }
\ No newline at end of file
diff --git a/src/classes/Form.ts b/src/classes/Form.ts
index 61eb7f5..7d5f10e 100644
--- a/src/classes/Form.ts
+++ b/src/classes/Form.ts
@@ -8,8 +8,9 @@ import iteratePoints from "../utils/iterate-points";
 import debug from "../debug/debug";
 import getCastObject from "../utils/get-cast-object";
 import copyObject from "../utils/copy-object";
-import {compareDifference} from "../utils/compare-changes";
+import {compareDifference, compareMergeChanges} from "../utils/compare-changes";
 import DependencyQueue from "./DependencyQueue";
+import CompareEvent from "./CompareEvent";
 /**
  * Main principe : GMN
  * G - Grand
@@ -48,17 +49,15 @@ export default class Form extends EventEmitter implements FormDependence {
 	};
 	private set values(values: any) {
 
-		const oldValues = copyObject(this.values);
+		// const oldValues = copyObject(this.values);
 
 		console.group('%csetting values', 'color: purple');
-		console.log(this.values, values)
-		console.log(compareDifference(values, oldValues))
 
+		const grandValues = grandObject(values);
+		const event = new CompareEvent(grandValues, this.values);
+		this.dispatchEvent(event);
 
-		this.notify('value', )
-		this.setValues(values || {});
-
-		this.#values = values;
+		this.#values = grandValues;
 
 		console.groupEnd()
 	}
@@ -86,16 +85,13 @@ export default class Form extends EventEmitter implements FormDependence {
 		if (currentInstance) provideVue(Form.PROVIDE_NAME, this); // Default providing current form for children.
 	}
 
-	private mergeValues(data: any) {
-		mergeObjects(this.values, data);
-	}
 	private notify(event: FormEvent['type'], model: any ) {
 
 		switch (event) {
 			case "value": {
 				console.log('New changes', model); //Changes
 				console.log(`%c[${Form.restoreFullName(this)}]%c Generation new global event %c${event}%c`,'color: blue', 'color: black', 'color: red', 'color: black', model);
-				this.emit(Form.EVENT_VALUE, FormEvent.newValue(model)); // Generate global event
+				// this.emit(Form.EVENT_VALUE, FormEvent.newValue(model)); // Generate global event
 
 				// Generate event-value for each point
 				iteratePoints(model).forEach(point => {
@@ -112,19 +108,32 @@ export default class Form extends EventEmitter implements FormDependence {
 		}
 	}
 
-	setValues(data: any):void {
+	setValues(changes: any):void {
 		if (this.parent) {
+			console.log(`[%c${this.name}%c] emit changes to parent [%c${this.parent.name}%c]`, 'color: red', 'color: black', 'color: red', 'color: black');
 			return void this.parent.setValues({
-				[this.name as string]: data
+				[this.name as string]: changes
 			});
 		}
 
-		const grandData = grandObject(data);
-		this.mergeValues(grandData);
-		this.notify('value', grandData);
-	}
+		console.group('[SET VALUES]');
+
+		changes = grandObject(changes);
+		console.log('%cGrand Object:', 'color: blue', changes);
+		console.log('%cValues Object(copied):', 'color: blue', copyObject(this.values));
+		console.log('%cCompare Merge Changes', 'color: blue', compareMergeChanges(this.values, changes))
+
+		const event = new CompareEvent(compareMergeChanges(this.values, changes));
+		mergeObjects(this.values, changes);
 
+		console.log('%cEvent:', 'color: blue', event);
+		console.log('%cNew Values', 'color: blue', this.values)
 
+		console.groupEnd();
+
+		this.dispatchEvent(event);
+
+	}
 
 	getValueByName(name: string) {
 		return getPropFromObject(this.values, name);
@@ -144,17 +153,28 @@ export default class Form extends EventEmitter implements FormDependence {
 	oninput(name: string, callback: (newValue: any) => void) {
 		return this.on(Form.getEventValueByName(name), callback)
 	}
-	cleanValues(values?: any) {
-		debug.msg('Cleaning values')
+	dispatchEvent<T extends FormEvent>(event: T) {
+
+
+		if (event instanceof CompareEvent) {
+			console.log(`[%c${this.name}%c]: %c${event?.comparison.length ? '' : 'NOT EFFECT'}%c`, 'color: red', 'color: black', 'color: purple', 'color: black', 'Dispatch event', event)
+
+			// Проходим по всем дочерним элементам и уведомляем их
+			this.dependencies.forEach(dep => {
+				if (dep.name) {
+					dep?.dispatchEvent(CompareEvent.restoreByName(event, dep.name));
+				}
+			})
+
+			event.comparison.forEach(item => {
+				console.log(`[%c${this.name}%c] Emit new value event to %c${item.name}`, 'color: red', 'color: black', 'color: red');
+				this.emit(Form.getEventValueByName(item.name), item.newValue);
+			})
+
+		}
+
 
-		/**
-		 * WARNING WARNING WARNING WARNING WARNING
-		 * в данном случаем мы сперва устанавливаем пустое значение, а потому уже нужное.
-		 * Эффективнее сразу устанавливать нужно значение
-		 * WARNING WARNING WARNING WARNING WARNING
-		 * */
 
-		this.values = values || {};
 
 	}
 	/**
@@ -170,6 +190,19 @@ export default class Form extends EventEmitter implements FormDependence {
 
 		return getCastObject(this.values, grandObject(cast));
 	}
+	cleanValues(values?: any) {
+		debug.msg('Cleaning values')
+
+		/**
+		 * WARNING WARNING WARNING WARNING WARNING
+		 * в данном случаем мы сперва устанавливаем пустое значение, а потому уже нужное.
+		 * Эффективнее сразу устанавливать нужно значение
+		 * WARNING WARNING WARNING WARNING WARNING
+		 * */
+
+		this.values = values || {};
+
+	}
 }
 
 interface FormParams {