Merge remote-tracking branch 'origin/master' into fb-leap-208/clickab…

…le-settings

.devcontainer/Dockerfile

@@ -0,0 +1,16 @@
+# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.194.0/containers/javascript-node/.devcontainer/base.Dockerfile
+
+# [Choice] Node.js version: 18
+ARG VARIANT="18-bullseye"
+FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
+
+# [Optional] Uncomment this section to install additional OS packages.
+# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+#     && apt-get -y install --no-install-recommends <your-package-list-here>
+
+# [Optional] Uncomment if you want to install an additional version of node using nvm
+# ARG EXTRA_NODE_VERSION=10
+# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
+
+# [Optional] Uncomment if you want to install more global node modules
+# RUN su node -c "npm install -g <your-package-list-here>"

.devcontainer/devcontainer.json

@@ -0,0 +1,29 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
+// https://github.com/microsoft/vscode-dev-containers/tree/v0.194.0/containers/javascript-node
+{
+	"name": "Node.js",
+	"build": {
+		"dockerfile": "Dockerfile",
+		// Update 'VARIANT' to pick a Node version: 18
+		"args": {
+			"VARIANT": "18-bullseye"
+		}
+	},
+	// Set *default* container specific settings.json values on container create.
+	"settings": {},
+	// Add the IDs of extensions you want installed when the container is created.
+	"extensions": [
+		"dbaeumer.vscode-eslint",
+		"esbenp.prettier-vscode",
+		"visualstudioexptteam.vscodeintellicode",
+		"mrmlnc.vscode-scss",
+		"firefox-devtools.vscode-firefox-debug",
+		"ms-vscode-remote.vscode-remote-extensionpack"
+	],
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": "yarn install",
+	// Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+	"remoteUser": "node"
+}

src/components/ImageTransformer/ImageTransformer.js

