mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-17 01:41:22 +01:00
Vignette layer (#1021)
* feat: vignette (non-editable yet) * feat: vignette style control * feat: vignette layer * feat: vignette - save styles * feat: vignette - style presets * feat: vignette - style presets * feat: vignette - style presets --------- Co-authored-by: Azgaar <azgaar.fmg@yandex.com>
This commit is contained in:
Azgaar
GitHub
parent
537abf1223
commit
24ecd1dbf7
21 changed files with 396 additions and 60 deletions
79
index.html
79
index.html
|
|
@ -359,9 +359,17 @@
|
|||
<pattern id="oceanic" width="100" height="100" patternUnits="userSpaceOnUse">
|
||||
<image id="oceanicPattern" href="./images/pattern1.png" opacity="0.2"></image>
|
||||
</pattern>
|
||||
|
||||
<mask id="vignette-mask">
|
||||
<rect x="0" y="0" width="100%" height="100%" fill="white"></rect>
|
||||
<rect id="vignette-rect" fill="black"></rect>
|
||||
</mask>
|
||||
</defs>
|
||||
<g id="viewbox"></g>
|
||||
<g id="scaleBar"></g>
|
||||
<g id="vignette" mask="url(#vignette-mask)">
|
||||
<rect x="0" y="0" width="100%" height="100%" />
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<div id="loading">
|
||||
|
|
@ -703,6 +711,15 @@
|
|||
>
|
||||
Scale Bar
|
||||
</li>
|
||||
<li
|
||||
id="toggleVignette"
|
||||
data-tip="Vignette (border fading): click to toggle. Ctrl + click to edit style"
|
||||
data-shortcut="[ (left bracket)"
|
||||
onclick="toggleVignette(event)"
|
||||
class="solid"
|
||||
>
|
||||
Vignette
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div id="viewMode" data-tip="Set view node">
|
||||
|
|
@ -785,6 +802,7 @@
|
|||
<option value="regions" selected>States</option>
|
||||
<option value="temperature">Temperature</option>
|
||||
<option value="texture">Texture</option>
|
||||
<option value="vignette">Vignette</option>
|
||||
<option value="compass">Wind Rose</option>
|
||||
<option value="zones">Zones</option>
|
||||
</select>
|
||||
|
|
@ -909,6 +927,51 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
|
||||
<tbody id="styleVignette">
|
||||
<tr data-tip="Select precreated vignette">
|
||||
<td>Preset</td>
|
||||
<td>
|
||||
<select id="styleVignettePreset"></select>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr data-tip="Vignette rectangle position (in percents)">
|
||||
<td>Position</td>
|
||||
<td style="display: flex; flex-direction: column; gap: 2px">
|
||||
<div>
|
||||
<span>x </span>
|
||||
<input id="styleVignetteX" type="number" min="0" max="100" step="0.1" style="width: 5em" />
|
||||
<span>width </span>
|
||||
<input id="styleVignetteWidth" type="number" min="0" max="100" step="0.1" style="width: 5em" />
|
||||
</div>
|
||||
<div>
|
||||
<span>y </span>
|
||||
<input id="styleVignetteY" type="number" min="0" max="100" step="0.1" style="width: 5em" />
|
||||
<span>height </span>
|
||||
<input id="styleVignetteHeight" type="number" min="0" max="100" step="0.1" style="width: 5em" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr data-tip="Set vignette X and Y radius (in percents)">
|
||||
<td>Radius</td>
|
||||
<td>
|
||||
<span>x </span>
|
||||
<input id="styleVignetteRx" type="number" min="0" max="50" style="width: 5em" />
|
||||
<span>y </span>
|
||||
<input id="styleVignetteRy" type="number" min="0" max="50" style="width: 5em" />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr data-tip="Set vignette blue propagation (in pixels)">
|
||||
<td>Blur</td>
|
||||
<td>
|
||||
<input id="styleVignetteBlur" type="range" min="0" max="400" step="1" value="50" />
|
||||
<output id="styleVignetteBlurOutput">50</output>px
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<tbody id="styleOcean">
|
||||
<tr data-tip="Select ocean pattern">
|
||||
<td>Pattern</td>
|
||||
|
|
@ -990,16 +1053,6 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
|
||||
<tbody id="styleShift">
|
||||
<tr data-tip="Shift the element by axes">
|
||||
<td>Shift by axes</td>
|
||||
<td>
|
||||
<input id="styleShiftX" type="number" data-tip="Shift by x axis in pixels" />
|
||||
<input id="styleShiftY" type="number" data-tip="Shift by y axis in pixels" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<tbody id="styleCompass">
|
||||
<tr data-tip="Set wind (compass) rose size">
|
||||
<td>Size</td>
|
||||
|
|
@ -7923,7 +7976,7 @@
|
|||
<script src="config/heightmap-templates.js"></script>
|
||||
<script src="config/precreated-heightmaps.js"></script>
|
||||
<script src="modules/heightmap-generator.js?v=1.88.00"></script>
|
||||
<script src="modules/ocean-layers.js?v=1.93.07"></script>
|
||||
<script src="modules/ocean-layers.js?v=1.95.00"></script>
|
||||
<script src="modules/river-generator.js?v=1.89.13"></script>
|
||||
<script src="modules/lakes.js"></script>
|
||||
<script src="modules/biomes.js"></script>
|
||||
|
|
@ -7984,12 +8037,12 @@
|
|||
<script defer src="modules/ui/markers-editor.js"></script>
|
||||
<script defer src="modules/ui/3d.js?v=1.94.03"></script>
|
||||
<script defer src="modules/ui/submap.js?v=1.94.03"></script>
|
||||
<script defer src="modules/ui/hotkeys.js?v=1.93.00"></script>
|
||||
<script defer src="modules/ui/hotkeys.js?v=1.95.00"></script>
|
||||
<script defer src="modules/coa-renderer.js?v=1.94.00"></script>
|
||||
<script defer src="libs/rgbquant.min.js"></script>
|
||||
<script defer src="libs/jquery.ui.touch-punch.min.js"></script>
|
||||
<script defer src="modules/io/save.js?v=1.93.02"></script>
|
||||
<script defer src="modules/io/load.js?v=1.94.05"></script>
|
||||
<script defer src="modules/io/load.js?v=1.95.00"></script>
|
||||
<script defer src="modules/io/cloud.js?v=1.94.04"></script>
|
||||
<script defer src="modules/io/export.js?v=1.94.03"></script>
|
||||
<script defer src="modules/io/formats.js"></script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue