fix: sync layer visibility (#497) (#500)

src/react/components/common/imageMap/imageMap.tsx

@@ -107,24 +107,31 @@ export class ImageMap extends React.Component<IImageMapProps> {
         );
     }
 
+    public resetAllLayerVisibility = () => {
+        this.toggleCheckboxFeatureVisibility(true);
+        this.toggleLabelFeatureVisibility(true);
+        this.toggleTableFeatureVisibility(true);
+        this.toggleTextFeatureVisibility(true);
+    }
+
     /**
      * Hide/Display table features
      */
-    public toggleTableFeatureVisibility = () => {
-        this.tableBorderVectorLayer.setVisible(!this.tableBorderVectorLayer.getVisible());
-        this.tableIconVectorLayer.setVisible(!this.tableIconVectorLayer.getVisible());
-        this.tableIconBorderVectorLayer.setVisible(!this.tableIconBorderVectorLayer.getVisible());
+    public toggleTableFeatureVisibility = (visible: boolean = false) => {
+        this.tableBorderVectorLayer.setVisible(visible || !this.tableBorderVectorLayer.getVisible());
+        this.tableIconVectorLayer.setVisible(visible || !this.tableIconVectorLayer.getVisible());
+        this.tableIconBorderVectorLayer.setVisible(visible || !this.tableIconBorderVectorLayer.getVisible());
     }
 
-    public toggleLabelFeatureVisibility = () => {
-        this.labelVectorLayer.setVisible(!this.labelVectorLayer.getVisible());
+    public toggleLabelFeatureVisibility = (visible: boolean = false) => {
+        this.labelVectorLayer.setVisible(visible || !this.labelVectorLayer.getVisible());
     }
 
     /**
      * Hide/Display checkbox features
      */
-    public toggleCheckboxFeatureVisibility = () => {
-        this.checkboxVectorLayer.setVisible(!this.checkboxVectorLayer.getVisible());
+    public toggleCheckboxFeatureVisibility = (visible: boolean = false) => {
+        this.checkboxVectorLayer.setVisible(visible || !this.checkboxVectorLayer.getVisible());
     }
 
     public getResolutionForZoom = (zoom: number) => {
@@ -138,8 +145,8 @@ export class ImageMap extends React.Component<IImageMapProps> {
     /**
      * Hide/Display text features
      */
-    public toggleTextFeatureVisibility = () => {
-        this.textVectorLayer.setVisible(!this.textVectorLayer.getVisible());
+    public toggleTextFeatureVisibility = (visible: boolean = false) => {
+        this.textVectorLayer.setVisible(visible || !this.textVectorLayer.getVisible());
     }
 
     /**

src/react/components/pages/editorPage/canvas.tsx

@@ -158,6 +158,7 @@ export default class Canvas extends React.Component<ICanvasProps, ICanvasState>
             this.props.selectedAsset.asset.isRunningOCR !== prevProps.selectedAsset.asset.isRunningOCR) {
             this.selectedRegionIds = [];
             this.imageMap.removeAllFeatures();
+            this.imageMap.resetAllLayerVisibility();
             this.setState({
                 currentAsset: this.props.selectedAsset,
                 ocr: null,