sync

.gitignore

@@ -1,4 +1,5 @@
 /node_modules/
 /public/build/
+/tmp
 
 .DS_Store

package-lock.json

@@ -10,8 +10,11 @@
       "dependencies": {
         "@rollup/plugin-json": "^4.1.0",
         "axios": "^0.26.1",
+        "fast-xml-parser": "^4.0.7",
         "sirv-cli": "^2.0.0",
-        "svelte-toasts": "^1.1.2"
+        "svelte-toasts": "^1.1.2",
+        "svg-parser": "^2.0.4",
+        "xml-js": "^1.6.11"
       },
       "devDependencies": {
         "@rollup/plugin-commonjs": "^17.0.0",
@@ -363,6 +366,21 @@
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "dev": true
     },
+    "node_modules/fast-xml-parser": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.0.7.tgz",
+      "integrity": "sha512-dMtibyus3kC7nbxj1CpVtysLzO13UOAZEFAb5vpQg3T4O6qvetmSePpXKFx5KPNCHKoGwjtgjfF5DOyn7s1ylQ==",
+      "dependencies": {
+        "strnum": "^1.0.5"
+      },
+      "bin": {
+        "fxparser": "src/cli/cli.js"
+      },
+      "funding": {
+        "type": "paypal",
+        "url": "https://paypal.me/naturalintelligence"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -915,6 +933,11 @@
         }
       ]
     },
+    "node_modules/sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
+    },
     "node_modules/semiver": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/semiver/-/semiver-1.1.0.tgz",
@@ -1000,6 +1023,11 @@
       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
       "dev": true
     },
+    "node_modules/strnum": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/strnum/-/strnum-1.0.5.tgz",
+      "integrity": "sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA=="
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -1038,6 +1066,11 @@
       "resolved": "https://registry.npmjs.org/svelte-toasts/-/svelte-toasts-1.1.2.tgz",
       "integrity": "sha512-m+yL4eEKXyJoyjTYaH1j1GFwF0Pi8YDqnVfwWPDmwi4712iZesv+TNCmToSNlav3R5Vkmc8ZBRkT8DOcu3sywQ=="
     },
+    "node_modules/svg-parser": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
+      "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
+    },
     "node_modules/terser": {
       "version": "5.12.1",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.12.1.tgz",
@@ -1110,6 +1143,17 @@
           "optional": true
         }
       }
+    },
+    "node_modules/xml-js": {
+      "version": "1.6.11",
+      "resolved": "https://registry.npmjs.org/xml-js/-/xml-js-1.6.11.tgz",
+      "integrity": "sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==",
+      "dependencies": {
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "xml-js": "bin/cli.js"
+      }
     }
   },
   "dependencies": {
@@ -1377,6 +1421,14 @@
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "dev": true
     },
+    "fast-xml-parser": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.0.7.tgz",
+      "integrity": "sha512-dMtibyus3kC7nbxj1CpVtysLzO13UOAZEFAb5vpQg3T4O6qvetmSePpXKFx5KPNCHKoGwjtgjfF5DOyn7s1ylQ==",
+      "requires": {
+        "strnum": "^1.0.5"
+      }
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -1782,6 +1834,11 @@
       "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
       "dev": true
     },
+    "sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
+    },
     "semiver": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/semiver/-/semiver-1.1.0.tgz",
@@ -1851,6 +1908,11 @@
       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
       "dev": true
     },
+    "strnum": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/strnum/-/strnum-1.0.5.tgz",
+      "integrity": "sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA=="
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -1877,6 +1939,11 @@
       "resolved": "https://registry.npmjs.org/svelte-toasts/-/svelte-toasts-1.1.2.tgz",
       "integrity": "sha512-m+yL4eEKXyJoyjTYaH1j1GFwF0Pi8YDqnVfwWPDmwi4712iZesv+TNCmToSNlav3R5Vkmc8ZBRkT8DOcu3sywQ=="
     },
