microsoft
/
OCR-Form-Tools
зеркало из https://github.com/microsoft/OCR-Form-Tools.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

feat support header reconfigure

This commit is contained in:
Robert Stewart (eXcell 2020-11-17 23:37:37 -08:00
Родитель 39de8a8832
Коммит c381fdc055
4 изменённых файлов: 99 добавлений и 22 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

2
src/models/applicationState.ts
Просмотреть файл

@ -133,7 +133,7 @@ export interface ITableTag extends ITag {
export enum TableHeaderTypeAndFormat {
Rows = "rows",
Columns = "columns"
Columns = "columns",
}
/**

44
src/react/components/common/confirm/confirm.tsx
Просмотреть файл

@ -12,7 +12,7 @@ import {
PrimaryButton,
DefaultButton,
SpinnerSize,
Spinner
Spinner, IChoiceGroupOption, ChoiceGroup
} from "@fluentui/react";
import { MessageFormatHandler } from "../messageBox/messageBox";
import { getDarkTheme, getDefaultDarkTheme } from "../../../../common/themes";
@ -30,6 +30,7 @@ export interface IConfirmProps {
title?: string;
message: string | ReactElement<any> | MessageFormatHandler;
loadMessage?: string;
choiceGroup?: IChoiceGroupOption[];
confirmButtonText?: string;
cancelButtonText?: string;
confirmButtonTheme?: ITheme;
@ -45,6 +46,7 @@ export interface IConfirmState {
params: any[];
hideDialog: boolean;
loading: boolean;
option: IChoiceGroupOption;
}
/**
@ -60,6 +62,7 @@ export default class Confirm extends React.Component<IConfirmProps, IConfirmStat
params: null,
hideDialog: true,
loading: false,
option: undefined,
};
this.open = this.open.bind(this);
@ -78,7 +81,7 @@ export default class Confirm extends React.Component<IConfirmProps, IConfirmStat
};
const { confirmButtonTheme } = this.props;
const { hideDialog, loading } = this.state;
const { hideDialog, loading, option } = this.state;
return (
<Customizer {...dark}>
@ -95,15 +98,28 @@ export default class Confirm extends React.Component<IConfirmProps, IConfirmStat
isBlocking: true,
}}
>
{loading && this.props.loadMessage &&
<div className="spinner-container">
{loading && this.props.loadMessage &&
<div className="spinner-container">
<Spinner
label={this.props.loadMessage}
labelPosition="right"
theme={getDefaultDarkTheme()}
size={SpinnerSize.large}
label={this.props.loadMessage}
labelPosition="right"
theme={getDefaultDarkTheme()}
size={SpinnerSize.large}
/>
</div>
}
{this.props.choiceGroup &&
<>
<h5 className="mt-4" >Configure type and format for:</h5>
<ChoiceGroup
className="ml-12px type-format"
defaultSelectedKey={this.props.choiceGroup[0].key}
options={this.props.choiceGroup}
onChange={this.handleOptionChange}
required={true}
/>
</div>
</>
}
<DialogFooter>
@ -141,7 +157,11 @@ export default class Confirm extends React.Component<IConfirmProps, IConfirmStat
}
private onConfirmClick() {
this.props.onConfirm.apply(null, this.state.params);
if (this.props.choiceGroup) {
this.props.onConfirm(this.state.option.key);
} else {
this.props.onConfirm.apply(null, this.state.params);
}
if (this.props.loadMessage) {
this.load();
} else {
@ -163,4 +183,8 @@ export default class Confirm extends React.Component<IConfirmProps, IConfirmStat
return message;
}
}
private handleOptionChange = (e, option: IChoiceGroupOption) => {
this.setState({option})
}
}

4
src/react/components/common/tagInput/tableTagConfig.tsx
Просмотреть файл

@ -121,7 +121,7 @@ export default function TableTagConfig(props: ITableTagConfigProps) {
format: FieldFormat.Fixed,
rows: props.tableTag.rowKeys?.map(row => ({ name: row.fieldKey, type: row.fieldType, format: row.fieldFormat, originalName: row.fieldKey, originalFormat: row.fieldFormat, originalType: row.fieldType })),
columns: props.tableTag.columnKeys.map(col => ({ name: col.fieldKey, type: col.fieldType, format: col.fieldFormat, originalName: col.fieldKey, originalFormat: col.fieldFormat, originalType: col.fieldType })),
headerTypeAndFormat: TableElements.columns,
headerTypeAndFormat: props.tableTag.tableTypeAndFormatFor,
deletedColumns: [],
deletedRows: [],
}
@ -152,7 +152,7 @@ export default function TableTagConfig(props: ITableTagConfigProps) {
const [columns, setColumns] = useState(table.columns);
const [rows, setRows] = useState<ITableConfigItem[]>(table.rows);
const [notUniqueNames, setNotUniqueNames] = useState<{ columns: [], rows: [], tags: boolean }>({ columns: [], rows: [], tags: false });
const [headersFormatAndType, setHeadersFormatAndType] = useState<string>(TableElements.columns);
const [headersFormatAndType, setHeadersFormatAndType] = useState<string>(table.headerTypeAndFormat);
const [selectedColumn, setSelectedColumn] = useState<IObjectWithKey>(undefined);
const [selectedRow, setSelectedRow] = useState<IObjectWithKey>(undefined);
const [deletedColumns, setDeletedColumns] = useState(table.deletedColumns);

71
src/react/components/pages/editorPage/editorPage.tsx
Просмотреть файл

@ -13,7 +13,7 @@ import { strings, interpolate } from "../../../../common/strings";
import {
AssetState, AssetType, EditorMode, FieldType,
IApplicationState, IAppSettings, IAsset, IAssetMetadata,
ILabel, IProject, IRegion, ISize, ITag, FeatureCategory, TagInputMode, FieldFormat, ITableTag, ITableRegion, AssetLabelingState, ITableConfigItem
ILabel, IProject, IRegion, ISize, ITag, FeatureCategory, TagInputMode, FieldFormat, ITableTag, ITableRegion, AssetLabelingState, ITableConfigItem, TableHeaderTypeAndFormat, TableElements
} from "../../../../models/applicationState";
import IApplicationActions, * as applicationActions from "../../../../redux/actions/applicationActions";
import IProjectActions, * as projectActions from "../../../../redux/actions/projectActions";
@ -152,6 +152,7 @@ export default class EditorPage extends React.Component<IEditorPageProps, IEdito
private deleteTagConfirm: React.RefObject<Confirm> = React.createRef();
private deleteDocumentConfirm: React.RefObject<Confirm> = React.createRef();
private reconfigTableConfirm: React.RefObject<Confirm> = React.createRef();
private configureHeaderTypeAndFormatConfirm: React.RefObject<Confirm> = React.createRef();
private isUnmount: boolean = false;
public initialRightSplitPaneWidth: number;
@ -383,6 +384,25 @@ export default class EditorPage extends React.Component<IEditorPageProps, IEdito
confirmButtonTheme={getPrimaryBlueTheme()}
onConfirm={this.reconfigureTable}
/>
<Confirm
title={""}
choiceGroup={[
{
key: TableElements.columns,
text: 'Column fields',
iconProps: { iconName: 'TableHeaderRow' }
},
{
key: TableElements.rows,
text: 'Row\n fields',
iconProps: { iconName: 'TableFirstColumn' }
},
]}
ref={this.configureHeaderTypeAndFormatConfirm}
message={""}
confirmButtonTheme={getPrimaryBlueTheme()}
onConfirm={this.handleConfigureHeaderTypeAndFormatConfirm}
/>
</div>
</SplitPane>
@ -429,18 +449,51 @@ export default class EditorPage extends React.Component<IEditorPageProps, IEdito
private setTagInputMode = (tagInputMode: TagInputMode, selectedTableTagToLabel: ITableTag = this.state.selectedTableTagToLabel, selectedTableTagBody: ITableRegion[][][] = this.state.selectedTableTagBody) => { // this.resizeCanvas();
// this.resizeCanvas();
const selectedTableTagToLabelCopy: ITableTag = _.cloneDeep(selectedTableTagToLabel)
if (selectedTableTagToLabel && tagInputMode === TagInputMode.ConfigureTable) {
selectedTableTagToLabelCopy.tableTypeAndFormatFor = this.getTableHeaderTypeAndFormat(selectedTableTagToLabel)
if (!selectedTableTagToLabelCopy.tableTypeAndFormatFor) {
this.configureHeaderTypeAndFormatConfirm.current.open();
this.setState({
selectedTableTagBody,
selectedTableTagToLabel: selectedTableTagToLabelCopy,
})
return;
}
}
this.setState({
selectedTableTagBody,
selectedTableTagToLabel,
tagInputMode,
}, () => {
this.resizeCanvas();
console.log("EditorPage -> privatesetTagInputMode -> resizeCanvas")
});
this.setState({
selectedTableTagBody,
selectedTableTagToLabel: selectedTableTagToLabelCopy,
tagInputMode,
}, () => {
this.resizeCanvas();
console.log("EditorPage -> privatesetTagInputMode -> resizeCanvas")
});
}
private getTableHeaderTypeAndFormat = (selectedTableTagToLabel: ITableTag): TableHeaderTypeAndFormat => {
if (selectedTableTagToLabel.format === FieldFormat.RowDynamic) {
return TableHeaderTypeAndFormat.Columns;
} else {
if (selectedTableTagToLabel.columnKeys?.find((columnKey) => columnKey.fieldType !== FieldType.String || columnKey.fieldFormat !== FieldFormat.NotSpecified)) {
return TableHeaderTypeAndFormat.Columns;
} else if (selectedTableTagToLabel.rowKeys?.find((rowKey) => rowKey.fieldType !== FieldType.String || rowKey.fieldFormat !== FieldFormat.NotSpecified)) {
return TableHeaderTypeAndFormat.Rows;
} else {
return undefined;
}
}
}
private handleConfigureHeaderTypeAndFormatConfirm = (key) => {
console.log(key)
const selectedTableTagToLabelCopy: ITableTag = _.cloneDeep(this.state.selectedTableTagToLabel);
selectedTableTagToLabelCopy.tableTypeAndFormatFor = key;
this.setState({selectedTableTagToLabel: selectedTableTagToLabelCopy, tagInputMode: TagInputMode.ConfigureTable});
}
private handleLabelTable = (tagInputMode: TagInputMode = this.state.tagInputMode, selectedTableTagToLabel: ITableTag = this.state.selectedTableTagToLabel) => {
console.log(tagInputMode);
console.log(selectedTableTagToLabel)