mapshaper 0.7.72 → 0.7.75

package/www/page.css

@@ -1362,7 +1362,7 @@ body.simplify .layer-control-btn {
    starts a line has its dot pushed past the left edge of the row and clipped,
    so no line ends or begins with a stray dot. */
 .layer-add-links {
-	margin: 2px 0 2px 0;
+	margin: 4px 0 8px 0;
 	font-size: 13px;
 	line-height: 1.2;
 	overflow: hidden;
@@ -1414,20 +1414,20 @@ body.simplify .layer-control-btn {
 }
 
 .layer-menu .layer-list {
-	margin-top: -5px;
-	/* margin: 0 0 7px 0; */
+	margin-top: -2px;
 }
 
 .layer-menu .layer-item {
 	position: relative;
 	margin-left: -14px;
 	margin-right: 6px;
-	padding: 6px 14px;
+	padding: 0 14px;
 	width: 100%;
 }
 
 .layer-menu .layer-list .layer-item {
 	cursor: pointer;
+	padding: 6px 14px;
 }
 
 .map-frame-section {
@@ -1499,8 +1499,8 @@ img.close-btn {
 
 .pin-all img {
 	position: absolute;
-	top: 11px;
 	cursor: pointer;
+	top: 0;
 }
 
 
@@ -3021,12 +3021,6 @@ body.pan.panning .map-layers:not(.drawing) {
 	width: 54px;
 }
 
-.export-frame-info {
-	color: #555;
-	font-size: 12px;
-	margin: 8px 0 12px;
-}
-
 .label-style-panel select,
 .label-saved-style-btn {
 	background-image: var(--label-menu-chevron);
@@ -3696,7 +3690,7 @@ body.pan.panning .map-layers:not(.drawing) {
 
 /* In the narrow column beside the fill's colour, level with it and as wide
    as the fields in that column. */
-.label-split-cell > .layer-random-fill-btn {
+.label-split-cell > .layer-palettes-btn {
 	display: flex;
 	justify-content: center;
 	width: 100%;
@@ -3774,10 +3768,6 @@ body.pan.panning .map-layers:not(.drawing) {
 	border-radius: 0;
 }
 
-.label-color-row .label-color-picker input[type="text"] {
-	width: 45px;
-}
-
 .label-css-row input {
 	width: 100%;
 	box-sizing: border-box;
@@ -3824,6 +3814,13 @@ body.pan.panning .map-layers:not(.drawing) {
 	box-shadow: 0 1px 7px rgba(0,0,0,0.18);
 }
 
+/* A style panel is a stacking context, below the floating toolbars (25), so a
+   picker that opens low enough to reach them would be drawn under them. The
+   panel comes forward while one of its pickers is open. */
+.label-style-panel.color-picker-open {
+	z-index: 26;
+}
+
 .label-color-picker canvas {
 	display: block;
 	width: 256px;
@@ -3892,27 +3889,24 @@ body.dragging-color-picker * {
 	margin-top: 6px;
 }
 
-.label-color-picker-fields label {
-	display: inline-flex;
-	align-items: center;
-	gap: 3px;
-	margin: 0;
-	color: #555;
-}
-
-.label-color-picker-fields span {
-	display: inline;
-	margin: 0;
-	color: #555;
-}
-
-.label-color-picker-fields input {
-	width: 34px;
+/* Like the panels' own buttons (.label-panel-action-btn) */
+.label-color-picker-fields button {
 	box-sizing: border-box;
+	height: var(--label-field-height, 22px);
+	margin: 0 0 0 auto;
+	padding: 0 8px;
+	border: 1px solid var(--label-field-border, #c6c6c6);
+	border-radius: var(--label-field-radius, 4px);
+	background-color: white;
+	box-shadow: none;
+	font: inherit;
+	font-size: 12px;
+	color: var(--normal-text);
+	cursor: pointer;
 }
 
-.label-color-picker-fields button {
-	margin-left: auto;
+.label-color-picker-fields button:hover {
+	background-color: #f0f0f0;
 }
 
 .label-style-selection-row {
@@ -4013,7 +4007,8 @@ body.dragging-color-picker * {
 
 /* Words, like the label panel's Fixed/Draggable, but splitting the group
    evenly so that it lines up with the shapes above. */
-.layer-style-panel .layer-arrow-position-buttons .label-panel-btn {
+.layer-style-panel .layer-arrow-position-buttons .label-panel-btn,
+.layer-style-panel .layer-cap-buttons .label-panel-btn {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -4369,6 +4364,12 @@ body.dragging-color-picker * {
 	pointer-events: none;
 }
 
+/* Undo/redo stays at the bottom, below any mode toolbar, whichever toolbar
+   happened to be created first. */
+.floating-toolbar-stack > .edit-toolbar {
+	order: -1;
+}
+
 .floating-toolbar {
 	pointer-events: auto;
 	display: flex;
@@ -4670,3 +4671,560 @@ body.dragging-color-picker * {
 .simplify-control .clicktext:focus {
 	background: #fff;
 }
+
+/* Color scheme panel (gui-color-scheme-panel.mjs): it opens in the polygon
+   style panel's place, which is hidden until it closes. */
+.layer-style-panel.replaced {
+	display: none;
+}
+
+.color-scheme-note {
+	font-size: 11px;
+	line-height: 1.3;
+	color: #555;
+}
+
+.label-style-panel .color-scheme-select-row > span {
+	margin-bottom: 2px;
+}
+
+.color-scheme-palette-cell {
+	position: relative;
+}
+
+.color-scheme-palette-btn {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	box-sizing: border-box;
+	height: var(--label-field-height);
+	padding: 0 20px 0 4px;
+	border: 1px solid var(--label-field-border);
+	border-radius: var(--label-field-radius);
+	background: white var(--label-menu-chevron) no-repeat right 6px center / 10px 7px;
+	cursor: pointer;
+	user-select: none;
+}
+
+/* The background stops at the border: a gradient repeats under a border,
+   which would show the first color along the far edge. */
+.color-scheme-strip {
+	flex: none;
+	width: 48px;
+	height: 12px;
+	border: 1px solid rgba(0,0,0,0.15);
+	background-clip: padding-box;
+}
+
+.label-style-panel .color-scheme-palette-btn > span,
+.label-style-panel .color-scheme-palette-item > span {
+	display: inline;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-size: 12px;
+	color: var(--normal-text);
+}
+
+.color-scheme-palette-menu {
+	position: absolute;
+	z-index: 2;
+	top: 100%;
+	left: 0;
+	right: -84px;
+	max-height: 260px;
+	overflow-y: auto;
+	margin-top: 2px;
+	padding: 3px 0;
+	background: white;
+	border: 1px solid #ccc;
+	border-radius: var(--label-field-radius);
+	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+}
+
+.color-scheme-palette-item {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 3px 8px;
+	cursor: pointer;
+}
+
+.color-scheme-palette-item:hover {
+	background-color: #f0f0f0;
+}
+
+.color-scheme-palette-item.selected {
+	background-color: var(--lt-theme-col);
+}
+
+.color-scheme-palette-heading {
+	padding: 7px 8px 2px;
+	font-size: 11px;
+	color: #888;
+	cursor: default;
+}
+
+.color-scheme-tile-row {
+	margin-top: 10px;
+}
+
+.color-scheme-tiles {
+	position: relative;
+	display: flex;
+	gap: 3px;
+}
+
+/* Where a dragged categorical swatch would go */
+.color-scheme-drop-marker {
+	position: absolute;
+	z-index: 1;
+	width: 2px;
+	margin-left: -0.5px;
+	background-color: #000;
+	pointer-events: none;
+}
+
+.color-scheme-tiles.dragging .color-scheme-tile {
+	cursor: grabbing;
+}
+
+.color-scheme-tiles.dragging .color-scheme-tile:hover::after {
+	display: none;
+}
+
+.color-scheme-tile-cell.drag-source .color-scheme-tile {
+	opacity: 0.35;
+}
+
+.color-scheme-tiles.two-rows {
+	flex-wrap: wrap;
+	row-gap: 7px;
+}
+
+.color-scheme-tiles.two-rows > .color-scheme-tile-cell {
+	flex: none;
+	width: calc((100% - (var(--tiles-per-row) - 1) * 3px) / var(--tiles-per-row));
+}
+
+/* The pins' tooltips are placed against the cell, which ends at the pin */
+.color-scheme-tile-cell {
+	position: relative;
+	flex: 1;
+	min-width: 0;
+}
+
+.color-scheme-tile {
+	position: relative;
+	height: 26px;
+	border-radius: 3px;
+	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
+	cursor: pointer;
+	touch-action: none;
+	user-select: none;
+}
+
+.color-scheme-tile.selected {
+	box-shadow: 0 0 0 2px #000;
+}
+
+/* A continuous ramp: the gradient over half-height tiles, which are its
+   color stops. The script places each gradient over its tiles. */
+.color-scheme-gradient {
+	position: relative;
+	height: 12px;
+	margin-bottom: 4px;
+}
+
+.color-scheme-gradient-segment {
+	position: absolute;
+	top: 0;
+	height: 100%;
+	border-radius: 3px;
+	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
+}
+
+.color-scheme-tiles.continuous .color-scheme-tile {
+	height: 14px;
+}
+
+/* A dot under each color the user set between the ends of a ramp; the ends
+   are always pinned, so they have no dot. */
+.color-scheme-pin {
+	width: 7px;
+	height: 7px;
+	margin: 4px auto 0;
+	border-radius: 50%;
+}
+
+.color-scheme-pin.pinned {
+	background: #222;
+	cursor: pointer;
+}
+
+.label-color-picker-fields input.label-color-picker-input {
+	flex: 1;
+	width: auto;
+	min-width: 0;
+	font-family: Menlo, Consolas, monospace;
+	font-size: 11.5px;
+}
+
+/* Format tabs over a picker's color field, and the color palette panel's
+   scheme types: a segmented control on a grey well, the chosen tab drawn like
+   the panels' fields and buttons. */
+.label-color-format-tabs,
+.color-scheme-tabs {
+	display: flex;
+	margin-top: 6px;
+	border-radius: var(--label-field-radius, 4px);
+	background-color: #f0f0f0;
+}
+
+.label-color-picker .label-color-format-tab,
+.color-scheme-tabs .color-scheme-tab {
+	flex: 1;
+	min-width: 0;
+	box-sizing: border-box;
+	height: var(--label-field-height, 22px);
+	margin: 0;
+	padding: 0 4px;
+	border: 1px solid transparent;
+	border-radius: var(--label-field-radius, 4px);
+	background: transparent;
+	box-shadow: none;
+	font: inherit;
+	font-size: 12px;
+	color: #777;
+	cursor: pointer;
+}
+
+.label-color-picker .label-color-format-tab:hover:not(.selected),
+.color-scheme-tabs .color-scheme-tab:hover:not(.selected) {
+	color: var(--normal-text);
+}
+
+.label-color-picker .label-color-format-tab.selected,
+.color-scheme-tabs .color-scheme-tab.selected {
+	border-color: var(--label-field-border, #c6c6c6);
+	background-color: white;
+	color: var(--normal-text);
+	cursor: default;
+}
+
+/* In the style panel, the scheme's colors take the place of the fill's swatch
+   and hex value. */
+.label-style-panel .label-color-field.has-scheme .label-color-chit,
+.label-style-panel .label-color-field.has-scheme .label-color-input {
+	display: none;
+}
+
+.layer-scheme-strip {
+	display: none;
+	flex: 1;
+	align-items: center;
+	gap: 4px;
+	min-width: 0;
+	height: 100%;
+	cursor: pointer;
+}
+
+.label-color-field.has-scheme .layer-scheme-strip {
+	display: flex;
+}
+
+.layer-scheme-colors {
+	flex: 1;
+	height: 13px;
+	border: 1px solid rgba(0,0,0,0.22);
+	background-clip: padding-box;
+}
+
+.layer-scheme-remove {
+	flex: none;
+	padding: 0 2px;
+	font-size: 14px;
+	line-height: 1;
+	color: #777;
+}
+
+.layer-scheme-remove:hover {
+	color: #000;
+}
+
+.layer-palettes-btn.selected {
+	background-color: var(--lt-theme-col);
+}
+
+.color-scheme-slider-row:not(.hidden) {
+	display: flex;
+	align-items: center;
+	gap: 5px;
+}
+
+.color-scheme-tile-row + .color-scheme-slider-row {
+	margin-top: 6px;
+}
+
+.color-scheme-slider-label,
+.color-scheme-hint-label {
+	position: relative;
+	flex: none;
+	cursor: default;
+}
+
+/* Gray like the fields and buttons, and the same at rest, on hover and while
+   dragged. --fill (set by the script) is how far the light gray part of the
+   track goes. The handle is a 12px box, which sets how far it travels, drawn
+   as a 16px circle by its box-shadow rings, so that at either end it covers
+   the end of the track. */
+.color-scheme-slider-row input[type=range] {
+	-webkit-appearance: none;
+	appearance: none;
+	flex: 1;
+	min-width: 0;
+	height: 18px;
+	margin: 0 7px 0 4px;
+	background: transparent;
+	cursor: pointer;
+}
+
+.color-scheme-slider-row input[type=range]:focus {
+	outline: none;
+}
+
+.color-scheme-slider-row input[type=range]::-webkit-slider-runnable-track {
+	box-sizing: border-box;
+	height: 7px;
+	border: 1px solid var(--label-field-border);
+	border-radius: 3.5px;
+	background: linear-gradient(to right, #dadada var(--fill, 0%), white var(--fill, 0%));
+}
+
+.color-scheme-slider-row input[type=range]::-moz-range-track {
+	box-sizing: border-box;
+	height: 7px;
+	border: 1px solid var(--label-field-border);
+	border-radius: 3.5px;
+	background: white;
+}
+
+.color-scheme-slider-row input[type=range]::-moz-range-progress {
+	height: 5px;
+	border-radius: 3.5px 0 0 3.5px;
+	background: #dadada;
+}
+
+.color-scheme-slider-row input[type=range]::-webkit-slider-thumb {
+	-webkit-appearance: none;
+	width: 12px;
+	height: 12px;
+	margin-top: -3.5px;
+	border: none;
+	border-radius: 50%;
+	background: white;
+	box-shadow: 0 0 0 1px white, 0 0 0 2px #888;
+}
+
+.color-scheme-slider-row input[type=range]::-moz-range-thumb {
+	width: 12px;
+	height: 12px;
+	border: none;
+	border-radius: 50%;
+	background: white;
+	box-shadow: 0 0 0 1px white, 0 0 0 2px #888;
+}
+
+.color-scheme-slider-row input[type=range]:focus-visible::-webkit-slider-thumb {
+	box-shadow: 0 0 0 1px white, 0 0 0 2px #888, 0 0 0 4px var(--theme-col);
+}
+
+.color-scheme-slider-row input[type=range]:focus-visible::-moz-range-thumb {
+	box-shadow: 0 0 0 1px white, 0 0 0 2px #888, 0 0 0 4px var(--theme-col);
+}
+
+/* Presets have only the reverse button in the vibrance row, and sequential
+   and diverging presets, the range */
+.color-scheme-slider-row.preset {
+	justify-content: flex-end;
+}
+
+.color-scheme-slider-row.preset > :not(.color-scheme-icon-btn):not(.color-scheme-range-part),
+.color-scheme-slider-row.preset > .long-hue-btn,
+.color-scheme-slider-row:not(.ranged) > .color-scheme-range-part {
+	display: none;
+}
+
+/* A strip of the whole preset, shaded outside the part the tiles use */
+.color-scheme-range {
+	position: relative;
+	flex: 1;
+	min-width: 0;
+	height: 12px;
+	margin: 0 9px 0 6px;
+	cursor: pointer;
+	touch-action: none;
+}
+
+.color-scheme-range-strip {
+	position: absolute;
+	inset: 0;
+	border-radius: 2px;
+	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
+}
+
+.color-scheme-range-shade {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	background-color: rgba(255, 255, 255, 0.75);
+}
+
+.color-scheme-range-shade.left {
+	left: 0;
+}
+
+.color-scheme-range-shade.right {
+	right: 0;
+}
+
+.color-scheme-range-handle {
+	position: absolute;
+	top: -4px;
+	bottom: -4px;
+	width: 4px;
+	margin-left: -3px;
+	border: 1px solid #444;
+	border-radius: 2px;
+	background-color: white;
+	cursor: ew-resize;
+}
+
+.color-scheme-range-handle:focus-visible {
+	outline: 2px solid var(--theme-col);
+	outline-offset: 1px;
+}
+
+/* Takes an end tile of a sequential preset away, shown over the tile on hover */
+.color-scheme-tile-remove {
+	display: none;
+	position: absolute;
+	top: 2px;
+	right: 2px;
+	width: 14px;
+	height: 14px;
+	padding: 0;
+	border: none;
+	border-radius: 50%;
+	background-color: rgba(255, 255, 255, 0.85);
+	box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
+	color: #333;
+	font-size: 12px;
+	line-height: 14px;
+	text-align: center;
+	cursor: pointer;
+}
+
+.color-scheme-tile:hover > .color-scheme-tile-remove {
+	display: block;
+}
+
+.color-scheme-icon-btn {
+	position: relative;
+	flex: none;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	width: var(--label-field-height, 22px);
+	height: var(--label-field-height, 22px);
+	padding: 0;
+	border: 1px solid var(--label-field-border);
+	border-radius: var(--label-field-radius, 4px);
+	background-color: white;
+	color: var(--normal-text);
+	font: inherit;
+	cursor: pointer;
+}
+
+.label-style-row .color-scheme-icon-btn {
+	margin-right: 0;
+}
+
+.color-scheme-icon-btn:hover {
+	background-color: #f0f0f0;
+}
+
+.color-scheme-icon-btn.selected {
+	background-color: var(--lt-theme-col);
+}
+
+/* A bar under the categorical swatches in use, joined across the gaps
+   between them; diverging tiles have one under the tiles their classes use,
+   above the pin dots */
+.color-scheme-pin.used,
+.color-scheme-bar.used {
+	width: 100%;
+	height: 3px;
+	margin: 4px 0 0;
+	border-radius: 0;
+	background-color: #333;
+}
+
+.color-scheme-pin.used.joined,
+.color-scheme-bar.used.joined {
+	width: calc(100% + 3px);
+}
+
+.color-scheme-bar {
+	height: 3px;
+	margin-top: 4px;
+}
+
+.color-scheme-bar + .color-scheme-pin {
+	margin-top: 2px;
+}
+
+/* The pivot class switch, level with the select beside it */
+.color-scheme-toggle-line {
+	display: flex;
+	align-items: center;
+	height: var(--label-field-height);
+}
+
+/* Under an interpolated tile whose color was moved to fit the sRGB gamut,
+   in place of a pin dot */
+.color-scheme-pin.adjusted {
+	width: 0;
+	height: 0;
+	border-radius: 0;
+	border-left: 4px solid transparent;
+	border-right: 4px solid transparent;
+	border-bottom: 7px solid #dd5555;
+}
+
+/* In the floating toolbar's tooltip style, below the pins so as not to cover
+   the tiles. A newline in the text breaks the line. --tooltip-shift is set
+   on hover to keep the tooltip inside the window; the script reads the
+   tooltip's width, so it is sized as a border box. */
+.color-scheme-pin[data-tooltip]:hover::after,
+.color-scheme-tile[data-tooltip]:hover::after,
+.color-scheme-slider-label[data-tooltip]:hover::after,
+.color-scheme-hint-label[data-tooltip]:hover::after,
+.color-scheme-icon-btn[data-tooltip]:hover::after {
+	content: attr(data-tooltip);
+	box-sizing: border-box;
+	position: absolute;
+	top: calc(100% + 5px);
+	left: 50%;
+	transform: translateX(calc(-50% + var(--tooltip-shift, 0px)));
+	background-color: rgba(40, 40, 40, 0.92);
+	color: #fff;
+	font-size: 11px;
+	line-height: 1.3;
+	white-space: pre;
+	padding: 5px 7px;
+	border-radius: 4px;
+	pointer-events: none;
+	z-index: 1;
+}