mixmap-georender - npm Package Compare versions

Comparing version 2.1.0 to 3.0.0

example/pick.js

@@ -7,2 +7,3 @@ var mixmap = require('mixmap')
 var lpb = require('length-prefixed-buffers')
+var Text = require('../text.js')
  
@@ -13,4 +14,4 @@ var mix = mixmap(regl, { extensions: [
 var map = mix.create({ 
-  viewbox: [+36.2146, +49.9962, +36.2404, +50.0154],
-  //viewbox: [+29.9, +31.1, +30.1, +31.3],
+  //viewbox: [+36.2146, +49.9962, +36.2404, +50.0154],
+  viewbox: [+29.9, +31.1, +30.1, +31.3],
   backgroundColor: [0.82, 0.85, 0.99, 1.0],
@@ -25,2 +26,4 @@ pickfb: { colorFormat: 'rgba', colorType: 'float32' }
   areaT: map.createDraw(geoRender.areas),
+  areaBorder: map.createDraw(geoRender.areaBorders),
+  areaBorderT: map.createDraw(geoRender.areaBorders),
   lineStroke: map.createDraw(geoRender.lineStroke),
@@ -32,2 +35,3 @@ lineFill: map.createDraw(geoRender.lineFill),
   pointT: map.createDraw(geoRender.points),
+  label: map.createDraw(geoRender.labels),
 }
@@ -46,13 +50,11 @@ window.draw = draw
   var props = null
+  var text = new Text
   update(zoom)
-  /*
-  var point = function (x, y, vb) {
-    var a = (x - vb[0])/(vb[2] - vb[0])*2-1 
-    var b = (y - vb[1])/(vb[3] - vb[1])*2-1
-    return [a,b]
-  }
-  */
   map.on('viewbox', function () {
     var z = Math.round(map.getZoom())
-    if (zoom !== z) update(z)
+    if (zoom !== z) {
+      update(z)
+    } else {
+      draw.label.props = [text.update(props, map)]
+    }
     zoom = z
@@ -70,2 +72,5 @@ })
     draw.areaT.props = [props.areaT]
+    draw.areaBorder.props = [props.areaBorderP]
+    draw.areaBorderT.props = [props.areaBorderT]
+    draw.label.props = [text.update(props, map)]
     map.draw()
@@ -108,4 +113,4 @@ }
       type: 'binary',
-      src: './example/kharkiv' || location.search.slice(1),
-      //src: './example/alexandrialpb' || location.search.slice(1),
+      //src: './example/kharkiv' || location.search.slice(1),
+      src: './example/alexandrialpb' || location.search.slice(1),
       parser: data => decode(lpb.decode(Buffer.from(data)))
@@ -112,0 +117,0 @@ }

example/render.js

@@ -7,2 +7,3 @@ var mixmap = require('mixmap')
 var lpb = require('length-prefixed-buffers')
+var Text = require('../text.js')
  
@@ -22,2 +23,4 @@ var mix = mixmap(regl, { extensions: [
   areaT: map.createDraw(geoRender.areas),
+  areaBorder: map.createDraw(geoRender.areaBorders),
+  areaBorderT: map.createDraw(geoRender.areaBorders),
   lineStroke: map.createDraw(geoRender.lineStroke),
@@ -29,2 +32,3 @@ lineFill: map.createDraw(geoRender.lineFill),
   pointT: map.createDraw(geoRender.points),
+  label: map.createDraw(geoRender.labels),
 }
@@ -42,6 +46,11 @@
   var props = null
+  var text = new Text
   update(zoom)
   map.on('viewbox', function () {
     var z = Math.round(map.getZoom())
-    if (zoom !== z) update(z)
+    if (zoom !== z) {
+      update(z)
+    } else {
+      draw.label.props = [text.update(props, map)]
+    }
     zoom = z
@@ -59,2 +68,5 @@ })
     draw.areaT.props = [props.areaT]
+    draw.label.props = [text.update(props, map)]
+    draw.areaBorder.props = [props.areaBorderP]
+    draw.areaBorderT.props = [props.areaBorderT]
     map.draw()
@@ -72,3 +84,3 @@ }
       type: 'binary',
-      src: './example/kharkiv' || location.search.slice(1),
+      src: './example/kharkiv',
       parser: data => decode(lpb.decode(Buffer.from(data)))
@@ -94,3 +106,4 @@ }
 
+document.body.style = 'margin: 0px; overflow: hidden;'
 document.body.appendChild(mix.render())
 document.body.appendChild(map.render({ width: window.innerWidth, height: window.innerHeight }))

index.js

@@ -60,5 +60,5 @@ var glsl = require('glslify')
         featureCount: map.prop('featureCount'),
-				aspect: function (context) {
-					return context.viewportWidth / context.viewportHeight
-				},
+        aspect: function (context) {
+          return context.viewportWidth / context.viewportHeight
+        },
       },
@@ -351,21 +351,140 @@ attributes: {
     },
+    areaBorders: {
+      frag: glsl`
+        precision highp float;
+        uniform vec4 viewbox;
+        uniform vec2 size;
+        uniform float aspect;
+        varying vec2 vdist;
+        varying float vdashLength, vdashGap;
+        varying vec4 vcolor;
+        void main () {
+          vec2 vb = vec2(viewbox.z-viewbox.x, viewbox.w-viewbox.y);
+          vec2 s = vec2(size.x, size.y*aspect);
+          float t = length(vdist*s/vb);
+          float d = vdashLength;
+          float g = vdashGap;
+          float x = 1.0 - step(d, mod(t, d+g));
+          gl_FragColor = vec4(vcolor.xyz, vcolor.w * x);
+        }
+      `,
+      pickFrag: `
+        precision highp float;
+        varying float vft, vindex;
+        varying vec4 vcolor;
+        uniform float featureCount;
+        void main () {
+          float opacity = floor(min(vcolor.w, 1.0));
+          gl_FragColor = vec4(vindex, vft, 2.0+opacity, 1.0);
+        }
+      `,
+      vert: glsl`
+        precision highp float;
+        #pragma glslify: AreaBorder = require('glsl-georender-style-texture/areaborder.h');
+        #pragma glslify: readAreaBorder = require('glsl-georender-style-texture/areaborder.glsl');
+        attribute vec2 position, normal, dist;
+        attribute float featureType, index;
+        uniform vec4 viewbox;
+        uniform vec2 offset, size;
+        uniform float featureCount, aspect, zoom;
+        uniform sampler2D styleTexture;
+        varying float vft, vindex, zindex, vdashLength, vdashGap;
+        varying vec2 vpos, vnorm, vdist;
+        varying vec4 vcolor;
+        void main () {
+          vft = featureType;
+          AreaBorder areaBorder = readAreaBorder(styleTexture, featureType, zoom, featureCount);
+          vcolor = areaBorder.color;
+          vdashLength = areaBorder.dashLength;
+          vdashGap = areaBorder.dashGap;
+          vindex = index;
+          zindex = areaBorder.zindex;
+          vec2 p = position.xy + offset;
+          vec2 m = areaBorder.width/size;
+          vnorm = normalize(normal)*m;
+          vdist = dist;
+          gl_Position = vec4(
+            (p.x - viewbox.x) / (viewbox.z - viewbox.x) * 2.0 - 1.0,
+            ((p.y - viewbox.y) / (viewbox.w - viewbox.y) * 2.0 - 1.0) * aspect,
+            1.0/(1.0+zindex), 1);
+          vpos = gl_Position.xy;
+          gl_Position += vec4(vnorm, 0, 0);
+        }
+      `,
+      uniforms: {
+        size: function (context) {
+          size[0] = context.viewportWidth
+          size[1] = context.viewportHeight
+          return size
+        },
+        styleTexture: map.prop('style'),
+        featureCount: map.prop('featureCount')
+      },
+      attributes: {
+        position: map.prop('positions'),
+        featureType: map.prop('types'),
+        index: map.prop('indexes'),
+        normal: map.prop('normals'),
+        dist: map.prop('distances')
+      },
+      primitive: "triangle strip",
+      count: function (context, props) {
+        return props.positions.length/2
+      },
+      blend: {
+        enable: true,
+        func: {
+          srcRGB: 'src alpha',
+          srcAlpha: 1,
+          dstRGB: 'one minus src alpha',
+          dstAlpha: 1
+        }
+      }
+    },
     labels: {
       frag: `
-      precision mediump float;
-      void main () {
-        gl_FragColor = vec4(0,0,1,1);
-      }`,
+        precision highp float;
+        varying vec2 vuv;
+        uniform sampler2D texture;
+        void main () {
+          vec4 c = texture2D(texture, vuv);
+          gl_FragColor = c;
+        }`,
       vert: `
-      precision mediump float;
-      attribute vec2 position;
-      void main () {
-        gl_Position = vec4(position.xy*vec2(1,-1)*0.2, 0, 1);
-      }`,
+        precision highp float;
+        attribute vec2 position, uv;
+        uniform vec4 viewbox;
+        uniform float aspect;
+        uniform vec2 offset, size;
+        varying vec2 vuv;
+        void main () {
+          vuv = uv;
+          vec2 p = position.xy + offset;
+          float zindex = 1000.0;
+          gl_Position = vec4(
+            (p.x - viewbox.x) / (viewbox.z - viewbox.x) * 2.0 - 1.0,
+            ((p.y - viewbox.y) / (viewbox.w - viewbox.y) * 2.0 - 1.0) * aspect,
+            1.0/(1.0+zindex), 1);
+        }
+      `,
+      uniforms: {
+        texture: map.prop('texture'),
+      },
       attributes: {
-        position: map.prop('positions')
+        position: map.prop('positions'),
+        uv: map.prop('uvs'),
       },
       elements: map.prop('cells'),
-      depth: { enable: false }
+      count: map.prop('cell_count'),
+      blend: {
+        enable: true,
+        func: {
+          srcRGB: 'src alpha',
+          srcAlpha: 1,
+          dstRGB: 'one minus src alpha',
+          dstAlpha: 1
+        }
+      },
     }
   }
 }

