mapshaper 0.7.17 → 0.7.18

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'}
   };
 
@@ -31667,6 +31667,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 +44081,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 +44106,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 +44201,7 @@ ${svg}
 
     if (colorArg == 'random') {
       if (categorical) {
-        colorScheme = pickRandomCategoricalScheme(n);
+        return getRandomizedCategoricalColorScheme(n);
       } else {
         colorScheme = pickRandomColorScheme('sequential');
       }
@@ -56697,6 +56715,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 +58269,7 @@ ${svg}
     });
   }
 
-  var version = "0.7.17";
+  var version = "0.7.18";
 
   // 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

@@ -2025,6 +2025,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 +2058,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 +2126,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 +2207,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 +2405,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 +2493,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 {
+	color: black;
+	text-decoration: underline;
+}
+
 .label-position-grid {
 	display: grid;
 	grid-template-columns: repeat(3, 10px);