Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore(playground): update #136

Merged
merged 1 commit into from
Aug 20, 2024
Merged

chore(playground): update #136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion app/gallery/src/pages/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ layout: ../templates/map.astro
GitHub リポジトリ
[https://github.com/cieloazul310/ol-gsi-vt](https://github.com/cieloazul310/ol-gsi-vt)

ol-gsi-vt Composer
ol-gsi-vt Composer
[https://ol-gsi-vt.vercel.app](https://ol-gsi-vt.vercel.app)

## 機能
Expand Down
2 changes: 2 additions & 0 deletions app/playground/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,13 @@
"@yamada-ui/fontawesome": "^1.0.37",
"@yamada-ui/react": "^1.4.9",
"deep-object-diff": "^1.1.9",
"html-react-parser": "^5.1.12",
"ol": "^10.0.0",
"prettier": "^3.3.3",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"shiki": "^1.14.1",
"zod": "^3.23.8",
"zustand": "^4.5.4"
},
"devDependencies": {
Expand Down
30 changes: 30 additions & 0 deletions app/playground/public/palette.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -263,6 +263,36 @@
"type": "string"
}
}
},
"layers": {
"type": "array",
"prefixItems": [{ "enum": [
"AdmArea",
"AdmBdry",
"Anno",
"BldA",
"Cntr",
"Cstline",
"Isbt",
"PwrTrnsmL",
"RailCL",
"RailTrCL",
"RdEdg",
"RdCompt",
"RdCL",
"RvrCL",
"SpcfArea",
"StrctLine",
"StrctArea",
"TpgphArea",
"TpgphLine",
"WA",
"WL",
"WStrA",
"WStrL",
"WRltLine"
] }],
"maxItems": 24
}
},
"required": ["palette"]
Expand Down
164 changes: 80 additions & 84 deletions app/playground/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,117 +1,113 @@
import { useState } from "react";
import { useState, lazy, Suspense } from "react";
import {
UIProvider,
Box,
Flex,
HStack,
Button,
Text,
IconButton,
Spacer,
Modal,
useDisclosure,
} from "@yamada-ui/react";
import { Icon as FontAwesomeIcon } from "@yamada-ui/fontawesome";
import { faHouse } from "@fortawesome/free-solid-svg-icons";
import { faGithub } from "@fortawesome/free-brands-svg-icons";
import MapPane from "@/components/map";
import Handler from "@/components/handler";
import PresetModal from "@/components/modal/preset";
import ExportModal from "@/components/modal/export";
import type { ModalType } from "@/components/modal";
import FileUploader from "@/components/toolbar/file-uploader";
import { PaletteStoreProvider } from "@/providers/palette-provider";
import Loader from "./loader";

const MapPane = lazy(() => import("@/components/map"));
const Modal = lazy(() => import("@/components/modal"));

