feat: circle portraits

2 years ago · a9e8a10406
parent 889c07419e
commit a9e8a10406
5 changed files with 81 additions and 46 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -58,11 +58,11 @@
      }
    },
    "node_modules/@babel/code-frame": {
-      "version": "7.22.13",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz",
-      "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
+      "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==",
      "dependencies": {
-        "@babel/highlight": "^7.22.13",
+        "@babel/highlight": "^7.23.4",
        "chalk": "^2.4.2"
      },
      "engines": {
@ -124,12 +124,12 @@
      }
    },
    "node_modules/@babel/generator": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.0.tgz",
-      "integrity": "sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.5.tgz",
+      "integrity": "sha512-BPssCHrBD+0YrxviOa3QzpqwhNIXKEtOa2jQrm4FlmkC2apYgRnQcmPWiGZDlGxiNtltnUFolMe8497Esry+jA==",
      "dev": true,
      "dependencies": {
-        "@babel/types": "^7.23.0",
+        "@babel/types": "^7.23.5",
        "@jridgewell/gen-mapping": "^0.3.2",
        "@jridgewell/trace-mapping": "^0.3.17",
        "jsesc": "^2.5.1"
@ -261,9 +261,9 @@
      }
    },
    "node_modules/@babel/helper-string-parser": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
-      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
+      "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
      "engines": {
        "node": ">=6.9.0"
      }
@ -300,9 +300,9 @@
      }
    },
    "node_modules/@babel/highlight": {
-      "version": "7.22.20",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz",
-      "integrity": "sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz",
+      "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==",
      "dependencies": {
        "@babel/helper-validator-identifier": "^7.22.20",
        "chalk": "^2.4.2",
@ -313,9 +313,9 @@
      }
    },
    "node_modules/@babel/parser": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
-      "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.5.tgz",
+      "integrity": "sha512-hOOqoiNXrmGdFbhgCzu6GiURxUgM27Xwd/aPuu8RfHEZPBzL1Z54okAHAQjXfcQNwvrlkAmAp4SlRTZ45vlthQ==",
      "dev": true,
      "bin": {
        "parser": "bin/babel-parser.js"
@ -380,19 +380,19 @@
      }
    },
    "node_modules/@babel/traverse": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.0.tgz",
-      "integrity": "sha512-t/QaEvyIoIkwzpiZ7aoSKK8kObQYeF7T2v+dazAYCb8SXtp58zEVkWW7zAnju8FNKNdr4ScAOEDmMItbyOmEYw==",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.5.tgz",
+      "integrity": "sha512-czx7Xy5a6sapWWRx61m1Ke1Ra4vczu1mCTtJam5zRTBOonfdJ+S/B6HYmGYu3fJtr8GGET3si6IhgWVBhJ/m8w==",
      "dev": true,
      "dependencies": {
-        "@babel/code-frame": "^7.22.13",
-        "@babel/generator": "^7.23.0",
+        "@babel/code-frame": "^7.23.5",
+        "@babel/generator": "^7.23.5",
        "@babel/helper-environment-visitor": "^7.22.20",
        "@babel/helper-function-name": "^7.23.0",
        "@babel/helper-hoist-variables": "^7.22.5",
        "@babel/helper-split-export-declaration": "^7.22.6",
-        "@babel/parser": "^7.23.0",
-        "@babel/types": "^7.23.0",
+        "@babel/parser": "^7.23.5",
+        "@babel/types": "^7.23.5",
        "debug": "^4.1.0",
        "globals": "^11.1.0"
      },
@ -401,11 +401,11 @@
      }
    },
    "node_modules/@babel/types": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz",
-      "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.5.tgz",
+      "integrity": "sha512-ON5kSOJwVO6xXVRTvOI0eOnWe7VdUcIpsovGo9U/Br4Ie4UVFQTboO2cYnDhAGU6Fp+UxSiT+pMft0SMHfuq6w==",
      "dependencies": {
-        "@babel/helper-string-parser": "^7.22.5",
+        "@babel/helper-string-parser": "^7.23.4",
        "@babel/helper-validator-identifier": "^7.22.20",
        "to-fast-properties": "^2.0.0"
      },
