11.2

Author: bollain

.gitignore

@@ -16,3 +16,4 @@ keys
 test/cypress/screenshotsFolder
 test/cypress/snapshots/**/__diff_output__/*
 .idea
+storybook-static

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "webviewer-ui",
   "author": "Apryse Software Inc.",
-  "version": "11.3.0",
+  "version": "11.2.0",
   "description": "WebViewer UI built in React",
   "main": "src/index.js",
   "scripts": {
@@ -144,4 +144,4 @@
   "lint-staged": {
     "./src/**/*.{js,ts}": "eslint --fix"
   }
-}
+}

package.json

@@ -54,10 +54,9 @@ const propTypes = {
     return null;
   },
   isOpen: PropTypes.bool.isRequired,
-  canModify: PropTypes.bool,
 };
 
-function EllipseMeasurementOverlay({ annotation, isOpen, selectedTool, canModify }) {
+function EllipseMeasurementOverlay({ annotation, isOpen, selectedTool }) {
   const { t } = useTranslation();
 
   const isReadOnly = useSelector((state) => selectors.isDocumentReadOnly(state));
@@ -236,7 +235,7 @@ function EllipseMeasurementOverlay({ annotation, isOpen, selectedTool, canModify
           className="scale-input"
           type="number"
           min="0"
-          disabled={isReadOnly || !annotation || !canModify}
+          disabled={isReadOnly || !annotation}
           value={radius}
           onChange={(event) => {
             onChangeRadiusLength(event);

src/components/MeasurementOverlay/EllipseMeasurementOverlay.js

@@ -17,12 +17,11 @@ LineMeasurementInput.propTypes = {
   annotation: PropTypes.object,
   isOpen: PropTypes.bool.isRequired,
   selectedTool: PropTypes.object,
-  canModify: PropTypes.bool,
 };
 
 const Scale = window.Core.Scale;
 
-function LineMeasurementInput({ annotation, isOpen, selectedTool, canModify }) {
+function LineMeasurementInput({ annotation, isOpen, selectedTool }) {
   const [t] = useTranslation();
   const isReadOnly = useSelector((state) => selectors.isDocumentReadOnly(state));
   const factor = annotation?.Measure.axis[0].factor;
@@ -213,7 +212,7 @@ function LineMeasurementInput({ annotation, isOpen, selectedTool, canModify }) {
           className="scale-input"
           type="number"
           min="0"
-          disabled={isReadOnly || !annotation || !canModify}
+          disabled={isReadOnly || !annotation}
           value={!annotation ? 0 : length}
           autoFocus={!isMobileDevice}
           onChange={(event) => {
@@ -239,7 +238,7 @@ function LineMeasurementInput({ annotation, isOpen, selectedTool, canModify }) {
           type="number"
           min="0"
           max="360"
-          disabled={isReadOnly || !annotation || !canModify}
+          disabled={isReadOnly || !annotation}
           value={angle}
           autoFocus={!isMobileDevice}
           onChange={(event) => {

src/components/MeasurementOverlay/LineMeasurementInput.js

@@ -10,8 +10,6 @@ import { createTemplate } from 'helpers/storybookHelper';
 import { userEvent, within, expect } from '@storybook/test';
 import { uiWithFlyout } from '../storyModularUIConfigs';
 import { fireEvent } from '@testing-library/react';
-import createItemsForBookmarkOutlineFlyout from 'src/helpers/createItemsForBookmarkOutlineFlyout';
-import { menuItems as MenuItemsForBookmarkOutlines, menuTypes } from 'src/components/MoreOptionsContextMenuFlyout/MoreOptionsContextMenuFlyout';
 
 export default {
   title: 'ModularComponents/Flyout',
@@ -45,7 +43,6 @@ const initialState = {
       noIcons: true,
       [DataElements.MAIN_MENU]: true,
       menuWithComponentItems: true,
-      bookmarkOutlineFlyout: true,
     },
     customPanels: [],
     genericPanels: [],
@@ -385,10 +382,6 @@ const initialState = {
           { dataElement: 'annotationEditToolButton', toolName: 'AnnotationEdit', className: 'FlyoutToolButton' },
         ],
       },
-      'bookmarkOutlineFlyout': {
-        dataElement: 'bookmarkOutlineFlyout',
-        items: createItemsForBookmarkOutlineFlyout(MenuItemsForBookmarkOutlines, 'portfolio', false, () => {}, menuTypes),
-      },
     },
     modularComponents: {
       panToolButton: {
@@ -535,20 +528,3 @@ FlyoutComponent.play = async ({ canvasElement }) => {
   const option1SecondRef = await canvas.findByRole('button', { name: /Item 1/i });
   expect(option1SecondRef).toBeInTheDocument();
 };
-
-const portfolioFlyoutStore = configureStore({
-  reducer: () => {
-    return {
-      ...initialState,
-      viewer: { ...initialState.viewer, activeFlyout: 'bookmarkOutlineFlyout' }
-    };
-  }
-});
-
-export const PortfolioFlyout = () => {
-  return (
-    <Provider store={portfolioFlyoutStore}>
-      <Flyout />
-    </Provider>
-  );
-};

src/components/ModularComponents/Flyout/Flyout.stories.js

@@ -2,7 +2,6 @@ import { useLayoutEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import actions from 'actions';
 import PropTypes from 'prop-types';
-import createItemsForBookmarkOutlineFlyout from 'src/helpers/createItemsForBookmarkOutlineFlyout';
 
 const createFlyoutItem = (option, icon, label) => ({
   icon,
@@ -51,7 +50,36 @@ const MoreOptionsContextMenuFlyout = ({
     const bookmarkOutlineFlyout = {
       dataElement: flyoutSelector,
       className: 'MoreOptionsContextMenuFlyout',
-      items: createItemsForBookmarkOutlineFlyout(menuItems, type, shouldHideDeleteButton, handleOnClick, menuTypes),
+      items: menuItems.map((item) => {
+        const { option } = item;
+        let hidden = false;
+        if (option === menuTypes.DELETE) {
+          hidden = shouldHideDeleteButton;
+        }
+        if ([menuTypes.DOWNLOAD, menuTypes.OPENFILE].includes(option)) {
+          hidden = type !== 'portfolio';
+        }
+        if (option === menuTypes.SETDEST) {
+          hidden = type !== 'outline';
+        }
+        if (option === menuTypes.OPENFORMFIELDPANEL) {
+          hidden = ['portfolio', 'bookmark'].includes(type);
+        }
+        if ([menuTypes.MOVE_UP, menuTypes.MOVE_DOWN].includes(option)) {
+          hidden = !['portfolio'].includes(type);
+        }
+
+        if ([menuTypes.MOVE_LEFT, menuTypes.MOVE_RIGHT, menuTypes.MOVE_UP, menuTypes.MOVE_DOWN].includes(option)) {
+          hidden = type !== 'outline';
+        }
+
+        return {
+          ...item,
+          hidden,
+          dataElement: `${type}${item.dataElement}`,
+          onClick: () => handleOnClick(item.option),
+        };
+      }),
     };
     async function runDispatch() {
       if (!currentFlyout) {

src/components/MoreOptionsContextMenuFlyout/MoreOptionsContextMenuFlyout.js

@@ -16,10 +16,9 @@ const propTypes = {
   annotation: PropTypes.object,
   isOpen: PropTypes.bool.isRequired,
   selectedTool: PropTypes.object,
-  canModify: PropTypes.bool,
 };
 
-const MeasurementDetail = ({ annotation, isOpen, selectedTool, canModify }) => {
+const MeasurementDetail = ({ annotation, isOpen, selectedTool }) => {
   const { t } = useTranslation();
 
   const data = useMemo(() => {
@@ -143,7 +142,7 @@ const MeasurementDetail = ({ annotation, isOpen, selectedTool, canModify }) => {
   const renderDetails = () => {
     const { key, precision } = data;
     if (key === 'ellipseMeasurement') {
-      return <EllipseMeasurementOverlay annotation={annotation} selectedTool={selectedTool} isOpen={isOpen} canModify={canModify} />;
+      return <EllipseMeasurementOverlay annotation={annotation} selectedTool={selectedTool} isOpen={isOpen} />;
     }
 
     return (
@@ -155,7 +154,7 @@ const MeasurementDetail = ({ annotation, isOpen, selectedTool, canModify }) => {
           </div>
         </div>
         {key === 'distanceMeasurement' && (
-          <LineMeasurementInput annotation={annotation} isOpen={isOpen} selectedTool={selectedTool} canModify={canModify} />
+          <LineMeasurementInput annotation={annotation} isOpen={isOpen} selectedTool={selectedTool} />
         )}
         {[
           'rectangularAreaMeasurement',

src/components/ScaleOverlay/MeasurementDetail.js

@@ -93,7 +93,6 @@ const ScaleOverlay = ({
   }, [annotations, selectedTool, scales]);
 
   const totalScales = Object.keys(scales).map((scale) => new Scale(scale));
-  const canModifyMeasurement = annotations.length === 1 ? core.canModify(annotations[0]) : false;
 
   return isCalibration ? (
     <CalibrationOverlay
@@ -115,7 +114,6 @@ const ScaleOverlay = ({
           annotation={annotations.length > 1 ? null : annotations[0] || null}
           selectedTool={selectedTool}
           isOpen
-          canModify={canModifyMeasurement}
         />
       )}
     </>

src/components/ScaleOverlay/ScaleOverlay.js

@@ -534,7 +534,6 @@
       & .scale-overlay-arrow {
         display: flex;
         justify-content: center;
-        align-items: center;
         width: 24px;
         height: 24px;
         color: var(--text-color);