@@ -207,6 +207,10 @@ export default class TransformerComponent extends Component {
           dragBoundFunc={this.dragBoundFunc}
           onDragEnd={() => {
             this.unfreeze();
+            setTimeout(this.checkNode);
+          }}
+          onTransformEnd={() => {
+            setTimeout(this.checkNode);
           }}
           backSelector={this.props.draggableBackgroundSelector}
         />
@@ -249,6 +253,10 @@ export default class TransformerComponent extends Component {
           dragBoundFunc={this.dragBoundFunc}
           onDragEnd={() => {
             this.unfreeze();
+            setTimeout(this.checkNode);
+          }}
+          onTransformEnd={() => {
+            setTimeout(this.checkNode);
           }}
           backSelector={this.props.draggableBackgroundSelector}
         />

src/components/ImageView/Image.js

@@ -16,6 +16,14 @@ export const RELATIVE_STAGE_WIDTH = 100;
  */
 export const RELATIVE_STAGE_HEIGHT = 100;
 
+/**
+ * Mode of snapping to pixel
+ */
+export const SNAP_TO_PIXEL_MODE = {
+  EDGE: 'edge',
+  CENTER: 'center',
+};
+
 export const Image = observer(forwardRef(({
   imageEntity,
   imageTransform,

src/components/ImageView/ImageView.js

@@ -249,8 +249,8 @@ const TransformerBack = observer(({ item }) => {
           }}
           onDragStart={e => {
             dragStartPointRef.current = {
-              x: e.target.getAttr('x'),
-              y: e.target.getAttr('y'),
+              x: item.canvasToInternalX(e.target.getAttr('x')),
+              y: item.canvasToInternalY(e.target.getAttr('y')),
             };
           }}
           dragBoundFunc={(pos) => {

src/components/InstructionsModal/InstructionsModal.tsx

@@ -12,6 +12,8 @@ export const InstructionsModal = ({
   visible: boolean,
   onCancel: () => void,
 }) => {
+  const contentStyle: Record<string, string> = { padding: '0 24px 24px', whiteSpace: 'pre-wrap' };
+
   return (
     <>
       <Modal
@@ -45,7 +47,14 @@ export const InstructionsModal = ({
         >
           {title}
         </h2>
-        <p style={{ padding: '0 24px 24px', whiteSpace: 'pre-wrap' }}>{children}</p>
+        {typeof children === 'string' ? (
+          <p
+            style={contentStyle}
+            dangerouslySetInnerHTML={{ __html: children }}
+          />
+        ) : (
+          <p style={contentStyle}>{children}</p>
+        )}
       </Modal>
     </>
   );

src/components/InstructionsModal/__tests__/InstructionsModal.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { InstructionsModal } from '../InstructionsModal';
 
 describe('InstructionsModal Component', () => {
@@ -16,6 +16,20 @@ describe('InstructionsModal Component', () => {
     expect(document.body.contains(getByText('Test Children'))).toBe(true);
   });
 
+  it('should render html', () => {
+    const title = 'Test Title';
+    const children = '<h1 style="color: red;">Test Children</h1>';
+
+    render(
+      <InstructionsModal title={title} visible={true} onCancel={() => {}}>
+        {children}
+      </InstructionsModal>,
+    );
+
+    expect(screen.queryByText('Test Children')).toBeTruthy();
+    expect(screen.queryByText('color: red')).toBeNull();
+  });
+
   it('should call onCancel when the modal is cancelled', () => {
     const onCancel = jest.fn();
     const { getByLabelText } = render(

src/components/SidePanels/OutlinerPanel/OutlinerTree.tsx

@@ -293,6 +293,8 @@ const useEventHandlers = () => {
 
     if (wasNotSelected) {
       annotation.selectArea(self);
+      // post-select hook
+      self.onSelectInOutliner?.(wasNotSelected);
     } else {
       annotation.unselectAll();
     }

src/regions/KeyPointRegion.js

@@ -47,11 +47,16 @@ const KeyPointRegionAbsoluteCoordsDEV3793 = types
     },
 
     setPosition(x, y) {
-      self.x = x;
-      self.y = y;
+      const point = self.control?.getSnappedPoint({
+        x: self.parent.canvasToInternalX(x),
+        y: self.parent.canvasToInternalY(y),
+      });
 
-      self.relativeX = (x / self.parent.stageWidth) * RELATIVE_STAGE_WIDTH;
-      self.relativeY = (y / self.parent.stageHeight) * RELATIVE_STAGE_HEIGHT;
+      self.x = point.x;
+      self.y = point.y;
+
+      self.relativeX = (point.x / self.parent.stageWidth) * RELATIVE_STAGE_WIDTH;
+      self.relativeY = (point.y / self.parent.stageHeight) * RELATIVE_STAGE_HEIGHT;
     },
 
     updateImageSize(wp, hp, sw, sh) {
@@ -117,8 +122,13 @@ const Model = types
   }))
   .actions(self => ({
     setPosition(x, y) {
-      self.x = self.parent.canvasToInternalX(x);
-      self.y = self.parent.canvasToInternalY(y);
+      const point = self.control?.getSnappedPoint({
+        x: self.parent.canvasToInternalX(x),
+        y: self.parent.canvasToInternalY(y),
+      });
+
+      self.x = point.x;
+      self.y = point.y;
     },
 
     updateImageSize() {},
@@ -227,6 +237,8 @@ const HtxKeyPointView = ({ item, setShapeRef }) => {
           const t = e.target;
 
           item.setPosition(t.getAttr('x'), t.getAttr('y'));
+          t.setAttr('x', item.canvasX);
+          t.setAttr('y', item.canvasY);
           item.annotation.history.unfreeze(item.id);
           item.notifyDrawingFinished();
         }}

src/regions/PolygonPoint.js

@@ -37,7 +37,7 @@ const PolygonPointAbsoluteCoordsDEV3793 = types.model()
       self.relativeX = (self.x / self.stage.stageWidth) * RELATIVE_STAGE_WIDTH;
       self.relativeY = (self.y / self.stage.stageHeight) * RELATIVE_STAGE_HEIGHT;
     },
-    _movePoint(x, y) {
+    _setPos(x, y) {
       self.initX = x;
       self.initY = y;
 
@@ -47,6 +47,14 @@ const PolygonPointAbsoluteCoordsDEV3793 = types.model()
       self.x = x;
       self.y = y;
     },
+    _movePoint(x, y) {
+      const point = self.parent.control?.getSnappedPoint({
+        x: self.stage.canvasToInternalX(x),
+        y: self.stage.canvasToInternalY(y),
+      });
+
+      self._setPos(point.x, point.y);
+    },
   }));
 
 const PolygonPointRelativeCoords = types
@@ -99,9 +107,17 @@ const PolygonPointRelativeCoords = types
       self.y = self.y + dy;
     },
 
+    _setPos(x, y) {
+      self.x = x;
+      self.y = y;
+    },
     _movePoint(canvasX, canvasY) {
-      self.x = self.stage.canvasToInternalX(canvasX);
-      self.y = self.stage.canvasToInternalY(canvasY);
+      const point = self.parent.control?.getSnappedPoint({
+        x: self.stage.canvasToInternalX(canvasX),
+        y: self.stage.canvasToInternalY(canvasY),
+      });
+
+      self._setPos(point.x, point.y);
     },
 
     /**
@@ -216,14 +232,17 @@ const PolygonPointView = observer(({ item, name }) => {
     onDragMove: e => {
       if (item.getSkipInteractions()) return false;
       if (e.target !== e.currentTarget) return;
-      let { x, y } = e.target.attrs;
+      const shape = e.target;
+      let { x, y } = shape.attrs;
 
       if (x < 0) x = 0;
       if (y < 0) y = 0;
       if (x > item.stage.stageWidth) x = item.stage.stageWidth;
       if (y > item.stage.stageHeight) y = item.stage.stageHeight;
 
       item._movePoint(x, y);
+      shape.setAttr('x', item.canvasX);
+      shape.setAttr('y', item.canvasY);
     },
 
     onDragStart: () => {