+    "svg-parser": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
+      "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
+    },
     "terser": {
       "version": "5.12.1",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.12.1.tgz",
@@ -1920,6 +1987,14 @@
       "integrity": "sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==",
       "dev": true,
       "requires": {}
+    },
+    "xml-js": {
+      "version": "1.6.11",
+      "resolved": "https://registry.npmjs.org/xml-js/-/xml-js-1.6.11.tgz",
+      "integrity": "sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==",
+      "requires": {
+        "sax": "^1.2.4"
+      }
     }
   }
 }

package.json

@@ -2,6 +2,7 @@
   "name": "svelte-app",
   "version": "1.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",
@@ -20,7 +21,10 @@
   "dependencies": {
     "@rollup/plugin-json": "^4.1.0",
     "axios": "^0.26.1",
+    "fast-xml-parser": "^4.0.7",
     "sirv-cli": "^2.0.0",
-    "svelte-toasts": "^1.1.2"
+    "svelte-toasts": "^1.1.2",
+    "svg-parser": "^2.0.4",
+    "xml-js": "^1.6.11"
   }
 }

src/App.svelte

@@ -10,6 +10,7 @@
 
 	import Modal from "./components/Modal.svelte";
 	import MapApp from './services/map'
+	import SvgMapParser from './svgmap/SvgMapParser'
 
 	import get_bbox from './libs/bbox'
 
@@ -91,6 +92,114 @@
 		});		
 	}
 
+	async function load_back() {
+		const form = `Выберите файл подложки <br>
+			<input type="file" name="file" accept=".svg"/>`; //  multiple
+
+		let res = await ui.modal.show(form, ["ok", "cancel"]);
+		if (res.code != 'ok') return;
+
+		// console.log(res);
+		// console.log(res.form['some'].value)
+		let file = await file_lib.read(res.form["file"]);
+
+		let parser = new SvgMapParser()
+		parser.parse(file)
+
+		console.log(parser.get_map_scale())
+
+
+		let layers = parser.get_layers()
+		let options = layers.map(x => `<option value="${x.properties.id}">${x.properties.id}</option>`)
+		let select_layer_form = `Выберите слой с привязкой <select name="layer">${options}</select>`
+		let res2 = await ui.modal.show(select_layer_form, ["ok", "cancel"]);
+		if (res2.code != 'ok') return;
+
+		// console.log(res2)
+
+		let layer2 = layers.filter(x => x.properties.id == res2.form['layer'].value)[0]
+		console.log('layer2', layer2)
+
+		let anchor = parser.extract_anchor(layer2)
+		console.log('anchor', anchor)
+
+
+		const query = `SELECT well, whx, why FROM wells WHERE well='${anchor.w1.name}' OR well='${anchor.w2.name}'`;
+		let wells = await axios.post(`${back_url}/proxy/sqlite`, { query }).then((x) => x.data.data);
+
+		let ww1 = wells.filter(x => x.well == anchor.w1.name)[0]
+		let ww2 = wells.filter(x => x.well == anchor.w2.name)[0]
+		
+		console.log(ww1, ww2)
+
+		if (!ww1) return ui.modal.show(`Скважины ${anchor.w1.name} не найдено в базе.`, ["ok"]);
+		if (!ww2) return ui.modal.show(`Скважины ${anchor.w2.name} не найдено в базе.`, ["ok"]);
+
+		anchor.w1.whx = ww1.whx
+		anchor.w1.why = ww1.why
+		anchor.w2.whx = ww2.whx
+		anchor.w2.why = ww2.why
+
+
+		let shift_args = {dx: 0, dy: 0, scale: 1}
+
+
+		console.log(anchor)
+
+
+		return
+
+		var oParser = new DOMParser();
+		var oDOM = oParser.parseFromString(file, "application/xml");
+		// temp0.childNodes[2].viewBox.baseVal // rect {x,y,width,height}
+		// temp0.childNodes[2].width.baseVal.value
+		// temp0.childNodes[2].height.baseVal.value
+
+		// Find pivots
+		let svg = oDOM.getElementsByTagName('svg')[0]
+		let layer = svg.children[svg.children.length - 1]
+
+		function extract_well(pivot_group){
+			let ellipse = pivot_group.getElementsByTagName('ellipse')[0]
+			let x = ellipse.cx.baseVal.value
+			let y = ellipse.cy.baseVal.value
+
+			let text = pivot_group.getElementsByTagName('text')[0]
+			let name = text.childNodes[0].nodeValue
+			return {x, y, name}
+		}
+
+		// let w1 = extract_well(layer.children[layer.children.length - 1])
+		// let w2 = extract_well(layer.children[layer.children.length - 2])
+		// console.log(w1, w2)
+
+		// // Map dist
+		// let map_dx = w2.x - w1.x
+		// let map_dy = w2.x - w1.x
+		// let map_d = Math.sqrt(map_dx * map_dx + map_dy * map_dy)
+		// console.log('map_d', map_d)
+
+		// Определим масштаб карты
+
+		// temp0.viewBox.baseVal.x
+
+
+		// console.log(oDOM)
+
+		// console.log(file);
+
+		// let ans = await axios.post(`${back_url}/import/excel`, { name: "wells", file });
+		// console.log(ans);
+
+		// toasts.add({
+		// 	description: "File loaded",
+		// 	type: 'success',
+		// });
+
+		// ui.modal.show(`Hallo ${res.form['some'].value}`, ['ok'])
+	}
+
+
 	let ui = {
 		modal: {},
 	};
