mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2025-12-13 07:46:10 +00:00
useLayer Hook
This commit is contained in:
parent
76f929360e
commit
1b3aef9906
271
dependencygraph.svg
Normal file
271
dependencygraph.svg
Normal file
@ -0,0 +1,271 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
|
||||
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<!-- Generated by graphviz version 2.43.0 (0)
|
||||
-->
|
||||
<!-- Title: dependency-cruiser output Pages: 1 -->
|
||||
<svg width="581pt" height="378pt"
|
||||
viewBox="0.00 0.00 581.00 378.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 374)">
|
||||
<title>dependency-cruiser output</title>
|
||||
<polygon fill="white" stroke="transparent" points="-4,4 -4,-374 577,-374 577,4 -4,4"/>
|
||||
<g id="clust1" class="cluster">
|
||||
<title>cluster_src</title>
|
||||
<path fill="#ffffff" stroke="black" stroke-width="2" d="M20,-8C20,-8 553,-8 553,-8 559,-8 565,-14 565,-20 565,-20 565,-350 565,-350 565,-356 559,-362 553,-362 553,-362 20,-362 20,-362 14,-362 8,-356 8,-350 8,-350 8,-20 8,-20 8,-14 14,-8 20,-8"/>
|
||||
<text text-anchor="middle" x="286.5" y="-350.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">src</text>
|
||||
</g>
|
||||
<g id="clust2" class="cluster">
|
||||
<title>cluster_src/Components</title>
|
||||
<path fill="#ffffff" stroke="black" stroke-width="2" d="M94,-16C94,-16 533.5,-16 533.5,-16 539.5,-16 545.5,-22 545.5,-28 545.5,-28 545.5,-178 545.5,-178 545.5,-184 539.5,-190 533.5,-190 533.5,-190 94,-190 94,-190 88,-190 82,-184 82,-178 82,-178 82,-28 82,-28 82,-22 88,-16 94,-16"/>
|
||||
<text text-anchor="middle" x="313.75" y="-178.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Components</text>
|
||||
</g>
|
||||
<g id="clust3" class="cluster">
|
||||
<title>cluster_src/Components/Map</title>
|
||||
<path fill="#ffffff" stroke="black" stroke-width="2" d="M102,-24C102,-24 525.5,-24 525.5,-24 531.5,-24 537.5,-30 537.5,-36 537.5,-36 537.5,-152 537.5,-152 537.5,-158 531.5,-164 525.5,-164 525.5,-164 102,-164 102,-164 96,-164 90,-158 90,-152 90,-152 90,-36 90,-36 90,-30 96,-24 102,-24"/>
|
||||
<text text-anchor="middle" x="313.75" y="-152.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Map</text>
|
||||
</g>
|
||||
<g id="clust4" class="cluster">
|
||||
<title>cluster_src/Utils</title>
|
||||
<path fill="#ffffff" stroke="black" stroke-width="2" d="M440,-198C440,-198 545,-198 545,-198 551,-198 557,-204 557,-210 557,-210 557,-298 557,-298 557,-304 551,-310 545,-310 545,-310 440,-310 440,-310 434,-310 428,-304 428,-298 428,-298 428,-210 428,-210 428,-204 434,-198 440,-198"/>
|
||||
<text text-anchor="middle" x="492.5" y="-298.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Utils</text>
|
||||
</g>
|
||||
<!-- src/Components/Map/AddButton.tsx -->
|
||||
<g id="node1" class="node">
|
||||
<title>src/Components/Map/AddButton.tsx</title>
|
||||
<g id="a_node1"><a xlink:href="src/Components/Map/AddButton.tsx" xlink:title="AddButton.tsx">
|
||||
<path fill="#bbfeff" stroke="black" d="M404,-108C404,-108 334,-108 334,-108 331,-108 328,-105 328,-102 328,-102 328,-96 328,-96 328,-93 331,-90 334,-90 334,-90 404,-90 404,-90 407,-90 410,-93 410,-96 410,-96 410,-102 410,-102 410,-105 407,-108 404,-108"/>
|
||||
<text text-anchor="start" x="336" y="-96.8" font-family="Helvetica,sans-Serif" font-size="9.00">AddButton.tsx</text>
|
||||
</a>
|
||||
</g>
|
||||
</g>
|
||||
<!-- src/Utils/DynamicHeroIcon.tsx -->
|
||||
<g id="node2" class="node">
|
||||
<title>src/Utils/DynamicHeroIcon.tsx</title>
|
||||
<g id="a_node2"><a xlink:href="src/Utils/DynamicHeroIcon.tsx" xlink:title="DynamicHeroIcon.tsx">
|
||||
<path fill="#bbfeff" stroke="black" d="M543,-254C543,-254 442,-254 442,-254 439,-254 436,-251 436,-248 436,-248 436,-242 436,-242 436,-239 439,-236 442,-236 442,-236 543,-236 543,-236 546,-236 549,-239 549,-242 549,-242 549,-248 549,-248 549,-251 546,-254 543,-254"/>
|
||||
<text text-anchor="start" x="444" y="-242.8" font-family="Helvetica,sans-Serif" font-size="9.00">DynamicHeroIcon.tsx</text>
|
||||
</a>
|
||||
</g>
|
||||
</g>
|
||||
<!-- src/Components/Map/AddButton.tsx->src/Utils/DynamicHeroIcon.tsx -->
|
||||
<g id="edge1" class="edge">
|
||||
<title>src/Components/Map/AddButton.tsx->src/Utils/DynamicHeroIcon.tsx</title>
|
||||
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M410.01,-105.88C413.83,-107.95 417.28,-110.6 420,-114 436.13,-134.19 411.28,-210.3 428,-230 428.85,-231 429.76,-231.95 430.71,-232.83"/>
|
||||
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="429.81,-234.79 435.83,-236.81 432.38,-231.47 429.81,-234.79"/>
|
||||
</g>
|
||||
<!-- src/Components/Map/Layer.tsx -->
|
||||
<g id="node3" class="node">
|
||||
<title>src/Components/Map/Layer.tsx</title>
|
||||
<g id="a_node3"><a xlink:href="src/Components/Map/Layer.tsx" xlink:title="Layer.tsx">
|
||||
<path fill="#bbfeff" stroke="black" d="M287,-86C287,-86 242,-86 242,-86 239,-86 236,-83 236,-80 236,-80 236,-74 236,-74 236,-71 239,-68 242,-68 242,-68 287,-68 287,-68 290,-68 293,-71 293,-74 293,-74 293,-80 293,-80 293,-83 290,-86 287,-86"/>
|
||||
<text text-anchor="start" x="244" y="-74.8" font-family="Helvetica,sans-Serif" font-size="9.00">Layer.tsx</text>
|
||||
</a>
|
||||
</g>
|
||||
</g>
|
||||
<!-- src/Utils/MarkerIconFactory.ts -->
|
||||
<g id="node4" class="node">
|
||||
<title>src/Utils/MarkerIconFactory.ts</title>
|
||||
<g id="a_node4"><a xlink:href="src/Utils/MarkerIconFactory.ts" xlink:title="MarkerIconFactory.ts">
|
||||
<path fill="#ddfeff" stroke="black" d="M541.5,-284C541.5,-284 443.5,-284 443.5,-284 440.5,-284 437.5,-281 437.5,-278 437.5,-278 437.5,-272 437.5,-272 437.5,-269 440.5,-266 443.5,-266 443.5,-266 541.5,-266 541.5,-266 544.5,-266 547.5,-269 547.5,-272 547.5,-272 547.5,-278 547.5,-278 547.5,-281 544.5,-284 541.5,-284"/>
|
||||
<text text-anchor="start" x="445.5" y="-272.8" font-family="Helvetica,sans-Serif" font-size="9.00">MarkerIconFactory.ts</text>
|
||||
</a>
|
||||
</g>
|
||||
</g>
|
||||
<!-- src/Components/Map/Layer.tsx->src/Utils/MarkerIconFactory.ts -->
|
||||
<g id="edge2" class="edge">
|
||||
<title>src/Components/Map/Layer.tsx->src/Utils/MarkerIconFactory.ts</title>
|
||||
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M277.82,-86.28C286.32,-93.19 297.43,-103.24 305,-114 313.37,-125.88 306.77,-134.78 318,-144 353.85,-173.42 389.36,-131.18 420,-166 433.85,-181.74 414.31,-244.13 428,-260 429.33,-261.54 430.79,-262.94 432.35,-264.22"/>
|
||||
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="431.19,-265.96 437.32,-267.65 433.57,-262.51 431.19,-265.96"/>
|
||||
</g>
|
||||
<!-- src/Components/Map/Popup.tsx -->
|
||||
<g id="node5" class="node">
|
||||
<title>src/Components/Map/Popup.tsx</title>
|
||||
<g id="a_node5"><a xlink:href="src/Components/Map/Popup.tsx" xlink:title="Popup.tsx">
|
||||
<path fill="#bbfeff" stroke="black" d="M394,-64C394,-64 344,-64 344,-64 341,-64 338,-61 338,-58 338,-58 338,-52 338,-52 338,-49 341,-46 344,-46 344,-46 394,-46 394,-46 397,-46 400,-49 400,-52 400,-52 400,-58 400,-58 400,-61 397,-64 394,-64"/>
|
||||
<text text-anchor="start" x="346" y="-52.8" font-family="Helvetica,sans-Serif" font-size="9.00">Popup.tsx</text>
|
||||
</a>
|
||||
</g>
|
||||
</g>
|
||||
<!-- src/Components/Map/Layer.tsx->src/Components/Map/Popup.tsx -->
|
||||
<g id="edge3" class="edge">
|
||||
<title>src/Components/Map/Layer.tsx->src/Components/Map/Popup.tsx</title>
|
||||
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M293.24,-71.05C305.06,-68.51 319.01,-65.51 331.64,-62.8"/>
|
||||
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="332.29,-64.81 337.72,-61.5 331.41,-60.71 332.29,-64.81"/>
|
||||
</g>
|
||||
<!-- src/Components/Map/useItems.tsx -->
|
||||
<g id="node6" class="node">
|
||||
<title>src/Components/Map/useItems.tsx</title>
|
||||
<g id="a_node6"><a xlink:href="src/Components/Map/useItems.tsx" xlink:title="useItems.tsx">
|
||||
<path fill="#bbfeff" stroke="black" d="M523.5,-86C523.5,-86 461.5,-86 461.5,-86 458.5,-86 455.5,-83 455.5,-80 455.5,-80 455.5,-74 455.5,-74 455.5,-71 458.5,-68 461.5,-68 461.5,-68 523.5,-68 523.5,-68 526.5,-68 529.5,-71 529.5,-74 529.5,-74 529.5,-80 529.5,-80 529.5,-83 526.5,-86 523.5,-86"/>
|
||||
<text text-anchor="start" x="463.5" y="-74.8" font-family="Helvetica,sans-Serif" font-size="9.00">useItems.tsx</text>
|
||||
</a>
|
||||
</g>
|
||||
</g>
|
||||
<!-- src/Components/Map/Layer.tsx->src/Components/Map/useItems.tsx -->
|
||||
<g id="edge4" class="edge">
|
||||
<title>src/Components/Map/Layer.tsx->src/Components/Map/useItems.tsx</title>
|
||||
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M274.57,-67.91C284.33,-58.83 300.78,-45.46 318,-40 361.21,-26.3 375.95,-29.28 420,-40 439.42,-44.73 459.46,-55.72 473.36,-64.5"/>
|
||||
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="472.38,-66.37 478.56,-67.86 474.66,-62.84 472.38,-66.37"/>
|
||||
</g>
|
||||
<!-- src/Utils/ReplaceURLs.ts -->
|
||||
<g id="node10" class="node">
|
||||
<title>src/Utils/ReplaceURLs.ts</title>
|
||||
<g id="a_node10"><a xlink:href="src/Utils/ReplaceURLs.ts" xlink:title="ReplaceURLs.ts">
|
||||
<path fill="#ddfeff" stroke="black" d="M529.5,-224C529.5,-224 455.5,-224 455.5,-224 452.5,-224 449.5,-221 449.5,-218 449.5,-218 449.5,-212 449.5,-212 449.5,-209 452.5,-206 455.5,-206 455.5,-206 529.5,-206 529.5,-206 532.5,-206 535.5,-209 535.5,-212 535.5,-212 535.5,-218 535.5,-218 535.5,-221 532.5,-224 529.5,-224"/>
|
||||
<text text-anchor="start" x="457.5" y="-212.8" font-family="Helvetica,sans-Serif" font-size="9.00">ReplaceURLs.ts</text>
|
||||
</a>
|
||||
</g>
|
||||
</g>
|
||||
<!-- src/Components/Map/Popup.tsx->src/Utils/ReplaceURLs.ts -->
|
||||
<g id="edge8" class="edge">
|
||||
<title>src/Components/Map/Popup.tsx->src/Utils/ReplaceURLs.ts</title>
|
||||
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M395.73,-64.11C404.87,-68.66 414.31,-75.13 420,-84 440.02,-115.19 409.91,-134.65 428,-167 436.75,-182.65 452.95,-194.77 466.79,-202.92"/>
|
||||
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="465.9,-204.82 472.16,-205.95 467.97,-201.17 465.9,-204.82"/>
|
||||
</g>
|
||||
<!-- src/Components/Map/NewItemPopup.tsx -->
|
||||
<g id="node7" class="node">
|
||||
<title>src/Components/Map/NewItemPopup.tsx</title>
|
||||
<g id="a_node7"><a xlink:href="src/Components/Map/NewItemPopup.tsx" xlink:title="NewItemPopup.tsx">
|
||||
<path fill="#bbfeff" stroke="black" d="M414,-138C414,-138 324,-138 324,-138 321,-138 318,-135 318,-132 318,-132 318,-126 318,-126 318,-123 321,-120 324,-120 324,-120 414,-120 414,-120 417,-120 420,-123 420,-126 420,-126 420,-132 420,-132 420,-135 417,-138 414,-138"/>
|
||||
<text text-anchor="start" x="326" y="-126.8" font-family="Helvetica,sans-Serif" font-size="9.00">NewItemPopup.tsx</text>
|
||||
</a>
|
||||
</g>
|
||||
</g>
|
||||
<!-- src/Components/Map/NewItemPopup.tsx->src/Components/Map/useItems.tsx -->
|
||||
<g id="edge6" class="edge">
|
||||
<title>src/Components/Map/NewItemPopup.tsx->src/Components/Map/useItems.tsx</title>
|
||||
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M403.38,-119.93C408.99,-118.14 414.71,-116.14 420,-114 437.61,-106.87 456.69,-96.88 470.7,-89.08"/>
|
||||
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="471.8,-90.87 476,-86.1 469.74,-87.21 471.8,-90.87"/>
|
||||
</g>
|
||||
<!-- src/types.ts -->
|
||||
<g id="node8" class="node">
|
||||
<title>src/types.ts</title>
|
||||
<g id="a_node8"><a xlink:href="src/types.ts" xlink:title="types.ts">
|
||||
<path fill="#ddfeff" stroke="black" d="M513.5,-336C513.5,-336 471.5,-336 471.5,-336 468.5,-336 465.5,-333 465.5,-330 465.5,-330 465.5,-324 465.5,-324 465.5,-321 468.5,-318 471.5,-318 471.5,-318 513.5,-318 513.5,-318 516.5,-318 519.5,-321 519.5,-324 519.5,-324 519.5,-330 519.5,-330 519.5,-333 516.5,-336 513.5,-336"/>
|
||||
<text text-anchor="start" x="474" y="-324.8" font-family="Helvetica,sans-Serif" font-size="9.00">types.ts</text>
|
||||
</a>
|
||||
</g>
|
||||
</g>
|
||||
<!-- src/Components/Map/NewItemPopup.tsx->src/types.ts -->
|
||||
<g id="edge5" class="edge">
|
||||
<title>src/Components/Map/NewItemPopup.tsx->src/types.ts</title>
|
||||
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M416.25,-138.22C417.61,-139.35 418.87,-140.61 420,-142 431.98,-156.77 415.74,-298.46 428,-313 435.68,-322.12 447.83,-326.09 459.45,-327.62"/>
|
||||
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="459.28,-329.71 465.46,-328.21 459.69,-325.53 459.28,-329.71"/>
|
||||
</g>
|
||||
<!-- src/Components/Map/UtopiaMap.tsx -->
|
||||
<g id="node9" class="node">
|
||||
<title>src/Components/Map/UtopiaMap.tsx</title>
|
||||
<g id="a_node9"><a xlink:href="src/Components/Map/UtopiaMap.tsx" xlink:title="UtopiaMap.tsx">
|
||||
<path fill="#bbfeff" stroke="black" d="M299,-138C299,-138 230,-138 230,-138 227,-138 224,-135 224,-132 224,-132 224,-126 224,-126 224,-123 227,-120 230,-120 230,-120 299,-120 299,-120 302,-120 305,-123 305,-126 305,-126 305,-132 305,-132 305,-135 302,-138 299,-138"/>
|
||||
<text text-anchor="start" x="232" y="-126.8" font-family="Helvetica,sans-Serif" font-size="9.00">UtopiaMap.tsx</text>
|
||||
</a>
|
||||
</g>
|
||||
</g>
|
||||
<!-- src/Components/Map/NewItemPopup.tsx->src/Components/Map/UtopiaMap.tsx -->
|
||||
<g id="edge7" class="edge">
|
||||
<title>src/Components/Map/NewItemPopup.tsx->src/Components/Map/UtopiaMap.tsx</title>
|
||||
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M317.84,-133.5C317.71,-133.5 317.58,-133.5 317.44,-133.5"/>
|
||||
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="311.15,-131.35 305.13,-133.4 311.11,-135.55 311.15,-131.35"/>
|
||||
<polyline fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="311.13,-133.45 314.13,-133.47 "/>
|
||||
<ellipse fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" cx="316.53" cy="-133.49" rx="2.4" ry="2.4"/>
|
||||
</g>
|
||||
<!-- src/Components/Map/UtopiaMap.tsx->src/Components/Map/AddButton.tsx -->
|
||||
<g id="edge13" class="edge">
|
||||
<title>src/Components/Map/UtopiaMap.tsx->src/Components/Map/AddButton.tsx</title>
|
||||
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M296.25,-120C307.2,-116.8 319.64,-113.15 331.05,-109.81"/>
|
||||
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="331.75,-111.8 336.91,-108.1 330.57,-107.77 331.75,-111.8"/>
|
||||
</g>
|
||||
<!-- src/Components/Map/UtopiaMap.tsx->src/Components/Map/useItems.tsx -->
|
||||
<g id="edge15" class="edge">
|
||||
<title>src/Components/Map/UtopiaMap.tsx->src/Components/Map/useItems.tsx</title>
|
||||
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M274.8,-119.7C287.04,-107.68 308.17,-87.86 318,-84 340.98,-74.97 405.58,-74.63 449.13,-75.56"/>
|
||||
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="449.09,-77.65 455.13,-75.69 449.18,-73.46 449.09,-77.65"/>
|
||||
</g>
|
||||
<!-- src/Components/Map/UtopiaMap.tsx->src/Components/Map/NewItemPopup.tsx -->
|
||||
<g id="edge14" class="edge">
|
||||
<title>src/Components/Map/UtopiaMap.tsx->src/Components/Map/NewItemPopup.tsx</title>
|
||||
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M305.13,-124.6C305.26,-124.6 305.39,-124.6 305.52,-124.6"/>
|
||||
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="311.86,-126.65 317.84,-124.5 311.83,-122.45 311.86,-126.65"/>
|
||||
<polyline fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="311.84,-124.55 308.84,-124.57 "/>
|
||||
<ellipse fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" cx="306.44" cy="-124.59" rx="2.4" ry="2.4"/>
|
||||
</g>
|
||||
<!-- src/Components/Map/UtopiaMap.tsx->src/types.ts -->
|
||||
<g id="edge12" class="edge">
|
||||
<title>src/Components/Map/UtopiaMap.tsx->src/types.ts</title>
|
||||
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M279.79,-138.24C290.12,-144.65 304.56,-153.06 318,-159 361.58,-178.26 390.71,-154.42 420,-192 436.56,-213.26 410.44,-292.56 428,-313 435.64,-321.89 447.52,-325.87 458.95,-327.46"/>
|
||||
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="459.03,-329.58 465.22,-328.12 459.47,-325.4 459.03,-329.58"/>
|
||||
</g>
|
||||
<!-- src/index.css -->
|
||||
<g id="node12" class="node">
|
||||
<title>src/index.css</title>
|
||||
<g id="a_node12"><a xlink:href="src/index.css" xlink:title="index.css">
|
||||
<path fill="#ffffcc" stroke="black" d="M392.5,-216C392.5,-216 345.5,-216 345.5,-216 342.5,-216 339.5,-213 339.5,-210 339.5,-210 339.5,-204 339.5,-204 339.5,-201 342.5,-198 345.5,-198 345.5,-198 392.5,-198 392.5,-198 395.5,-198 398.5,-201 398.5,-204 398.5,-204 398.5,-210 398.5,-210 398.5,-213 395.5,-216 392.5,-216"/>
|
||||
<text text-anchor="start" x="347.5" y="-204.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.css</text>
|
||||
</a>
|
||||
</g>
|
||||
</g>
|
||||
<!-- src/Components/Map/UtopiaMap.tsx->src/index.css -->
|
||||
<g id="edge11" class="edge">
|
||||
<title>src/Components/Map/UtopiaMap.tsx->src/index.css</title>
|
||||
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M272.45,-138.21C281.77,-150.04 299.3,-170.66 318,-184 324.08,-188.34 331.1,-192.17 337.93,-195.4"/>
|
||||
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="337.26,-197.4 343.59,-197.97 339,-193.58 337.26,-197.4"/>
|
||||
</g>
|
||||
<!-- src/Components/Map/UtopiaMap.stories.tsx -->
|
||||
<g id="node11" class="node">
|
||||
<title>src/Components/Map/UtopiaMap.stories.tsx</title>
|
||||
<g id="a_node11"><a xlink:href="src/Components/Map/UtopiaMap.stories.tsx" xlink:title="UtopiaMap.stories.tsx">
|
||||
<path fill="#bbfeff" stroke="black" d="M205,-108C205,-108 104,-108 104,-108 101,-108 98,-105 98,-102 98,-102 98,-96 98,-96 98,-93 101,-90 104,-90 104,-90 205,-90 205,-90 208,-90 211,-93 211,-96 211,-96 211,-102 211,-102 211,-105 208,-108 205,-108"/>
|
||||
<text text-anchor="start" x="106" y="-96.8" font-family="Helvetica,sans-Serif" font-size="9.00">UtopiaMap.stories.tsx</text>
|
||||
</a>
|
||||
</g>
|
||||
</g>
|
||||
<!-- src/Components/Map/UtopiaMap.stories.tsx->src/Components/Map/Layer.tsx -->
|
||||
<g id="edge9" class="edge">
|
||||
<title>src/Components/Map/UtopiaMap.stories.tsx->src/Components/Map/Layer.tsx</title>
|
||||
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M199.74,-89.99C209.77,-87.94 220.27,-85.81 229.79,-83.87"/>
|
||||
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="230.43,-85.88 235.89,-82.62 229.59,-81.76 230.43,-85.88"/>
|
||||
</g>
|
||||
<!-- src/Components/Map/UtopiaMap.stories.tsx->src/Components/Map/UtopiaMap.tsx -->
|
||||
<g id="edge10" class="edge">
|
||||
<title>src/Components/Map/UtopiaMap.stories.tsx->src/Components/Map/UtopiaMap.tsx</title>
|
||||
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M189.27,-108.04C196.45,-109.99 203.98,-112.05 211,-114 215.92,-115.37 221.1,-116.83 226.21,-118.27"/>
|
||||
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="225.8,-120.34 232.15,-119.96 226.95,-116.3 225.8,-120.34"/>
|
||||
</g>
|
||||
<!-- src/Components/Map/index.tsx -->
|
||||
<g id="node13" class="node">
|
||||
<title>src/Components/Map/index.tsx</title>
|
||||
<g id="a_node13"><a xlink:href="src/Components/Map/index.tsx" xlink:title="index.tsx">
|
||||
<path fill="#bbfeff" stroke="black" d="M177.5,-138C177.5,-138 131.5,-138 131.5,-138 128.5,-138 125.5,-135 125.5,-132 125.5,-132 125.5,-126 125.5,-126 125.5,-123 128.5,-120 131.5,-120 131.5,-120 177.5,-120 177.5,-120 180.5,-120 183.5,-123 183.5,-126 183.5,-126 183.5,-132 183.5,-132 183.5,-135 180.5,-138 177.5,-138"/>
|
||||
<text text-anchor="start" x="133.5" y="-126.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
|
||||
</a>
|
||||
</g>
|
||||
</g>
|
||||
<!-- src/Components/Map/index.tsx->src/Components/Map/UtopiaMap.tsx -->
|
||||
<g id="edge16" class="edge">
|
||||
<title>src/Components/Map/index.tsx->src/Components/Map/UtopiaMap.tsx</title>
|
||||
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M183.59,-129C194.03,-129 206.15,-129 217.75,-129"/>
|
||||
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="217.76,-131.1 223.76,-129 217.76,-126.9 217.76,-131.1"/>
|
||||
</g>
|
||||
<!-- src/index.tsx -->
|
||||
<g id="node14" class="node">
|
||||
<title>src/index.tsx</title>
|
||||
<g id="a_node14"><a xlink:href="src/index.tsx" xlink:title="index.tsx">
|
||||
<path fill="#bbfeff" stroke="black" d="M68,-112C68,-112 22,-112 22,-112 19,-112 16,-109 16,-106 16,-106 16,-100 16,-100 16,-97 19,-94 22,-94 22,-94 68,-94 68,-94 71,-94 74,-97 74,-100 74,-100 74,-106 74,-106 74,-109 71,-112 68,-112"/>
|
||||
<text text-anchor="start" x="24" y="-100.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
|
||||
</a>
|
||||
</g>
|
||||
</g>
|
||||
<!-- src/index.tsx->src/Components/Map/Layer.tsx -->
|
||||
<g id="edge18" class="edge">
|
||||
<title>src/index.tsx->src/Components/Map/Layer.tsx</title>
|
||||
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M59.76,-93.87C66.23,-90.08 74.22,-86.09 82,-84 132.1,-70.56 192.75,-71.5 229.71,-73.89"/>
|
||||
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="229.75,-76 235.88,-74.32 230.04,-71.81 229.75,-76"/>
|
||||
</g>
|
||||
<!-- src/index.tsx->src/Components/Map/index.tsx -->
|
||||
<g id="edge17" class="edge">
|
||||
<title>src/index.tsx->src/Components/Map/index.tsx</title>
|
||||
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M74.23,-111.89C76.85,-112.63 79.47,-113.35 82,-114 94.03,-117.09 107.32,-120.01 119.14,-122.44"/>
|
||||
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="118.88,-124.53 125.18,-123.67 119.72,-120.42 118.88,-124.53"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 21 KiB |
33
package-lock.json
generated
33
package-lock.json
generated
@ -33,7 +33,6 @@
|
||||
"babel-loader": "^7.1.5",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"daisyui": "^2.19.0",
|
||||
"glob-parent": ">=5.1.2",
|
||||
"postcss": "^8.4.14",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
@ -41,8 +40,6 @@
|
||||
"rollup-plugin-postcss": "^4.0.2",
|
||||
"rollup-plugin-typescript2": "^0.32.1",
|
||||
"tailwindcss": "^3.1.5",
|
||||
"trim": ">=0.0.3",
|
||||
"trim-newlines": ">=3.0.1",
|
||||
"typescript": "^4.7.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
@ -24544,24 +24541,6 @@
|
||||
"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/trim": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/trim/-/trim-1.0.1.tgz",
|
||||
"integrity": "sha512-3JVP2YVqITUisXblCDq/Bi4P9457G/sdEamInkyvCsjbTcXLXIiG7XCb4kGMFWh6JGXesS3TKxOPtrncN/xe8w==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/trim-newlines": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-4.0.2.tgz",
|
||||
"integrity": "sha512-GJtWyq9InR/2HRiLZgpIKv+ufIKrVrvjQWEj7PxAXNc5dwbNJkqhAUoAGgzRmULAnoOM5EIpveYd3J2VeSAIew==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/trim-right": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz",
|
||||
@ -44943,18 +44922,6 @@
|
||||
"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
|
||||
"dev": true
|
||||
},
|
||||
"trim": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/trim/-/trim-1.0.1.tgz",
|
||||
"integrity": "sha512-3JVP2YVqITUisXblCDq/Bi4P9457G/sdEamInkyvCsjbTcXLXIiG7XCb4kGMFWh6JGXesS3TKxOPtrncN/xe8w==",
|
||||
"dev": true
|
||||
},
|
||||
"trim-newlines": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-4.0.2.tgz",
|
||||
"integrity": "sha512-GJtWyq9InR/2HRiLZgpIKv+ufIKrVrvjQWEj7PxAXNc5dwbNJkqhAUoAGgzRmULAnoOM5EIpveYd3J2VeSAIew==",
|
||||
"dev": true
|
||||
},
|
||||
"trim-right": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz",
|
||||
|
||||
@ -43,10 +43,7 @@
|
||||
"rollup-plugin-postcss": "^4.0.2",
|
||||
"rollup-plugin-typescript2": "^0.32.1",
|
||||
"tailwindcss": "^3.1.5",
|
||||
"typescript": "^4.7.4",
|
||||
"trim-newlines": ">=3.0.1",
|
||||
"glob-parent": ">=5.1.2",
|
||||
"trim": ">=0.0.3"
|
||||
"typescript": "^4.7.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^17.0.2",
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
import * as React from 'react'
|
||||
import { Layer } from '../../types'
|
||||
import DynamicHeroIcon from '../../Utils/DynamicHeroIcon'
|
||||
import { useLayers } from './useLayers'
|
||||
|
||||
|
||||
export interface AddButtonProps {
|
||||
layers: Layer[],
|
||||
setSelectMode: React.Dispatch<React.SetStateAction<any>>
|
||||
}
|
||||
|
||||
export default function AddButton(props: AddButtonProps) {
|
||||
|
||||
const layers = useLayers();
|
||||
return (
|
||||
<div className="dropdown dropdown-top dropdown-end dropdown-hover z-500 absolute right-5 bottom-5" >
|
||||
<button tabIndex={0} className="z-500 border-0 m-0 mt-2 p-0 w-14 h-14 cursor-pointer bg-white rounded-full hover:bg-gray-100 mouse drop-shadow-md transition ease-in duration-200 focus:outline-none">
|
||||
@ -18,16 +19,16 @@ export default function AddButton(props: AddButtonProps) {
|
||||
C15.952,9,16,9.447,16,10z" />
|
||||
</svg>
|
||||
</button>
|
||||
{props.layers &&
|
||||
{layers &&
|
||||
<ul tabIndex={0} className="dropdown-content pr-2 mb-0 list-none">
|
||||
{props.layers.map((layer) => (
|
||||
{Array.from(layers.values()).map((layer) => (
|
||||
<li key={layer.name} >
|
||||
<a>
|
||||
<div className="tooltip tooltip-left" data-tip={layer.menuText}>
|
||||
<button tabIndex={0}
|
||||
className="z-500 border-0 p-0 mb-2 mt-2 w-10 h-10 cursor-pointer rounded-full mouse drop-shadow-md transition ease-in duration-200 focus:outline-none"
|
||||
style={{ backgroundColor: layer.menuColor }}
|
||||
onClick={() => { props.setSelectMode(layer.name ) }}>
|
||||
onClick={() => { props.setSelectMode(layer) }}>
|
||||
<DynamicHeroIcon icon={layer.menuIcon} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@ import { Marker } from 'react-leaflet'
|
||||
import { Item, Tag } from '../../types'
|
||||
import MarkerIconFactory from '../../Utils/MarkerIconFactory'
|
||||
import { Popup } from './Popup'
|
||||
import { useItems } from './useItems'
|
||||
import { useLayers, useAddLayer } from './useLayers'
|
||||
|
||||
|
||||
export interface LayerProps {
|
||||
@ -32,13 +32,17 @@ export const Layer = (props: LayerProps) => {
|
||||
return tags;
|
||||
};
|
||||
|
||||
let items = useItems();
|
||||
|
||||
const addLayer = useAddLayer();
|
||||
addLayer(props);
|
||||
const layers = useLayers();
|
||||
console.log(layers);
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{
|
||||
items.map((place: Item) => {
|
||||
console.log("Items check in Layer: " + items);
|
||||
{layers.get(props.name)?.data?.map((place: Item) => {
|
||||
let tags = getTags(place);
|
||||
let color1 = "#666";
|
||||
let color2 = "RGBA(35, 31, 32, 0.2)";
|
||||
|
||||
@ -2,14 +2,14 @@ import * as React from 'react'
|
||||
import { LatLng } from 'leaflet'
|
||||
import { Popup as LeafletPopup, useMap } from 'react-leaflet'
|
||||
import { useState } from 'react'
|
||||
import { useAddItem } from './useItems'
|
||||
import { useAddItem } from './useLayers'
|
||||
import { Item } from './UtopiaMap'
|
||||
import { Geometry } from '../../types'
|
||||
import { Geometry, Layer} from '../../types'
|
||||
|
||||
export interface NewItemPopupProps {
|
||||
position: LatLng,
|
||||
layer: string,
|
||||
onSubmit: (name: string, text: string, position : LatLng, layer : string) => void
|
||||
layer: Layer,
|
||||
setNewItemPopup: React.Dispatch<React.SetStateAction<any>>
|
||||
}
|
||||
|
||||
export default function NewItemPopup(props: NewItemPopupProps) {
|
||||
@ -19,21 +19,31 @@ export default function NewItemPopup(props: NewItemPopupProps) {
|
||||
const map = useMap();
|
||||
const addItem = useAddItem();
|
||||
|
||||
const handleSubmit = async (evt: any) => {
|
||||
const handleSubmit = (evt: any) => {
|
||||
evt.preventDefault()
|
||||
addItem(new Item(123213, name, text, new Geometry(props.position.lng, props.position.lat)))
|
||||
console.log("New Item Popup is adding Item ...");
|
||||
|
||||
addItem(new Item(Math.floor(Math.random() * 1000) + 200, name, text, new Geometry(props.position.lng, props.position.lat)), props.layer)
|
||||
map.closePopup();
|
||||
props.setNewItemPopup(null);
|
||||
|
||||
}
|
||||
|
||||
console.log("popup opend");
|
||||
|
||||
|
||||
return (
|
||||
<LeafletPopup maxHeight={300} minWidth={275} maxWidth={275} autoPanPadding={[20, 5]}
|
||||
position={props.position}>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className='flex justify-center'><b className="text-xl font-bold">New {props.layer}</b></div>
|
||||
<div className='flex justify-center'><b className="text-xl font-bold">New {props.layer.name}</b></div>
|
||||
<input type="text" placeholder="Name" className="input input-bordered w-full max-w-xs mt-5" value={name} onChange={e => setName(e.target.value)} />
|
||||
<textarea className="textarea textarea-bordered w-full mt-5" placeholder="Text" value={text} onChange={e => setText(e.target.value)}></textarea>
|
||||
<div className='flex justify-center'><button className="btn mt-5 place-self-center">Save</button></div>
|
||||
</form>
|
||||
</LeafletPopup>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -3,6 +3,8 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
|
||||
|
||||
import { UtopiaMap } from "./UtopiaMap";
|
||||
import { Layer } from "./Layer";
|
||||
import { tags, places, events } from './data'
|
||||
|
||||
|
||||
export default {
|
||||
title: "Utopia Map",
|
||||
@ -11,7 +13,7 @@ export default {
|
||||
|
||||
|
||||
const Template: ComponentStory<typeof UtopiaMap> = (args) => (
|
||||
<UtopiaMap height="600px">
|
||||
<UtopiaMap height={args.height} width={args.width} center={args.center} zoom={args.zoom}>
|
||||
<Layer
|
||||
name='places'
|
||||
menuIcon='LocationMarkerIcon'
|
||||
@ -20,6 +22,8 @@ const Template: ComponentStory<typeof UtopiaMap> = (args) => (
|
||||
markerIcon='circle-solid'
|
||||
markerShape='circle'
|
||||
markerDefaultColor='#777'
|
||||
data={places}
|
||||
tags={tags}
|
||||
/>
|
||||
<Layer
|
||||
name='events'
|
||||
@ -29,6 +33,8 @@ const Template: ComponentStory<typeof UtopiaMap> = (args) => (
|
||||
markerIcon='calendar-days-solid'
|
||||
markerShape='square'
|
||||
markerDefaultColor='#777'
|
||||
data = {events}
|
||||
tags={tags}
|
||||
/>
|
||||
</UtopiaMap>
|
||||
);
|
||||
@ -41,6 +47,7 @@ Custom.args = {
|
||||
|
||||
export const BadSalzschlirf = Template.bind({});
|
||||
BadSalzschlirf.args = {
|
||||
center : [9.5061,50.6238],
|
||||
zoom: 15
|
||||
center : [50.6238,9.5061],
|
||||
zoom: 15,
|
||||
height: "500px"
|
||||
};
|
||||
@ -1,23 +1,21 @@
|
||||
import { TileLayer, MapContainer, useMapEvents } from "react-leaflet";
|
||||
import "leaflet/dist/leaflet.css";
|
||||
import * as React from "react";
|
||||
import { Item, Tag, API, Geometry } from "../../types"
|
||||
import "./UtopiaMap.css"
|
||||
import { Item, Tag, API, Layer } from "../../types"
|
||||
import "../../index.css"
|
||||
import { LatLng } from "leaflet";
|
||||
import MarkerClusterGroup from 'react-leaflet-cluster'
|
||||
import AddButton from "./AddButton";
|
||||
import { LayerProps } from "./Layer";
|
||||
import { useCallback, useState } from "react";
|
||||
import { useState } from "react";
|
||||
import NewItemPopup, { NewItemPopupProps } from "./NewItemPopup";
|
||||
import { ItemsProvider, useAddItem, useItems } from "./useItems";
|
||||
import { LayersProvider } from "./useLayers";
|
||||
|
||||
|
||||
export interface UtopiaMapProps {
|
||||
height?: string,
|
||||
width?: string,
|
||||
center?: LatLng,
|
||||
zoom?: number,
|
||||
places?: Item[],
|
||||
events?: Item[],
|
||||
tags?: Tag[],
|
||||
children?: React.ReactNode,
|
||||
api?: API
|
||||
@ -25,7 +23,7 @@ export interface UtopiaMapProps {
|
||||
|
||||
|
||||
export interface MapEventListenerProps {
|
||||
selectMode: string | null,
|
||||
selectMode: Layer | null,
|
||||
setSelectMode: React.Dispatch<React.SetStateAction<any>>,
|
||||
setNewItemPopup: React.Dispatch<React.SetStateAction<any>>
|
||||
}
|
||||
@ -40,87 +38,53 @@ function MapEventListener(props: MapEventListenerProps) {
|
||||
props.setNewItemPopup({ layer: props.selectMode, position: e.latlng })
|
||||
props.setSelectMode(null)
|
||||
}
|
||||
},
|
||||
locationfound: (location) => {
|
||||
console.log('location found:', location)
|
||||
},
|
||||
}
|
||||
})
|
||||
return null
|
||||
}
|
||||
|
||||
function UtopiaMap(props: UtopiaMapProps) {
|
||||
// init / set default values
|
||||
let center: LatLng = new LatLng(50.6, 9.5);
|
||||
if (props.center)
|
||||
center = props.center;
|
||||
let zoom: number = 10;
|
||||
if (props.zoom)
|
||||
zoom = props.zoom;
|
||||
let height: string = "400px";
|
||||
if (props.height)
|
||||
height = props.height;
|
||||
let width: string = "100vw";
|
||||
if (props.width)
|
||||
width = props.width;
|
||||
function UtopiaMap({
|
||||
height = "500px",
|
||||
width = "100%",
|
||||
center = new LatLng(50.6, 9.5),
|
||||
zoom = 10,
|
||||
children }
|
||||
: UtopiaMapProps) {
|
||||
|
||||
const [selectMode, setSelectMode] = useState<string | null>(null);
|
||||
const [selectMode, setSelectMode] = useState<Layer | null>(null);
|
||||
const [newItemPopup, setNewItemPopup] = useState<NewItemPopupProps | null>(null);
|
||||
|
||||
const addItem = useAddItem();
|
||||
const items = useItems();
|
||||
|
||||
|
||||
|
||||
const handleSubmit = useCallback((name: string, text: string, position : LatLng, layer : string) => {
|
||||
addItem(new Item(123,name,text,new Geometry(position.lng,position.lat)));
|
||||
console.log(layer);
|
||||
console.log("Items check in Callback: " + items);
|
||||
|
||||
}, [addItem]);
|
||||
|
||||
|
||||
let layers:LayerProps[] = [];
|
||||
React.Children.toArray(props.children).map(layer => {
|
||||
console.log(layer);
|
||||
|
||||
if (React.isValidElement<LayerProps>(layer))
|
||||
layers.push(layer.props)
|
||||
})
|
||||
|
||||
let initial:Item[] = [];
|
||||
if (props.events) initial = props.events;
|
||||
|
||||
console.log("Items check in Map 1: " + items);
|
||||
|
||||
|
||||
return (
|
||||
<ItemsProvider initialItems={initial}>
|
||||
<div className={(selectMode != null ? "crosshair-cursor-enabled" : undefined)}>
|
||||
<MapContainer style={{ height: height, width: width }} center={center} zoom={zoom}>
|
||||
<TileLayer
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
|
||||
<MarkerClusterGroup showCoverageOnHover chunkedLoading maxClusterRadius={50}>
|
||||
{props.children}
|
||||
</MarkerClusterGroup>
|
||||
<MapEventListener setSelectMode={setSelectMode} selectMode={selectMode} setNewItemPopup={setNewItemPopup} />
|
||||
{newItemPopup &&
|
||||
<NewItemPopup position={newItemPopup.position} layer={newItemPopup.layer} onSubmit={handleSubmit} />
|
||||
}
|
||||
</MapContainer>
|
||||
<AddButton layers={layers} setSelectMode={setSelectMode}></AddButton>
|
||||
{selectMode != null &&
|
||||
<div className="button z-500 absolute right-5 top-5 drop-shadow-md">
|
||||
<div className="alert bg-white text-green-900">
|
||||
<div>
|
||||
<span>Select {selectMode} position!</span>
|
||||
<LayersProvider initialLayers={new Map()}>
|
||||
<div className={(selectMode != null ? "crosshair-cursor-enabled" : undefined)}>
|
||||
<MapContainer style={{ height: height, width: width }} center={center} zoom={zoom}>
|
||||
<TileLayer
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
|
||||
<MarkerClusterGroup showCoverageOnHover chunkedLoading maxClusterRadius={50}>
|
||||
{children}
|
||||
</MarkerClusterGroup>
|
||||
<MapEventListener setSelectMode={setSelectMode} selectMode={selectMode} setNewItemPopup={setNewItemPopup} />
|
||||
{newItemPopup &&
|
||||
<NewItemPopup position={newItemPopup.position} layer={newItemPopup.layer} setNewItemPopup={setNewItemPopup}/>
|
||||
}
|
||||
<AddButton setSelectMode={setSelectMode}></AddButton>
|
||||
</MapContainer>
|
||||
{selectMode != null &&
|
||||
<div className="button z-500 absolute right-5 top-5 drop-shadow-md">
|
||||
<div className="alert bg-white text-green-900">
|
||||
<div>
|
||||
<span>Select {selectMode.name} position!</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
</div>
|
||||
</ItemsProvider>
|
||||
</div>
|
||||
</LayersProvider>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
3652
src/Components/Map/data.ts
Normal file
3652
src/Components/Map/data.ts
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,73 +0,0 @@
|
||||
import { useCallback, useReducer, createContext, useContext } from "react";
|
||||
import * as React from "react";
|
||||
import { Item } from "../../types";
|
||||
|
||||
type ActionType =
|
||||
| { type: "ADD"; item: Item }
|
||||
| { type: "REMOVE"; id: number };
|
||||
|
||||
type UseItemManagerResult = ReturnType<typeof useItemsManager>;
|
||||
|
||||
const ItemContext = createContext<UseItemManagerResult>({
|
||||
items: [],
|
||||
addItem: () => {},
|
||||
removeItem: () => {}
|
||||
});
|
||||
|
||||
function useItemsManager (initialItems: Item[]): {
|
||||
items: Item[];
|
||||
addItem: (item: Item) => void;
|
||||
removeItem: (id: number) => void;
|
||||
} {
|
||||
const [items, dispatch] = useReducer((state: Item[], action: ActionType) => {
|
||||
switch (action.type) {
|
||||
case "ADD":
|
||||
return [
|
||||
...state,
|
||||
action.item,
|
||||
];
|
||||
case "REMOVE":
|
||||
return state.filter(({ id }) => id !== action.id);
|
||||
default:
|
||||
throw new Error();
|
||||
}
|
||||
}, initialItems);
|
||||
|
||||
const addItem = useCallback((item: Item) => {
|
||||
dispatch({
|
||||
type: "ADD",
|
||||
item,
|
||||
});
|
||||
}, []);
|
||||
|
||||
const removeItem = useCallback((id: number) => {
|
||||
dispatch({
|
||||
type: "REMOVE",
|
||||
id,
|
||||
});
|
||||
}, []);
|
||||
return { items, addItem, removeItem };
|
||||
}
|
||||
|
||||
export const ItemsProvider: React.FunctionComponent<{
|
||||
initialItems: Item[], children?: React.ReactNode
|
||||
}> = ({ initialItems, children }) => (
|
||||
<ItemContext.Provider value={useItemsManager(initialItems)}>
|
||||
{children}
|
||||
</ItemContext.Provider>
|
||||
);
|
||||
|
||||
export const useItems = (): Item[] => {
|
||||
const { items } = useContext(ItemContext);
|
||||
return items;
|
||||
};
|
||||
|
||||
export const useAddItem = (): UseItemManagerResult["addItem"] => {
|
||||
const { addItem } = useContext(ItemContext);
|
||||
return addItem;
|
||||
};
|
||||
|
||||
export const useRemoveItem = (): UseItemManagerResult["removeItem"] => {
|
||||
const { removeItem } = useContext(ItemContext);
|
||||
return removeItem;
|
||||
};
|
||||
94
src/Components/Map/useLayers.tsx
Normal file
94
src/Components/Map/useLayers.tsx
Normal file
@ -0,0 +1,94 @@
|
||||
import { useCallback, useReducer, createContext, useContext } from "react";
|
||||
import * as React from "react";
|
||||
import { Item, Layer } from "../../types";
|
||||
|
||||
type ActionType =
|
||||
| { type: "ADD LAYER"; layer: Layer }
|
||||
| { type: "ADD ITEM"; item: Item; layer: Layer }
|
||||
| { type: "REMOVE ITEM"; id: number; layer: Layer };
|
||||
|
||||
type UseItemManagerResult = ReturnType<typeof useLayerManager>;
|
||||
|
||||
const LayerContext = createContext<UseItemManagerResult>({
|
||||
layers: new Map([]),
|
||||
addLayer: () => { },
|
||||
addItem: () => { },
|
||||
removeItem: () => { }
|
||||
});
|
||||
|
||||
function useLayerManager(initialLayers: Map<string, Layer>): {
|
||||
layers: Map<string, Layer>;
|
||||
addLayer: (layer: Layer) => void;
|
||||
addItem: (item: Item, layer: Layer) => void;
|
||||
removeItem: (id: number, layer: Layer) => void;
|
||||
} {
|
||||
const [layers, dispatch] = useReducer((state: Map<string, Layer>, action: ActionType) => {
|
||||
switch (action.type) {
|
||||
case "ADD LAYER":
|
||||
{
|
||||
return state.set(action.layer.name, action.layer);
|
||||
}
|
||||
case "ADD ITEM":
|
||||
{
|
||||
if(!state.get(action.layer.name)?.data?.includes(action.item))
|
||||
state.get(action.layer.name)?.data?.push(action.item);
|
||||
}
|
||||
case "REMOVE ITEM":
|
||||
{ return state; }
|
||||
default:
|
||||
throw new Error();
|
||||
}
|
||||
}, initialLayers);
|
||||
|
||||
const addLayer = useCallback((layer: Layer) => {
|
||||
dispatch({
|
||||
type: "ADD LAYER",
|
||||
layer
|
||||
});
|
||||
}, []);
|
||||
|
||||
const addItem = useCallback((item: Item, layer: Layer) => {
|
||||
dispatch({
|
||||
type: "ADD ITEM",
|
||||
item,
|
||||
layer
|
||||
});
|
||||
}, []);
|
||||
|
||||
const removeItem = useCallback((id: number, layer: Layer) => {
|
||||
dispatch({
|
||||
type: "REMOVE ITEM",
|
||||
id,
|
||||
layer
|
||||
});
|
||||
}, []);
|
||||
return { layers, addLayer, addItem, removeItem };
|
||||
}
|
||||
|
||||
export const LayersProvider: React.FunctionComponent<{
|
||||
initialLayers: Map<string, Layer>, children?: React.ReactNode
|
||||
}> = ({ initialLayers, children }) => (
|
||||
<LayerContext.Provider value={useLayerManager(initialLayers)}>
|
||||
{children}
|
||||
</LayerContext.Provider>
|
||||
);
|
||||
|
||||
export const useLayers = (): Map<string, Layer> => {
|
||||
const { layers } = useContext(LayerContext);
|
||||
return layers;
|
||||
};
|
||||
|
||||
export const useAddLayer = (): UseItemManagerResult["addLayer"] => {
|
||||
const { addLayer } = useContext(LayerContext);
|
||||
return addLayer;
|
||||
};
|
||||
|
||||
export const useAddItem = (): UseItemManagerResult["addItem"] => {
|
||||
const { addItem } = useContext(LayerContext);
|
||||
return addItem;
|
||||
};
|
||||
|
||||
export const useRemoveItem = (): UseItemManagerResult["removeItem"] => {
|
||||
const { removeItem } = useContext(LayerContext);
|
||||
return removeItem;
|
||||
};
|
||||
@ -13,10 +13,10 @@ const createSvg = (shape:string, markerColor:string, borderColor:string) => {
|
||||
const addIcon = (icon:string) => {
|
||||
switch(icon) {
|
||||
case "circle-solid":
|
||||
return '<svg fill="#fff" style="position: relative; top: -38px;left: 0px;" width="13"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z"/></svg>';
|
||||
return '<svg fill="#fff" class="circle-icon" width="13"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z"/></svg>';
|
||||
break;
|
||||
case "calendar-days-solid":
|
||||
return '<svg fill="#fff" style="position: relative; top: -40px;left: 0px;" width="13" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M160 32V64H288V32C288 14.33 302.3 0 320 0C337.7 0 352 14.33 352 32V64H400C426.5 64 448 85.49 448 112V160H0V112C0 85.49 21.49 64 48 64H96V32C96 14.33 110.3 0 128 0C145.7 0 160 14.33 160 32zM0 192H448V464C448 490.5 426.5 512 400 512H48C21.49 512 0 490.5 0 464V192zM64 304C64 312.8 71.16 320 80 320H112C120.8 320 128 312.8 128 304V272C128 263.2 120.8 256 112 256H80C71.16 256 64 263.2 64 272V304zM192 304C192 312.8 199.2 320 208 320H240C248.8 320 256 312.8 256 304V272C256 263.2 248.8 256 240 256H208C199.2 256 192 263.2 192 272V304zM336 256C327.2 256 320 263.2 320 272V304C320 312.8 327.2 320 336 320H368C376.8 320 384 312.8 384 304V272C384 263.2 376.8 256 368 256H336zM64 432C64 440.8 71.16 448 80 448H112C120.8 448 128 440.8 128 432V400C128 391.2 120.8 384 112 384H80C71.16 384 64 391.2 64 400V432zM208 384C199.2 384 192 391.2 192 400V432C192 440.8 199.2 448 208 448H240C248.8 448 256 440.8 256 432V400C256 391.2 248.8 384 240 384H208zM320 432C320 440.8 327.2 448 336 448H368C376.8 448 384 440.8 384 432V400C384 391.2 376.8 384 368 384H336C327.2 384 320 391.2 320 400V432z"/></svg>';
|
||||
return '<svg fill="#fff" class="calendar-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M160 32V64H288V32C288 14.33 302.3 0 320 0C337.7 0 352 14.33 352 32V64H400C426.5 64 448 85.49 448 112V160H0V112C0 85.49 21.49 64 48 64H96V32C96 14.33 110.3 0 128 0C145.7 0 160 14.33 160 32zM0 192H448V464C448 490.5 426.5 512 400 512H48C21.49 512 0 490.5 0 464V192zM64 304C64 312.8 71.16 320 80 320H112C120.8 320 128 312.8 128 304V272C128 263.2 120.8 256 112 256H80C71.16 256 64 263.2 64 272V304zM192 304C192 312.8 199.2 320 208 320H240C248.8 320 256 312.8 256 304V272C256 263.2 248.8 256 240 256H208C199.2 256 192 263.2 192 272V304zM336 256C327.2 256 320 263.2 320 272V304C320 312.8 327.2 320 336 320H368C376.8 320 384 312.8 384 304V272C384 263.2 376.8 256 368 256H336zM64 432C64 440.8 71.16 448 80 448H112C120.8 448 128 440.8 128 432V400C128 391.2 120.8 384 112 384H80C71.16 384 64 391.2 64 400V432zM208 384C199.2 384 192 391.2 192 400V432C192 440.8 199.2 448 208 448H240C248.8 448 256 440.8 256 432V400C256 391.2 248.8 384 240 384H208zM320 432C320 440.8 327.2 448 336 448H368C376.8 448 384 440.8 384 432V400C384 391.2 376.8 384 368 384H336C327.2 384 320 391.2 320 400V432z"/></svg>';
|
||||
break;
|
||||
default:
|
||||
return "";
|
||||
|
||||
@ -2,6 +2,21 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
.leaflet-container {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
input {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
textarea {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.leaflet-control-attribution {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.leaflet-data-marker {
|
||||
|
||||
@ -15,4 +30,19 @@
|
||||
|
||||
.leaflet-container {
|
||||
cursor: inherit;
|
||||
}
|
||||
|
||||
.calendar-icon {
|
||||
position: relative;
|
||||
top: -40px;
|
||||
left: 10px;
|
||||
width: 13px;
|
||||
}
|
||||
|
||||
|
||||
.circle-icon {
|
||||
position: relative;
|
||||
top: -38px;
|
||||
left: 10px;
|
||||
width: 13px;
|
||||
}
|
||||
@ -34,12 +34,16 @@ export interface Tag {
|
||||
|
||||
|
||||
export interface Layer {
|
||||
name : string,
|
||||
data?: Item[],
|
||||
children?: React.ReactNode
|
||||
name: string,
|
||||
menuIcon: string,
|
||||
menuColor: string,
|
||||
menuText: string,
|
||||
markerIcon: string,
|
||||
markerShape: string
|
||||
markerShape: string,
|
||||
markerDefaultColor: string,
|
||||
tags?: Tag[]
|
||||
}
|
||||
|
||||
export interface API {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user