Skip to content

Commit

Permalink
feat: add canvas command bar to analyze page with only zoom buttons (#…
Browse files Browse the repository at this point in the history 
…549)
  • Loading branch information
@stew-ro
stew-ro authored Sep 8, 2020
1 parent 4852c84 commit 895b527
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 76 deletions.
2 changes: 2 additions & 0 deletions src/react/components/pages/editorPage/canvas.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -245,6 +246,7 @@ export default class Canvas extends React.Component<ICanvasProps, ICanvasState>
connectionType={this.props.project.sourceConnection.providerType}
handleToggleDrawRegionMode={this.handleToggleDrawRegionMode}
drawRegionMode={this.state.drawRegionMode}
parentPage={strings.editorPage.title}
/>
<ImageMap
parentPage={ImageMapParent.Editor}
Expand Down
137 changes: 71 additions & 66 deletions src/react/components/pages/editorPage/canvasCommandBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,15 @@ import { ContextualMenuItemType, IContextualMenuItemStyles, IContextualMenuStyle
interface ICanvasCommandBarProps {
handleZoomIn: () => 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<ICanvasCommandBarProps> = (props:ICanvasCommandBarProps) => {
Expand All @@ -26,8 +27,9 @@ export const CanvasCommandBar: React.FunctionComponent<ICanvasCommandBarProps> =
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" },
Expand Down Expand Up @@ -88,66 +90,69 @@ export const CanvasCommandBar: React.FunctionComponent<ICanvasCommandBarProps> =
// 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 (
<Customizer {...dark}>
Expand Down
36 changes: 26 additions & 10 deletions src/react/components/pages/predict/predictPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -623,19 +624,34 @@ export default class PredictPage extends React.Component<IPredictPageProps, IPre

private renderImageMap = () => {
return (
<ImageMap
parentPage={ImageMapParent.Predict}
ref={(ref) => this.imageMap = ref}
imageUri={this.state.imageUri || ""}
imageWidth={this.state.imageWidth}
imageHeight={this.state.imageHeight}

featureStyler={this.featureStyler}
onMapReady={this.noOp}
/>
<div style={{ width: "100%", height: "100%" }}>
<CanvasCommandBar
handleZoomIn={this.handleCanvasZoomIn}
handleZoomOut={this.handleCanvasZoomOut}
parentPage={"predict"}
/>
<ImageMap
parentPage={ImageMapParent.Predict}
ref={(ref) => this.imageMap = ref}
imageUri={this.state.imageUri || ""}
imageWidth={this.state.imageWidth}
imageHeight={this.state.imageHeight}

featureStyler={this.featureStyler}
onMapReady={this.noOp}
/>
</div>
);
}

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();
Expand Down

0 comments on commit 895b527

Please sign in to comment.