react-forge-cam-points

Redux

Use redux toolkit and import reducer.

./app/store.js

import { configureStore } from "@reduxjs/toolkit";
import { pointReducer } from "react-forge-cam-points";

export const store = configureStore({
  reducer: {
    point: pointReducer,
  },
});

Structure

App.js

import { store } from "./app/store";
import { Provider } from "react-redux";

function App() {
  return (
    <>
      <Provider store={store}>
        <ViewerContainer />
      </Provider>
    </>
  );
}

ViewerContainer.js

import { PointsContainer, PointWrapper, PointIcon, PointText, ModalCamPoints, HeaderCamPoints, WrapperCamPoints} from "react-forge-cam-points-package";
import { useSelector } from "react-redux";

const ViewerContainer = () => {
  const { showedPoints } = useSelector((state) => state.point);

  return (
    <>
      <WrapperCamPoints points={allPoints} viewer={viewer}>
        <HeaderCamPoints />
        <PointsContainer>
          {showedPoints &&
            showedPoints.map((point) => (
              <PointWrapper key={point.id} point={point}>
                <PointIcon />
                <PointText />
              </PointWrapper>
            ))}
        </PointsContainer>
        <ModalCamPoints />
      </WrapperCamPoints>
      <Viewer />
    </>
  );
};

Data structure

let data = [
  {
    id: 1,
    type: "point",
    name: "Floor 1",
    position: {
      x: -90,
      y: -60,
      z: -9,
    },
    cameraArray: [
      256.5469893219689, 184.71359890075485, 33.96903779091804,
      189.76354217529297, 134.24280548095703, 12.795275688171387, 0, 0, 1,
      1.4654282765737874, 0.9272952180016122, 416.3169848973401, 0,
    ],
    children: [
      {
        id: 2,
        type: "point",
        name: "Room 1",
        position: {
          x: -114,
          y: -52,
          z: -12,
        },
        cameraArray: [
          67.40177419800882, 86.84078935424131, 5.039260098978837,
          75.64927864074707, 82.95748329162598, 0.5905513763427734, 0, 0, 1,
          1.2218782249742002, 0.9272952180016122, 416.3169848973401, 0,
        ],
        children: [
          {
            id: 3,
            type: "panel",
            name: "Device 1",
            description: "Lorem ipsum",
            position: {
              x: -112.035827,
              y: -55.8,
              z: -11.0,
            },
          },
          {
            id: 4,
            type: "panel",
            name: "Device 2",
            description: "Lorem ipsum",
            position: {
              x: -114.0114269,
              y: -51.285339,
              z: -12.204724,
            },
          },
        ],
      },
    },
  }

Viewer.js

import { handleInitialAutocam, handleSpriteStyle, setShowedPoints } from "react-forge-cam-points-package";
import data from 'data' //


const Viewer = () => {
    [....]

    function onDocumentLoadSuccess(doc) {
        var viewables = doc.getRoot().getDefaultGeometry();
        viewer.loadDocumentNode(doc, viewables).then((i) => {
        viewer.addEventListener(
            Autodesk.Viewing.GEOMETRY_LOADED_EVENT,
            onModelLoaded
        );
        });
    }

    const onModelLoaded = () => {
      viewer.initialPositionCam = viewer.getViewArrayFromCamera();
      const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
      handleInitialAutocam(viewer) // Autocam sin efecto
      const DataVizCore = Autodesk.DataVisualization.Core;
      const style = handleSpriteStyle() // invisible sprite

      const viewableData = new DataVizCore.ViewableData();

      dispatch(setShowedPoints(data));
      data.forEach((point) => {
        const viewable = new DataVizCore.SpriteViewable(
          point.position,
          style,
          point.id
        );

        viewableData.addViewable(viewable);
      });

      await viewableData.finish();
      dataVizExtn.addViewables(viewableData);
    }
}