fix: heatmap displaying position

pengx17 · Nov 17, 2021 · 8711ea3 · 8711ea3
1 parent 60b769d
commit 8711ea3
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 16 deletions.
diff --git a/src/Heatmap.tsx b/src/Heatmap.tsx
@@ -8,13 +8,13 @@ import {
 import * as React from "react";
 import CalendarHeatmap from "react-calendar-heatmap";
 import ReactTooltip from "react-tooltip";
-import { useMountedState } from "react-use";
+import { useMountedState, useWindowSize } from "react-use";
 import "./Heatmap.css";
 import {
   formatAsDashed,
   formatAsLocale,
   formatAsParam,
-  getIconPosition as getTriggerIconPosition,
+  triggerIconName,
   parseJournalDate,
   useCurrentJournalDate,
 } from "./utils";
@@ -231,10 +231,28 @@ const DateRange = ({
   return null;
 };
 
+function useIconPosition() {
+  const windowSize = useWindowSize();
+  return React.useMemo(() => {
+    let right = windowSize.width - 10;
+    let bottom = 20;
+    if (top?.document) {
+      const iconRect = top?.document
+        .querySelector(`.${triggerIconName}`)
+        ?.getBoundingClientRect();
+      if (iconRect) {
+        right = iconRect.right;
+        bottom = iconRect.bottom;
+      }
+    }
+    return { right, bottom };
+  }, [windowSize]);
+}
+
 export const Heatmap = React.forwardRef<HTMLDivElement>(({}, ref) => {
   const today = formatAsDashed(new Date());
   const [range, setRange] = React.useState<[string, string] | null>(null);
-  const { bottom, right } = getTriggerIconPosition();
+  const { bottom, right } = useIconPosition();
   return (
     <div
       ref={ref}

diff --git a/src/main.tsx b/src/main.tsx
@@ -5,7 +5,7 @@ import "virtual:windi-devtools";
 import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
-import { getDisplayDateFormat, openIconName } from "./utils";
+import { getDisplayDateFormat, triggerIconName } from "./utils";
 
 // @ts-expect-error
 const css = (t, ...args) => String.raw(t, ...args);
@@ -41,7 +41,7 @@ function main() {
   top[magicKey] = true;
 
   logseq.provideStyle(css`
-    .logseq-heatmap-trigger-icon {
+    .${triggerIconName} {
       width: 1em;
       height: 1em;
       margin: 2px 0.4em 0 0.4em;
@@ -52,10 +52,10 @@ function main() {
   `);
 
   logseq.App.registerUIItem("toolbar", {
-    key: openIconName,
+    key: "heatmap-plugin-open",
     template: `
     <a data-on-click="show">
-      <div class="logseq-heatmap-trigger-icon"></div>
+      <div class="${triggerIconName}"></div>
     </a>
   `,
   });

diff --git a/src/utils.ts b/src/utils.ts
@@ -3,15 +3,7 @@ import React, { useState } from "react";
 import { useMountedState } from "react-use";
 import { BlockEntity, PageEntity } from "@logseq/libs/dist/LSPlugin";
 
-export const openIconName = "heatmap-plugin-open";
-
-export function getIconPosition() {
-  const pluginId = logseq.baseInfo.id;
-  const el = top?.document.querySelector(
-    `div[data-injected-ui=${openIconName}-${pluginId}]`
-  );
-  return el?.getBoundingClientRect() ?? { bottom: 10, right: 10 };
-}
+export const triggerIconName = "logseq-heatmap-trigger-icon";
 
 export const useAppVisible = () => {
   const [visible, setVisible] = useState(logseq.isMainUIVisible);