--- a/public/markers/brusov.png
+++ b/public/markers/brusov.png
--- a/public/markers/ostrovskiy.png
+++ b/public/markers/ostrovskiy.png
--- a/public/markers/prishvin.png
+++ b/public/markers/prishvin.png
--- a/src/KartaPage.tsx
+++ b/src/KartaPage.tsx
@ -25,30 +25,65 @@ import pin from "./assets/pin.png";

 export function KartaPage() {
  const mapRef = useRef(null);
-  const [initial, setInitial] = useState(null);
-  const [articles, setArticles] = useState(null);
+  const [initial, setInitial] = useState([]);
+  const [articles, setArticles] = useState([]);
  const [search, setSearch] = useState("");
  const [selected, setSelected] = useState(-1);
  const [cursor, setCursor] = useState("grab");
  const [popupInfo, setPopupInfo] = useState(null);
  const [openedMenu, menuactions] = useDisclosure(false);

-
  const host = "https://strapi.litmusmap.ru";

+  const roundImage = (img) => {
+    const imgSize = img.width;
+    // const strokeWidth = 4;
+    // Create a canvas element
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+
+    const radius = imgSize / 2;
+    canvas.width = imgSize;
+    canvas.height = imgSize;
+
+    // Create a clipping path in the shape of a circle
+    ctx.beginPath();
+    ctx.arc(radius, radius, radius, 0, 2 * Math.PI);
+    ctx.closePath();
+    ctx.clip();
+
+    ctx.drawImage(img, 0, 0, imgSize, imgSize);
+
+    // Apply a border by drawing a circle with a larger radius and stroke it
+    // ctx.lineWidth = strokeWidth;
+    // ctx.strokeStyle = "white";
+    // ctx.stroke();
+
+    const modifiedImage = canvas.toDataURL(); // Get the modified image as a data URL
+    return modifiedImage;
+  };
+
  // Load icons
-  const handleMapLoad = (e) => {
+  const handleMapLoad = () => {
    const pinImage = new Image();
    pinImage.src = pin;
    pinImage.onload = () => mapRef.current.addImage("pin-marker", pinImage);

-    const markers = initial.map(article => ({markerName: `marker-${article.id}`, markerUrl: `${host}${article.attributes.marker.data.attributes.formats.thumbnail.url}`}));  
+    const markers = initial.map((article) => ({
+      markerName: `marker-${article.id}`,
+      markerUrl: `${host}${article.attributes.marker.data.attributes.formats.thumbnail.url}`,
+    }));
    markers.map((m) => {
-      const markerImage = new Image();
+      const markerImage = new Image(100, 100);
      markerImage.crossOrigin = "Anonymous"; // https://stackoverflow.com/questions/22097747/how-to-fix-getimagedata-error-the-canvas-has-been-tainted-by-cross-origin-data
+      markerImage.onload = () => {
+        const markerImageRounded = new Image();
+        markerImageRounded.src = roundImage(markerImage);
+        markerImageRounded.onload = () => {
+          mapRef.current.addImage(m.markerName, markerImageRounded);
+        };
+      };
      markerImage.src = m.markerUrl;
-      markerImage.onload = () =>
-        mapRef.current.addImage(m.markerName, markerImage);
    });
  };

@ -146,7 +181,11 @@ export function KartaPage() {

  return (
    <>
-      <HeaderSimple links={headerLinks.links} openedMenuKarta={openedMenu} menuactionskarta={menuactions}/>
+      <HeaderSimple
+        links={headerLinks.links}
+        openedMenuKarta={openedMenu}
+        menuactionskarta={menuactions}
+      />
      <div style={{ position: "relative" }}>
        <Map
          ref={mapRef}
@ -246,9 +285,9 @@ export function KartaPage() {
                  ["linear"],
                  ["zoom"],
                  7,
-                  0.5,
+                  0.4,
                  12,
-                  1,
+                  0.8,
                ],
              }}
              minzoom={7}
@ -264,11 +303,7 @@ export function KartaPage() {
                  : ["in", "id", ...articles.map((a) => a.id)]
              }
              layout={{
-                "icon-image": [
-                  "concat",
-                  "marker-",
-                  ["get", "id"]
-                ],
+                "icon-image": ["concat", "marker-", ["get", "id"]],
                "icon-size": [
                  "interpolate",
                  ["linear"],
@ -300,7 +335,7 @@ export function KartaPage() {
        <Paper
          shadow={"md"}
          radius={0}
-          display={!openedMenu && 'none'}
+          display={!openedMenu && "none"}
          style={{
            position: "absolute",
            top: 0,
@ -308,7 +343,7 @@ export function KartaPage() {
            right: 0,
            height: "340px",
            opacity: "95%",
-            padding: "55px 0 1rem 1rem"
+            padding: "55px 0 1rem 1rem",
          }}
          sx={{
            "@media (min-width: 60em)": {