mapshaper 0.7.17 → 0.7.19

package/www/mapshaper.js

@@ -18650,14 +18650,14 @@
   var labelPositionFields = ['label-pos', 'dx', 'dy', 'text-anchor'];
 
   var labelPositionStyles = {
-    n: {dx: 0, dy: '-0.45em', 'text-anchor': 'middle'},
-    s: {dx: 0, dy: '1.05em', 'text-anchor': 'middle'},
-    e: {dx: '0.4em', dy: '0.25em', 'text-anchor': 'start'},
-    w: {dx: '-0.4em', dy: '0.25em', 'text-anchor': 'end'},
-    ne: {dx: '0.35em', dy: '-0.15em', 'text-anchor': 'start'},
-    se: {dx: '0.35em', dy: '0.7em', 'text-anchor': 'start'},
-    nw: {dx: '-0.35em', dy: '-0.15em', 'text-anchor': 'end'},
-    sw: {dx: '-0.35em', dy: '0.7em', 'text-anchor': 'end'},
+    n: {dx: 0, dy: '-0.5em', 'text-anchor': 'middle'},
+    s: {dx: 0, dy: '1.1em', 'text-anchor': 'middle'},
+    e: {dx: '0.45em', dy: '0.23em', 'text-anchor': 'start'},
+    w: {dx: '-0.45em', dy: '0.23em', 'text-anchor': 'end'},
+    ne: {dx: '0.4em', dy: '-0.15em', 'text-anchor': 'start'},
+    se: {dx: '0.4em', dy: '0.7em', 'text-anchor': 'start'},
+    nw: {dx: '-0.4em', dy: '-0.15em', 'text-anchor': 'end'},
+    sw: {dx: '-0.4em', dy: '0.7em', 'text-anchor': 'end'},
     c: {dx: 0, dy: '0.25em', 'text-anchor': 'middle'}
   };
 