package.json

 {
   "name": "mixmap-georender",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "description": "a mixmap layer for rendering peermaps georender data",
@@ -8,3 +8,3 @@ "main": "index.js",
     "test": "tape test/*.js",
-    "example": "budo ./example/render.js",
+    "example": "budo example/render.js -d example",
     "download": "wget https://kitties.neocities.org/mixmap-georender/kharkiv https://kitties.neocities.org/mixmap-georender/style.png -P ./example/"
@@ -20,5 +20,7 @@ },
   "dependencies": {
-    "georender-pack": "^3.0.0",
-    "glsl-georender-style-texture": "^2.0.1",
+    "bin-pack": "^1.0.2",
+    "georender-pack": "^4.0.0",
+    "glsl-georender-style-texture": "^3.0.0",
     "glslify": "^7.0.0",
+    "label-placement-engine": "^1.0.0",
     "partition-array": "^1.0.0"
@@ -25,0 +27,0 @@ },

prepare.js

@@ -16,3 +16,4 @@ var partition = require('partition-array')
     line: new Uint32Array(this.data.line.types.length),
-    area: new Uint32Array(this.data.area.types.length)
+    area: new Uint32Array(this.data.area.types.length),
+    areaBorder: new Uint32Array(this.data.areaBorder.types.length)
   }
