AutodeskPin

Contextual Comments embeds a customizable commenting experience into your Autodesk APS viewer, enabling people to collaborate in real-time and asynchronously.

Before we start

Before utilizing the <Comments> element, it is essential to initialize a room with a defined name and ID for the participant.

How to use

To add contextual comments to an Autodesk APS viewer, you need to add the <Comments> element, configure position and styling, and then point to the 'useAutodeskPin' hook.
useAutodeskPin is a 3D Plugin hook that specifies that the element that is active to receive comments with Pins is an Autodesk APS viewer.

import { Comments, useAutodeskPin } from "@superviz/react-sdk";

import { useState } from "react";

function Room() {
  const [viewerInstance, setViewerInstance] = useState(null);
  const { pin } = useAutodeskPin({
    autodeskInstance: viewer,
  });

  useEffect(() => {
    window.Autodesk.Viewing.Initializer(options, async () => {
      const viewerDiv = document.getElementById('forge-viewer');
      const viewer = new Autodesk.Viewing.GuiViewer3D(viewerDiv);

      await viewer.start();
      setViewerInstance(viewer);
    })
  }, []);

  return (
    <Comments
      pin={pin}
      buttonLocation="top-right"
      position="left"
    />
    <div id="forge-viewer"></div>
  );
}

export default Room;

Properties

Name	Type	Description
pin	pin	Required Specifies the element or plugin that can receive comments. For Autodesk APS viewers, always use the useAutodeskPin hook.
position	string	Optional Represents the position where the element with the list of comments will be placed on the page. Values are left and right Default value: left
buttonLocation	string	Optional Represents the position where the button to activate or deactivate the comments functionality will be placed. Values are top-left, top-right, bottom-left, bottom-right or an HTML element id. Default value: top-left
styles	string	Optional CSS String that allows you to customize all elements individually.

useComments Hook

openThreads

Type: () => void

Opens the superviz-comments section, where you can see the list of comments and reply to them.

function Room() {
  const { openThreads } = useComments();

  function open() {
    openThreads();
  }

  return (
    <button onClick={open}>Open Threads</button>
  )
}

closeThreads

Type: () => void

Closes the superviz-comments section, where you can see the list of comments and reply to them.

function Room() {
  const { closeThreads } = useComments();

  function close() {
    closeThreads();
  }

  return (
    <button onClick={close}>Close Threads</button>
  )
}

useAutodeskPin Hook

Exported

pin

Type: AutodeskPin | null

An AutodeskPin object

function Room() {
  const { pin } = useAutodeskPin({
    autodeskInstance: viewer,
  });
  return (
    <Comments pin={pin} />
    <div id="forge-viewer"></div>
  );
}

destroy

Type: function

Destroy Pin object

function Room() {
  const { pin, destroy } = useAutodeskPin({
    autodeskInstance: viewer,
  });

  function destroyPin() {
    destroy();
  }

  return (
    <>
      <Comments pin={pin} />
      <div id="forge-viewer"></div>
      <button onclick={destroyPin}>Destroy</button>
    </>
  );
}

Parameters

autodeskInstance

Type: string

Specifies the Autodesk viewer instance where comments can be added.

function Room() {
  const { pin } = useAutodeskPin({
    autodeskInstance: viewer,
  });

  return (
    <Comments pin={pin} />
    <div id="forge-viewer"></div>
  );
}