From 44d8527696a50dcc4a6aed4b03343d0a990f112b Mon Sep 17 00:00:00 2001 From: nina992 Date: Mon, 13 Nov 2023 19:06:37 +0400 Subject: [PATCH 01/10] chore: modify zoom level field --- .../components/RangeSlider/index.stories.tsx | 51 +++++++++++++ web/src/beta/components/RangeSlider/index.tsx | 70 ++++++++++++++++++ .../fields/Property/PropertyField/index.tsx | 13 ++++ .../fields/RangeField/index.stories.tsx | 71 +++++++++++++++++++ .../components/fields/RangeField/index.tsx | 37 ++++++++++ .../beta/features/Editor/Settings/index.tsx | 2 +- 6 files changed, 243 insertions(+), 1 deletion(-) create mode 100644 web/src/beta/components/RangeSlider/index.stories.tsx create mode 100644 web/src/beta/components/RangeSlider/index.tsx create mode 100644 web/src/beta/components/fields/RangeField/index.stories.tsx create mode 100644 web/src/beta/components/fields/RangeField/index.tsx diff --git a/web/src/beta/components/RangeSlider/index.stories.tsx b/web/src/beta/components/RangeSlider/index.stories.tsx new file mode 100644 index 0000000000..a131764b9b --- /dev/null +++ b/web/src/beta/components/RangeSlider/index.stories.tsx @@ -0,0 +1,51 @@ +import { useArgs } from "@storybook/preview-api"; +import { Meta, StoryObj } from "@storybook/react"; +import { useCallback } from "react"; + +import { styled } from "@reearth/services/theme"; + +import RangeSlider, { Props } from "."; + +const meta: Meta = { + component: RangeSlider, +}; + +type Story = StoryObj; + +export default meta; + +export const Default: Story = (args: Props) => { + const [_, updateArgs] = useArgs(); + + const handleChange = useCallback((value: number[]) => updateArgs({ value: value }), [updateArgs]); + + return ( + +
+ +
+
+ +
+
+ +
+ + ); +}; + +Default.args = { + value: [2, 50], + min: 0, + max: 100, + step: 1, + disabled: false, +}; + +const Wrapper = styled.div` + display: flex; + flex-direction: column; + gap: 10%; + margin: 2rem; + height: 300px; +`; diff --git a/web/src/beta/components/RangeSlider/index.tsx b/web/src/beta/components/RangeSlider/index.tsx new file mode 100644 index 0000000000..149d964ecd --- /dev/null +++ b/web/src/beta/components/RangeSlider/index.tsx @@ -0,0 +1,70 @@ +import RCSlider from "rc-slider"; +import React, { ComponentProps } from "react"; + +import { styled } from "@reearth/services/theme"; + +import "rc-slider/assets/index.css"; + +const RangeSliderWithTooltip = RCSlider.createSliderWithTooltip(RCSlider.Range); + +export type Props = { + min?: number; + max?: number; +} & ComponentProps; + +const RangeSlider: React.FC = ({ ...props }) => { + const calculatedStep = props.step ? props.step : props.max ? props.max / 10 : 0.1; + + return ( + + + + ); +}; + +const SliderStyled = styled.div<{ disabled: boolean }>` + width: 100%; + .rc-slider-disabled { + background-color: transparent; + opacity: ${({ disabled }) => (disabled ? 0.6 : 1)}; + cursor: ${({ disabled }) => (disabled ? "not-allowed" : "inherit")}; + } + + .rc-slider-rail { + height: 8px; + } + + .rc-slider-handle { + background-color: ${({ theme }) => theme.item.default}; + border: ${({ theme }) => theme.primary.weak}; + height: 12px; + width: 12px; + margin-top: -2px; + } + + .rc-slider-track { + background-color: ${({ theme }) => theme.primary.weak}; + height: 8px; + } + + .rc-slider-rail { + background-color: ${({ theme }) => theme.outline.weaker}; + box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25) inset; + } + + .rc-slider-tooltip-arrow { + background-color: transparent; + border-top-color: ${({ theme }) => theme.bg[2]}; + bottom: 2px; + margin-left: -8px; + border-width: 9px 8px 0; + } + + .rc-slider-tooltip-inner { + background-color: ${({ theme }) => theme.bg[2]}; + color: ${({ theme }) => theme.content.main}; + box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25); + } +`; + +export default RangeSlider; diff --git a/web/src/beta/components/fields/Property/PropertyField/index.tsx b/web/src/beta/components/fields/Property/PropertyField/index.tsx index 055d0fa551..8b749b5f30 100644 --- a/web/src/beta/components/fields/Property/PropertyField/index.tsx +++ b/web/src/beta/components/fields/Property/PropertyField/index.tsx @@ -10,6 +10,7 @@ import ColorField from "../../ColorField"; import DateTimeField from "../../DateTimeField"; import LocationField from "../../LocationField"; import NumberField from "../../NumberField"; +import RangeField from "../../RangeField"; import SelectField from "../../SelectField"; import SliderField from "../../SliderField"; import SpacingInput, { SpacingValues } from "../../SpacingInput"; @@ -154,6 +155,18 @@ const PropertyField: React.FC = ({ onSave={handleChange} onFlyTo={onFlyTo} /> + ) : schema.type === "array" ? ( + schema.ui === "range" && ( + + ) ) : (

{schema.name} field

)} diff --git a/web/src/beta/components/fields/RangeField/index.stories.tsx b/web/src/beta/components/fields/RangeField/index.stories.tsx new file mode 100644 index 0000000000..249a2cd543 --- /dev/null +++ b/web/src/beta/components/fields/RangeField/index.stories.tsx @@ -0,0 +1,71 @@ +import { useArgs } from "@storybook/preview-api"; +import { Meta, StoryObj } from "@storybook/react"; +import { useCallback } from "react"; + +import { styled } from "@reearth/services/theme"; + +import SliderField, { Props } from "."; + +const meta: Meta = { + component: SliderField, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = (args: Props) => { + const [_, updateArgs] = useArgs(); + + const handleChange = useCallback( + (value: number) => { + updateArgs({ value: value }); + }, + [updateArgs], + ); + + return ( + +
+ +
+
+ +
+
+ +
+ + ); +}; + +const Wrapper = styled.div` + display: flex; + flex-direction: column; + gap: 10%; + margin: 2rem; + height: 300px; +`; + +Default.args = { + name: "Slider Field", + description: "Slider field Sample description", + value: 50, + min: 0, + max: 100, + step: 1, + disabled: false, + onChange: () => console.log("clicked"), +}; diff --git a/web/src/beta/components/fields/RangeField/index.tsx b/web/src/beta/components/fields/RangeField/index.tsx new file mode 100644 index 0000000000..5adcd148a3 --- /dev/null +++ b/web/src/beta/components/fields/RangeField/index.tsx @@ -0,0 +1,37 @@ +import { useCallback, useEffect, useState } from "react"; + +import Property from "@reearth/beta/components/fields"; +import RangeSlider, { Props as RangeProps } from "@reearth/beta/components/RangeSlider"; + +export type Props = { + name?: string; + description?: string; +} & RangeProps; + +const RangeField: React.FC = ({ name, description, value, onChange, ...args }: Props) => { + const [internalState, setInternalState] = useState(value); + + const handleChange = useCallback( + (value: number[]) => { + setInternalState(value); + }, + [setInternalState], + ); + + useEffect(() => { + setInternalState(value); + }, [value]); + console.log("internalState", internalState); + return ( + + + + ); +}; + +export default RangeField; diff --git a/web/src/beta/features/Editor/Settings/index.tsx b/web/src/beta/features/Editor/Settings/index.tsx index 5407313895..be44c7c6a1 100644 --- a/web/src/beta/features/Editor/Settings/index.tsx +++ b/web/src/beta/features/Editor/Settings/index.tsx @@ -43,8 +43,8 @@ const Settings: React.FC = ({ selectedPage, onPageUpdate, }); - const visibleItems = useMemo(() => filterVisibleItems(propertyItems), [propertyItems]); + console.log(propertyItems); return ( From a35526f6e88030d7acce4f651c4d5ecaac2a39f0 Mon Sep 17 00:00:00 2001 From: nina992 Date: Mon, 13 Nov 2023 19:37:15 +0400 Subject: [PATCH 02/10] remove-console --- web/src/beta/components/fields/RangeField/index.tsx | 2 +- web/src/beta/features/Editor/Settings/index.tsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/web/src/beta/components/fields/RangeField/index.tsx b/web/src/beta/components/fields/RangeField/index.tsx index 5adcd148a3..d2bc0eb49d 100644 --- a/web/src/beta/components/fields/RangeField/index.tsx +++ b/web/src/beta/components/fields/RangeField/index.tsx @@ -21,7 +21,7 @@ const RangeField: React.FC = ({ name, description, value, onChange, ...ar useEffect(() => { setInternalState(value); }, [value]); - console.log("internalState", internalState); + return ( = ({ onPageUpdate, }); const visibleItems = useMemo(() => filterVisibleItems(propertyItems), [propertyItems]); - console.log(propertyItems); return ( From 065f7dc4219e8715ca4992f61461d0b85f4ce506 Mon Sep 17 00:00:00 2001 From: nina992 Date: Mon, 13 Nov 2023 20:04:23 +0400 Subject: [PATCH 03/10] pr-fix-ts --- .../fields/RangeField/index.stories.tsx | 25 ++++++------------- 1 file changed, 8 insertions(+), 17 deletions(-) diff --git a/web/src/beta/components/fields/RangeField/index.stories.tsx b/web/src/beta/components/fields/RangeField/index.stories.tsx index 249a2cd543..0403b37065 100644 --- a/web/src/beta/components/fields/RangeField/index.stories.tsx +++ b/web/src/beta/components/fields/RangeField/index.stories.tsx @@ -4,21 +4,21 @@ import { useCallback } from "react"; import { styled } from "@reearth/services/theme"; -import SliderField, { Props } from "."; +import RangeField, { Props } from "."; -const meta: Meta = { - component: SliderField, +const meta: Meta = { + component: RangeField, }; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Default: Story = (args: Props) => { const [_, updateArgs] = useArgs(); const handleChange = useCallback( - (value: number) => { + (value: number[]) => { updateArgs({ value: value }); }, [updateArgs], @@ -27,19 +27,10 @@ export const Default: Story = (args: Props) => { return (
- +
- -
-
- Date: Mon, 20 Nov 2023 18:17:30 +0400 Subject: [PATCH 04/10] change-titles-type --- web/src/beta/lib/core/Map/types/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/beta/lib/core/Map/types/index.ts b/web/src/beta/lib/core/Map/types/index.ts index 1f050c2006..e0b0b4a3c0 100644 --- a/web/src/beta/lib/core/Map/types/index.ts +++ b/web/src/beta/lib/core/Map/types/index.ts @@ -251,7 +251,7 @@ export type SceneProperty = { id: string; tile_type?: string; tile_url?: string; - tile_zoomLevel?: number; + tile_zoomLevel?: number[]; tile_opacity?: number; }[]; terrain?: { From 164ee903d57e681399ea59835ae0d8f8b3ed545f Mon Sep 17 00:00:00 2001 From: nina992 Date: Tue, 21 Nov 2023 16:23:26 +0400 Subject: [PATCH 05/10] visualizer_fix --- web/src/beta/components/fields/RangeField/index.tsx | 2 +- web/src/beta/lib/core/engines/Cesium/core/Imagery.tsx | 9 ++++----- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/web/src/beta/components/fields/RangeField/index.tsx b/web/src/beta/components/fields/RangeField/index.tsx index d2bc0eb49d..13905ca726 100644 --- a/web/src/beta/components/fields/RangeField/index.tsx +++ b/web/src/beta/components/fields/RangeField/index.tsx @@ -9,7 +9,7 @@ export type Props = { } & RangeProps; const RangeField: React.FC = ({ name, description, value, onChange, ...args }: Props) => { - const [internalState, setInternalState] = useState(value); + const [internalState, setInternalState] = useState(value ?? [0, 30]); const handleChange = useCallback( (value: number[]) => { diff --git a/web/src/beta/lib/core/engines/Cesium/core/Imagery.tsx b/web/src/beta/lib/core/engines/Cesium/core/Imagery.tsx index 3985773fc4..9e3b7b4619 100644 --- a/web/src/beta/lib/core/engines/Cesium/core/Imagery.tsx +++ b/web/src/beta/lib/core/engines/Cesium/core/Imagery.tsx @@ -18,8 +18,7 @@ export type Tile = { tile_url?: string; tile_type?: string; tile_opacity?: number; - tile_minLevel?: number; - tile_maxLevel?: number; + tile_zoomLevel?: number[]; }; export type Props = { @@ -45,13 +44,13 @@ export default function ImageryLayers({ tiles, cesiumIonAccessToken }: Props) { <> {tiles ?.map(({ id, ...tile }) => ({ ...tile, id, provider: providers[id]?.[2] })) - .map(({ id, tile_opacity: opacity, tile_minLevel: min, tile_maxLevel: max, provider }, i) => + .map(({ id, tile_opacity: opacity, tile_zoomLevel, provider }, i) => provider ? ( From d88f54ab89c9b8f5d2bfea36b73dad74b8de688d Mon Sep 17 00:00:00 2001 From: nina992 Date: Tue, 21 Nov 2023 16:28:54 +0400 Subject: [PATCH 06/10] fix2 --- web/src/beta/lib/core/Map/types/index.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/web/src/beta/lib/core/Map/types/index.ts b/web/src/beta/lib/core/Map/types/index.ts index e0b0b4a3c0..b16818301e 100644 --- a/web/src/beta/lib/core/Map/types/index.ts +++ b/web/src/beta/lib/core/Map/types/index.ts @@ -320,8 +320,7 @@ type LegacySceneProperty = { id: string; tile_type?: string; tile_url?: string; - tile_maxLevel?: number; - tile_minLevel?: number; + tile_zoomLevel?: number[]; tile_opacity?: number; }[]; terrain?: TerrainProperty; From cb4a8ead8d711d044f4fa0fb17fd4ad801681aec Mon Sep 17 00:00:00 2001 From: nina992 Date: Thu, 23 Nov 2023 19:31:44 +0400 Subject: [PATCH 07/10] pr-fix --- web/src/beta/components/RangeSlider/index.tsx | 18 ++++++++++++++- .../fields/Property/PropertyField/index.tsx | 22 +++++++++---------- 2 files changed, 27 insertions(+), 13 deletions(-) diff --git a/web/src/beta/components/RangeSlider/index.tsx b/web/src/beta/components/RangeSlider/index.tsx index 149d964ecd..133c02a352 100644 --- a/web/src/beta/components/RangeSlider/index.tsx +++ b/web/src/beta/components/RangeSlider/index.tsx @@ -12,8 +12,24 @@ export type Props = { max?: number; } & ComponentProps; +const calculateStep = (min?: number, max?: number, step?: number | null): number => { + if (step) { + return step; + } else if (!!min && !!max) { + const range = max - min; + let calculatedStep = range / 10; + if (range % calculatedStep !== 0) { + const steps = Math.ceil(range / calculatedStep); + calculatedStep = range / steps; + } + return calculatedStep; + } else { + return 1; + } +}; + const RangeSlider: React.FC = ({ ...props }) => { - const calculatedStep = props.step ? props.step : props.max ? props.max / 10 : 0.1; + const calculatedStep = calculateStep(props?.min, props.max, props.step); return ( diff --git a/web/src/beta/components/fields/Property/PropertyField/index.tsx b/web/src/beta/components/fields/Property/PropertyField/index.tsx index 8b749b5f30..6b1cfd3caf 100644 --- a/web/src/beta/components/fields/Property/PropertyField/index.tsx +++ b/web/src/beta/components/fields/Property/PropertyField/index.tsx @@ -155,18 +155,16 @@ const PropertyField: React.FC = ({ onSave={handleChange} onFlyTo={onFlyTo} /> - ) : schema.type === "array" ? ( - schema.ui === "range" && ( - - ) + ) : schema.type === "array" && schema.ui === "range" ? ( + ) : (

{schema.name} field

)} From 9860be771af27bafb08c217a20d2738ddeb8ed5f Mon Sep 17 00:00:00 2001 From: nina992 Date: Fri, 24 Nov 2023 13:46:22 +0400 Subject: [PATCH 08/10] pr-fix2 --- .../beta/components/fields/Property/PropertyField/index.tsx | 1 + web/src/beta/components/fields/RangeField/index.tsx | 2 +- web/src/beta/lib/core/engines/Cesium/core/Imagery.tsx | 4 ++-- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/web/src/beta/components/fields/Property/PropertyField/index.tsx b/web/src/beta/components/fields/Property/PropertyField/index.tsx index 6b1cfd3caf..9d90323765 100644 --- a/web/src/beta/components/fields/Property/PropertyField/index.tsx +++ b/web/src/beta/components/fields/Property/PropertyField/index.tsx @@ -160,6 +160,7 @@ const PropertyField: React.FC = ({ key={schema.id} name={schema.name} value={value as number[]} + defaultValue={schema.defaultValue as number[]} min={schema.min} max={schema.max} description={schema.description} diff --git a/web/src/beta/components/fields/RangeField/index.tsx b/web/src/beta/components/fields/RangeField/index.tsx index 13905ca726..6acd490999 100644 --- a/web/src/beta/components/fields/RangeField/index.tsx +++ b/web/src/beta/components/fields/RangeField/index.tsx @@ -9,7 +9,7 @@ export type Props = { } & RangeProps; const RangeField: React.FC = ({ name, description, value, onChange, ...args }: Props) => { - const [internalState, setInternalState] = useState(value ?? [0, 30]); + const [internalState, setInternalState] = useState(value); const handleChange = useCallback( (value: number[]) => { diff --git a/web/src/beta/lib/core/engines/Cesium/core/Imagery.tsx b/web/src/beta/lib/core/engines/Cesium/core/Imagery.tsx index 9e3b7b4619..14594a122e 100644 --- a/web/src/beta/lib/core/engines/Cesium/core/Imagery.tsx +++ b/web/src/beta/lib/core/engines/Cesium/core/Imagery.tsx @@ -49,8 +49,8 @@ export default function ImageryLayers({ tiles, cesiumIonAccessToken }: Props) { From 6e0a318a9c6bd16c72960b4a4a24063a3026d9d6 Mon Sep 17 00:00:00 2001 From: nina992 Date: Fri, 24 Nov 2023 13:57:19 +0400 Subject: [PATCH 09/10] pr-fix3 --- web/src/beta/components/RangeSlider/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/src/beta/components/RangeSlider/index.tsx b/web/src/beta/components/RangeSlider/index.tsx index 133c02a352..ba4fb0490b 100644 --- a/web/src/beta/components/RangeSlider/index.tsx +++ b/web/src/beta/components/RangeSlider/index.tsx @@ -13,9 +13,9 @@ export type Props = { } & ComponentProps; const calculateStep = (min?: number, max?: number, step?: number | null): number => { - if (step) { + if (step != undefined) { return step; - } else if (!!min && !!max) { + } else if (min != undefined && max != undefined) { const range = max - min; let calculatedStep = range / 10; if (range % calculatedStep !== 0) { From 0d8c4d49e835c982b638efcf4922e6ee670f1d03 Mon Sep 17 00:00:00 2001 From: KaWaite <34051327+KaWaite@users.noreply.github.com> Date: Tue, 28 Nov 2023 14:56:45 +0900 Subject: [PATCH 10/10] update if statement --- web/src/beta/components/RangeSlider/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/beta/components/RangeSlider/index.tsx b/web/src/beta/components/RangeSlider/index.tsx index ba4fb0490b..3a28be4a4b 100644 --- a/web/src/beta/components/RangeSlider/index.tsx +++ b/web/src/beta/components/RangeSlider/index.tsx @@ -15,7 +15,7 @@ export type Props = { const calculateStep = (min?: number, max?: number, step?: number | null): number => { if (step != undefined) { return step; - } else if (min != undefined && max != undefined) { + } else if (min !== undefined && max !== undefined) { const range = max - min; let calculatedStep = range / 10; if (range % calculatedStep !== 0) {