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

Commit

Permalink
fix: labeling hidden by marker symbol (#238)
Browse files Browse the repository at this point in the history 
* fix: labeling hidden by marker symbol #207

* Update src/components/molecules/Visualizer/Engine/Cesium/Marker/index.tsx

Co-authored-by: rot1024 <aayhrot@gmail.com>

* update

* fix: added matching deps to pixelOffset's hook

Co-authored-by: rot1024 <aayhrot@gmail.com>
  • Loading branch information
@nourbalaha @rot1024
nourbalaha and rot1024 committed Jun 3, 2022
1 parent 647cf8e commit 99c378d
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 28 deletions.
11 changes: 6 additions & 5 deletions src/components/molecules/Visualizer/Engine/Cesium/Marker/index.tsx
View file
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]);
}, [isStyleImage, 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
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

0 comments on commit 99c378d

Please sign in to comment.