From 6cd2419f105ef3994a7c8d4a8d1794aae64c15c8 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Fri, 24 Jun 2022 15:51:10 +0300 Subject: [PATCH] feat(charts): remove on dialog close --- index.html | 4 +- modules/dynamic/editors/cultures-editor.js | 2 +- modules/dynamic/editors/religions-editor.js | 2 +- modules/dynamic/hierarchy-tree.js | 4 +- modules/dynamic/overview/charts-overview.js | 112 +++++++++++++------- modules/ui/editors.js | 18 ++-- modules/ui/tools.js | 2 +- versioning.js | 2 +- 8 files changed, 90 insertions(+), 56 deletions(-) diff --git a/index.html b/index.html index 1ff05540..06d62882 100644 --- a/index.html +++ b/index.html @@ -7822,8 +7822,8 @@ - - + + diff --git a/modules/dynamic/editors/cultures-editor.js b/modules/dynamic/editors/cultures-editor.js index 4b5bc788..b5e329ce 100644 --- a/modules/dynamic/editors/cultures-editor.js +++ b/modules/dynamic/editors/cultures-editor.js @@ -630,7 +630,7 @@ function togglePercentageMode() { async function showHierarchy() { if (customization) return; - const HeirarchyTree = await import("../hierarchy-tree.js?v=1.87.00"); + const HeirarchyTree = await import("../hierarchy-tree.js?v=1.87.01"); const getDescription = culture => { const {name, type, rural, urban} = culture; diff --git a/modules/dynamic/editors/religions-editor.js b/modules/dynamic/editors/religions-editor.js index ebd75e18..a76aec30 100644 --- a/modules/dynamic/editors/religions-editor.js +++ b/modules/dynamic/editors/religions-editor.js @@ -533,7 +533,7 @@ function togglePercentageMode() { async function showHierarchy() { if (customization) return; - const HeirarchyTree = await import("../hierarchy-tree.js?v=1.87.00"); + const HeirarchyTree = await import("../hierarchy-tree.js?v=1.87.01"); const getDescription = religion => { const {name, type, form, rural, urban} = religion; diff --git a/modules/dynamic/hierarchy-tree.js b/modules/dynamic/hierarchy-tree.js index 6cd25f0e..621f4427 100644 --- a/modules/dynamic/hierarchy-tree.js +++ b/modules/dynamic/hierarchy-tree.js @@ -26,7 +26,7 @@ let getDescription; // dataElement => string let getShape; // dataElement => string; export function open(props) { - closeDialogs(".stable"); + closeDialogs("#hierarchyTree, .stable"); dataElements = props.data; dataElements[0].origins = [null]; @@ -145,7 +145,7 @@ function appendStyleSheet() { } function insertHtml() { - const html = /* html */ `
+ const html = /* html */ `
diff --git a/modules/dynamic/overview/charts-overview.js b/modules/dynamic/overview/charts-overview.js index 3fe5464e..2842d9ce 100644 --- a/modules/dynamic/overview/charts-overview.js +++ b/modules/dynamic/overview/charts-overview.js @@ -3,35 +3,35 @@ import {rollups} from "../../../utils/functionUtils.js"; const entitiesMap = { states: { label: "State", - cellsData: pack.cells.state, + getCellsData: () => pack.cells.state, getName: nameGetter("states"), getColors: colorsGetter("states"), landOnly: true }, cultures: { label: "Culture", - cellsData: pack.cells.culture, + getCellsData: () => pack.cells.culture, getName: nameGetter("cultures"), getColors: colorsGetter("cultures"), landOnly: true }, religions: { label: "Religion", - cellsData: pack.cells.religion, + getCellsData: () => pack.cells.religion, getName: nameGetter("religions"), getColors: colorsGetter("religions"), landOnly: true }, provinces: { label: "Province", - cellsData: pack.cells.province, + getCellsData: () => pack.cells.province, getName: nameGetter("provinces"), getColors: colorsGetter("provinces"), landOnly: true }, biomes: { label: "Biome", - cellsData: pack.cells.biome, + getCellsData: () => pack.cells.biome, getName: biomeNameGetter, getColors: biomeColorsGetter, landOnly: false @@ -199,15 +199,30 @@ const plotTypeMap = { normalizedStackedBar: {offset: d3.stackOffsetExpand, formatX: value => rn(value * 100) + "%"} }; +let charts = []; // store charts data +let prevMapId = mapId; + appendStyleSheet(); insertHtml(); addListeners(); changeViewColumns(); export function open() { - const charts = byId("chartsOverview__charts").childElementCount; - if (!charts) renderChart(); - $("#chartsOverview").dialog({title: "Data Charts"}); + closeDialogs("#chartsOverview, .stable"); + + if (prevMapId !== mapId) { + charts = []; + prevMapId = mapId; + } + + if (!charts.length) addChart(); + else charts.forEach(chart => renderChart(chart)); + + $("#chartsOverview").dialog({ + title: "Data Charts", + position: {my: "center", at: "center", of: "svg"}, + close: handleClose + }); } function appendStyleSheet() { @@ -267,25 +282,25 @@ function insertHtml() { const createOption = ([value, label]) => ``; const createOptions = values => values.map(createOption).join(""); - const html = /* html */ `
+ const html = /* html */ `
- +
`; - $figure.appendChild(chart); + $figure.appendChild($chart); $figure.appendChild($caption); $chartContainer.appendChild($figure); const downloadChart = () => { const name = `${getFileName(title)}.svg`; - downloadFile(chart.outerHTML, name); + downloadFile($chart.outerHTML, name); }; const removeChart = () => { $figure.remove(); - updateDialog(); + charts = charts.filter(chart => chart.id !== id); + updateDialogPosition(); }; $figure.querySelector("button.icon-download").on("click", downloadChart); @@ -582,13 +608,19 @@ function changeViewColumns() { const columns = byId("chartsOverview__viewColumns").value; const $charts = byId("chartsOverview__charts"); $charts.style.gridTemplateColumns = `repeat(${columns}, 1fr)`; - updateDialog(); + updateDialogPosition(); } -function updateDialog() { +function updateDialogPosition() { $("#chartsOverview").dialog({position: {my: "center", at: "center", of: "svg"}}); } +function handleClose() { + const $chartContainer = byId("chartsOverview__charts"); + $chartContainer.innerHTML = ""; + $("#chartsOverview").dialog("destroy"); +} + // config const NEUTRAL_COLOR = "#ccc"; const EMPTY_NAME = "no"; diff --git a/modules/ui/editors.js b/modules/ui/editors.js index 403a77a2..d0403b0a 100644 --- a/modules/ui/editors.js +++ b/modules/ui/editors.js @@ -49,11 +49,13 @@ function unselect() { // close all dialogs except stated function closeDialogs(except = "#except") { - $(".dialog:visible") - .not(except) - .each(function () { - $(this).dialog("close"); - }); + try { + $(".dialog:visible") + .not(except) + .each(function () { + $(this).dialog("close"); + }); + } catch (error) {} } // move brush radius circle @@ -1155,7 +1157,7 @@ function confirmationDialog(options) { // add and register event listeners to clean up on editor closure function listen(element, event, handler) { element.on(event, handler); - return () => element.removeEventListener(event, handler); + return () => element.off(event, handler); } // Calls the refresh functionality on all editors currently open. @@ -1180,12 +1182,12 @@ async function editStates() { async function editCultures() { if (customization) return; - const Editor = await import("../dynamic/editors/cultures-editor.js?v=1.87.00"); + const Editor = await import("../dynamic/editors/cultures-editor.js?v=1.87.01"); Editor.open(); } async function editReligions() { if (customization) return; - const Editor = await import("../dynamic/editors/religions-editor.js?v=1.87.00"); + const Editor = await import("../dynamic/editors/religions-editor.js?v=1.87.01"); Editor.open(); } diff --git a/modules/ui/tools.js b/modules/ui/tools.js index 27678921..0d0a7f16 100644 --- a/modules/ui/tools.js +++ b/modules/ui/tools.js @@ -858,6 +858,6 @@ function viewCellDetails() { } async function overviewCharts() { - const Overview = await import("../dynamic/overview/charts-overview.js"); + const Overview = await import("../dynamic/overview/charts-overview.js?v=1.87.01"); Overview.open(); } diff --git a/versioning.js b/versioning.js index f725265a..7484bd32 100644 --- a/versioning.js +++ b/versioning.js @@ -1,7 +1,7 @@ "use strict"; // version and caching control -const version = "1.87.00"; // generator version, update each time +const version = "1.87.01"; // generator version, update each time { document.title += " v" + version;