@@ -100,21 +209,6 @@
 
 	// file_lib.download()
 
-	/**
-	 * 
-	 * @param r0
-	 * @param r1
-	 * @param a0
-	 * @param a1
-	 * @param { [{v, style}] } rings
-	 */
-	function sectored_ring(r0, r1, rings){		
-		let sum = rings.reduce((s,c) => s + c.v, 0)
-		let angs = rings.reduce((s, c, i) => [...s, {...c, a0: i && s[i - 1].a1, a1: c.v + (i && s[i - 1].a1)}], [])
-		let items = angs.map(x => SvgNodes.ring_sector(r0, r1, x.a0 * 360 / sum, x.a1 * 360 / sum).set_style(x.style))
-
-		return SvgNodes.group(items)
-	}
 
 	
 
@@ -210,6 +304,7 @@
 	<button on:click={() => build_map()}>Build map</button>
 	<button on:click={() => save()}>Download</button>
 	<button on:click={() => func()}>Func</button>
+	<button on:click={() => load_back()}>Load_back</button>
 
 	<div bind:this={map_host} style="border: 1px solid #f00;" />
 </main>

src/back_.js

@@ -0,0 +1,138 @@
+import fs, { symlinkSync } from "fs";
+import axios from "axios";
+
+import SvgMapParser from "./svgmap/SvgMapParser.js";
+import SvgNodes from "./svgmap/SvgNodes.js";
+
+const back_url = "http://localhost:4000";
+
+const path = "../../data/2022-03-16";
+
+// let file = fs.readFileSync('../data/2022-03-16/49_Кар тек и сум отб 7 об_вост.svg')
+// let file = fs.readFileSync('../data/2022-03-16/49_Кар тек и сум отб 7 об_вост-sm.svg')
+// let file = fs.readFileSync('../data/2022-03-16/49_Кар тек и сум отб 7 об_вост-inch.svg')
+// let file = fs.readFileSync(`${path}/49_Кар тек и сум отб 7 об_вост-mm.svg`)
+let file = fs.readFileSync(`D:/dev/git/kz/prodmaps/src/49_Кар тек и сум отб 7 об_вост.svg`);
+
+// let file = fs.readFileSync('../data/2022-03-16/49_Кар тек и сум отб 7 об_вост-px.svg')
+
+let styles = JSON.parse(fs.readFileSync("./moc/styles.json").toString());
+
+let parser = new SvgMapParser();
+
+function build_scaler() {
+	// Получить функцию для перевода координат из геологических в локальные.
+	// Получить функцию для перевода расстояний кругов (из тонн в см2)
+}
+
+async function start() {
+	await parser.parse(file.toString());
+
+	let sc = parser.get_map_scale();
+	console.log("scale is", sc);
+
+	let layers = parser.get_layers();
+	console.log(layers.map((x) => x.properties.id));
+
+	let name = "скв";
+	let layer = layers.filter((x) => x.properties.id == name)[0];
+	// console.log(layer)
+
+	// Получить координаты якоря
+	let anchor = parser.extract_anchor(layer);
+	console.log("anchor", anchor);
+
+	const query = `SELECT well, whx, why FROM wells WHERE well='${anchor.w1.name}' OR well='${anchor.w2.name}'`;
+	let wells = await axios.post(`${back_url}/proxy/sqlite`, { query }).then((x) => x.data.data);
+	console.log(wells);
+
+	let ww1 = wells.filter((x) => x.well == anchor.w1.name)[0];
+	let ww2 = wells.filter((x) => x.well == anchor.w2.name)[0];
+
+	console.log(ww1, ww2);
+
+	if (!ww1) return ui.modal.show(`Скважины ${anchor.w1.name} не найдено в базе.`, ["ok"]);
+	if (!ww2) return ui.modal.show(`Скважины ${anchor.w2.name} не найдено в базе.`, ["ok"]);
+
+	anchor.w1.whx = ww1.whx;
+	anchor.w1.why = ww1.why;
+	anchor.w2.whx = ww2.whx;
+	anchor.w2.why = ww2.why;
+
+	function dist(x1, y1, x2, y2) {
+		let dx = x2 - x1,
+			dy = y2 - y1;
+		return Math.sqrt(dx * dx + dy * dy);
+	}
+
+	function cs(x0, y0, x1, y1) {
+		return { x0, y0, x1, y1 };
+	}
+
+	function build_tr(cs1, cs2) {
+        let dx1 = cs1.x1 - cs1.x0
+        let dy1 = cs1.y1 - cs1.y0
+        let dx2 = cs2.x1 - cs2.x0
+        let dy2 = cs2.y1 - cs2.y0
+
+		const kx12 = dx2 / dx1
+        const ky12 = dy2 / dy1;
+		const kx21 = dx1 / dx2
+        const ky21 = dy1 / dy2;
+
+		let tr = {
+			tr12: {
+				trx(x) {
+					return (x - cs1.x0) * kx12 + cs2.x0;
+				},
+				try(y) {
+					return (y - cs1.y0) * ky12 + cs2.y0;
+				},
+			},
+			tr21: {
+				trx(x) {
+					return (x - cs2.x0) * kx21 + cs1.x0;
+				},
+				try(y) {
+					return (y - cs2.y0) * ky21 + cs1.y0;
+				},
+			},
+		};
+
+		return tr;
+	}
+
+	// Функция перевода координат из глобальных в локальные.
+	const cs1 = cs(anchor.w1.x, anchor.w1.y, anchor.w2.x, anchor.w2.y);
+	const cs2 = cs(anchor.w1.whx, anchor.w1.why, anchor.w2.whx, anchor.w2.why);
+	let tr = build_tr(cs1, cs2);
+	console.log(tr);
+
+	// console.log(wells)
+
+	const query_all = `SELECT well, whx, why FROM wells`// WHERE well='${anchor.w1.name}'`;
+    // const query_all = `SELECT well, whx, why FROM wells WHERE well='${anchor.w1.name}' OR well='${anchor.w2.name}'`;
+	let all_wells = await axios.post(`${back_url}/proxy/sqlite`, { query: query_all }).then((x) => x.data.data);
+
+	let mapped_wells = all_wells.map((x) => ({ ...x, lx: tr.tr21.trx(x.whx), ly: tr.tr21.try(x.why) }));
+
+	console.log(mapped_wells.slice(0, 2));
+
+	let svg = SvgNodes.svg().set_attrs({
+		width: sc.w + "mm",
+		height: sc.h + "mm",
+		viewBox: `0 0 ${sc.w * sc.k} ${sc.h * sc.k}`,
+	});
+
+    svg = SvgNodes.group()
+
+    svg.append(mapped_wells.map((x) => SvgNodes.ring_sector(1.5 * sc.k, 6 * sc.k, 0, 120).move(x.lx, x.ly).set_style(styles.gpt)));
+	svg.append(		mapped_wells.map((x) =>			SvgNodes.circle(1.5 * sc.k)				.move(x.lx, x.ly)				.set_style(styles.wellhead)		)	);
+	svg.append(mapped_wells.map((x) => SvgNodes.text(x.well).move(x.lx, x.ly).set_style(styles.wellhead)));
+
+    let data = file.toString().replace('</svg>', svg.render() + '</svg>')
+
+	fs.writeFileSync("out.svg", data) //svg.render());
+}
+
+start();

