From 895b52740cd1e8d61b5b021e6c0d992f44ce8052 Mon Sep 17 00:00:00 2001 From: stew-ro <60453211+stew-ro@users.noreply.github.com> Date: Tue, 8 Sep 2020 12:54:37 -0700 Subject: [PATCH] feat: add canvas command bar to analyze page with only zoom buttons (#549) --- .../components/pages/editorPage/canvas.tsx | 2 + .../pages/editorPage/canvasCommandBar.tsx | 137 +++++++++--------- .../components/pages/predict/predictPage.tsx | 36 +++-- 3 files changed, 99 insertions(+), 76 deletions(-) diff --git a/src/react/components/pages/editorPage/canvas.tsx b/src/react/components/pages/editorPage/canvas.tsx index 1bc16161a..a79e8fd73 100644 --- a/src/react/components/pages/editorPage/canvas.tsx +++ b/src/react/components/pages/editorPage/canvas.tsx @@ -35,6 +35,7 @@ import { constants } from "../../../../common/constants"; import { CanvasCommandBar } from "./canvasCommandBar"; import { TooltipHost, ITooltipHostStyles } from "@fluentui/react"; import { IAppSettings } from '../../../../models/applicationState'; +import { strings } from "../../../../common/strings"; pdfjsLib.GlobalWorkerOptions.workerSrc = constants.pdfjsWorkerSrc(pdfjsLib.version); @@ -245,6 +246,7 @@ export default class Canvas extends React.Component connectionType={this.props.project.sourceConnection.providerType} handleToggleDrawRegionMode={this.handleToggleDrawRegionMode} drawRegionMode={this.state.drawRegionMode} + parentPage={strings.editorPage.title} /> void; handleZoomOut: () => void; - handleRunOcr: () => void; - handleRunOcrForAllDocuments: () => void; - handleLayerChange: (layer: string) => void; - handleToggleDrawRegionMode: () => void; - drawRegionMode: boolean; - connectionType: string; + handleRunOcr?: () => void; + handleRunOcrForAllDocuments?: () => void; + handleLayerChange?: (layer: string) => void; + handleToggleDrawRegionMode?: () => void; + drawRegionMode?: boolean; + connectionType?: string; handleAssetDeleted?: () => void; - layers: any; + layers?: any; + parentPage: string; } export const CanvasCommandBar: React.FunctionComponent = (props:ICanvasCommandBarProps) => { @@ -26,8 +27,9 @@ export const CanvasCommandBar: React.FunctionComponent = scopedSettings: {}, }; - const commandBarItems: ICommandBarItemProps[] = [ - { + let commandBarItems: ICommandBarItemProps[] = []; + if (props.parentPage === strings.editorPage.title) { + commandBarItems = [{ key: "layers", text: strings.editorPage.canvas.canvasCommandBar.items.layers.text, iconProps: { iconName: "MapLayers" }, @@ -88,66 +90,69 @@ export const CanvasCommandBar: React.FunctionComponent = // onClick: () => props.handleToggleDrawRegionMode(), // disabled: !props.layers["drawnRegions"], // } - ]; + ]; + } const commandBarFarItems: ICommandBarItemProps[] = [ - { - key: "zoomOut", - text: strings.editorPage.canvas.canvasCommandBar.farItems.zoom.zoomOut, - // This needs an ariaLabel since it's icon-only - ariaLabel: strings.editorPage.canvas.canvasCommandBar.farItems.zoom.zoomOut, - iconOnly: true, - iconProps: { iconName: "ZoomOut" }, - onClick: () => props.handleZoomOut(), - }, - { - key: "zoomIn", - text: strings.editorPage.canvas.canvasCommandBar.farItems.zoom.zoomIn, - // This needs an ariaLabel since it's icon-only - ariaLabel: strings.editorPage.canvas.canvasCommandBar.farItems.zoom.zoomIn, - iconOnly: true, - iconProps: { iconName: "ZoomIn" }, - onClick: () => props.handleZoomIn(), - }, - { - key: "additionalActions", - title: strings.editorPage.canvas.canvasCommandBar.farItems.additionalActions.text, - // This needs an ariaLabel since it's icon-only - ariaLabel: strings.editorPage.canvas.canvasCommandBar.farItems.additionalActions.text, - className: "additional-action-dropdown", - iconProps: { iconName: "More" }, - subMenuProps: { - items: [ - { - key: 'divider_0', - itemType: ContextualMenuItemType.Divider, - }, - { - key: "runOcrForCurrentDocument", - text: strings.editorPage.canvas.canvasCommandBar.farItems.additionalActions.subIMenuItems.runOcrOnCurrentDocument, - iconProps: { iconName: "TextDocument" }, - onClick: () => props.handleRunOcr(), - }, - { - key: "runOcrForAllDocuments", - text: strings.editorPage.canvas.canvasCommandBar.farItems.additionalActions.subIMenuItems.runOcrOnAllDocuments, - iconProps: { iconName: "Documentation" }, - onClick: () => props.handleRunOcrForAllDocuments(), - }, - { - key: 'divider_1', - itemType: ContextualMenuItemType.Divider, - }, - { - key: "deleteAsset", - text: strings.editorPage.asset.delete.title, - iconProps: { iconName: "Delete" }, - onClick: () => props.handleAssetDeleted(), - } - ], - }, + { + key: "zoomOut", + text: strings.editorPage.canvas.canvasCommandBar.farItems.zoom.zoomOut, + // This needs an ariaLabel since it's icon-only + ariaLabel: strings.editorPage.canvas.canvasCommandBar.farItems.zoom.zoomOut, + iconOnly: true, + iconProps: { iconName: "ZoomOut" }, + onClick: () => props.handleZoomOut(), + }, + { + key: "zoomIn", + text: strings.editorPage.canvas.canvasCommandBar.farItems.zoom.zoomIn, + // This needs an ariaLabel since it's icon-only + ariaLabel: strings.editorPage.canvas.canvasCommandBar.farItems.zoom.zoomIn, + iconOnly: true, + iconProps: { iconName: "ZoomIn" }, + onClick: () => props.handleZoomIn(), + } + ] + if (props.parentPage === strings.editorPage.title) { + commandBarFarItems.push({ + key: "additionalActions", + title: strings.editorPage.canvas.canvasCommandBar.farItems.additionalActions.text, + // This needs an ariaLabel since it's icon-only + ariaLabel: strings.editorPage.canvas.canvasCommandBar.farItems.additionalActions.text, + className: "additional-action-dropdown", + iconProps: { iconName: "More" }, + subMenuProps: { + items: [ + { + key: 'divider_0', + itemType: ContextualMenuItemType.Divider, + }, + { + key: "runOcrForCurrentDocument", + text: strings.editorPage.canvas.canvasCommandBar.farItems.additionalActions.subIMenuItems.runOcrOnCurrentDocument, + iconProps: { iconName: "TextDocument" }, + onClick: () => props.handleRunOcr(), + }, + { + key: "runOcrForAllDocuments", + text: strings.editorPage.canvas.canvasCommandBar.farItems.additionalActions.subIMenuItems.runOcrOnAllDocuments, + iconProps: { iconName: "Documentation" }, + onClick: () => props.handleRunOcrForAllDocuments(), + }, + { + key: 'divider_1', + itemType: ContextualMenuItemType.Divider, + }, + { + key: "deleteAsset", + text: strings.editorPage.asset.delete.title, + iconProps: { iconName: "Delete" }, + onClick: () => props.handleAssetDeleted(), + } + ], }, - ]; + }) + } return ( diff --git a/src/react/components/pages/predict/predictPage.tsx b/src/react/components/pages/predict/predictPage.tsx index 556789da8..37c0e21e4 100644 --- a/src/react/components/pages/predict/predictPage.tsx +++ b/src/react/components/pages/predict/predictPage.tsx @@ -40,6 +40,7 @@ import axios from "axios"; import { IAnalyzeModelInfo } from './predictResult'; import RecentModelsView from "./recentModelsView"; import { getAppInsights } from '../../../../services/telemetryService'; +import { CanvasCommandBar } from "../editorPage/canvasCommandBar"; pdfjsLib.GlobalWorkerOptions.workerSrc = constants.pdfjsWorkerSrc(pdfjsLib.version); const cMapUrl = constants.pdfjsCMapUrl(pdfjsLib.version); @@ -623,19 +624,34 @@ export default class PredictPage extends React.Component { return ( - this.imageMap = ref} - imageUri={this.state.imageUri || ""} - imageWidth={this.state.imageWidth} - imageHeight={this.state.imageHeight} - - featureStyler={this.featureStyler} - onMapReady={this.noOp} - /> +
+ + this.imageMap = ref} + imageUri={this.state.imageUri || ""} + imageWidth={this.state.imageWidth} + imageHeight={this.state.imageHeight} + + featureStyler={this.featureStyler} + onMapReady={this.noOp} + /> +
); } + private handleCanvasZoomIn = () => { + this.imageMap.zoomIn(); + } + + private handleCanvasZoomOut = () => { + this.imageMap.zoomOut(); + } + private handleFileChange = () => { if (this.fileInput.current.value !== "") { const fileName = this.fileInput.current.value.split("\\").pop();