92 lines
3.1 KiB
JavaScript
92 lines
3.1 KiB
JavaScript
import React, { useEffect, useRef, useState } from "react";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import * as THREE from "three";
|
|
import { fetchForge, shutdownForge } from "@STORE/forgeSlice";
|
|
import hotspot from "@ASSET/img/hotspot.svg";
|
|
|
|
function ForgeModel({ forgeHeight, sprites = [] }) {
|
|
const dispatch = useDispatch();
|
|
const viewerEl = useRef(null);
|
|
const {
|
|
buildingInfo: { urn_3D },
|
|
forgeViewer: { viewer, dataVizExtn, DataVizCore },
|
|
} = useSelector((store) => store);
|
|
|
|
// 載入 Forge Viewer
|
|
useEffect(() => {
|
|
if (urn_3D) {
|
|
dispatch(
|
|
fetchForge({
|
|
viewerEl: viewerEl.current,
|
|
urn: urn_3D,
|
|
}),
|
|
);
|
|
return () => {
|
|
dispatch(shutdownForge());
|
|
};
|
|
}
|
|
}, [urn_3D]);
|
|
|
|
// 熱點
|
|
const spriteUpdate = (e, targetDbIds= [], style) => {
|
|
e.hasStopped = true;
|
|
dataVizExtn.invalidateViewables(targetDbIds, (viewable) => {
|
|
console.log(style)
|
|
return style;
|
|
});
|
|
};
|
|
// 熱點點擊事件
|
|
const onSpriteClicked = (event) => {
|
|
const targetDbIds = [event.dbId];
|
|
spriteUpdate(event, targetDbIds, { scale: 1.3, color: { r: 1, g: 0, b: 0 } });
|
|
console.log(`Sprite clicked:${targetDbIds}`);
|
|
};
|
|
|
|
// 熱點取消點擊
|
|
const onSpriteClickedOut = (event) => {
|
|
const targetDbIds = [event.dbId];
|
|
spriteUpdate(event, targetDbIds, { scale: 1, color: { r: 1.0, g: 1.0, b: 1.0 } });
|
|
console.log(`Sprite clickedout:${targetDbIds}`);
|
|
}
|
|
|
|
// 進入系統監控頁面，出現熱點
|
|
useEffect(() => {
|
|
if (sprites.length !== 0 && viewer && dataVizExtn) {
|
|
// const filterSprites = sprites.map;
|
|
dataVizExtn.removeAllViewables();
|
|
sprites.forEach(async ({ device_coordinate_3d, forge_dbid }, index) => {
|
|
const viewableType = DataVizCore.ViewableType.SPRITE;
|
|
const spriteColor = new THREE.Color(0xffffff);
|
|
const spriteIconUrl = hotspot;
|
|
const style = new DataVizCore.ViewableStyle(viewableType, spriteColor, spriteIconUrl);
|
|
const viewableData = new DataVizCore.ViewableData();
|
|
viewableData.spriteSize = 24;
|
|
if (forge_dbid && device_coordinate_3d) {
|
|
const dbId = 10 + index;
|
|
const position = JSON.parse(device_coordinate_3d);
|
|
const viewable = new DataVizCore.SpriteViewable(position, style, dbId);
|
|
viewable.myContextData = {
|
|
manufacturer: "MJM Co. Ltd.",
|
|
};
|
|
viewableData.addViewable(viewable);
|
|
};
|
|
await viewableData.finish();
|
|
dataVizExtn.addViewables(viewableData);
|
|
});
|
|
viewer.addEventListener(DataVizCore.MOUSE_CLICK, onSpriteClicked);
|
|
viewer.addEventListener(DataVizCore.MOUSE_CLICK_OUT, onSpriteClickedOut);
|
|
}
|
|
|
|
return () => {
|
|
if (sprites.length !== 0 && viewer && dataVizExtn) {
|
|
viewer.removeEventListener(DataVizCore.MOUSE_CLICK, onSpriteClicked);
|
|
viewer.removeEventListener(DataVizCore.MOUSE_CLICK_OUT, onSpriteClickedOut);
|
|
}
|
|
};
|
|
}, [sprites, dataVizExtn, viewer]);
|
|
|
|
return <div ref={viewerEl} id="forgeViewer" style={{ height: forgeHeight }}></div>;
|
|
}
|
|
|
|
export default ForgeModel;
|