From ec6285a7a4665afb279f2bcfbd5ce334d4829fd4 Mon Sep 17 00:00:00 2001 From: max Date: Fri, 19 Aug 2022 23:10:43 +0300 Subject: [PATCH] refactor: draw burgs and cells --- src/layers/renderers/drawBurgs.ts | 96 +++++++++++++++++++++++++ src/layers/renderers/drawCells.ts | 7 +- src/layers/renderers/index.ts | 4 +- src/layers/toggles.ts | 4 +- src/modules/define-svg.js | 2 +- src/scripts/generation/generation.ts | 1 + src/types/globals.d.ts | 104 ++++++++++++++------------- 7 files changed, 161 insertions(+), 57 deletions(-) create mode 100644 src/layers/renderers/drawBurgs.ts diff --git a/src/layers/renderers/drawBurgs.ts b/src/layers/renderers/drawBurgs.ts new file mode 100644 index 00000000..5bb2f6d2 --- /dev/null +++ b/src/layers/renderers/drawBurgs.ts @@ -0,0 +1,96 @@ +import {rn} from "utils/numberUtils"; + +export function drawBurgs() { + // remove old data + burgIcons.selectAll("circle").remove(); + burgLabels.selectAll("text").remove(); + icons.selectAll("use").remove(); + + const validBurgs = pack.burgs.filter(burg => burg.i && !(burg as IBurg).removed) as IBurg[]; + + // capitals + const capitals = validBurgs.filter(burg => burg.capital); + const capitalIcons = burgIcons.select("#cities"); + const capitalLabels = burgLabels.select("#cities"); + const capitalSize = Number(capitalIcons.attr("size")) || 1; + const capitalAnchors = anchors.selectAll("#cities"); + const caSize = Number(capitalAnchors.attr("size")) || 2; + + capitalIcons + .selectAll("circle") + .data(capitals) + .enter() + .append("circle") + .attr("id", d => "burg" + d.i) + .attr("data-id", d => d.i) + .attr("cx", d => d.x) + .attr("cy", d => d.y) + .attr("r", capitalSize); + + capitalLabels + .selectAll("text") + .data(capitals) + .enter() + .append("text") + .attr("id", d => "burgLabel" + d.i) + .attr("data-id", d => d.i) + .attr("x", d => d.x) + .attr("y", d => d.y) + .attr("dy", `${capitalSize * -1.5}px`) + .text(d => d.name); + + capitalAnchors + .selectAll("use") + .data(capitals.filter(c => c.port)) + .enter() + .append("use") + .attr("xlink:href", "#icon-anchor") + .attr("data-id", d => d.i) + .attr("x", d => rn(d.x - caSize * 0.47, 2)) + .attr("y", d => rn(d.y - caSize * 0.47, 2)) + .attr("width", caSize) + .attr("height", caSize); + + // towns + const towns = validBurgs.filter(burg => !burg.capital); + const townIcons = burgIcons.select("#towns"); + const townLabels = burgLabels.select("#towns"); + const townSize = Number(townIcons.attr("size")) || 0.5; + const townsAnchors = anchors.selectAll("#towns"); + const taSize = Number(townsAnchors.attr("size")) || 1; + + townIcons + .selectAll("circle") + .data(towns) + .enter() + .append("circle") + .attr("id", d => "burg" + d.i) + .attr("data-id", d => d.i) + .attr("cx", d => d.x) + .attr("cy", d => d.y) + .attr("r", townSize); + + townLabels + .selectAll("text") + .data(towns) + .enter() + .append("text") + .attr("id", d => "burgLabel" + d.i) + .attr("data-id", d => d.i) + .attr("x", d => d.x) + .attr("y", d => d.y) + .attr("dy", `${townSize * -1.5}px`) + .text(d => d.name); + + townsAnchors + .selectAll("use") + .data(towns.filter(c => c.port)) + .enter() + .append("use") + .attr("xlink:href", "#icon-anchor") + .attr("data-id", d => d.i) + .attr("x", d => rn(d.x - taSize * 0.47, 2)) + .attr("y", d => rn(d.y - taSize * 0.47, 2)) + .attr("width", taSize) + .attr("height", taSize); +} diff --git a/src/layers/renderers/drawCells.ts b/src/layers/renderers/drawCells.ts index 3c3bdc18..c23c268a 100644 --- a/src/layers/renderers/drawCells.ts +++ b/src/layers/renderers/drawCells.ts @@ -1,11 +1,14 @@ import {getGridPolygon, getPackPolygon} from "utils/graphUtils"; export function drawCells() { - cells.selectAll("path").remove(); + viewbox.select("#cells").selectAll("path").remove(); const cellIds = customization === 1 ? grid.cells.i : pack.cells.i; const getPolygon = customization === 1 ? getGridPolygon : getPackPolygon; const paths = Array.from(cellIds).map(getPolygon); - cells.append("path").attr("d", "M" + paths.join("M")); + viewbox + .select("#cells") + .append("path") + .attr("d", "M" + paths.join("M")); } diff --git a/src/layers/renderers/index.ts b/src/layers/renderers/index.ts index b2abbc20..9306f861 100644 --- a/src/layers/renderers/index.ts +++ b/src/layers/renderers/index.ts @@ -2,11 +2,12 @@ import {TIME} from "config/logging"; import {drawBiomes} from "./drawBiomes"; import {drawBorders} from "./drawBorders"; +import {drawBurgs} from "./drawBurgs"; import {drawCells} from "./drawCells"; -import {drawFeatures} from "./drawFeatures"; import {drawCoordinates} from "./drawCoordinates"; import {drawCultures} from "./drawCultures"; import {drawEmblems} from "./drawEmblems"; +import {drawFeatures} from "./drawFeatures"; import {drawGrid} from "./drawGrid"; import {drawHeightmap} from "./drawHeightmap"; import {drawIce} from "./drawIce"; @@ -24,6 +25,7 @@ import {drawTemperature} from "./drawTemperature"; const layerRenderersMap = { biomes: drawBiomes, borders: drawBorders, + burgs: drawBurgs, cells: drawCells, coordinates: drawCoordinates, cultures: drawCultures, diff --git a/src/layers/toggles.ts b/src/layers/toggles.ts index 9ea1c158..6db6d431 100644 --- a/src/layers/toggles.ts +++ b/src/layers/toggles.ts @@ -156,7 +156,7 @@ function togglePopulation(event?: MouseEvent) { } function toggleCells(event?: MouseEvent) { - if (!cells.selectAll("path").size()) { + if (!viewbox.select("#cells").selectAll("path").size()) { turnLayerButtonOn("toggleCells"); renderLayer("cells"); if (isCtrlPressed(event)) editStyle("cells"); @@ -165,7 +165,7 @@ function toggleCells(event?: MouseEvent) { editStyle("cells"); return; } - cells.selectAll("path").remove(); + viewbox.select("#cells").selectAll("path").remove(); turnLayerButtonOff("toggleCells"); } } diff --git a/src/modules/define-svg.js b/src/modules/define-svg.js index 9006b702..1e7acdef 100644 --- a/src/modules/define-svg.js +++ b/src/modules/define-svg.js @@ -15,7 +15,7 @@ export function defineSvg(width, height) { texture = viewbox.append("g").attr("id", "texture"); terrs = viewbox.append("g").attr("id", "terrs"); biomes = viewbox.append("g").attr("id", "biomes"); - // cells = viewbox.append("g").attr("id", "cells"); + viewbox.append("g").attr("id", "cells"); gridOverlay = viewbox.append("g").attr("id", "gridOverlay"); coordinates = viewbox.append("g").attr("id", "coordinates"); compass = viewbox.append("g").attr("id", "compass"); diff --git a/src/scripts/generation/generation.ts b/src/scripts/generation/generation.ts index ffbfb2cf..6983f43a 100644 --- a/src/scripts/generation/generation.ts +++ b/src/scripts/generation/generation.ts @@ -67,6 +67,7 @@ async function generate(options?: IGenerationOptions) { renderLayer("heightmap"); renderLayer("rivers"); // renderLayer("biomes"); + renderLayer("burgs"); renderLayer("routes"); WARN && console.warn(`TOTAL: ${rn((performance.now() - timeStart) / 1000, 2)}s`); diff --git a/src/types/globals.d.ts b/src/types/globals.d.ts index a2efe7ec..005d054a 100644 --- a/src/types/globals.d.ts +++ b/src/types/globals.d.ts @@ -5,8 +5,6 @@ declare let seed: string; declare let mapId: number; declare let mapHistory: IMapHistoryEntry[]; -declare let elSelected: Selection; - declare let notes: INote[]; declare let customization: number; @@ -36,52 +34,56 @@ declare let statesNeutral: number; declare const defineSvg: (graphWidth: number, graphHeight: number) => void; -let svg: Selection; -let defs: Selection; -let viewbox: Selection; -let scaleBar: Selection; -let legend: Selection; -let ocean: Selection; -let oceanLayers: Selection; -let oceanPattern: Selection; -let lakes: Selection; -let landmass: Selection; -let texture: Selection; -let terrs: Selection; -let biomes: Selection; -// let cells: Selection; -let gridOverlay: Selection; -let coordinates: Selection; -let compass: Selection; -let rivers: Selection; -let terrain: Selection; -let relig: Selection; -let cults: Selection; -let regions: Selection; -let statesBody: Selection; -let statesHalo: Selection; -let provs: Selection; -let zones: Selection; -let borders: Selection; -let stateBorders: Selection; -let provinceBorders: Selection; -let routes: Selection; -// let roads: Selection; -// let trails: Selection; -// let searoutes: Selection; -let temperature: Selection; -let coastline: Selection; -let ice: Selection; -let prec: Selection; -let population: Selection; -let emblems: Selection; -let labels: Selection; -let icons: Selection; -let burgLabels: Selection; -let burgIcons: Selection; -let anchors: Selection; -let armies: Selection; -let markers: Selection; -let fogging: Selection; -let ruler: Selection; -let debug: Selection; +type D3Selection = d3.Selection; + +declare let elSelected: D3Selection; + +let svg: D3Selection; +let defs: D3Selection; +let viewbox: D3Selection; +let scaleBar: D3Selection; +let legend: D3Selection; +let ocean: D3Selection; +let oceanLayers: D3Selection; +let oceanPattern: D3Selection; +let lakes: D3Selection; +let landmass: D3Selection; +let texture: D3Selection; +let terrs: D3Selection; +let biomes: D3Selection; +// let cells: D3Selection; +let gridOverlay: D3Selection; +let coordinates: D3Selection; +let compass: D3Selection; +let rivers: D3Selection; +let terrain: D3Selection; +let relig: D3Selection; +let cults: D3Selection; +let regions: D3Selection; +let statesBody: D3Selection; +let statesHalo: D3Selection; +let provs: D3Selection; +let zones: D3Selection; +let borders: D3Selection; +let stateBorders: D3Selection; +let provinceBorders: D3Selection; +let routes: D3Selection; +// let roads: D3Selection; +// let trails: D3Selection; +// let searoutes: D3Selection; +let temperature: D3Selection; +let coastline: D3Selection; +let ice: D3Selection; +let prec: D3Selection; +let population: D3Selection; +let emblems: D3Selection; +let labels: D3Selection; +let icons: D3Selection; +let burgLabels: D3Selection; +let burgIcons: D3Selection; +let anchors: D3Selection; +let armies: D3Selection; +let markers: D3Selection; +let fogging: D3Selection; +let ruler: D3Selection; +let debug: D3Selection;