@@ -19880,7 +19880,7 @@
   function exportSVG(dataset, opts) {
     var namespace = 'xmlns="http://www.w3.org/2000/svg"';
     var defs = [];
-    var frame, svg, layers, metadataJSON;
+    var frame, svg, layers, metadataJSON, files, svgFile;
     var style = '';
 
     // kludge for map keys
@@ -19901,6 +19901,8 @@
     // use invert_y: 0 setting for screen coordinates and geojson polygon generation
     // use 1px default margin so typical strokes don't get cut off on the sides
     opts = Object.assign({invert_y: true, margin: "1"}, opts);
+    opts.svg_image_files = [];
+    opts.svg_file_base = getSvgFileBase(dataset, opts);
     frame = getFrameData(dataset, opts);
     fitDatasetToFrame(dataset, frame);
     setCoordinatePrecision(dataset, opts.precision || 0.01);
@@ -19953,10 +19955,17 @@
 ${svg}
 </svg>`;
     svg = utils.format(template, frame.width, frame.height, 0, 0, frame.width, frame.height);
-    return [{
+    svgFile = {
       content: svg,
       filename: opts.file || getOutputFileBase(dataset) + '.svg'
-    }];
+    };
+    files = [svgFile].concat(opts.svg_image_files);
+    return files;
+  }
+
+  function getSvgFileBase(dataset, opts) {
+    var file = opts.file || getOutputFileBase(dataset) + '.svg';
+    return file.replace(/\.svg$/i, '');
   }
 
   function getMetadataBlock(metadataJSON, viewBox) {
@@ -20047,7 +20056,9 @@ ${svg}
       layerObj.children = [];
       return layerObj;
     }
-    href = encodeRasterPreview(rendered.preview, opts);
+    href = opts.linked_images ?
+      exportLinkedRasterPreview(rendered.preview, opts) :
+      encodeRasterPreview(rendered.preview, opts);
     layerObj.children = [{
       tag: 'image',
       properties: {
@@ -20121,6 +20132,30 @@ ${svg}
     return 'data:image/' + format + ';base64,' + data;
   }
 
+  function exportLinkedRasterPreview(preview, opts) {
+    var format = getSvgRasterFormat(preview, opts);
+    var data = format == 'png' ? encodePng(preview) : encodeJpeg(preview, opts);
+    var ext = format == 'jpeg' ? 'jpg' : format;
+    var filename = opts.svg_file_base + '-image-' + (opts.svg_image_files.length + 1) + '.' + ext;
+    opts.svg_image_files.push({
+      filename: filename,
+      content: base64ToBytes(data)
+    });
+    return filename;
+  }
+
+  function base64ToBytes(str) {
+    if (typeof Buffer != 'undefined') {
+      return Buffer.from(str, 'base64');
+    }
+    var bin = atob(str);
+    var bytes = new Uint8Array(bin.length);
+    for (var i = 0; i < bin.length; i++) {
+      bytes[i] = bin.charCodeAt(i);
+    }
+    return bytes;
+  }
+
   function getSvgRasterFormat(preview, opts) {
     var fmt = opts.svg_raster_format || opts.raster_format || null;
     if (fmt) return fmt == 'jpg' ? 'jpeg' : fmt;
@@ -20136,11 +20171,11 @@ ${svg}
   }
 
   function encodeJpeg(preview, opts) {
+    var quality = getJpegQuality(opts);
     if (runningInBrowser() && typeof document != 'undefined') {
-      return encodeWithCanvas(preview, 'image/jpeg', opts.svg_raster_quality || 0.85);
+      return encodeWithCanvas(preview, 'image/jpeg', quality / 100);
     }
     var jpeg = require$1('jpeg-js');
-    var quality = Math.round((opts.svg_raster_quality || 0.85) * 100);
     return Buffer.from(jpeg.encode({
       data: Buffer.from(preview.pixels),
       width: preview.width,
@@ -20148,6 +20183,14 @@ ${svg}
     }, quality).data).toString('base64');
   }
 
+  function getJpegQuality(opts) {
+    var quality = opts.jpeg_quality == null ? 85 : opts.jpeg_quality;
+    if ((quality >= 1 && quality <= 100) === false) {
+      stop$1('jpeg-quality= option should be a number from 1 to 100');
+    }
+    return Math.round(quality);
+  }
+
   function encodePng(preview) {
     if (runningInBrowser() && typeof document != 'undefined') {
       return encodeWithCanvas(preview, 'image/png');
@@ -29002,6 +29045,10 @@ ${svg}
     if ('topojson_precision' in o && o.topojson_precision > 0 === false) {
       error('topojson-precision= option should be a positive number');
     }
+
+    if ('jpeg_quality' in o && (o.jpeg_quality >= 1 && o.jpeg_quality <= 100) === false) {
+      error('jpeg-quality= option should be a number from 1 to 100');
+    }
   }
 
   var assignmentRxp = /^([a-z0-9_+-]+)=(?!=)(.*)$/i; // exclude ==
@@ -30408,6 +30455,14 @@ ${svg}
         describe: '[SVG] raster pixels per SVG pixel (default is 1)',
         type: 'number'
       })
+      .option('linked-images', {
+        describe: '[SVG] link raster images as external files',
+        type: 'flag'
+      })
+      .option('jpeg-quality', {
+        describe: '[SVG] JPEG quality for raster images, 1-100 (default is 85)',
+        type: 'number'
+      })
       .option('fit-extent', {
         describe: '[SVG] layer to use for the map extent'
       })
@@ -31432,6 +31487,10 @@ ${svg}
       .option('nodata-color', {
         describe: '[raster] color for uncovered pixels after reprojection'
       })
+      .option('background', {
+        describe: '[raster] alias for nodata-color',
+        alias_to: 'nodata-color'
+      })
       .option('resampling', {
         describe: '[raster] nearest or bilinear (default is bilinear)'
       })
@@ -31667,6 +31726,10 @@ ${svg}
         type: 'flag'
       })
       .option('where', whereOpt)
+      .option('ids', {
+        describe: 'comma-sep. list of feature ids to style',
+        type: 'numbers'
+      })
       .option('class', {
         describe: 'name of CSS class or classes (space-separated)'
       })
@@ -44077,7 +44140,17 @@ ${svg}
     return utils.pickOne(schemes) || 'Tableau20';
   }
 
-  function getCategoricalColorScheme(name, n) {
+  function randomRotateArr(arr) {
+    var n = Math.floor(Math.random() * arr.length);
+    return arr.slice(-n).concat(arr.slice(0, -n));
+  }
+
+  function getRandomizedCategoricalColorScheme(n) {
+    var name = pickRandomCategoricalScheme(n);
+    return getCategoricalColorScheme(name, n, true);
+  }
+
+  function getCategoricalColorScheme(name, n, randomized) {
     var colors;
     initSchemes();
     name = standardName(name);
@@ -44092,7 +44165,11 @@ ${svg}
       // stop(name, 'does not contain', n, 'colors');
       message('Color scheme has', colors.length, 'colors. Using duplication to match', n, 'categories.');
       colors = wrapColors(colors, n);
-    } else {
+    }
+    if (randomized) {
+      colors = randomRotateArr(colors);
+    }
+    if (n < colors.length) {
       colors = colors.slice(0, n);
     }
     return colors;
@@ -44183,7 +44260,7 @@ ${svg}
 
     if (colorArg == 'random') {
       if (categorical) {
-        colorScheme = pickRandomCategoricalScheme(n);
+        return getRandomizedCategoricalColorScheme(n);
       } else {
         colorScheme = pickRandomColorScheme('sequential');
       }
@@ -51092,7 +51169,7 @@ ${svg}
     bbox = opts.output_bbox || opts.outputBbox || getProjectedMeshBBox(mesh);
     if (!bbox) stop$1('Unable to project raster layer');
     outSize = getOutputGridSize(grid, bbox, opts);
-    outGrid = createProjectedRasterGrid(grid, bbox, outSize.width, outSize.height, opts);
+    outGrid = createProjectedRasterGrid(grid, raster, bbox, outSize.width, outSize.height, opts);
     timeStart(timing, 'rasterize');
     rasterizeProjectedMesh(grid, outGrid, mesh, getRasterProjectionSampleMethod(raster, opts));
     timeEnd(timing, 'rasterize');
@@ -51361,13 +51438,13 @@ ${svg}
     return xmin < Infinity && xmax > xmin && ymax > ymin ? [xmin, ymin, xmax, ymax] : null;
   }
 
-  function createProjectedRasterGrid(grid, bbox, widthArg, heightArg, opts) {
+  function createProjectedRasterGrid(grid, raster, bbox, widthArg, heightArg, opts) {
     var width = widthArg || grid.width;
     var height = heightArg || grid.height;
-    var bands = getOutputBandCount(grid, opts);
+    var bands = getOutputBandCount(grid, raster, opts);
     var samples = new grid.samples.constructor(width * height * bands);
     var coverage = new Uint8Array(width * height);
-    fillProjectedRasterSamples(samples, bands, grid, opts || {});
+    fillProjectedRasterSamples(samples, bands, grid, raster, opts || {});
     return Object.assign({}, grid, {
       width: width,
       height: height,
@@ -51404,13 +51481,13 @@ ${svg}
     return {width: width, height: height};
   }
 
-  function getOutputBandCount(grid, opts) {
-    var color = getNoDataColor(opts);
+  function getOutputBandCount(grid, raster, opts) {
+    var color = getNoDataColor(raster, opts);
     return color && color.a === 0 && grid.bands > 1 && grid.bands < 4 ? 4 : grid.bands;
   }
 
-  function fillProjectedRasterSamples(samples, bands, grid, opts) {
-    var color = getNoDataColor(opts);
+  function fillProjectedRasterSamples(samples, bands, grid, raster, opts) {
+    var color = getNoDataColor(raster, opts);
     var noData = grid.nodata;
     if (color) {
       fillProjectedRasterColor(samples, bands, color);
@@ -51420,10 +51497,12 @@ ${svg}
     samples.fill(noData);
   }
 
-  function getNoDataColor(opts) {
+  function getNoDataColor(raster, opts) {
     var arg = opts.nodata_color || opts.nodataColor;
     var color;
-    if (arg == null || arg === '') return null;
+    if (arg == null || arg === '') {
+      return rasterAppearsCategorical(raster) ? null : {r: 255, g: 255, b: 255, a: 1};
+    }
     if (String(arg).toLowerCase() == 'transparent') {
       return {r: 0, g: 0, b: 0, a: 0};
     }
@@ -56697,6 +56776,9 @@ ${svg}
     if (opts.where) {
       filterFn = compileFeatureExpression(opts.where, lyr, dataset.arcs);
     }
+    if (opts.ids) {
+      filterFn = combineFilters(filterFn, getIdFilter(opts.ids));
+    }
     if (opts.clear) {
       lyr.data.getFields().filter(isSupportedSvgStyleProperty).forEach(lyr.data.deleteField, lyr.data);
     }
@@ -58248,7 +58330,7 @@ ${svg}
     });
   }
 
-  var version = "0.7.17";
+  var version = "0.7.19";
 
   // Parse command line args into commands and run them
   // Function takes an optional Node-style callback. A Promise is returned if no callback is given.

package/www/page.css

@@ -18,7 +18,7 @@
 	--xlt-theme-col: #f4f8f9;
 	--accent-col: #ffa; /* yellow logo text */
 	--theme-col: #1385B7; /* blue header / btn col */
-	--dk-theme-col: #1A6A96; /* btn hover col */
+	--dk-theme-col: #196d8e; /* #1A6A96;  btn hover col */
 	--lt-theme-col: #e6f7ff;
 	--colored-text: #10699b;
 	--normal-text: #333;
@@ -671,7 +671,7 @@ textarea:focus {
 	min-width: 230px;
 	word-wrap: break-word;
 	text-align: left;
-	margin-top: 12px;
+	margin-top: 16px;
 	padding: 14px 16px 13px 18px;
 	vertical-align: top;
 	display: inline-block;
@@ -874,7 +874,7 @@ body.sidebar-resizing .sidebar-resize-handle::before,
 
 .sidebar-tabs {
 	position: absolute;
-	top: 85px; /* below line intersection repair link */
+	top: 66px; /* below line intersection repair link */
 	left: 0;
 	z-index: 40;
 	pointer-events: auto;
@@ -882,6 +882,7 @@ body.sidebar-resizing .sidebar-resize-handle::before,
 
 body.sidebar-open .sidebar-tabs {
 	left: var(--left-sidebar-width);
+	margin-left: -1.5px;
 }
 
 body.sidebar-tabs-over-popup .sidebar-tabs {
@@ -902,12 +903,17 @@ body.sidebar-tabs-over-popup .sidebar-tabs {
 	pointer-events: auto;
 }
 
-.sidebar-tab:hover,
+.sidebar-tab:hover {
+	background-color: var(--dk-theme-col);
+}
+
 body.layers-open .layer-tab,
 body.console-open .console-tab {
-	background-color: #1A6A96;
+	background-color: black;
 }
 
+
+
 .console-window {
 	pointer-events: auto;
 	background-color: black;
@@ -1109,7 +1115,6 @@ body.simplify .layer-control-btn {
 .layer-control .info-box {
 	padding: 0;
 	pointer-events: none;
-	background-color: transparent;
 }
 
 .layer-control div.info-box-scrolled {
@@ -2025,6 +2030,11 @@ body.pan.panning .map-layers:not(.drawing) {
 	font-size: 12.5px;
 }
 
+.label-style-panel button.label-style-close {
+	font-size: 16px; /* close button icon */
+}
+
+
 .label-style-panel select {
 	padding: 1px 0;
 }
@@ -2053,7 +2063,7 @@ body.pan.panning .map-layers:not(.drawing) {
 .label-style-row span,
 .label-style-row-label {
 	display: block;
-	margin-bottom: 3px;
+	/* margin-bottom: 3px; */
 	color: #555;
 }
 
@@ -2121,7 +2131,8 @@ body.pan.panning .map-layers:not(.drawing) {
 	border-top: 1px solid #ccc;
 }
 
-.label-saved-style-row button {
+.label-saved-style-row button,
+.label-style-row button {
 	margin-right: 5px;
 }
 
@@ -2201,6 +2212,185 @@ body.pan.panning .map-layers:not(.drawing) {
 	box-sizing: border-box;
 }
 
+.layer-style-panel .layer-color-row {
+	position: relative;
+}
+
+.point-style-section + .point-style-section {
+	margin-top: 10px;
+	padding-top: 8px;
+	border-top: 1px solid #ccc;
+}
+
+.point-style-section.point-style-first-visible {
+	margin-top: 7px;
+	padding-top: 0;
+	border-top: 0;
+}
+
+.point-style-note {
+	color: #555;
+	line-height: 1.25;
+}
+
+.point-create-labels-row {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+}
+
+.point-create-circles-row {
+	display: flex;
+	align-items: baseline;
+	gap: 2px;
+	color: #555;
+}
+
+.point-create-circles-row span {
+	display: inline;
+	margin: 0;
+	color: #555;
+}
+
+.point-create-copy-label {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	margin: 0;
+	color: #555;
+}
+
+.point-create-copy-label span {
+	display: inline;
+	margin: 0;
+	color: #555;
+}
+
+.point-symbol-row {
+	display: flex;
+	align-items: flex-start;
+	gap: 12px;
+}
+
+.point-symbol-size-row {
+	display: flex;
+	align-items: flex-start;
+	gap: 12px;
+}
+
+.point-symbol-stepper-control {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.point-symbol-stepper-control:last-child {
+	margin-left: auto;
+	align-items: flex-end;
+}
+
+.point-symbol-color-cell {
+	position: relative;
+	white-space: nowrap;
+	flex: 1;
+}
+
+.point-symbol-row .layer-number-control input[type="text"],
+.point-symbol-width-row input[type="text"] {
+	width: 45px;
+	height: 19px;
+	padding-top: 0;
+	padding-bottom: 0;
+	box-sizing: border-box;
+}
+
+.point-symbol-width-row input[type="text"] {
+	width: 55px;
+}
+
+.layer-style-control-line {
+	display: flex;
+	align-items: flex-start;
+	gap: 12px;
+}
+
+.layer-color-cell {
+	position: relative;
+	white-space: nowrap;
+}
+
+.layer-style-panel .layer-color-row input[type="text"] {
+	width: 79px;
+	height: 19px;
+	padding-top: 0;
+	padding-bottom: 0;
+	box-sizing: border-box;
+	vertical-align: top;
+}
+
+.layer-row-controls {
+	display: flex;
+	gap: 6px;
+	align-items: flex-start;
+	justify-content: flex-start;
+}
+
+.layer-number-control {
+	display: block;
+	margin: 0;
+}
+
+.layer-number-control > span,
+.label-color-row > span,
+.layer-color-cell > span {
+	display: block;
+	margin-bottom: 3px;
+	color: #555;
+}
+
+.layer-style-panel .layer-number-control input[type="text"] {
+	width: 45px;
+	height: 19px;
+	padding-top: 0;
+	padding-bottom: 0;
+	box-sizing: border-box;
+}
+
+.layer-stepper-control {
+	display: flex;
+	align-items: center;
+	gap: 2px;
+}
+
+.layer-stepper-control .label-panel-btn {
+	text-align: center;
+	line-height: 18px;
+}
+
+.layer-stroke-width-value {
+	display: inline-block;
+	width: 30px;
+	min-height: 17px;
+	line-height: 17px;
+	text-align: center;
+	border: 1px solid #999;
+	background: white;
+	cursor: pointer;
+	box-sizing: border-box;
+}
+
+.layer-stroke-width-value.editing {
+	cursor: text;
+}
+
+.layer-stroke-width-row .layer-number-control {
+	display: block;
+}
+
+.layer-style-panel .layer-color-row .label-color-picker input[type="text"] {
+	width: 45px;
+}
+
 .label-color-picker {
 	position: absolute;
 	z-index: 25;
@@ -2220,6 +2410,34 @@ body.pan.panning .map-layers:not(.drawing) {
 	cursor: crosshair;
 }
 
+.label-color-presets {
+	margin: 0 0 6px 0;
+}
+
+.label-color-preset-row {
+	display: flex;
+	gap: 2px;
+	margin-bottom: 2px;
+}
+
+.label-color-preset {
+	box-sizing: border-box;
+	width: 14px;
+	height: 14px;
+	border: 1px solid rgba(0, 0, 0, 0.25);
+	cursor: pointer;
+}
+
+.label-color-preset:hover,
+.label-color-preset:focus {
+	outline: 1px solid #d3aa00;
+	outline-offset: 1px;
+}
+
+.label-color-preset-group-start {
+	margin-left: 2px;
+}
+
 .label-color-picker.dragging-color canvas {
 	cursor: none;
 }
@@ -2280,6 +2498,30 @@ body.dragging-color-picker * {
 	margin-right: 5px;
 }
 
+.label-style-selection-row .label-editing-status,
+.label-style-selection-row .label-editing-clear {
+	display: inline;
+}
+
+.label-style-selection-row .label-editing-clear.hidden {
+	display: none;
+}
+
+.label-editing-status {
+	color: #555;
+}
+
+.label-style-selection-row .label-editing-clear {
+	margin-left: 8px;
+	color: var(--colored-text);
+	cursor: pointer;
+}
+
+.label-style-selection-row .label-editing-clear:hover,
+.repair-btn:hover {
+	text-decoration: underline;
+}
+
 .label-position-grid {
 	display: grid;
 	grid-template-columns: repeat(3, 10px);