@@ -28,8 +29,12 @@ for (var i=0; i<this.indexes.point.length; i++) {
   }
+  for (var i=0; i<this.indexes.areaBorder.length; i++) {
+    this.indexes.areaBorder[i] = i
+  }
   var pointIndexes = makeIndexes(this.data.point.ids)
   var lineIndexes = makeIndexes(this.data.line.ids)
   var areaIndexes = makeIndexes(this.data.area.ids)
-  this.distances = [0,0]
-  var distx = 0
-  var disty = 0
+  var areaBorderIndexes = makeIndexes(this.data.areaBorder.ids)
+  this.ldistances = [0,0]
+  var ldistx = 0
+  var ldisty = 0
   var lids = this.data.line.ids
@@ -39,15 +44,37 @@ var lposits = this.data.line.positions
     if (lids[i] === lids[i+1]) {
-      distx += Math.abs(lposits[2*i] - lposits[2*i+2])
-      disty += Math.abs(lposits[2*i+1] - lposits[2*i+3])
+      ldistx += Math.abs(lposits[2*i] - lposits[2*i+2])
+      ldisty += Math.abs(lposits[2*i+1] - lposits[2*i+3])
     }
     else {
-      distx = 0
-      disty = 0
+      ldistx = 0
+      ldisty = 0
     }
-    if (isNaN(distx) || isNaN(disty)){
-      distx = 0
-      disty = 0
+    if (isNaN(ldistx) || isNaN(ldisty)){
+      ldistx = 0
+      ldisty = 0
     }
-    this.distances.push(distx, disty)
+    this.ldistances.push(ldistx, ldisty)
   }
