@mapsight/lib-ol 4.0.0

package/src/js/index.ts

@@ -0,0 +1,62 @@
+import type {Coordinate} from "ol/coordinate";
+import type {Type as GeometryType} from "ol/geom/Geometry";
+import type Image from "ol/style/Image";
+import type Style from "ol/style/Style";
+
+import type {Derivation} from "./geometry/deriveGeometriesFromBase";
+
+export type StyleLiteral = {
+	[styleKey: string]: number | boolean | string | Style | null;
+} & {
+	image?: Image | null;
+	anchor?: Array<number>;
+	size?: Array<number>;
+	imgSize?: Array<number>;
+	offset?: Array<number>;
+	color?: [number, number, number, number];
+	lineDash?: Array<number>;
+};
+
+export type UnitStyleValue = `${string}px` | `${string}%` | null;
+export type BoolishStyleValue =
+	| boolean
+	| 1
+	| 0
+	| "1"
+	| "0"
+	| "true"
+	| "false"
+	| null;
+
+export type NumberArrayStyleValue = Array<string | number> | string;
+export type NoneAble<T> = "unset" | "none" | T;
+
+export type StyleType = "circle" | "icon" | "stroke" | "fill" | "text";
+
+export type StyleValues = Record<string, {value: string | number}>;
+export type NoneAbleStyleValues = {value?: "none" | "unset"} | StyleValues;
+
+export type StyleDeclaration =
+	| NoneAbleStyleValues
+	| Partial<Record<StyleType, NoneAbleStyleValues>>;
+
+export type RootStyleDeclaration = {
+	display?: {value: "none"};
+	image?: {type: {value: "icon" | "circle"}};
+	geometry?: {value: GeometryType | Derivation};
+	zIndex?: {value: number};
+} & Partial<Record<StyleType, StyleDeclaration>>;
+
+export type GroupedRootStyleDeclaration = Record<string, RootStyleDeclaration>;
+
+export type Padding = [number, number, number, number];
+
+export type Resolution = number;
+
+export type Vertex = [Coordinate, number];
+
+export type VERTICES_FILTER = "all" | "first" | "start" | "last" | "end";
+
+export type INTERMEDIATE_FILTER = "all" | "intermediate";
+
+export type RING_FILTER = "all" | "inner" | "outer";

package/src/js/map/animateDuringTransition.ts

@@ -0,0 +1,58 @@
+/* From Modernizr */
+import type OlMap from "ol/Map";
+
+export type AnimateFunction = (deltaT: number) => void | boolean;
+
+function hasTransitionEndEvent() {
+	const el = document.createElement("fakeelement");
+	return el.style.transition !== undefined;
+}
+
+function animationLoop(render: AnimateFunction) {
+	let running = true;
+	let lastFrame = +new Date();
+
+	function loop(now: number) {
+		// stop the loop if render returned false
+		if (running) {
+			window.requestAnimationFrame(loop);
+			const deltaT = now - lastFrame;
+			if (deltaT < 160) {
+				running = render(deltaT) || running;
+			}
+			lastFrame = now;
+		}
+	}
+
+	loop(lastFrame);
+}
+
+export default function animateDuringTransition(
+	map: OlMap,
+	render: AnimateFunction,
+	maxTime = 10000,
+) {
+	const hasTransitionEvent = hasTransitionEndEvent();
+	if (!hasTransitionEvent || !window.requestAnimationFrame) {
+		return false;
+	}
+
+	const targetElement = map.getTargetElement();
+	if (!targetElement) {
+		return false;
+	}
+
+	let isTransitionRunning = true;
+	const maxTimeTimeout = setTimeout(endAnimation, maxTime);
+
+	function endAnimation() {
+		isTransitionRunning = false;
+		clearTimeout(maxTimeTimeout);
+		targetElement.removeEventListener("transitionend", endAnimation);
+	}
+
+	animationLoop((deltaT) => render(deltaT) !== false && isTransitionRunning);
+	targetElement.addEventListener("transitionend", endAnimation);
+
+	return true;
+}

package/src/js/map/canvasSizeFixer.ts

