mapshaper 0.7.65 → 0.7.67

package/www/page.css

@@ -2021,12 +2021,24 @@ div.basemap-style-btn.active {
 	cursor: default;
 }
 
-/* Over a label's knot or anchor handle, where a drag moves the handle rather
-   than placing a label or panning the map. */
-.map-layers.label-handle {
+/* Over a selected label's text, where a drag moves the text (or the whole
+   label) rather than placing a label or panning the map. */
+.map-layers.label-text-drag {
 	cursor: move;
 }
 
+/* Over one of a selected label's control points -- a knot, its anchor, or a
+   callout handle -- which a drag moves on its own. Not the text's cursor,
+   because the two are often close together or on top of each other. */
+.map-layers.label-handle {
+	cursor: pointer;
+}
+
+/* Over a selected label's width handle, which only moves sideways. */
+.map-layers.label-resize {
+	cursor: ew-resize;
+}
+
 .map-layers.ruler-dragging {
 	cursor: grabbing;
 }
@@ -2259,6 +2271,56 @@ body.pan.panning .map-layers:not(.drawing) {
 	vector-effect: non-scaling-stroke;
 }
 
+/* A selected text block's column: the width handle's box, drawn fainter than
+   the box around the text, which is the label itself. */
+.label-cue-column {
+	fill: none;
+	stroke: #3a7ddc;
+	stroke-width: 1px;
+	stroke-dasharray: 3 3;
+	stroke-opacity: 0.6;
+	vector-effect: non-scaling-stroke;
+}
+
+/* A selected label's width and callout handles. The callout's end at the text
+   is filled, so that the two ends of the line read differently. */
+.label-cue-handle {
+	fill: #fff;
+	stroke: #3a7ddc;
+	stroke-width: 1.5px;
+	vector-effect: non-scaling-stroke;
+}
+
+.label-cue-attach {
+	fill: #3a7ddc;
+	stroke: #fff;
+	stroke-width: 1px;
+}
+
+/* The width being dragged out for a new text block: a line's height, dashed
+   like the other things the tool draws that are not yet a label. */
+.label-block-guide {
+	fill: none;
+	stroke: #3a7ddc;
+	stroke-width: 1px;
+	stroke-dasharray: 3 2;
+	vector-effect: non-scaling-stroke;
+	pointer-events: none;
+}
+
+/* The cue for a selection too large to outline label by label -- selecting a
+   whole layer to restyle it. A halo in the selection's own blue, the same
+   treatment the older styling mode uses in yellow: at that size the question
+   is which labels are in the selection, not where each one's anchor is. */
+.map-layers > svg text.label-cue-marked {
+	stroke: #3a7ddc;
+	stroke-opacity: 0.3;
+	paint-order: stroke fill;
+	stroke-width: 4px;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+}
+
 /* Transparent rather than fill:none / stroke:none, because an unpainted shape
    is not hit-testable. */
 .label-edit-hit-area {
@@ -2298,6 +2360,18 @@ body.pan.panning .map-layers:not(.drawing) {
 	vector-effect: non-scaling-stroke;
 }
 
+/* A text block's column, the width its text wraps to, behind the box around
+   the text itself. Fainter and dashed, because it is a limit rather than the
+   label: the box is what a callout meets. */
+.label-edit-column {
+	fill: none;
+	stroke: #cc6acc;
+	stroke-width: 1px;
+	stroke-dasharray: 3 3;
+	stroke-opacity: 0.6;
+	vector-effect: non-scaling-stroke;
+}
+
 .label-edit-selection {
 	fill: #cc6acc;
 	fill-opacity: 0.3;
@@ -2412,6 +2486,28 @@ body.pan.panning .map-layers:not(.drawing) {
 	fill: white;
 }
 
+/* Tooltip shown to the left of a nav button on hover. It borrows the type of
+   .nav-menu-item so the strip reads as one family, but stays a flat label --
+   no border, radius or shadow -- so it is not mistaken for the arrow menu.
+   The translucent white wash keeps it legible over dark map content. */
+.nav-btn[data-tooltip]:hover:not(.disabled)::after {
+	content: attr(data-tooltip);
+	position: absolute;
+	/* Below .nav-sub-menu, which is at -1 and lingers for a moment after the
+	   pointer leaves the arrow button: the tooltip must pass behind it. */
+	z-index: -2;
+	top: 50%;
+	right: calc(100% + 2px);
+	transform: translateY(-50%);
+	pointer-events: none;
+	background-color: rgba(255, 255, 255, 0.85);
+	color: var(--colored-text);
+	font-size: 12px;
+	line-height: 12px;
+	padding: 3px 6px 4px 6px;
+	white-space: nowrap;
+}
+
 .nav-btn.preview-toggle {
 	align-items: center;
 	box-sizing: border-box;
@@ -2498,7 +2594,7 @@ body.pan.panning .map-layers:not(.drawing) {
 	   and the button beside them are all the same height. */
 	--label-field-height: 22px;
 	--label-field-radius: 4px;
-	--label-field-border: #bbb;
+	--label-field-border: #c6c6c6;
 	/* The narrow column of a split row, wide enough for the longest caption
 	   over it -- "Letter spacing", which measures 71px -- and the same in
 	   every row of every panel, so that the field edges line up down the
@@ -2742,7 +2838,8 @@ body.pan.panning .map-layers:not(.drawing) {
 
 .label-style-row {
 	display: block;
-	margin-top: 7px;
+	margin-top: 2px;
+	margin-bottom: 5px;
 }
 
 .label-style-row span,
@@ -3113,6 +3210,13 @@ body.pan.panning .map-layers:not(.drawing) {
 	align-self: center;
 }
 
+/* A section switched off shows only its heading (see setSectionCollapsed()),
+   including the caption the Icon heading carries over its size column. */
+.label-style-panel .label-style-section.collapsed > :not(.label-style-section-title),
+.label-style-panel .label-style-section.collapsed .label-icon-size-caption {
+	display: none;
+}
+
 /* .hidden is one class and the rule above is two, so a heading told to hide
    would go on being laid out. The circle panel hides its Circles heading once
    the points are circles: the panel's title says so, and the section is the
@@ -3146,6 +3250,17 @@ body.pan.panning .map-layers:not(.drawing) {
 	overflow: hidden;
 }
 
+/* Where text blocks are wrapped (gui-label-wrap.mjs), for the same reason. The
+   wrapping <div> sets its own width, which the clipped box does not limit. */
+.label-wrap-measure {
+	position: absolute;
+	left: -10000px;
+	top: -10000px;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+}
+
 /* Closer to the heading above it than a row usually is, because that heading
    line carries this row's "Size" caption: the gap between a caption and the
    field it names is 2px everywhere else in the panel. */
@@ -3215,9 +3330,11 @@ body.pan.panning .map-layers:not(.drawing) {
 
 /* A switch, because whether the label has a symbol at all is a yes/no that the
    four shapes below it then qualify. Off is a pale track with the knob left,
-   on a dark one with the knob right. */
+   on a dark one with the knob right, and mixed -- some of the selected labels
+   on, some off -- is both halves at once with the knob over the join. */
 .label-toggle {
 	position: relative;
+	top: -1px;
 	flex: none;
 	width: 26px;
 	height: 15px;
@@ -3248,13 +3365,23 @@ body.pan.panning .map-layers:not(.drawing) {
 	left: 13px;
 }
 
+/* The hard edge is the point: a gradient stop rather than a blend, so that the
+   track reads as one half on and one half off rather than as a third colour. */
+.label-toggle.mixed {
+	background: linear-gradient(to right, #333 50%, #ccc 50%);
+}
+
+.label-toggle.mixed .label-toggle-knob {
+	left: 7.5px;
+}
+
 .label-toggle.disabled {
 	opacity: 0.45;
 	cursor: default;
 }
 
 .label-style-section-title {
-	margin-top: 11px;
+	margin-top: 8px;
 	font-weight: 600;
 	color: #333;
 }
@@ -3349,6 +3476,13 @@ body.pan.panning .map-layers:not(.drawing) {
 	border-radius: 2px;
 }
 
+/* A swatch for a selection whose colours disagree: split rather than empty,
+   because empty is how the swatch says the colour is unset. Two greys, so that
+   it cannot be read as one of the colours in the selection. */
+.label-style-panel .label-color-field .label-color-chit.mixed {
+	background-image: linear-gradient(135deg, #d9d9d9 0 50%, #8c8c8c 50% 100%);
+}
+
 .label-style-panel .label-color-field input[type="text"] {
 	flex: 1;
 	width: auto;
@@ -3648,12 +3782,30 @@ body.dragging-color-picker * {
 	transform: scale(1.4);
 }
 
-.label-align-buttons .label-panel-btn {
+.label-align-buttons .label-panel-btn,
+.label-callout-buttons .label-panel-btn {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }
 
+/* Lines like the alignment glyphs, with the arrowhead and the dot filled. */
+.label-callout-symbol {
+	display: block;
+	width: 16px;
+	height: 16px;
+	fill: none;
+	stroke: currentColor;
+	stroke-width: 1.4;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+}
+
+.label-callout-symbol .fill {
+	fill: currentColor;
+	stroke: none;
+}
+
 /* Drawn larger than the icon symbols above, which share its viewBox but not
    its proportions: three rules across the middle are ink over less than half
    of the box, where a circle or a square fills most of its own, so at the same
@@ -3761,21 +3913,35 @@ body.dragging-color-picker * {
 .contextmenu-item {
 	background-color: #fff;
 	white-space: nowrap;
-	padding: 3px 10px 4px 10px;
+	/* padding: 3px 10px 4px 10px; */
+	margin: 1px 10px;
+	padding: 2px 0;
 	cursor: pointer;
-	font-size: 13px;
+	font-size: 12px;
 	line-height: 13px;
 }
 
 .contextmenu-label {
 	color: #999;
 	white-space: nowrap;
-	padding: 4px 10px 1px 10px;
+	padding: 5px 10px 1px 10px;
 	font-size: 12px;
 	line-height: 12px;
 	margin-top: -2px;
 }
 
+/* How many labels a "select" item would select. In the grey of a menu heading
+   rather than the item's own colour: it qualifies what the item says rather
+   than being part of it. */
+.contextmenu-count {
+	font-size: 10px;
+	color: #999;
+}
+
+.contextmenu-item:hover .contextmenu-count {
+	color: #777;
+}
+
 /* color tile shown instead of a bullet in the raster color readout */
 .contextmenu-swatch {
 	display: inline-block;