3d labels - draw labels as they are

This commit is contained in:
Azgaar 2021-07-17 23:32:02 +03:00
parent 14b35cf93b
commit edf728a12e
2 changed files with 13 additions and 15 deletions

View file

@ -477,9 +477,7 @@
// calculate and draw curved state labels for a list of states // calculate and draw curved state labels for a list of states
const drawStateLabels = function (list) { const drawStateLabels = function (list) {
TIME && console.time("drawStateLabels"); TIME && console.time("drawStateLabels");
const cells = pack.cells, const {cells, features, states} = pack;
features = pack.features,
states = pack.states;
const paths = []; // text paths const paths = []; // text paths
lineGen.curve(d3.curveBundle.beta(1)); lineGen.curve(d3.curveBundle.beta(1));
@ -572,8 +570,8 @@
} }
void (function drawLabels() { void (function drawLabels() {
const g = labels.select("#states"), const g = labels.select("#states");
t = defs.select("#textPaths"); const t = defs.select("#textPaths");
const displayed = layerIsOn("toggleLabels"); const displayed = layerIsOn("toggleLabels");
if (!displayed) toggleLabels(); if (!displayed) toggleLabels();
@ -602,8 +600,8 @@
.attr("id", "textPath_stateLabel" + id); .attr("id", "textPath_stateLabel" + id);
const pathLength = p[1].length > 1 ? textPath.node().getTotalLength() / letterLength : 0; // path length in letters const pathLength = p[1].length > 1 ? textPath.node().getTotalLength() / letterLength : 0; // path length in letters
let lines = [], let lines = [];
ratio = 100; let ratio = 100;
if (pathLength < s.name.length) { if (pathLength < s.name.length) {
// only short name will fit // only short name will fit
@ -622,10 +620,9 @@
// prolongate path if it's too short // prolongate path if it's too short
if (pathLength && pathLength < lines[0].length) { if (pathLength && pathLength < lines[0].length) {
const points = p[1]; const points = p[1];
const f = points[0], const f = points[0];
l = points[points.length - 1]; const l = points[points.length - 1];
const dx = l[0] - f[0], const [dx, dy] = [l[0] - f[0], l[1] - f[1]];
dy = l[1] - f[1];
const mod = Math.abs((letterLength * lines[0].length) / dx) / 2; const mod = Math.abs((letterLength * lines[0].length) / dx) / 2;
points[0] = [rn(f[0] - dx * mod), rn(f[1] - dy * mod)]; points[0] = [rn(f[0] - dx * mod), rn(f[1] - dy * mod)];
points[points.length - 1] = [rn(l[0] + dx * mod), rn(l[1] + dy * mod)]; points[points.length - 1] = [rn(l[0] + dx * mod), rn(l[1] + dy * mod)];
@ -653,8 +650,8 @@
if (lines.length < 2) return; if (lines.length < 2) return;
// check whether multilined label is generally inside the state. If no, replace with short name label // check whether multilined label is generally inside the state. If no, replace with short name label
const cs = pack.cells.state, const cs = pack.cells.state;
b = el.parentNode.getBBox(); const b = el.parentNode.getBBox();
const c1 = () => +cs[findCell(b.x, b.y)] === id; const c1 = () => +cs[findCell(b.x, b.y)] === id;
const c2 = () => +cs[findCell(b.x + b.width / 2, b.y)] === id; const c2 = () => +cs[findCell(b.x + b.width / 2, b.y)] === id;
const c3 = () => +cs[findCell(b.x + b.width, b.y)] === id; const c3 = () => +cs[findCell(b.x + b.width, b.y)] === id;

View file

@ -269,7 +269,7 @@
size: +towns.attr("data-size"), size: +towns.attr("data-size"),
color: towns.attr("fill"), color: towns.attr("fill"),
elevation: 5, elevation: 5,
quality: 20, quality: 30,
iconSize: +town_icons.attr("size"), iconSize: +town_icons.attr("size"),
iconColor: "#666", iconColor: "#666",
line: 5 - towns.attr("data-size") / 2 line: 5 - towns.attr("data-size") / 2
@ -326,7 +326,8 @@
if (state.removed) continue; if (state.removed) continue;
const [x, y, z] = get3dCoords(state.pole[0], state.pole[1]); const [x, y, z] = get3dCoords(state.pole[0], state.pole[1]);
const stateSprite = await createTextLabel({text: state.fullName, ...stateOptions}); const text = states.select("#stateLabel" + state.i)?.text() || state.name;
const stateSprite = await createTextLabel({text, ...stateOptions});
stateSprite.position.set(x, y + stateOptions.elevation, z); stateSprite.position.set(x, y + stateOptions.elevation, z);
stateSprite.size = stateOptions.size; stateSprite.size = stateOptions.size;