function App() {
const [modal, setModal] = useState<"preset" | "export">("preset");
const [modal, setModal] = useState<ModalType>("preset");
const { onClose, isOpen, onOpen } = useDisclosure();
const onPresetOpen = () => {
setModal("preset");
onOpen();
};
const onExportOpen = () => {
setModal("export");
const onModalOpen = (modalType: ModalType) => () => {
setModal(modalType);
onOpen();
};

return (
<PaletteStoreProvider>
<UIProvider>
<Flex width="full" height="full">
<Box
width={320}
height="full"
overflowY="auto"
flexShrink={0}
<Flex width="full" height="full">
<Box
width={320}
height="full"
overflowY="auto"
flexShrink={0}
bg="white"
>
<HStack
gap="sm"
width="full"
height="56px"
bg="white"
alignItems="center"
zIndex={10}
shadow="sm"
position="sticky"
left={0}
top={0}
px="md"
>
<HStack
gap="sm"
width="full"
height="56px"
bg="white"
alignItems="center"
zIndex={10}
shadow="sm"
position="sticky"
left={0}
top={0}
px="md"
>
<Text fontWeight="bold">ol-gsi-vt Composer</Text>
<Spacer />
<IconButton
as="a"
href="https://cieloazul310.github.io/ol-gsi-vt"
target="_blank"
rel="noopener noreferrer"
variant="ghost"
icon={<FontAwesomeIcon icon={faHouse} />}
/>
<IconButton
as="a"
href="https://github.com/cieloazul310/ol-gsi-vt"
target="_blank"
rel="noopener noreferrer"
variant="ghost"
icon={<FontAwesomeIcon icon={faGithub} />}
/>
</HStack>
<Handler />
<HStack
gap="sm"
width="full"
height="56px"
bg="white"
alignItems="center"
justifyContent="end"
zIndex={10}
shadow="sm"
position="sticky"
left={0}
bottom={0}
px="md"
>
<Button onClick={onPresetOpen}>Reset</Button>
<Button colorScheme="primary" onClick={onExportOpen}>
Export
</Button>
</HStack>
</Box>
<Box width="full" height="full" flexGrow={1}>
<Text fontWeight="bold">ol-gsi-vt Composer</Text>
<Spacer />
<IconButton
as="a"
href="https://cieloazul310.github.io/ol-gsi-vt"
target="_blank"
rel="noopener noreferrer"
variant="ghost"
icon={<FontAwesomeIcon icon={faHouse} />}
/>
<IconButton
as="a"
href="https://github.com/cieloazul310/ol-gsi-vt"
target="_blank"
rel="noopener noreferrer"
variant="ghost"
icon={<FontAwesomeIcon icon={faGithub} />}
/>
</HStack>
<Handler />
<HStack
gap="sm"
width="full"
height="56px"
bg="white"
alignItems="center"
justifyContent="end"
zIndex={10}
shadow="sm"
position="sticky"
left={0}
bottom={0}
px="md"
>
<FileUploader />
<Spacer />
<Button onClick={onModalOpen("preset")}>Reset</Button>
<Button colorScheme="primary" onClick={onModalOpen("export")}>
Export
</Button>
</HStack>
</Box>
<Box width="full" height="full" flexGrow={1}>
<Suspense fallback={<Loader />}>
<MapPane />
</Box>
</Flex>
</Suspense>
</Box>
</Flex>
<Suspense>
<Modal
type={modal}
isOpen={isOpen}
onClose={onClose}
size={modal === "export" ? "4xl" : "lg"}
>
{modal === "preset" ? (
<PresetModal onClose={onClose} />
) : (
<ExportModal onClose={onClose} />
)}
</Modal>
</UIProvider>
/>
</Suspense>
</PaletteStoreProvider>
);
}
Expand Down
24 changes: 7 additions & 17 deletions app/playground/src/components/handler/basic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,17 @@ import type { Palette, PaletteOptions } from "@cieloazul310/ol-gsi-vt";
import { usePaletteStore } from "@/providers/palette-provider";
import ColorPickerContainer from "./color-picker-container";

type NotNestedPaletteField = Extract<
keyof PaletteOptions,
| "background"
| "contrast"
| "isbt"
| "searoute"
| "structure"
| "volcano"
| "waterarea"
| "waterline"
>;

const items: { label: string; field: NotNestedPaletteField }[] = [
const items: {
label: string;
field: Extract<
keyof PaletteOptions,
"background" | "contrast" | "waterarea" | "waterline"
>;
}[] = [
{ label: "背景", field: "background" },
{ label: "コントラスト", field: "contrast" },
{ label: "水域・河川", field: "waterarea" },
{ label: "海岸線・水涯線", field: "waterline" },
// { label: "航路", field: "searoute" },
// { label: "ダムなどの構造物", field: "structure" },
// { label: "等深線", field: "isbt" },
// { label: "火山", field: "volcano" },
];

const boundaryItems: {
Expand Down
17 changes: 15 additions & 2 deletions app/playground/src/components/map.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,22 @@ import { useEffect, useRef, useState } from "react";
import OlMap from "ol/Map";
import View from "ol/View";
import { fromLonLat } from "ol/proj";
import Geolocation from "ol/Geolocation";
import { Attribution, ScaleLine, defaults as defaultControl } from "ol/control";
import Link from "ol/interaction/Link";
import { gsiOptVtLayer, gsiOptVtStyle } from "@cieloazul310/ol-gsi-vt";
import { usePaletteStore } from "@/providers/palette-provider";
import GeolocationControl from "@/utils/geolocationControl";
import useGeolocation from "@/utils/useGeolocation";

import "ol/ol.css";

const vtLayer = gsiOptVtLayer();
const geolocation = new Geolocation({
trackingOptions: {
enableHighAccuracy: true,
},
});

function MapPane() {
const mapRef = useRef<HTMLDivElement>(null);
Expand All @@ -33,7 +41,7 @@ function MapPane() {
collapsible: false,
}),
new ScaleLine(),
// new GeolocationControl({ geolocation }),
new GeolocationControl({ geolocation }),
]),
});

Expand All @@ -53,11 +61,16 @@ function MapPane() {

useEffect(() => {
const newStyle = gsiOptVtStyle({ theme: { palette }, layers });
console.log(layers);
vtLayer.setStyle(newStyle);
vtLayer.setBackground(palette.background);
}, [palette, layers]);

useEffect(() => {
if (map) {
useGeolocation({ map, geolocation });
}
});

return <div className="map" ref={mapRef} />;
}

Expand Down
46 changes: 46 additions & 0 deletions app/playground/src/components/modal/export-tab-panel-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { Box, IconButton, Textarea, useClipboard } from "@yamada-ui/react";
import { Icon as FontAwesomeIcon } from "@yamada-ui/fontawesome";
import { faCopy, faCheck } from "@fortawesome/free-solid-svg-icons";
import useShiki from "@/utils/useShiki";

type ExportTabPanelProps = {
lang: "js" | "json";
clipboard: ReturnType<typeof useClipboard>;
};

function ExportTabPanelItem({ lang, clipboard }: ExportTabPanelProps) {
const code = useShiki(clipboard.value, {
lang,
theme: "dark-plus",
structure: "inline",
});

return (
<Box width="full" position="relative">
<Textarea
as="pre"
height="50vh"
overflowY="auto"
bg="gray.800"
p="md"
readOnly
>
<Box as="code" fontSize="sm" fontFamily="mono">
{code}
</Box>
</Textarea>
<IconButton
variant="ghost"
icon={<FontAwesomeIcon icon={clipboard.hasCopied ? faCheck : faCopy} />}
colorScheme={clipboard.hasCopied ? "success" : "whiteAlpha"}
zIndex={1}
position="absolute"
top={2}
right={2}
onClick={clipboard.onCopy}
/>
</Box>
);
}

export default ExportTabPanelItem;
Loading
Loading