@@ -0,0 +1,46 @@
+import type OlMap from "ol/Map";
+
+/**
+ * This updates the canvas size attribute (width/height) after composition.
+ * This is used in combination with anchored viewport pattern to make panels
+ * transition into the viewport possible without the map jumping around.
+ *
+ * @param map map
+ */
+export default function canvasSizeFixer(map: OlMap) {
+	let canvases: Array<HTMLCanvasElement> = [];
+
+	function updateCanvasSize() {
+		const size = map.getSize();
+		if (!size) {
+			return;
+		}
+
+		const width = size[0] + "px";
+		const height = size[1] + "px";
+
+		canvases.forEach((canvas) => {
+			if (
+				canvas.style.width !== width ||
+				canvas.style.height !== height
+			) {
+				canvas.style.width = width;
+				canvas.style.height = height;
+			}
+		});
+	}
+
+	function updateTargetCanvases() {
+		const targetElement = map.getTargetElement();
+		if (targetElement) {
+			canvases = Array.from(
+				targetElement.querySelectorAll(".ol-viewport canvas"),
+			);
+		}
+	}
+
+	map.on("change:target", updateTargetCanvases);
+	updateTargetCanvases();
+
+	map.on("postcompose", updateCanvasSize);
+}

package/src/js/map/containsExtentWithPadding.ts

@@ -0,0 +1,17 @@
+import type OlMap from "ol/Map";
+import type {Extent} from "ol/extent";
+import {containsExtent} from "ol/extent";
+
+import type {Padding} from "../index";
+import getPaddedViewExtent from "./getPaddedViewExtent";
+
+export default function containsExtentWithPadding(
+	map: OlMap,
+	extent: Extent,
+	padding?: Padding,
+) {
+	const viewExtent = padding
+		? getPaddedViewExtent(map, padding)
+		: map.getView().calculateExtent(map.getSize());
+	return viewExtent && containsExtent(viewExtent, extent);
+}

package/src/js/map/fitToExtent.ts

@@ -0,0 +1,45 @@
+import type OlMap from "ol/Map";
+import type {FitOptions} from "ol/View";
+import type {Extent} from "ol/extent";
+
+import isFiniteExtent from "../extent/isFiniteExtent";
+import type {Padding} from "../index";
+import containsExtentWithPadding from "./containsExtentWithPadding";
+
+export type ExtendedFitOptions = FitOptions & {
+	keepZoom: boolean;
+	skipIfInView: boolean;
+};
+
+export const DEFAULT_OPTIONS: ExtendedFitOptions = {
+	duration: 300, // TODO: MAGIC NUMBER!
+	padding: [60, 100, 60, 100], // TODO: MAGIC NUMBER!
+	keepZoom: false, // TODO: Document keepZoom option!
+	maxZoom: 17, // TODO: MAGIC NUMBER!
+	skipIfInView: true, // TODO: Document skipIfInView option!
+};
+
+// TODO: Document keepZoom option!
+// TODO: Document skipIfInView option!
+export default function fitToExtent(
+	map: OlMap,
+	extent: Extent,
+	options: ExtendedFitOptions = DEFAULT_OPTIONS,
+) {
+	if (!isFiniteExtent(extent)) {
+		return;
+	}
+
+	const padding = (options.padding || [0, 0, 0, 0]) as Padding;
+
+	if (
+		options.skipIfInView === false ||
+		!containsExtentWithPadding(map, extent, padding)
+	) {
+		const view = map.getView();
+		view.fit(extent, {
+			...options,
+			maxZoom: options.keepZoom ? view.getZoom() : options.maxZoom,
+		});
+	}
+}

package/src/js/map/fitToFeature.ts

@@ -0,0 +1,29 @@
+import type Feature from "ol/Feature";
+import type OlMap from "ol/Map";
+
+import getExtent from "../feature/getExtent";
+import type {ExtendedFitOptions} from "./fitToExtent";
+import fitToExtent, {
+	DEFAULT_OPTIONS as DEFAULT_OPTIONS_BASE,
+} from "./fitToExtent";
+
+export const DEFAULT_OPTIONS = {...DEFAULT_OPTIONS_BASE};
+
+// TODO: Document keepZoom option!
+// TODO: Document skipIfInView option!
+export default function fitToFeature(
+	map: OlMap,
+	feature: Feature,
+	options: ExtendedFitOptions = DEFAULT_OPTIONS,
+) {
+	if (!feature) {
+		return;
+	}
+
+	const extent = getExtent(feature);
+	if (!extent) {
+		return;
+	}
+
+	fitToExtent(map, extent, options);
+}

package/src/js/map/fitToFeatures.ts