src/libs/file.js

@@ -22,7 +22,6 @@ export default {
 	 * @param {*} input
 	 */
 	async toBase64(input) {
-		console.log(input)
 		return new Promise((resolve) => {
 			if (input.files.length == 0){
 				resolve(null)
@@ -52,5 +51,41 @@ export default {
 				reject(error)
 			};
 		});
-	}	
+	},
+
+	/**
+	 * Read data of file/files selected in input as string
+	 * @param {*} input
+	 */
+	 async read(input) {
+		return new Promise((resolve) => {
+			if (input.files.length == 0){
+				resolve(null)
+			}
+			else if (input.files.length == 1){
+				this.readFile(input.files[0]).then(resolve)
+			}
+			else				
+				Promise.all(Array(...input.files).map(this.readFile)).then(resolve)
+			}
+		);
+	},
+
+	/**
+	 * Read data of file/files selected in input as string
+	 * @param {*} input
+	 */
+	 async readFile(file) {
+		return new Promise((resolve, reject) => {
+			var reader = new FileReader();			
+			reader.readAsText(file);
+
+			reader.onload = function () {
+				resolve(reader.result)
+			};
+			reader.onerror = function (error) {
+				reject(error)
+			};
+		});
+	},	
 };

src/moc/styles.json

@@ -1,22 +1,25 @@
 {
     "wellhead": {
-        "stroke-width": 1,
+        "font-family": "Times New Roman",
-        "stroke": "#000",
+        "font-weight": "bold",
-        "fill": "#fff"
+        "stroke-width": "0.5mm",
+        "font-size":"10pt",
+        "stroke": "#fff",
+        "fill": "#000"
     },
     "gpt": {
-        "stroke-width": 0,
+        "stroke-width": 1,
-        "stroke": "#ff0",
+        "stroke": "#000",
         "fill": "#ff0"
     },
     "opt": {
         "stroke-width": 1,
-        "stroke": "#f00",
+        "stroke": "#000",
-        "fill": "#00f"
+        "fill": "#B86B41"
     },
     "wpt": {
         "stroke-width": 1,
-        "stroke": "#f00",
+        "stroke": "#000",
-        "fill": "#00f"
+        "fill": "#67c2e5"
     }
 }

