backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-21 19:41:23 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: slider-input web component - Brush size

Browse source
This commit is contained in:
Azgaar 2024-08-20 01:23:05 +02:00
parent 92243bb48c
commit ce304fc5eb
9 changed files with 69 additions and 220 deletions
Download patch file Download diff file Expand all files Collapse all files

1
index.css
View file

@ -1245,7 +1245,6 @@ i.resetButton:active {
padding: 0;
height: 2px;
background: #d4d4d4;
top: -0.35em;
position: relative;
appearance: none;
-webkit-appearance: none;

145
index.html
View file

@ -4076,72 +4076,24 @@
</div>
<div id="brushesSliders" style="display: none">
<div data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" style="padding-bottom: 1px">
<div style="width: 3.2em; display: inline-block"><i>Radius:</i></div>
<input
id="brushRadius"
oninput="tip('Brush radius: '+this.value); brushRadiusNumber.value = this.value"
type="range"
min="1"
max="99"
value="25"
style="width: 13em"
/>
<input
id="brushRadiusNumber"
oninput="tip('Brush radius: '+this.value); brushRadius.value = this.value"
type="number"
min="1"
max="99"
value="25"
style="border: 1px solid #d4d4d4"
/>
<div data-tip="Change brush size. Shortcut: + to increase; – to decrease">
<slider-input id="heightmapBrushRadius" min="5" max="100" value="25">
<div style="width: 3.5em">Radius:</div>
</slider-input>
</div>
<div data-tip="Set the brush power">
<div style="width: 3.2em; display: inline-block"><i>Power:</i></div>
<input
id="brushPower"
oninput="tip('Brush power: '+this.value); brushPowerNumber.value = this.value"
type="range"
min="1"
max="10"
value="5"
style="width: 13em"
/>
<input
id="brushPowerNumber"
oninput="tip('Brush power: '+this.value); brushPower.value = this.value"
type="number"
min="1"
max="10"
value="5"
style="border: 1px solid #d4d4d4"
/>
<div data-tip="Change brush power">
<slider-input id="heightmapBrushPower" min="1" max="10" value="5">
<div style="width: 3.5em">Power:</div>
</slider-input>
</div>
</div>
<div id="lineSlider" style="display: none">
<div data-tip="Set change power">
<div style="width: 3.2em; display: inline-block"><i>Power:</i></div>
<input
id="linePower"
oninput="tip('Line power: '+this.value); linePowerNumber.value = this.value"
type="range"
min="-100"
max="100"
value="30"
style="width: 13em"
/>
<input
id="linePowerNumber"
oninput="tip('Line power: '+this.value); linePower.value = this.value"
type="number"
min="-100"
max="100"
value="30"
style="border: 1px solid #d4d4d4"
/>
<div data-tip="Change tool power. Shortcut: + to increase; – to decrease">
<slider-input id="heightmapLinePower" min="-100" max="100" value="30">
<div style="width: 3.5em">Power:</div>
</slider-input>
</div>
</div>
@ -4407,26 +4359,10 @@
class="icon-brush"
></button>
<div id="biomesManuallyButtons" style="display: none">
<label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
>Brush radius:
<input
id="biomesManuallyBrush"
oninput="tip('Brush radius: '+this.value); biomesManuallyBrushNumber.value = this.value"
type="range"
min="5"
max="99"
value="15"
style="width: 4em"
/>
<input
id="biomesManuallyBrushNumber"
oninput="tip('Brush radius: '+this.value); biomesManuallyBrush.value = this.value"
type="number"
min="5"
max="99"
value="15"
/> </label
><br />
<div data-tip="Change brush size. Shortcut: + to increase; – to decrease" style="margin-block: 0.3em">
Brush size:
<slider-input id="biomesBrush" min="5" max="100" value="15"></slider-input>
</div>
<button id="biomesManuallyApply" data-tip="Apply current assignment" class="icon-check"></button>
<button id="biomesManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
</div>
@ -4651,26 +4587,10 @@
<button id="provincesManually" data-tip="Manually re-assign provinces" class="icon-brush"></button>
<div id="provincesManuallyButtons" style="display: none">
<label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
>Brush size:
<input
id="provincesManuallyBrush"
oninput="tip('Brush size: '+this.value); provincesManuallyBrushNumber.value = this.value"
type="range"
min="5"
max="99"
value="8"
style="width: 5em"
/>
<input
id="provincesManuallyBrushNumber"
oninput="tip('Brush size: '+this.value); provincesManuallyBrush.value = this.value"
type="number"
min="5"
max="99"
value="8"
/> </label
><br />
<div data-tip="Change brush size. Shortcut: + to increase; – to decrease" style="margin-block: 0.3em">
Brush size:
<slider-input id="provincesBrush" min="5" max="100" value="8"></slider-input>
</div>
<button id="provincesManuallyApply" data-tip="Apply assignment" class="icon-check"></button>
<button id="provincesManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
</div>
@ -4959,29 +4879,10 @@
<button id="zonesManually" data-tip="Re-assign zones" class="icon-brush"></button>
<div id="zonesManuallyButtons" style="display: none">
<div>
<label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
>Brush:
<input
id="zonesBrush"
oninput="tip('Brush size: '+this.value); zonesBrushNumber.value = this.value"
type="range"
min="5"
max="50"
value="7"
style="width: 9em"
/>
<input
id="zonesBrushNumber"
oninput="tip('Brush size: '+this.value); zonesBrush.value = this.value"
type="number"
min="5"
max="50"
value="7"
/>
</label>
<div data-tip="Change brush size. Shortcut: + to increase; – to decrease" style="margin-block: 0.3em">
Brush size:
<slider-input id="zonesBrush" min="5" max="100" value="8"></slider-input>
</div>
<div>
<input id="zonesBrushLandOnly" class="checkbox" type="checkbox" checked />
<label for="zonesBrushLandOnly" class="checkbox-label"><i>Change land only</i></label>

25
modules/dynamic/editors/cultures-editor.js
View file

@ -51,24 +51,9 @@ function insertEditorHtml() {
<button id="culturesHeirarchy" data-tip="Show cultures hierarchy tree" class="icon-sitemap"></button>
<button id="culturesManually" data-tip="Manually re-assign cultures" class="icon-brush"></button>
<div id="culturesManuallyButtons" style="display: none">
<label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic">Brush size:
<input
id="culturesManuallyBrush"
oninput="tip('Brush size: '+this.value); culturesManuallyBrushNumber.value = this.value"
type="range"
min="5"
max="99"
value="15"
style="width: 7em"
/>
<input
id="culturesManuallyBrushNumber"
oninput="tip('Brush size: '+this.value); culturesManuallyBrush.value = this.value"
type="number"
min="5"
max="99"
value="15"
/> </label><br />
<div data-tip="Change brush size. Shortcut: + to increase; – to decrease" style="margin-block: 0.3em;">
<slider-input id="culturesBrush" min="5" max="100" value="15">Brush size:</slider-input>
</div>
<button id="culturesManuallyApply" data-tip="Apply assignment" class="icon-check"></button>
<button id="culturesManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
</div>
@ -718,7 +703,7 @@ function selectCultureOnMapClick() {
}
function dragCultureBrush() {
const radius = +culturesManuallyBrush.value;
const radius = +culturesBrush.value;
d3.event.on("drag", () => {
if (!d3.event.dx && !d3.event.dy) return;
@ -759,7 +744,7 @@ function changeCultureForSelection(selection) {
function moveCultureBrush() {
showMainTip();
const point = d3.mouse(this);
const radius = +culturesManuallyBrush.value;
const radius = +culturesBrush.value;
moveCircle(point[0], point[1], radius);
}

32
modules/dynamic/editors/religions-editor.js
View file

@ -26,7 +26,7 @@ function insertEditorHtml() {
<div id="religionsHeader" class="header" style="grid-template-columns: 13em 6em 7em 18em 6em 7em 6em 7em">
<div data-tip="Click to sort by religion name" class="sortable alphabetically" data-sortby="name">Religion&nbsp;</div>
<div data-tip="Click to sort by religion type" class="sortable alphabetically icon-sort-name-down" data-sortby="type">Type&nbsp;</div>
<div data-tip="Click to sort by religion form" class="sortable alphabetically hide" data-sortby="form">Form&nbsp;</div>
<div data-tip="Click to sort by religion form" class="sortable alphabetically" data-sortby="form">Form&nbsp;</div>
<div data-tip="Click to sort by supreme deity" class="sortable alphabetically hide" data-sortby="deity">Supreme Deity&nbsp;</div>
<div data-tip="Click to sort by religion area" class="sortable hide" data-sortby="area">Area&nbsp;</div>
<div data-tip="Click to sort by number of believers (religion area population)" class="sortable hide" data-sortby="population">Believers&nbsp;</div>
@ -66,25 +66,9 @@ function insertEditorHtml() {
<button id="religionsManually" data-tip="Manually re-assign religions" class="icon-brush"></button>
<div id="religionsManuallyButtons" style="display: none">
<label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic">Brush size:
<input
id="religionsManuallyBrush"
oninput="tip('Brush size: '+this.value); religionsManuallyBrushNumber.value = this.value"
type="range"
min="5"
max="99"
value="15"
style="width: 7em"
/>
<input
id="religionsManuallyBrushNumber"
oninput="tip('Brush size: '+this.value); religionsManuallyBrush.value = this.value"
type="number"
min="5"
max="99"
value="15"
/> </label
><br />
<div data-tip="Change brush size. Shortcut: + to increase; – to decrease" style="margin-block: 0.3em;">
<slider-input id="religionsBrush" min="5" max="100" value="15">Brush size:</slider-input>
</div>
<button id="religionsManuallyApply" data-tip="Apply assignment" class="icon-check"></button>
<button id="religionsManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
</div>
@ -183,7 +167,7 @@ function religionsEditorAddLines() {
<select data-tip="Religion type" class="religionType placeholder" style="width: 5em">
${getTypeOptions(r.type)}
</select>
<input data-tip="Religion form" class="religionForm placeholder hide" style="width: 6em" value="" autocorrect="off" spellcheck="false" />
<input data-tip="Religion form" class="religionForm placeholder" style="width: 6em" value="" autocorrect="off" spellcheck="false" />
<span data-tip="Click to re-generate supreme deity" class="icon-arrows-cw placeholder hide"></span>
<input data-tip="Religion supreme deity" class="religionDeity placeholder hide" style="width: 17em" value="" autocorrect="off" spellcheck="false" />
<span data-tip="Religion area" style="padding-right: 4px" class="icon-map-o hide"></span>
@ -215,7 +199,7 @@ function religionsEditorAddLines() {
<select data-tip="Religion type" class="religionType" style="width: 5em">
${getTypeOptions(r.type)}
</select>
<input data-tip="Religion form" class="religionForm hide" style="width: 6em"
<input data-tip="Religion form" class="religionForm" style="width: 6em"
value="${r.form}" autocorrect="off" spellcheck="false" />
<span data-tip="Click to re-generate supreme deity" class="icon-arrows-cw hide"></span>
<input data-tip="Religion supreme deity" class="religionDeity hide" style="width: 17em"
@ -696,7 +680,7 @@ function selectReligionOnMapClick() {
}
function dragReligionBrush() {
const radius = +byId("religionsManuallyBrushNumber").value;
const radius = +byId("religionsBrush").value;
d3.event.on("drag", () => {
if (!d3.event.dx && !d3.event.dy) return;
@ -736,7 +720,7 @@ function changeReligionForSelection(selection) {
function moveReligionBrush() {
showMainTip();
const [x, y] = d3.mouse(this);
const radius = +byId("religionsManuallyBrushNumber").value;
const radius = +byId("religionsBrush").value;
moveCircle(x, y, radius);
}

41
modules/dynamic/editors/states-editor.js
View file

@ -24,7 +24,7 @@ function insertEditorHtml() {
<div id="statesHeader" class="header" style="grid-template-columns: 11em 8em 7em 7em 6em 6em 8em 6em 7em 6em">
<div data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="name">State&nbsp;</div>
<div data-tip="Click to sort by state form name" class="sortable alphabetically" data-sortby="form">Form&nbsp;</div>
<div data-tip="Click to sort by capital name" class="sortable alphabetically hide" data-sortby="capital">Capital&nbsp;</div>
<div data-tip="Click to sort by capital name" class="sortable alphabetically" data-sortby="capital">Capital&nbsp;</div>
<div data-tip="Click to sort by state dominant culture" class="sortable alphabetically hide" data-sortby="culture">Culture&nbsp;</div>
<div data-tip="Click to sort by state burgs count" class="sortable hide" data-sortby="burgs">Burgs&nbsp;</div>
<div data-tip="Click to sort by state area" class="sortable hide icon-sort-number-down" data-sortby="area">Area&nbsp;</div>
@ -89,26 +89,9 @@ function insertEditorHtml() {
<button id="statesManually" data-tip="Manually re-assign states" class="icon-brush"></button>
<div id="statesManuallyButtons" style="display: none">
<label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
>Brush size:
<input
id="statesManuallyBrush"
oninput="tip('Brush size: '+this.value); statesManuallyBrushNumber.value = this.value"
type="range"
min="5"
max="99"
value="15"
style="width: 5em"
/>
<input
id="statesManuallyBrushNumber"
oninput="tip('Brush size: '+this.value); statesManuallyBrush.value = this.value"
type="number"
min="5"
max="99"
value="15"
/> </label
><br />
<div data-tip="Change brush size. Shortcut: + to increase; – to decrease" style="margin-block: 0.3em;">
<slider-input id="statesBrush" min="5" max="100" value="15">Brush size:</slider-input>
</div>
<button id="statesManuallyApply" data-tip="Apply assignment" class="icon-check"></button>
<button id="statesManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
</div>
@ -228,10 +211,10 @@ function statesEditorAddLines() {
<input data-tip="Neutral lands name. Click to change" class="stateName name pointer italic" value="${
s.name
}" readonly />
<svg class="coaIcon placeholder hide"></svg>
<svg class="coaIcon placeholder"></svg>
<input class="stateForm placeholder" value="none" />
<span class="icon-star-empty placeholder hide"></span>
<input class="stateCapital placeholder hide" />
<span class="icon-star-empty placeholder"></span>
<input class="stateCapital placeholder" />
<select class="stateCulture placeholder hide">${getCultureOptions(0)}</select>
<span data-tip="Click to overview neutral burgs" class="icon-dot-circled pointer hide" style="padding-right: 1px"></span>
<div data-tip="Burgs count" class="stateBurgs hide">${s.burgs}</div>
@ -267,14 +250,14 @@ function statesEditorAddLines() {
>
<fill-box fill="${s.color}"></fill-box>
<input data-tip="State name. Click to change" class="stateName name pointer" value="${s.name}" readonly />
<svg data-tip="Click to show and edit state emblem" class="coaIcon pointer hide" viewBox="0 0 200 200"><use href="#stateCOA${
<svg data-tip="Click to show and edit state emblem" class="coaIcon pointer" viewBox="0 0 200 200"><use href="#stateCOA${
s.i
}"></use></svg>
<input data-tip="State form name. Click to change" class="stateForm name pointer" value="${
s.formName
}" readonly />
<span data-tip="State capital. Click to zoom into view" class="icon-star-empty pointer hide"></span>
<input data-tip="Capital name. Click and type to rename" class="stateCapital hide" value="${capital}" autocorrect="off" spellcheck="false" />
<span data-tip="State capital. Click to zoom into view" class="icon-star-empty pointer"></span>
<input data-tip="Capital name. Click and type to rename" class="stateCapital" value="${capital}" autocorrect="off" spellcheck="false" />
<select data-tip="Dominant culture. Click to change" class="stateCulture hide">${getCultureOptions(
s.culture
)}</select>
@ -959,7 +942,7 @@ function selectStateOnMapClick() {
}
function dragStateBrush() {
const r = +statesManuallyBrush.value;
const r = +statesBrush.value;
d3.event.on("drag", () => {
if (!d3.event.dx && !d3.event.dy) return;
@ -1002,7 +985,7 @@ function changeStateForSelection(selection) {
function moveStateBrush() {
showMainTip();
const point = d3.mouse(this);
const radius = +statesManuallyBrush.value;
const radius = +statesBrush.value;
moveCircle(point[0], point[1], radius);
}

4
modules/ui/biomes-editor.js
View file

@ -383,7 +383,7 @@ function editBiomes() {
}
function dragBiomeBrush() {
const r = +biomesManuallyBrush.value;
const r = +biomesBrush.value;
d3.event.on("drag", () => {
if (!d3.event.dx && !d3.event.dy) return;
@ -425,7 +425,7 @@ function editBiomes() {
function moveBiomeBrush() {
showMainTip();
const point = d3.mouse(this);
const radius = +biomesManuallyBrush.value;
const radius = +biomesBrush.value;
moveCircle(point[0], point[1], radius);
}

8
modules/ui/heightmap-editor.js
View file

@ -136,7 +136,7 @@ function editHeightmap(options) {
return;
}
moveCircle(x, y, brushRadius.valueAsNumber, "#333");
moveCircle(x, y, heightmapBrushRadius.valueAsNumber, "#333");
}
// get user-friendly (real-world) height value from map data
@ -664,7 +664,7 @@ function editHeightmap(options) {
const fromCell = +lineCircle.attr("data-cell");
debug.selectAll("*").remove();
const power = byId("linePower").valueAsNumber;
const power = byId("heightmapLinePower").valueAsNumber;
if (power === 0) return tip("Power should not be zero", false, "error");
const heights = grid.cells.h;
@ -686,7 +686,7 @@ function editHeightmap(options) {
}
function dragBrush() {
const r = brushRadius.valueAsNumber;
const r = heightmapBrushRadius.valueAsNumber;
const [x, y] = d3.mouse(this);
const start = findGridCell(x, y, grid);
@ -704,7 +704,7 @@ function editHeightmap(options) {
}
function changeHeightForSelection(selection, start) {
const power = brushPower.valueAsNumber;
const power = heightmapBrushPower.valueAsNumber;
const interpolate = d3.interpolateRound(power, 1);
const land = changeOnlyLand.checked;

29
modules/ui/hotkeys.js
View file

@ -30,7 +30,7 @@ function handleKeyup(event) {
else if (code === "Tab") toggleOptions(event);
else if (code === "Escape") closeAllDialogs();
else if (code === "Delete") removeElementOnKey();
else if (code === "KeyO" && document.getElementById("canvas3d")) toggle3dOptions();
else if (code === "KeyO" && byId("canvas3d")) toggle3dOptions();
else if (ctrl && code === "KeyQ") toggleSaveReminder();
else if (ctrl && code === "KeyS") saveMap("machine");
else if (ctrl && code === "KeyC") saveMap("dropbox");
@ -123,24 +123,21 @@ function allowHotkeys() {
function handleSizeChange(key) {
let brush = null;
if (document.getElementById("brushRadius")?.offsetParent) brush = document.getElementById("brushRadius");
else if (document.getElementById("linePower")?.offsetParent) brush = document.getElementById("linePower");
else if (document.getElementById("biomesManuallyBrush")?.offsetParent)
brush = document.getElementById("biomesManuallyBrush");
else if (document.getElementById("statesManuallyBrush")?.offsetParent)
brush = document.getElementById("statesManuallyBrush");
else if (document.getElementById("provincesManuallyBrush")?.offsetParent)
brush = document.getElementById("provincesManuallyBrush");
else if (document.getElementById("culturesManuallyBrush")?.offsetParent)
brush = document.getElementById("culturesManuallyBrush");
else if (document.getElementById("zonesBrush")?.offsetParent) brush = document.getElementById("zonesBrush");
else if (document.getElementById("religionsManuallyBrush")?.offsetParent)
brush = document.getElementById("religionsManuallyBrush");
if (byId("heightmapBrushRadius")?.offsetParent) brush = byId("heightmapBrushRadius");
else if (byId("heightmapLinePower")?.offsetParent) brush = byId("heightmapLinePower");
else if (byId("biomesBrush")?.offsetParent) brush = byId("biomesBrush");
else if (byId("culturesBrush")?.offsetParent) brush = byId("culturesBrush");
else if (byId("statesBrush")?.offsetParent) brush = byId("statesBrush");
else if (byId("provincesBrush")?.offsetParent) brush = byId("provincesBrush");
else if (byId("religionsBrush")?.offsetParent) brush = byId("religionsBrush");
else if (byId("zonesBrush")?.offsetParent) brush = byId("zonesBrush");
if (brush) {
const change = key === "-" ? -5 : 5;
const value = minmax(+brush.value + change, +brush.min, +brush.max);
brush.value = document.getElementById(brush.id + "Number").value = value;
const min = +brush.getAttribute("min") || 5;
const max = +brush.getAttribute("max") || 100;
const value = +brush.value + change;
brush.value = minmax(value, min, max);
return;
}

4
modules/ui/provinces-editor.js
View file

@ -879,7 +879,7 @@ function editProvinces() {
}
function dragBrush() {
const r = +provincesManuallyBrush.value;
const r = +provincesBrush.value;
d3.event.on("drag", () => {
if (!d3.event.dx && !d3.event.dy) return;
@ -937,7 +937,7 @@ function editProvinces() {
function moveBrush() {
showMainTip();
const point = d3.mouse(this);
const radius = +provincesManuallyBrush.value;
const radius = +provincesBrush.value;
moveCircle(point[0], point[1], radius);
}