vesium 1.0.1-beta.64 → 1.0.1-beta.68

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { computedAsync, refThrottled, tryOnScopeDispose, useElementBounding, useElementSize, useMutationObserver, watchImmediate, watchThrottled } from "@vueuse/core";
+import { computedAsync, refThrottled, tryOnScopeDispose, unrefElement, useElementBounding, useElementSize, useMutationObserver, watchImmediate, watchThrottled } from "@vueuse/core";
 import { Cartesian2, EllipsoidGeodesic, ScreenSpaceEventHandler, ScreenSpaceEventType, Viewer } from "cesium";
 import { computed, getCurrentScope, inject, markRaw, nextTick, provide, readonly, ref, shallowReactive, shallowReadonly, shallowRef, toRaw, toRef, toValue, watch, watchEffect } from "vue";
 import { cartesianToCanvasCoord, isDef, isFunction, isPromise, resolvePick, throttle, toCartesian3, tryRun } from "@vesium/shared";
@@ -101,8 +101,8 @@ function useCesiumEventListener(event, listener, options = {}) {
 		const events = Array.isArray(_event) ? _event : [_event];
 		if (events) {
 			if (events.length && isActive.value) {
-				const stopFns = events.map((event$1) => {
-					const e = toValue(event$1);
+				const stopFns = events.map((event) => {
+					const e = toValue(event);
 					return e?.addEventListener(listener, e);
 				});
 				onCleanup(() => stopFns.forEach((stop) => stop?.()));
@@ -343,49 +343,42 @@ function useElementOverlay(target, position, options = {}) {
 		}
 	});
 	const canvasBounding = useElementBounding(() => viewer.value?.canvas.parentElement);
-	const targetBounding = useElementBounding(target);
+	const targetSize = useElementSize(target, void 0, { box: "border-box" });
 	const finalOffset = computed(() => {
 		const _offset = toValue(offset);
-		let x$1 = _offset?.x ?? 0;
+		let x = _offset?.x ?? 0;
 		const _horizontal = toValue(horizontal);
-		if (_horizontal === "center") x$1 -= targetBounding.width.value / 2;
-		else if (_horizontal === "right") x$1 -= targetBounding.width.value;
-		let y$1 = _offset?.y ?? 0;
+		if (_horizontal === "center") x -= targetSize.width.value / 2;
+		else if (_horizontal === "right") x -= targetSize.width.value;
+		let y = _offset?.y ?? 0;
 		const _vertical = toValue(vertical);
-		if (_vertical === "center") y$1 -= targetBounding.height.value / 2;
-		else if (_vertical === "bottom") y$1 -= targetBounding.height.value;
+		if (_vertical === "center") y -= targetSize.height.value / 2;
+		else if (_vertical === "bottom") y -= targetSize.height.value;
 		return {
-			x: x$1,
-			y: y$1
+			x,
+			y
 		};
 	});
-	const location = computed(() => {
-		const data = {
-			x: coord.value?.x ?? 0,
-			y: coord.value?.y ?? 0
-		};
-		if (toValue(referenceWindow)) {
-			data.x += canvasBounding.x.value;
-			data.y += canvasBounding.y.value;
-		}
-		return {
-			x: finalOffset.value.x + data.x,
-			y: finalOffset.value.y + data.y
-		};
+	const x = computed(() => {
+		let v = coord.value?.x ?? 0;
+		if (toValue(referenceWindow)) v += canvasBounding.x.value;
+		return +(v + finalOffset.value.x).toFixed(1);
 	});
-	const x = computed(() => location.value.x);
-	const y = computed(() => location.value.y);
-	const style = computed(() => ({
-		left: `${x.value?.toFixed(2)}px`,
-		top: `${y.value?.toFixed(2)}px`
-	}));
+	const y = computed(() => {
+		let v = coord.value?.y ?? 0;
+		if (toValue(referenceWindow)) v += canvasBounding.y.value;
+		return +(v + finalOffset.value.y).toFixed(1);
+	});
+	const style = computed(() => `left:${x.value}px;top:${y.value}px;`);
 	watchEffect(() => {
-		const element = toValue(target);
-		if (element && toValue(options.applyStyle ?? true)) {
-			element.style?.setProperty?.("left", style.value.left);
-			element.style?.setProperty?.("top", style.value.top);
+		const applyStyle = toValue(options.applyStyle ?? true);
+		if (!applyStyle) return;
+		const element = unrefElement(target);
+		if (element && applyStyle) {
+			element.style?.setProperty?.("left", `${x.value}px`);
+			element.style?.setProperty?.("top", `${y.value}px`);
 		}
-	});
+	}, { flush: "post" });
 	return {
 		x,
 		y,
@@ -523,19 +516,19 @@ function useDrag(listener) {
 	const dragging = ref(false);
 	const viewer = useViewer();
 	const cameraLocked = ref(false);
-	watch(cameraLocked, (cameraLocked$1) => {
-		viewer.value && (viewer.value.scene.screenSpaceCameraController.enableRotate = !cameraLocked$1);
+	watch(cameraLocked, (cameraLocked) => {
+		viewer.value && (viewer.value.scene.screenSpaceCameraController.enableRotate = !cameraLocked);
 	});
 	const lockCamera = () => {
 		cameraLocked.value = true;
 	};
-	const execute = (pick$1, startPosition, endPosition) => {
+	const execute = (pick, startPosition, endPosition) => {
 		listener({
 			event: {
 				startPosition: startPosition.clone(),
 				endPosition: endPosition.clone()
 			},
-			pick: pick$1,
+			pick,
 			dragging: dragging.value,
 			lockCamera
 		});
@@ -553,10 +546,10 @@ function useDrag(listener) {
 			endPosition: endPosition.clone()
 		};
 	}, 8, false, true));
-	watch([pick, motionEvent], ([pick$1, motionEvent$1]) => {
-		if (pick$1 && motionEvent$1) {
-			const { startPosition, endPosition } = motionEvent$1;
-			dragging.value && execute(pick$1, startPosition, endPosition);
+	watch([pick, motionEvent], ([pick, motionEvent]) => {
+		if (pick && motionEvent) {
+			const { startPosition, endPosition } = motionEvent;
+			dragging.value && execute(pick, startPosition, endPosition);
 		}
 	});
 	const stopLeftUpWatch = useScreenSpaceEventHandler(ScreenSpaceEventType.LEFT_UP, (event) => {
@@ -582,13 +575,13 @@ function useDrag(listener) {
 function useHover(listener) {
 	const motionEvent = shallowRef();
 	const pick = useScenePick(() => motionEvent.value?.endPosition);
-	const execute = (pick$1, startPosition, endPosition, hovering) => {
+	const execute = (pick, startPosition, endPosition, hovering) => {
 		listener({
 			event: {
 				startPosition: startPosition.clone(),
 				endPosition: endPosition.clone()
 			},
-			pick: pick$1,
+			pick,
 			hovering
 		});
 	};
@@ -598,13 +591,13 @@ function useHover(listener) {
 			endPosition: endPosition.clone()
 		};
 	});
-	watch([pick, motionEvent], ([pick$1, motionEvent$1]) => {
-		if (pick$1 && motionEvent$1) {
-			const { startPosition, endPosition } = motionEvent$1;
-			execute(pick$1, startPosition, endPosition, true);
+	watch([pick, motionEvent], ([pick, motionEvent]) => {
+		if (pick && motionEvent) {
+			const { startPosition, endPosition } = motionEvent;
+			execute(pick, startPosition, endPosition, true);
 		}
 	});
-	watch(pick, (pick$1, prevPick) => {
+	watch(pick, (pick, prevPick) => {
 		if (prevPick && motionEvent.value) {
 			const { startPosition, endPosition } = motionEvent.value;
 			execute(prevPick, startPosition, endPosition, false);
@@ -756,13 +749,14 @@ function useGraphicEvent() {
 //#endregion
 //#region useImageryLayer/index.ts
 function useImageryLayer(data, options = {}) {
-	const { destroyOnRemove, collection, isActive = true, evaluating } = options;
+	const { destroyOnRemove, collection, isActive = true, evaluating, index } = options;
 	const result = computedAsync(() => toPromiseValue(data), [], { evaluating });
 	const viewer = useViewer();
 	watchEffect((onCleanup) => {
 		if (toValue(isActive)) {
 			const list = Array.isArray(result.value) ? [...result.value] : [result.value];
 			const _collection = collection ?? viewer.value?.imageryLayers;
+			const _index = toValue(index);
 			if (collection?.isDestroyed()) return;
 			list.forEach((item) => {
 				if (!item) {
@@ -773,7 +767,7 @@ function useImageryLayer(data, options = {}) {
 					console.warn("ImageryLayer is destroyed");
 					return;
 				}
-				_collection?.add(item);
+				_collection?.add(item, _index);
 			});
 			onCleanup(() => {
 				const destroy = toValue(destroyOnRemove);
@@ -853,9 +847,9 @@ function usePostProcessStageScope(options = {}) {
 		addEffect(instance) {
 			if (!collection.value) throw new Error("collection is not defined");
 			if (isPromise(instance)) return new Promise((resolve, reject) => {
-				instance.then((instance$1) => {
-					collection.value.add(instance$1);
-					resolve(instance$1);
+				instance.then((instance) => {
+					collection.value.add(instance);
+					resolve(instance);
 				}).catch((error) => reject(error));
 			});
 			else return collection.value.add(instance);
@@ -903,7 +897,7 @@ function usePrimitiveScope(options = {}) {
 		addEffect(instance, ...args) {
 			if (!collection.value) throw new Error("collection is not defined");
 			if (isPromise(instance)) return new Promise((resolve, reject) => {
-				instance.then((instance$1) => resolve(collection.value.add(instance$1, ...args))).catch((error) => reject(error));
+				instance.then((instance) => resolve(collection.value.add(instance, ...args))).catch((error) => reject(error));
 			});
 			else return collection.value.add(instance, ...args);
 		},