src/svgmap/SvgMapBuilder.js

@@ -0,0 +1,24 @@
+export default class SvgMapBulder{
+    	let WellsRenderer = {
+		// [{x,y}]
+		heads(wells, r, style) {
+			return wells.map((w) => SvgNodes.circle(r).set_style(style).move(w.x, w.y));
+		},
+
+		// [{x,y,name}]
+		names(wells, style, shift) {
+			return wells.map((w) =>
+				SvgNodes.text(w.name)
+					.set_style(style)
+					.move(w.x + shift.x, w.y + shift.y)
+			);
+		},
+
+		// {x,y,ring[1,2,3,4,5]}
+		ring(x, y, r0, r1, a0, a1, style) {
+			return SvgNodes.ring_sector(r0, r1, a0, a1).move(x, y).set_style(style);
+		},
+	};
+
+
+}

src/svgmap/SvgMapParser.js

@@ -0,0 +1,74 @@
+// import convert from 'xml-js/index.js'
+// import { XMLParser, XMLBuilder, XMLValidator} from 'fast-xml-parser'
+import { parse } from 'svg-parser'
+
+// var convert = require('xml-js');
+
+export default class {
+    async parse(xml){
+        let result1 = parse(xml);
+
+        this.svg = result1.children.filter(x => x.tagName =='svg')[0]
+    }
+
+    get_layers(){
+        return this.svg.children.filter(x => x.tagName == 'g')
+    }
+
+    get_map_scale(){
+        // console.log(this.svg)
+        let vb = this.svg.properties.viewBox.split(' ').map(x => parseFloat(x))
+        let w = this.svg.properties.width
+        let h = this.svg.properties.height
+    
+        let units = {
+            'in': 25.4,
+            'mm': 1,
+            'cm': 10,
+            'px': 0.0846646,
+            // '%': 1
+        }
+    
+        const u = Object.keys(units).filter(x => w.endsWith(x))[0]
+        if (!u) throw "Unsupported units"
+    
+        w = Math.round(parseFloat(w.substring(0, w.length - u.length)) * units[u] * 100) / 100
+        h = Math.round(parseFloat(h.substring(0, h.length - u.length)) * units[u] * 100) / 100
+        let k = vb[2] / w
+    
+        return {w, h, k, u}        
+    }
+
+    extract_anchor(layer){
+        let w1 = this.extract_well(layer.children[layer.children.length - 1])
+        let w2 = this.extract_well(layer.children[layer.children.length - 2])
+
+        return{w1, w2}
+    }
+
+    _flat(node){
+        if (!node.children) return [node];
+        return node.children.reduce((s, c) => s.concat(this._flat(c)), [node])
+    }
+
+    extract_well(pivot_group){
+        let scale = this.get_map_scale()
+
+        let flat = this._flat(pivot_group)
+        ///// console.log('pivot_group', pivot_group.children)
+        // console.log('FLAT---', flat)
+        let ellipse = flat.filter(x => x.tagName =='circle' || x.tagName =='ellipse')[0]
+        // console.log('ellipse', ellipse)
+        let tr = ellipse.properties.transform.replace('matrix(', '').replace(')', '').split(' ').map(x => parseFloat(x))
+        // console.log('tr', tr)
+        // let x = ellipse.properties.transform
+        // let y = ellipse.cy.baseVal.value
+
+        let text = flat.filter(x => x.type =='text')[0]
+        // console.log('text', text)
+        let name = text.value
+        return {x: tr[4], y: tr[5], name}
+    }
+
+    
+}

