Skip to content

Commit

Permalink
Increase max zoom depth
Browse files Browse the repository at this point in the history
  • Loading branch information
@rosslh
rosslh committed Apr 16, 2024
1 parent a465956 commit 887bdfb
Show file tree
Hide file tree
Showing 5 changed files with 322 additions and 292 deletions.
12 changes: 6 additions & 6 deletions client/app/MandelbrotMap.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ class MandelbrotMap extends L.Map {
constructor({ htmlId: mapId }: { htmlId: string }) {
super(mapId, {
attributionControl: false,
maxZoom: 32,
zoomAnimationThreshold: 32,
maxZoom: 48,
zoomAnimationThreshold: 48,
});

this.createPool();
Expand Down Expand Up @@ -85,18 +85,18 @@ class MandelbrotMap extends L.Map {
);

config.re = re;
(<HTMLInputElement>document.querySelector("#re")).value = String(re);
(<HTMLInputElement>document.getElementById("re")).value = String(re);

config.im = im;
(<HTMLInputElement>document.querySelector("#im")).value = String(im);
(<HTMLInputElement>document.getElementById("im")).value = String(im);

config.zoom = position.z;
(<HTMLInputElement>document.querySelector("#zoom")).value = String(
(<HTMLInputElement>document.getElementById("zoom")).value = String(
position.z
);

(<HTMLAnchorElement>(
document.querySelector("#shareLink")
document.getElementById("shareLink")
)).href = `?re=${re}&im=${im}&z=${position.z}&i=${config.iterations}&e=${config.exponent}&c=${config.colorScheme}&r=${config.reverseColors}&sharing=true`;
};

Expand Down
47 changes: 22 additions & 25 deletions client/app/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ type CheckboxInput = {
hidden?: boolean;
};

export const config: MandelbrotConfig = {
const configDefaults: MandelbrotConfig = {
iterations: 200,
exponent: 2,
colorScheme: "turbo",
Expand All @@ -47,6 +47,10 @@ export const config: MandelbrotConfig = {
zoom: 3,
};

export const config: MandelbrotConfig = {
...configDefaults,
};

function handleNumberInput({
id,
map,
Expand All @@ -71,6 +75,11 @@ function handleNumberInput({
}
input.value = String(parsedValue);
config[id] = parsedValue;
if (resetView) {
config.iterations = configDefaults.iterations;
(document.getElementById("iterations") as HTMLInputElement).value =
String(configDefaults.iterations);
}
map.refresh(resetView);
}, 1000);
}
Expand Down Expand Up @@ -130,7 +139,7 @@ function handleDom(map: MandelbrotMap) {
map,
minValue: 0,
defaultValue: 3,
maxValue: 32,
maxValue: 48,
});
handleSelectInput({ id: "colorScheme", map });
handleCheckboxInput({ id: "reverseColors", map });
Expand All @@ -139,27 +148,20 @@ function handleDom(map: MandelbrotMap) {
map,
});

const refreshButton: HTMLButtonElement = document.querySelector("#refresh");
const refreshButton = document.getElementById("refresh");
refreshButton.onclick = () => map.refresh();

const fullScreenButton: HTMLButtonElement =
document.querySelector("#full-screen");
const exitFullScreenButton: HTMLButtonElement =
document.querySelector("#exit-full-screen");
const fullScreenButton = document.getElementById("full-screen");
const exitFullScreenButton = document.getElementById("exit-full-screen");
fullScreenButton.onclick = toggleFullScreen;
exitFullScreenButton.onclick = toggleFullScreen;

const resetButton: HTMLButtonElement = document.querySelector("#reset");
resetButton.onclick = () => map.refresh(true);

const hideShowControlsButton: HTMLButtonElement = document.querySelector(
"#hide-show-controls"
);
const hideShowControlsButton = document.getElementById("hide-show-controls");
hideShowControlsButton.onclick = () => {
document.body.classList.toggle("hideOverlays");
};

const saveButton: HTMLButtonElement = document.querySelector("#save-image");
const saveButton = document.getElementById("save-image");
try {
// eslint-disable-next-line no-constant-condition
if (new Blob()) {
Expand All @@ -180,10 +182,8 @@ function handleDom(map: MandelbrotMap) {
}

document.addEventListener("fullscreenchange", () => {
const fullScreenButton: HTMLButtonElement =
document.querySelector("#full-screen");
const exitFullScreenButton: HTMLButtonElement =
document.querySelector("#exit-full-screen");
const fullScreenButton = document.getElementById("full-screen");
const exitFullScreenButton = document.getElementById("exit-full-screen");
if (document.fullscreenElement) {
fullScreenButton.style.display = "none";
exitFullScreenButton.style.display = "inline-block";
Expand Down Expand Up @@ -216,9 +216,6 @@ function handleDom(map: MandelbrotMap) {
if (event.key === "f") {
toggleFullScreen();
}
if (event.key === "b") {
map.refresh(true);
}
});
}

Expand All @@ -245,21 +242,21 @@ const setConfigFromUrl = () => {

if (iterations) {
config.iterations = Number(iterations);
(<HTMLInputElement>document.querySelector("#iterations")).value =
(<HTMLInputElement>document.getElementById("iterations")).value =
iterations;
}
if (exponent) {
config.exponent = Number(exponent);
(<HTMLInputElement>document.querySelector("#exponent")).value = exponent;
(<HTMLInputElement>document.getElementById("exponent")).value = exponent;
}
if (colorScheme) {
config.colorScheme = colorScheme;
(<HTMLSelectElement>document.querySelector("#colorScheme")).value =
(<HTMLSelectElement>document.getElementById("colorScheme")).value =
colorScheme;
}
if (reverseColors) {
config.reverseColors = reverseColors === "true";
(<HTMLInputElement>document.querySelector("#reverseColors")).checked =
(<HTMLInputElement>document.getElementById("reverseColors")).checked =
config.reverseColors;
}

Expand Down
18 changes: 15 additions & 3 deletions client/css/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,17 @@ html {
}

body.hideOverlays {
#inputsWrapper,
#inputsWrapper > *:not(#hide-show-controls) {
display: none;
}

#hide-show-controls {
opacity: 0.5;
&:hover {
opacity: 1;
}
}

#attribution {
display: none;
}
Expand Down Expand Up @@ -80,7 +90,7 @@ body.hideOverlays {
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 4px;
gap: 6px;

> * {
display: block;
Expand Down Expand Up @@ -133,7 +143,6 @@ body.hideOverlays {

code {
color: #eee;
font-size: 14px;
background-color: #00000060;
padding: 4px 4px;
border-radius: 4px;
Expand Down Expand Up @@ -179,4 +188,7 @@ button#exit-full-screen {
.mobileHidden {
display: none !important;
}
.overlay {
font-size: 12px;
}
}
18 changes: 7 additions & 11 deletions client/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,11 +88,11 @@
<label for="iterations">Iterations:</label>
<input type="text" id="iterations" name="iterations" />
</div>
<div class="inputWrapper">
<div class="inputWrapper mobileHidden">
<label for="exponent">Exponent:</label>
<input type="text" id="exponent" name="exponent" />
</div>
<div class="checkboxWrapper" id="highDpiTilesWrapper">
<div class="checkboxWrapper mobileHidden">
<input type="checkbox" id="highDpiTiles" name="highDpiTiles" />
<label for="highDpiTiles">High resolution (slow)</label>
</div>
Expand Down Expand Up @@ -149,7 +149,7 @@
<label for="reverseColors">Reverse colors</label>
</div>
<div class="inputSeparator"></div>
<strong>Coordinates</strong>
<strong class="mobileHidden">Coordinates</strong>
<div class="inputWrapper">
<label for="re">Real:</label>
<input type="text" id="re" name="re" />
Expand All @@ -162,13 +162,6 @@
<label for="zoom">Zoom:</label>
<input type="text" id="zoom" name="zoom" />
</div>
<div class="inputSeparator"></div>
<button id="refresh" type="button">
<span class="shortcutHint">R</span>efresh
</button>
<button id="reset" type="button">
<span class="shortcutHint">B</span>ack to Start
</button>
<div class="inputSeparator mobileHidden"></div>
<button id="full-screen" class="mobileHidden" type="button">
<span class="shortcutHint">F</span>ull Screen
Expand All @@ -180,7 +173,10 @@
<span class="shortcutHint">S</span>ave Image
</button>
<button id="hide-show-controls" class="mobileHidden" type="button">
<span class="shortcutHint">H</span>ide Controls
<span class="shortcutHint">H</span>ide/Show Controls
</button>
<button id="refresh" class="mobileHidden" type="button">
<span class="shortcutHint">R</span>efresh
</button>
<div class="inputSeparator mobileHidden"></div>
<a
Expand Down
Loading

0 comments on commit 887bdfb

Please sign in to comment.