+
+  this.abdistances = [0,0]
+  var abdistx = 0
+  var abdisty = 0
+  var abids = this.data.areaBorder.ids
+  var abposits = this.data.areaBorder.positions
+  for (var i=0;i<abids.length-1;i++){
+    if (abids[i] === abids[i+1]) {
+      abdistx += Math.abs(abposits[2*i] - abposits[2*i+2])
+      abdisty += Math.abs(abposits[2*i+1] - abposits[2*i+3])
+    }
+    else {
+      abdistx = 0
+      abdisty = 0
+    }
+    if (isNaN(abdistx) || isNaN(abdisty)){
+      abdistx = 0
+      abdisty = 0
+    }
+    this.abdistances.push(abdistx, abdisty)
+  }
+
   this.props = {
@@ -92,3 +119,3 @@ point: {
       normals: this.data.line.normals,
-      distances: this.distances,
+      distances: this.ldistances,
       indexes: lineIndexes.indexes,
@@ -162,3 +189,42 @@ indexToId: lineIndexes.indexToId,
       featureCount
-    }
+    },
+    areaBorder: {
+      positions: null,
+      types: null,
+      id: null,
+      normals: this.data.areaBorder.normals,
+      distances: this.abdistances,
+      //indexes: areaBorderIndexes.indexes,
+      //indexToId: areaBorderIndexes.indexToId,
+      //idToIndex: areaBorderIndexes.idToIndex,
+      indexes: null,
+      indexToId: null,
+      idToIndex: null,
+      style: this.style,
+      featureCount,
+    },
+    areaBorderT: {
+      positions: null,
+      types: null,
+      id: null,
+      normals: null,
+      distances: null,
+      indexes: null,
+      indexToId: null,
+      idToIndex: null,
+      style: this.style,
+      featureCount
+    },
+    areaBorderP: {
+      positions: null,
+      types: null,
+      id: null,
+      normals: null,
+      distances: null,
+      indexes: null,
+      indexToId: null,
+      idToIndex: null,
+      style: this.style,
+      featureCount
+    },
   }
@@ -208,4 +274,10 @@ }
     if (self.props[key].distances) {
-      self.props[tkey].distances.push(self.distances[self.indexes[tkey][i]*2])
-      self.props[tkey].distances.push(self.distances[self.indexes[tkey][i]*2+1])
+      if (key === 'line') {
+        self.props[tkey].distances.push(this.ldistances[self.indexes[tkey][i]*2])
+        self.props[tkey].distances.push(this.ldistances[self.indexes[tkey][i]*2+1])
+      }
+      else if (key === 'areaBorder') {
+        self.props[tkey].distances.push(this.abdistances[self.indexes[tkey][i]*2])
+        self.props[tkey].distances.push(this.abistances[self.indexes[tkey][i]*2+1])
+      }
     }
@@ -222,7 +294,14 @@ }
     }
-    if (self.props[pkey].distances) {
-      self.props[pkey].distances.push(self.distances[self.indexes[pkey][i]*2])
-      self.props[pkey].distances.push(self.distances[self.indexes[pkey][i]*2+1])
+    if (self.props[key].distances) {
+      if (key === 'line') {
+        self.props[pkey].distances.push(this.ldistances[self.indexes[pkey][i]*2])
+        self.props[pkey].distances.push(this.ldistances[self.indexes[pkey][i]*2+1])
+      }
+      else if (key === 'areaBorder') {
+        self.props[pkey].distances.push(this.abdistances[self.indexes[pkey][i]*2])
+        self.props[pkey].distances.push(this.abdistances[self.indexes[pkey][i]*2+1])
+      }
     }
   }
+  //figure out area line indexes
   var tindexes = makeIndexes(self.props[tkey].id)
@@ -260,2 +339,3 @@ var pindexes = makeIndexes(self.props[pkey].id)
   this._splitSort('line', zoom)
+  this._splitSort('areaBorder', zoom)
   this._splitSortArea('area', zoom)
@@ -275,2 +355,5 @@ return this.props
   }
+  else if (key === 'areaBorder') {
+    var y = zoom * 2 + this.zoomCount * 2 + this.zoomCount * 4 + this.zoomCount * 2
+  }
   var index = (type + y * featureCount)*4 + 3
@@ -277,0 +360,0 @@ return this.pixels[index]

No alert changes

Improved metrics

Total package byte prevSize

51203

increased by31.97%

Number of package files

10

increased by11.11%

Lines of code

1324

increased by37.77%

Worsened metrics

Dependency count

6

increased by50%

Dependency changes

• + Addedbin-pack@^1.0.2

• + Addedlabel-placement-engine@^1.0.0

• + Addedbin-pack@1.0.2(transitive)

• + Addedgeorender-pack@4.2.5(transitive)

• + Addedglsl-georender-style-texture@3.0.0(transitive)

• + Addedlabel-placement-engine@1.0.1(transitive)

• + Addedline-segment-intersect-2d@1.0.0(transitive)

• + Addedpoint-in-polygon@1.1.0(transitive)

• + Addedpolygon-intersect-test@1.0.1(transitive)

• - Removedgeorender-pack@3.0.1(transitive)

• - Removedglsl-georender-style-texture@2.0.1(transitive)

• Updatedgeorender-pack@^4.0.0

• Updatedglsl-georender-style-texture@^3.0.0