Skip to content
This repository has been archived by the owner on Apr 25, 2023. It is now read-only.

fix: labeling hidden by marker symbol #238

Merged
merged 4 commits into from
Jun 3, 2022
Merged

fix: labeling hidden by marker symbol #238

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
89a4e08
fix: labeling hidden by marker symbol #207
nourbalaha Jun 2, 2022
03437ad
Update src/components/molecules/Visualizer/Engine/Cesium/Marker/index…
nourbalaha Jun 2, 2022
ac446f5
update
rot1024 Jun 3, 2022
6f559ea
fix: added matching deps to pixelOffset's hook
nourbalaha Jun 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions src/components/molecules/Visualizer/Engine/Cesium/Marker/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,8 +114,9 @@ const Marker: React.FC<PrimitiveProps<Property>> = ({ layer }) => {
: undefined;
}, [extrude, location, height]);

const [icon, img] = useIcon({
image,
const isStyleImage = !style || style === "image";
const [icon, imgw, imgh] = useIcon({
image: isStyleImage ? image : undefined,
imageSize,
crop,
shadow,
Expand All @@ -132,8 +133,8 @@ const Marker: React.FC<PrimitiveProps<Property>> = ({ layer }) => {

const pixelOffset = useMemo(() => {
const padding = 15;
const x = (img?.width && style == "image" ? img.width : pointSize) / 2 + padding;
const y = (img?.height && style == "image" ? img.height : pointSize) / 2 + padding;
const x = (isStyleImage ? imgw : pointSize) / 2 + padding;
const y = (isStyleImage ? imgh : pointSize) / 2 + padding;
return new Cartesian2(
labelPos.includes("left") || labelPos.includes("right")
? x * (labelPos.includes("left") ? -1 : 1)
Expand All @@ -142,7 +143,7 @@ const Marker: React.FC<PrimitiveProps<Property>> = ({ layer }) => {
? y * (labelPos.includes("top") ? -1 : 1)
: 0,
);
}, [img?.width, img?.height, style, pointSize, labelPos]);
}, [style, imgw, pointSize, imgh, labelPos]);

const e = useRef<CesiumComponentRef<CesiumEntity>>(null);
useEffect(() => {
Expand Down
41 changes: 18 additions & 23 deletions src/components/molecules/Visualizer/Engine/Cesium/common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@ const defaultImageSize = 50;
export const drawIcon = (
c: HTMLCanvasElement,
image: HTMLImageElement | undefined,
imageSize: number | undefined,
w: number,
h: number,
crop: "circle" | "rounded" | "none" = "none",
shadow = false,
shadowColor = "rgba(0, 0, 0, 0.7)",
Expand All @@ -44,14 +45,6 @@ export const drawIcon = (

ctx.save();

const w =
typeof imageSize === "number"
? Math.floor(image.width * imageSize)
: Math.min(defaultImageSize, image.width);
const h =
typeof imageSize === "number"
? Math.floor(image.height * imageSize)
: Math.floor((w / image.width) * image.height);
c.width = w + shadowBlur;
c.height = h + shadowBlur;
ctx.shadowBlur = shadowBlur;
Expand Down Expand Up @@ -103,25 +96,27 @@ export const useIcon = ({
shadowBlur?: number;
shadowOffsetX?: number;
shadowOffsetY?: number;
}): [string, HTMLImageElement | undefined] => {
}): [string, number, number] => {
const img = useImage(image);

const w = !img
? 0
: typeof imageSize === "number"
? Math.floor(img.width * imageSize)
: Math.min(defaultImageSize, img.width);
const h = !img
? 0
: typeof imageSize === "number"
? Math.floor(img.height * imageSize)
: Math.floor((w / img.width) * img.height);

const draw = useCallback(
can =>
drawIcon(
can,
img,
imageSize,
crop,
shadow,
shadowColor,
shadowBlur,
shadowOffsetX,
shadowOffsetY,
),
[crop, imageSize, img, shadow, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY],
drawIcon(can, img, w, h, crop, shadow, shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY),
[crop, h, img, shadow, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, w],
);
const canvas = useCanvas(draw);
return [canvas, img];
return [canvas, w, h];
};

export const ho = (o: "left" | "center" | "right" | undefined): HorizontalOrigin | undefined =>
Expand Down