src/svgmap/SvgNodes.js

@@ -1,4 +1,4 @@
-import SvgNode from "./SvgNode";
+import SvgNode from "./SvgNode.js";
 
 export default {
 	// sector(r, a0, a1) {
@@ -18,7 +18,10 @@ export default {
     svg(){
         return new SvgNode('svg', {
             version: "1.1",
-            xmlns: "http://www.w3.org/2000/svg"
+            xmlns: "http://www.w3.org/2000/svg",
+			"xml:space":"preserve",
+			"xmlns:xlink": "http://www.w3.org/1999/xlink",
+			style: "shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
             // viewBox: "0 0 2000 2000"
         })
     },
@@ -68,4 +71,21 @@ export default {
 		node.set_attrs({x: 0, y: 0})
 		return node;
 	},
+
+	/**
+	 * 
+	 * @param r0
+	 * @param r1
+	 * @param a0
+	 * @param a1
+	 * @param { [{v, style}] } rings
+	 */
+	 sectored_ring(r0, r1, rings){		
+		let sum = rings.reduce((s,c) => s + c.v, 0)
+		let angs = rings.reduce((s, c, i) => [...s, {...c, a0: i && s[i - 1].a1, a1: c.v + (i && s[i - 1].a1)}], [])
+		let items = angs.map(x => SvgNodes.ring_sector(r0, r1, x.a0 * 360 / sum, x.a1 * 360 / sum).set_style(x.style))
+
+		return SvgNodes.group(items)
+	}
+
 };

src/svgmap/drawers/SvgWell.js

@@ -0,0 +1,23 @@
+export default {
+    // [{x,y}]
+    heads(wells, r, style) {
+        return wells.map((w) => SvgNodes.circle(r).set_style(style).move(w.x, w.y));
+    },
+
+    // [{x,y,name}]
+    names(wells, style, shift) {
+        return wells.map((w) =>
+            SvgNodes.text(w.name)
+                .set_style(style)
+                .move(w.x + shift.x, w.y + shift.y)
+        );
+    },
+
+    // {x,y,ring[1,2,3,4,5]}
+    ring(x, y, r0, r1, a0, a1, style) {
+        return SvgNodes.ring_sector(r0, r1, a0, a1).move(x, y).set_style(style);
+    },
+};
+
+
+}