From b4a111a7f8e2f6b58cacdfe2909c1bc85cff8edc Mon Sep 17 00:00:00 2001 From: lby Date: Wed, 5 Jul 2023 17:17:03 +0800 Subject: [PATCH] fix(web): selection event for published page (#549) --- web/published.html | 6 +++ .../organisms/Published/core/hooks.ts | 43 +++++++++++++++++-- .../organisms/Published/core/index.tsx | 6 +++ 3 files changed, 51 insertions(+), 4 deletions(-) diff --git a/web/published.html b/web/published.html index 123b140f8d..e196af30c0 100644 --- a/web/published.html +++ b/web/published.html @@ -14,6 +14,12 @@
+ diff --git a/web/src/classic/components/organisms/Published/core/hooks.ts b/web/src/classic/components/organisms/Published/core/hooks.ts index 5ef364a89e..131401f3dd 100644 --- a/web/src/classic/components/organisms/Published/core/hooks.ts +++ b/web/src/classic/components/organisms/Published/core/hooks.ts @@ -1,5 +1,5 @@ import { mapValues } from "lodash-es"; -import { useState, useMemo, useEffect } from "react"; +import { useState, useMemo, useEffect, useCallback } from "react"; import type { Block, ClusterProperty } from "@reearth/classic/components/molecules/Visualizer"; import { @@ -15,7 +15,10 @@ import { type LegacyLayer, convertLegacyCluster, } from "@reearth/classic/core/mantle"; +import type { ComputedLayer } from "@reearth/classic/core/mantle/types"; +import type { LayerSelectionReason } from "@reearth/classic/core/Map/Layers/hooks"; import { config } from "@reearth/services/config"; +import { useSelected } from "@reearth/services/state"; import type { PublishedData, @@ -31,12 +34,18 @@ export default (alias?: string) => { const [data, setData] = useState(); const [ready, setReady] = useState(false); const [error, setError] = useState(false); + const [selected, select] = useSelected(); const sceneProperty = processProperty(data?.property); - const pluginProperty = Object.keys(data?.plugins ?? {}).reduce<{ [key: string]: any }>( - (a, b) => ({ ...a, [b]: processProperty(data?.plugins?.[b]?.property) }), - {}, + const pluginProperty = useMemo( + () => + Object.keys(data?.plugins ?? {}).reduce<{ [key: string]: any }>( + (a, b) => ({ ...a, [b]: processProperty(data?.plugins?.[b]?.property) }), + {}, + ), + [data?.plugins], ); + const legacyClusters = useMemo( () => data?.clusters?.map(a => ({ ...processProperty(a.property), id: a.id })) ?? [], [data], @@ -203,6 +212,29 @@ export default (alias?: string) => { [], ); + const selectedLayerId = useMemo( + () => + selected?.type === "layer" + ? { layerId: selected.layerId, featureId: selected.featureId } + : undefined, + [selected], + ); + + const layerSelectionReason = useMemo( + () => (selected?.type === "layer" ? selected.layerSelectionReason : undefined), + [selected], + ); + + const selectLayer = useCallback( + ( + id?: string, + featureId?: string, + _layer?: () => Promise, + layerSelectionReason?: LayerSelectionReason, + ) => select(id ? { layerId: id, featureId, layerSelectionReason, type: "layer" } : undefined), + [select], + ); + // GA useGA(sceneProperty); @@ -217,6 +249,9 @@ export default (alias?: string) => { ready, error, engineMeta, + selectedLayerId, + layerSelectionReason, + selectLayer, }; }; diff --git a/web/src/classic/components/organisms/Published/core/index.tsx b/web/src/classic/components/organisms/Published/core/index.tsx index 909e159932..51c5274e37 100644 --- a/web/src/classic/components/organisms/Published/core/index.tsx +++ b/web/src/classic/components/organisms/Published/core/index.tsx @@ -19,6 +19,9 @@ export default function Published({ alias }: Props) { error, clusters, engineMeta, + selectedLayerId, + layerSelectionReason, + selectLayer, } = useHooks(alias); return error ? ( @@ -38,6 +41,9 @@ export default function Published({ alias }: Props) { isBuilt pluginBaseUrl={config()?.plugins} meta={engineMeta} + selectedLayerId={selectedLayerId} + layerSelectionReason={layerSelectionReason} + onLayerSelect={selectLayer} /> ); }