@@ -0,0 +1,21 @@
+import type Feature from "ol/Feature";
+import type OlMap from "ol/Map";
+
+import getExtent from "../features/getExtentForFeatures";
+import type {ExtendedFitOptions} from "./fitToExtent";
+import fitToExtent from "./fitToExtent";
+import {DEFAULT_OPTIONS as SINGLE_FEATURE_DEFAULT_OPTIONS} from "./fitToFeature";
+
+export const DEFAULT_OPTIONS = {...SINGLE_FEATURE_DEFAULT_OPTIONS};
+
+export default function fitToFeatures(
+	map: OlMap,
+	features: Array<Feature>,
+	options: ExtendedFitOptions = DEFAULT_OPTIONS,
+) {
+	if (!features.length) {
+		return;
+	}
+
+	fitToExtent(map, getExtent(features), options);
+}

package/src/js/map/getPaddedViewExtent.ts

@@ -0,0 +1,42 @@
+import type OlMap from "ol/Map";
+import * as olExtent from "ol/extent";
+
+import {ensureNonNullable} from "@mapsight/lib-js/nonNullable";
+
+import type {Padding} from "../index";
+
+export default function getPaddedViewExtent(map: OlMap, padding: Padding) {
+	const size = map.getSize();
+	if (size === undefined) {
+		return null;
+	}
+
+	// remove padding from size (pixels)
+	const [mapWidth, mapHeight] = size;
+	const [top, right, bottom, left] = padding;
+	const innerMapWith = ensureNonNullable(mapWidth) - left - right;
+	const innerMapHeight = ensureNonNullable(mapHeight) - top - bottom;
+	const innerMapSize = [innerMapWith, innerMapHeight];
+
+	// pixels -> coondinate
+	const paddedCenterPixel = [
+		left + innerMapWith / 2,
+		top + innerMapHeight / 2,
+	];
+	const innerCenterCoordinate = map.getCoordinateFromPixel(paddedCenterPixel);
+
+	const view = map.getView();
+	const resolution = view.getResolution();
+	const rotation = view.getRotation();
+
+	if (!resolution) {
+		return null;
+	}
+
+	return olExtent.getForViewAndSize(
+		innerCenterCoordinate,
+		resolution,
+		rotation,
+		innerMapSize,
+	);
+}

package/src/js/map/getVisibleLayersFromFramestate.ts

@@ -0,0 +1,14 @@
+import type {FrameState} from "ol/Map";
+import {inView as layerInView} from "ol/layer/Layer";
+
+import unique from "lodash/uniq";
+
+export default function getVisibleLayersFromFramestate(frameState: FrameState) {
+	return unique(
+		frameState.layerStatesArray
+			.filter((layerState) =>
+				layerInView(layerState, frameState.viewState),
+			)
+			.map(({layer}) => layer),
+	);
+}

package/src/js/map/updateSizeDuringTransition.ts

@@ -0,0 +1,9 @@
+import type OlMap from "ol/Map";
+
+import animateDuringTransition from "./animateDuringTransition";
+
+export default function updateSizeDuringTransition(map: OlMap) {
+	return animateDuringTransition(map, () => {
+		map.updateSize();
+	});
+}

package/src/js/map/updateSizeOnTransitionEnd.ts

@@ -0,0 +1,28 @@
+import type OlMap from "ol/Map";
+
+export default function updateSizeOnTransitionEnd(map: OlMap) {
+	let previousTargetElement: undefined | HTMLElement;
+
+	function updateSize() {
+		map.updateSize();
+	}
+
+	function addEventListener() {
+		const targetElement = map.getTargetElement();
+
+		if (previousTargetElement) {
+			previousTargetElement.removeEventListener(
+				"transitionend",
+				updateSize,
+			);
+		}
+
+		if (targetElement) {
+			targetElement.addEventListener("transitionend", updateSize);
+		}
+		previousTargetElement = targetElement;
+	}
+
+	map.on("change:target", addEventListener);
+	addEventListener();
+}

package/src/js/points/findClosestPoint.ts

