commit b0cb3e60d683fd9ce928439568aec22e569524ac
Author: djerom <robot@pitc.com>
Date:   Tue Mar 15 16:18:17 2022 +0500

    init

diff --git a/file.js b/file.js
new file mode 100644
index 0000000..5c40b7c
--- /dev/null
+++ b/file.js
@@ -0,0 +1,14 @@
+export default {
+	download(filename, text) {
+		var element = document.createElement("a");
+		element.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(text));
+		element.setAttribute("download", filename);
+
+		element.style.display = "none";
+		document.body.appendChild(element);
+
+		element.click();
+
+		document.body.removeChild(element);
+	},
+};
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..b302b35
--- /dev/null
+++ b/index.html
@@ -0,0 +1,503 @@
+<script src="https://unpkg.com/axios@0.2.1/dist/axios.min.js"></script>
+<!-- <script src="index.js" type="module"></script> -->
+
+<style>
+    .panel div {
+        float: left;
+    }
+</style>
+
+<div class="panel">
+    <div>
+        <button onclick="save()">Download</button>
+    </div>
+
+    <div style="width: 100px;">&nbsp;</div>
+
+    <div>
+        <button onclick="build_map_wopt()">WOPT map</button>
+    </div>
+    <div>
+        <button onclick="build_map_wwpt()">WWPT map</button>
+    </div>
+    <div>
+        <button onclick="build_map_wgpt()">WGPT map</button>
+    </div>
+    <div>
+        <button onclick="build_map_wwit()">WWIT map</button>
+    </div>
+    <div style="width: 100px;">&nbsp;</div>
+
+    <div>
+        <button onclick="build_map_wopt()">WOPR map</button>
+    </div>
+    <div>
+        <button onclick="build_map_wwpt()">WWPR map</button>
+    </div>
+    <div>
+        <button onclick="build_map_wgpr()">WGPR map</button>
+    </div>
+    <div>
+        <button onclick="build_map_wwit()">WWIR map</button>
+    </div>
+    <div style="width: 100px;">&nbsp;</div>    
+</div>
+
+<div>
+    <button onclick="scale()">Scale</button>
+</div>
+
+
+<div id="map" style="border: 1px #000 solid;"></div>
+
+
+<div>
+    <div>menu</div>
+    <div>map</div>
+</div>
+
+
+
+<script>
+    function download(filename, text) {
+        var element = document.createElement('a');
+        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+        element.setAttribute('download', filename);
+        element.setAttribute('target', '_blank');
+
+        element.style.display = 'none';
+        document.body.appendChild(element);
+
+        element.click();
+
+        document.body.removeChild(element);
+    }
+
+    let wells = [
+        { id: 1, name: 'well1', whx: 100, why: 100 },
+        { id: 2, name: 'well2', whx: 200, why: 300 },
+        { id: 3, name: 'well3', whx: 300, why: 500 },
+        { id: 4, name: 'well4', whx: 100, why: 500 }
+    ]
+
+    let map = {
+        layers: [
+
+        ]
+    }
+
+    function render_map(map) {
+        // let header = `<svg viewBox="-200 -200 2000 2000" version="1.1" xmlns="http://www.w3.org/2000/svg">`
+        let header = `<svg  viewBox="-200 -200 2000 2000" version="1.1" xmlns="http://www.w3.org/2000/svg" id="svg">`
+        // let header = `<svg viewBox="-200 -200 2000 2000" version="1.1" xmlns="http://www.w3.org/2000/svg" id="svg" preserveAspectRatio="xMinYMax meet">`
+        let footer = `</svg>`
+        let body = map.layers.join('')
+
+        return header + body + footer
+    }
+    // let layer = '<g>' + wells.map(x => `<circle cx="${x.whx}" cy="${x.whx}" r="50" />`).join('') + '</g>'
+
+    class SvgNode {
+        constructor(tag, attrs) {
+            this.tag = tag
+            this.attrs = attrs || {}
+        }
+
+        set_attr(attr, value) {
+            if (typeof attr === 'string')
+                this.attrs[attr] = value
+            else
+                this.attrs = { ...this.attrs, ...attr }
+            return this
+        }
+
+        set_style(style) {
+            this.style = { ...this.style || {}, ...style }
+            return this
+        }
+
+        clear_style(style) {
+            this.style = null
+            return this
+        }
+
+        move(x, y) {
+            this.transform = { x, y }
+            return this
+        }
+
+        get(attr) {
+
+        }
+
+        _render_node(node) {
+            // console.log(typeof node)
+            // if (typeof node == 'undefined') return ''
+            if (typeof node == 'string') return node
+            else if (typeof node == 'SvgNode') return node.render()
+            else return ''
+        }
+
+        render() {
+            let attrs = Object.keys(this.attrs).map(x => `${x}="${this.attrs[x]}"`).join(' ')
+            // console.log(this.style ? Object.keys(this.style).map(x => `${x}:${this.style[x]}`) : '')
+            let style = this.style ? 'style="' + Object.keys(this.style).map(x => `${x}:${this.style[x]}`).join('; ') + '"' : ''
+            let transfrom = this.transform ? `transform="translate(${this.transform.x},${this.transform.y})"` : ''
+            let children = this.items ? this.items.map(x => this._render_node(x)).join('') : ''
+            return `<${this.tag} ${attrs} ${style} ${transfrom}>${children}</${this.tag}>`
+        }
+    }
+
+    svg_node = {}
+
+
+    svg_path = {
+        move(x, y) {
+
+        },
+
+        line(x, y) {
+
+        },
+
+        arc(x, y, r, a) {
+
+        },
+
+        attrs: {
+            'stroke-width': 3
+        },
+
+        layers: [],
+
+        render() {
+            return `<path d="M0 0 L${c0} ${s0} A ${r} ${r} 0 ${aa} 0 ${c1} ${s1} z" stroke-width="3" stroke="#f00" fill="#0f0"/>`
+        }
+    }
+
+    function arc(r, ang) {
+        var sa = -Math.sin(ang * Math.PI / 180) * r;
+        var ca = Math.cos(ang * Math.PI / 180) * r;
+        var aa = (ang > 180) ? 1 : 0;
+        // var p = new TimalSvg.Data.SvgPath(string.Format("M0 0 L{0} 0 A {0} {0} 0 {3} 0 {1} {2} z", FN(r), ca, sa, aa));
+        // p.Transform = string.Format("rotate({0})", FN(ang / 2));
+
+        return `<path d="M${r} 0 A ${r} ${r} 0 ${aa} 0 ${ca} ${sa}" stroke-width="30" stroke="#f00" fill="none"/>`
+    }
+
+    function sector(r, a0, a1) {
+        const k = Math.PI / 180
+        let s0 = -Math.sin(a0 * k) * r;
+        let c0 = Math.cos(a0 * k) * r;
+        let s1 = -Math.sin(a1 * k) * r;
+        let c1 = Math.cos(a1 * k) * r;
+
+        var aa = (a1 - a0 > 180) ? 1 : 0
+        // var p = new TimalSvg.Data.SvgPath(string.Format("M0 0 L{0} 0 A {0} {0} 0 {3} 0 {1} {2} z", FN(r), ca, sa, aa));
+        // p.Transform = string.Format("rotate({0})", FN(ang / 2));
+
+        return `<path d="M0 0 L${c0} ${s0} A ${r} ${r} 0 ${aa} 0 ${c1} ${s1} z" stroke-width="3" stroke="#f00" fill="#0f0"/>`
+    }
+
+    function svg_sector(r, a0, a1) {
+        const k = Math.PI / 180
+        let s0 = -Math.sin(a0 * k) * r;
+        let c0 = Math.cos(a0 * k) * r;
+        let s1 = -Math.sin(a1 * k) * r;
+        let c1 = Math.cos(a1 * k) * r;
+
+        var aa = (a1 - a0 > 180) ? 1 : 0
+        // var p = new TimalSvg.Data.SvgPath(string.Format("M0 0 L{0} 0 A {0} {0} 0 {3} 0 {1} {2} z", FN(r), ca, sa, aa));
+        // p.Transform = string.Format("rotate({0})", FN(ang / 2));
+
+        return new SvgNode('path', { d: `M0 0 L${c0} ${s0} A ${r} ${r} 0 ${aa} 0 ${c1} ${s1} z` })
+    }
+
+    let style = {
+        'stroke-width': 3,
+        'stroke': '#f00',
+        'fill': '#0f0'
+    }
+
+    function circle(r) {
+        return new SvgNode('circle').set_attr('r', r)
+    }
+
+    function svg_ring_sector(r0, r1, a0, a1) {
+        const k = Math.PI / 180
+        let s0 = -Math.sin(a0 * k);
+        let c0 = Math.cos(a0 * k);
+        let s1 = -Math.sin(a1 * k);
+        let c1 = Math.cos(a1 * k);
+
+        var aa = (a1 - a0 > 180) ? 1 : 0
+
+        return new SvgNode('path', {
+            'd': `M${c0 * r0} ${s0 * r0} 
+            A ${r0} ${r0} 0 ${aa} 0 ${c1 * r0} ${s1 * r0} 
+            L${c1 * r1} ${s1 * r1}
+            A ${r1} ${r1} 0 ${aa} 1 ${c0 * r1} ${s0 * r1} z`
+        })
+    }
+
+
+
+    let style2 = {
+        'stroke-width': 3,
+        'stroke': '#00f',
+        'fill': '#0ff'
+    }
+
+    let style3 = {
+        'stroke-width': 1,
+        'stroke': '#000',
+        'fill': '#fff'
+    }
+
+
+    let style_fault = {
+        'stroke-width': 3,
+        'stroke-dasharray': "10 10",
+        'stroke': '#000',
+        'fill': 'none'
+    }
+
+    let style_vnk = {
+        'stroke-width': 2,
+        'stroke-dasharray': "2 2",
+        'stroke': '#00f',
+        'fill': 'none'
+    }
+
+
+    let style_wellhead = {
+        'stroke-width': 2,
+        'stroke': '#f00',
+        'fill': '#eee',
+        'font-family': 'Courier new',
+        'font-weight': 'bold',
+        'font-size': '26px'
+    }
+
+    let style_wellhead_text = {
+        'stroke-width': 1,
+        'stroke': '#fff',
+        'fill': '#000',
+        'font-family': 'Courier new',
+        'font-weight': 'bold',
+        'font-size': '26px'
+    }
+
+
+    let style_wir = {
+        'stroke-width': 3,
+        'stroke': '#00f',
+        'fill': '#0af'
+    }
+
+    let style_opr = {
+        'stroke-width': 1,
+        'stroke': '#00f',
+        'fill': '#293324'
+    }
+
+    let style_gpr = {
+        'stroke-width': 1,
+        'stroke': '#00f',
+        'fill': '#ff0'
+    }
+
+    let fault = {
+        name: 'Fault 1', lines: [
+            [
+                { x: 10, y: 20 },
+                { x: 300, y: 50 },
+                { x: 170, y: 10 },
+                { x: 120, y: -150 }
+            ]
+        ]
+    }
+
+    function render_fault(fault) {
+        let path0 = fault.lines[0]
+        path0 = path0.slice(0, 1).map(x => `M${x.x} ${x.y}`).join(' ') + ' ' + path0.slice(1).map(x => `L${x.x} ${x.y}`).join(' ')
+
+        return new SvgNode('path').set_attr('d', path0)
+    }
+
+    let vnk1 = [
+        { x: -10, y: -20 },
+        { x: 300, y: 0 },
+        { x: 470, y: 300 },
+        { x: -120, y: 290 }
+    ]
+
+    function render_contour(curve) {
+        let path0 = curve.slice(0, 1).map(x => `M${x.x} ${x.y}`).join(' ') + ' ' + curve.slice(1).map(x => `L${x.x} ${x.y}`).join(' ') + ' z'
+
+        return new SvgNode('path').set_attr('d', path0)
+    }
+
+    function render_well(well) {
+
+    }
+
+    function svg_text(text) {
+        let node = new SvgNode('text')
+        node.items = [text]
+        node.set_attr('x', 0).set_attr('y', 0)
+        // node.set_attr('style', style)
+        // node.set_attr('stroke', "#fff")
+        // node.set_attr('stroke-width', "1")
+        return node
+    }
+
+    const text_style = 'font-family: Courier new; font-weight:bold; font-size:26px; fill:#000; stroke:#0f0; stroke-width:1'
+
+    map = {
+        layers: [
+            '<circle cx="0" cy="0" r="5" stroke-width="1" stroke="#f00" fill="#f00" />',
+            // '<g>' + wells.map(x => `<circle cx="${x.whx}" cy="${x.why}" r="5" strokeWidth="1" stroke="#f00" fill="none" />`).join('') + '</g>',
+            // '<path d="M0 0 L{0} 0 A {0} {0} 0 {3} 0 {1} {2} z"/>',
+            // '<circle cx="200" cy="200" r="50" stroke-width="25" stroke-dasharray="180" stroke-dashoffset="180" stroke="#f00" fill="none" />'
+            // sector(100, 0, 290),
+            // sector(50, 90, 360),
+            // svg_ring_sector(50, 100, 0, 290).set_attr(style).render(),
+            // svg_ring_sector(50, 100, 290, 360).set_attr(style2).render(),
+            // circle(15).set_attr(style3).render(),
+            // '<text x="10" y="-10" style="font-family: Courier new; font-weight:bold; font-size:26px; fill:#000" stroke="#fff" stroke-width="1">G-504</text>',
+            // render_fault(fault).set_attr(style_fault).render(),
+            // render_contour(vnk1).set_attr(style_vnk).render(),
+            // svg_text('Hallo world', text_style).render()
+        ]
+    }
+
+    let cur_map = ''
+
+
+    function save() {
+        download('file.svg', cur_map)
+    }
+
+    // document.getElementById('map').innerHTML = render_map(map)
+
+    const query = 'SELECT * FROM wells WHERE whx < 2000 AND why < 2000'
+    axios.post('http://localhost:4000/proxy/sqlite', { query }).then(x => x.data)
+        .then(wells => {
+
+            let layer_wells = wells.map(w => circle(15).set_style(style_wellhead).move(w.whx, w.why).render())
+            let layer_wells_wpr = wells.map(w => svg_sector(70, 0, 70).set_style(style_wir).move(w.whx, w.why).render())
+
+            let layer_wells_gpr = wells.map(w => svg_sector(70, 70, 130).set_style(style_gpr).move(w.whx, w.why).render())
+            let layer_wells_opr = wells.map(w => svg_sector(70, 130, 360).set_style(style_opr).move(w.whx, w.why).render())
+
+            let layer_well_names = wells.map(w => svg_text(w.well).set_style(style_wellhead_text).move(w.whx + 10, w.why - 10).render())
+            // let layers = [...layer_wells, ...layer_wells_wpr, ...layer_well_names]
+            // let layers = layer_wells_wpr
+            let layers = [...layer_wells_wpr, ...layer_wells_gpr, ...layer_wells_opr, ...layer_wells, ...layer_well_names,
+            render_fault(fault).set_attr(style_fault).render(),
+            render_contour(vnk1).set_attr(style_vnk).render()
+            ]
+
+            cur_map = render_map({ layers })
+            document.getElementById('map').innerHTML = cur_map
+
+            new SvgMap(document.getElementById('svg'))
+        })
+
+
+    class SvgMap {
+        constructor(el) {
+            this.el = el
+            this.scale = 1
+            this.pos = { x: 0, y: 0 }
+            console.log(el)
+            this.el.onwheel = this.handle_wheel.bind(this)
+            this.el.onmousedown = this.handle_mousedown.bind(this)
+            this.el.onmousemove = this.handle_mousemove.bind(this)
+            this.el.onmouseup = this.handle_mouseup.bind(this)
+
+            this.is_down = false
+
+            this.set_scale(1)
+        }
+
+        handle_mousedown(event) {
+            this.is_down = true
+            this.downin = { x: event.clientX, y: event.clientY }
+            console.log(event)
+            // clientX: 451, clientY: 297
+            // layerX: 451, layerY: 297
+        }
+
+        handle_mousemove(event) {
+            if (this.is_down) {
+                event.preventDefault()
+                let dx = event.clientX - this.downin.x
+                let dy = event.clientY - this.downin.y
+
+                this.pos.x -= dx * this.scale
+                this.pos.y -= dy * this.scale
+                this.set_scale(this.scale)
+                this.downin = { x: event.clientX, y: event.clientY }
+                // this.downin = {x: event.clientX, y: event.clientY}
+            }
+            // console.log(event.target.tagName)
+        }
+
+        handle_mouseup(event) {
+            this.is_down = false
+        }
+
+
+        handle_wheel(event) {
+            event.preventDefault()
+
+            if (event.ctrlKey) {
+                if (event.deltaY > 0) {
+                    this.scale_up()
+                }
+                else
+                    this.scale_down()
+            }
+
+            else if (event.shiftKey) {
+                console.log('shifted')
+            }
+
+            else {
+
+            }
+
+            console.log(event)
+        }
+
+        set_scale(scale) {
+            this.scale = scale
+            this.el.setAttribute("viewBox", `${this.pos.x} ${this.pos.y} ${2000 * this.scale} ${2000 * this.scale}`)
+        }
+
+        scale_up() {
+            this.set_scale(this.scale * 1.1)
+        }
+
+        scale_down() {
+            this.set_scale(this.scale * 0.9)
+        }
+    }
+
+
+    function handle_wheel(event) {
+        event.preventDefault()
+        console.log(event.deltaY)
+        console.log(event)
+
+        document.getElementById('svg').setAttribute("viewBox", "0 0 3000 3000")
+    }
+
+
+    function scale() {
+        document.getElementById('svg').setAttribute("viewBox", "0 0 3000 3000")
+    }
+
+</script>
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..29b52a8
--- /dev/null
+++ b/index.js
@@ -0,0 +1,3 @@
+const file = import("./file.js")
+
+console.log(file)
\ No newline at end of file