@@ -0,0 +1,51 @@
+import type {Coordinate} from "ol/coordinate";
+
+import {ensureNonNullable} from "@mapsight/lib-js/nonNullable";
+
+/**
+ * Gets distance between points
+ *
+ * @param a point a
+ * @param b point b
+ * @returns distance
+ */
+function getDistance(a: Coordinate, b: Coordinate): number {
+	const [aX, aY] = a;
+	const [bX, bY] = b;
+
+	return (
+		Math.abs(ensureNonNullable(aX) - ensureNonNullable(bX)) +
+		Math.abs(ensureNonNullable(aY) - ensureNonNullable(bY))
+	);
+}
+
+export type PointsMap = Record<string, Coordinate>;
+
+type PointDistance = [string, number];
+
+/**
+ * Finds the closest point to given basePoint [x, y] in map. Returns the key.
+ *
+ * @param basePoint base point
+ * @param pointsMap map of
+ * @returns key of the closest point in given pointsMap
+ */
+export default function findClosestPoint(
+	basePoint: Coordinate,
+	pointsMap: PointsMap,
+): string | null {
+	const keys = Object.keys(pointsMap);
+	const keyDistances = keys.map(
+		(key): PointDistance => [
+			key,
+			getDistance(basePoint, ensureNonNullable(pointsMap[key])),
+		],
+	);
+	const reduceToSmallestDistance = (
+		a: PointDistance | null,
+		b: PointDistance,
+	) => (a !== null && a[1] > b[1] ? a : b);
+	const smallest = keyDistances.reduce(reduceToSmallestDistance, null);
+
+	return smallest === null ? null : smallest[0];
+}

package/src/js/points/spreadPointClusterInRadius.ts

@@ -0,0 +1,84 @@
+import type {Coordinate} from "ol/coordinate";
+
+import range from "lodash/range";
+
+import {ensureNonNullable} from "@mapsight/lib-js/nonNullable";
+
+import type {Resolution} from "../index";
+import type {PointsMap} from "./findClosestPoint";
+import findClosestPoint from "./findClosestPoint";
+
+const FULL_CIRCLE_ANGLE = 2 * Math.PI; // 360 degrees
+
+/**
+ * Calculates points evenly spread on circle around center [x, y] on the given radius.
+ *
+ * @todo consider exporting / moving into separate file
+ *
+ * @param center center coordinates
+ * @param resolution resolution
+ * @param radius radius
+ * @param number number of points
+ * @returns points on circle
+ */
+function calcPointsOnCircle(
+	center: Coordinate,
+	resolution: Resolution,
+	radius: number,
+	number: number,
+): Array<Coordinate> {
+	const [x, y] = center;
+	const spreadRadius = resolution * radius;
+	const spreadAngle = FULL_CIRCLE_ANGLE / number;
+
+	return range(number).map((j: number) => [
+		ensureNonNullable(x) + spreadRadius * Math.cos(j * spreadAngle),
+		ensureNonNullable(y) + spreadRadius * Math.sin(j * spreadAngle),
+	]);
+}
+
+/**
+ * Spreads points around coords in circle around radius
+ *
+ * @param coords center of the cluster
+ * @param resolution current resolution
+ * @param radius radius to spread in
+ * @param points points to spread
+ * @returns spread points
+ */
+export default function spreadPointClusterInRadius(
+	coords: Coordinate,
+	resolution: Resolution,
+	radius: number,
+	points: Array<Coordinate>,
+): PointsMap {
+	// Check if too close/too many icons?
+	//const sehnenLaenge = 2 * spreadRadius * Math.sin(spreadAngle / 2);
+	//console.log({sehnenLaenge: sehnenLaenge});
+
+	// We calculate ideal points on the circle with the given radius
+	const targetPoints = calcPointsOnCircle(
+		coords,
+		resolution,
+		radius,
+		points.length,
+	);
+
+	// Copy real points to object
+	const realPoints: PointsMap = points.reduce(
+		(a, v, k) => ({...a, [String(k)]: v}),
+		{},
+	);
+
+	// Find the closest real point for each point on the circle, save in object keeping the key of the real point
+	const spreadPoints: PointsMap = {};
+	for (const targetPoint of targetPoints) {
+		const key = findClosestPoint(targetPoint, realPoints);
+		if (key) {
+			delete realPoints[key];
+			spreadPoints[key] = targetPoint;
+		}
+	}
+
+	return spreadPoints;
+}

package/src/js/style/bindStyleToGeometry.ts

@@ -0,0 +1,11 @@
+import type Geometry from "ol/geom/Geometry";
+import type Style from "ol/style/Style";
+
+export default function bindStyleToGeometry(
+	baseStyle: Style,
+	geometry: Geometry,
+) {
+	const style = baseStyle.clone();
+	style.setGeometry(geometry);
+	return style;
+}