diff --git a/_data/components/dataViewData/01.tableConfig.yml b/_data/components/dataViewData/01.tableConfig.yml new file mode 100644 index 000000000..b1145938a --- /dev/null +++ b/_data/components/dataViewData/01.tableConfig.yml @@ -0,0 +1,59 @@ +directive: "table-config" +title: "Table configuration" + +inheritedAttributes: + [ + { + component: "OTableComponent", + path: "components/data/table/api", + attributes: + [ + "visible", + "detailButtonInRow", + "detailButtonInRowIcon", + "editButtonInRow", + "editButtonInRowIcon", + "editFormRoute", + "rowHeight", + "autoAdjust", + "autoAlignTitles", + "collapseGroupedColumns", + "columnsVisibilityButton", + "defaultVisibleColumns", + "deleteButton", + "disableSelectionFunction", + "detailMode", + "editionMode", + "enabled", + "exportButton", + "exportServiceType", + "filterColumnActiveByDefault", + "groupable", + "groupedColumns", + "horizontalScroll", + "keepSelectedItems", + "multipleSort", + "nonHidableColumns", + "pageSizeOptions", + "orderable", + "quickFilterFunction", + "resizable", + "rowClass", + "selectAllCheckbox", + "selectAllCheckboxVisible", + "selectionMode", + "showConfigurationOption", + "showExpandableIconFunction", + "showFilterOption", + "showPaginatorFirstLastButtons", + "showReportOnDemandOption", + "showChartsOnDemandOption", + "showResetWidthOption", + "sortColumns", + "virtualScroll", + "visibleColumns", + "visibleExportDialogButtons", + "selectionOnRowClick", + ], + }, + ] diff --git a/_data/components/dataViewData/02.gridConfig.yml b/_data/components/dataViewData/02.gridConfig.yml new file mode 100644 index 000000000..6a03279f2 --- /dev/null +++ b/_data/components/dataViewData/02.gridConfig.yml @@ -0,0 +1,28 @@ +directive: "grid-config" +title: "Grid configuration" + +inheritedAttributes: + [ + { + component: "OGridComponent", + path: "components/data/grid/api", + attributes: + [ + "enabled", + "visible", + "cols", + "gridItemHeight", + "gutterSize", + "insertButtonFloatable", + "insertButtonPosition", + "pageSizeOptions", + "orderable", + "quickFilterColumns", + "showFooter", + "showPageSize", + "sortColumn", + "sortableColumns", + "detailMode", + ], + }, + ] diff --git a/_data/components/image-editor.yml b/_data/components/image-editor.yml new file mode 100644 index 000000000..63e0763d7 --- /dev/null +++ b/_data/components/image-editor.yml @@ -0,0 +1,39 @@ +directive: "o-image-editor" +version: "15.0.0" + +apiTitle: "OImageEditorComponent" + +attributes: + [ + { + name: "image", + type: "base64", + default: "", + required: "", + description: "Initial image to load into the editor (e.g., 'data:image/png;base64,...'). If empty, the component shows the upload/drop zone.", + }, + { + name: "actions-position", + type: "'top' | 'bottom'", + default: "top", + required: "", + description: "Controls where the save and reset buttons are rendered inside the component. Use 'bottom' when the editor is used inside a modal/dialog to keep actions always reachable.", + }, + { + name: "save-target", + type: "'download' | 'base64'", + default: "download", + required: "", + description: "Defines the behavior of the Save action. 'download' triggers a client-side download of the resulting image; 'base64' returns the resulting image as a base64 string through the component output event.", + }, + ] + +outputs: [ + { + name: "onSaveBase64", + description: + "Event triggered when the user clicks Save and the resulting edited image is generated. Emits the final image as a data URL string (e.g., 'data:image/png;base64,...')." + } +] + +extraComponents: "imageEditorData" diff --git a/_data/menu_descriptions.yml b/_data/menu_descriptions.yml index 1b238928d..68fba8017 100644 --- a/_data/menu_descriptions.yml +++ b/_data/menu_descriptions.yml @@ -432,3 +432,6 @@ sections: - url: "/extra-components/data-view/overview" title: "Data View" description: "Display the same dataset using two different visualizations" + - url: "/extra-components/image-editor/overview" + title: "Image Editor" + description: "Display and refine the same image through different editing interactions" diff --git a/assets/images/extra-components/image-editor/example-crop.png b/assets/images/extra-components/image-editor/example-crop.png new file mode 100644 index 000000000..1c11c88d7 Binary files /dev/null and b/assets/images/extra-components/image-editor/example-crop.png differ diff --git a/assets/images/extra-components/image-editor/example-resize.png b/assets/images/extra-components/image-editor/example-resize.png new file mode 100644 index 000000000..bc169a5e7 Binary files /dev/null and b/assets/images/extra-components/image-editor/example-resize.png differ diff --git a/assets/images/extra-components/image-editor/example-upload.png b/assets/images/extra-components/image-editor/example-upload.png new file mode 100644 index 000000000..c5123d280 Binary files /dev/null and b/assets/images/extra-components/image-editor/example-upload.png differ diff --git a/docs/extra-components/image-editor/o-image-editor.component-api.md b/docs/extra-components/image-editor/o-image-editor.component-api.md new file mode 100644 index 000000000..4563e4361 --- /dev/null +++ b/docs/extra-components/image-editor/o-image-editor.component-api.md @@ -0,0 +1,7 @@ +--- +layout: o-component +permalink: /extra-components/image-editor/api +title: "Image Editor" +comp: image-editor +nav_exclude: true +--- \ No newline at end of file diff --git a/docs/extra-components/image-editor/o-image-editor.component.md b/docs/extra-components/image-editor/o-image-editor.component.md new file mode 100644 index 000000000..2313340d3 --- /dev/null +++ b/docs/extra-components/image-editor/o-image-editor.component.md @@ -0,0 +1,59 @@ +--- +layout: o-component +permalink: /extra-components/image-editor/overview +title: "Image Editor" +comp: image-editor +parent: Extra-components +nav_order: 3 +--- +{% include base_path %} +{% include toc %} + + +The `o-image-editor` component wraps `ngx-image-cropper` and provides a simplified image cropping + zooming UI consistent with the Ontimize Web design system. It supports: + +- Uploading and editing images. +- Dynamic **aspect ratio** changes and orientation. +- **Zoom** slider up to a configurable max. +- Emitting the final cropped image on apply. + +## Supported input formats (upload) + +The image picker accepts the following formats: + +- **JPEG** (`.jpg`, `.jpeg`) +- **PNG** (`.png`) +- **GIF** (`.gif`) + +## Supported output formats (save/export) + +When saving the edited image, the component can export as: + +- **PNG** (`.png`) +- **JPEG** (`.jpg`, `.jpeg`) +- **WebP** (`.webp`) + +Notes: +- If the browser supports a native “Save As…” dialog (File System Access API), the user can choose the output extension and the component will export accordingly. +- In the fallback download flow (no native save dialog), the downloaded format matches the cropper output configuration (by default, the cropper is set to `format="jpeg"`). + + +## Examples + +Below are some example screenshots to illustrate the `o-image-editor` workflow and available tools. + +### Upload + +![Upload screen](../../assets/images/extra-components/image-editor/example-upload.png) + +### Crop + +![Crop tool](../../assets/images/extra-components/image-editor/example-crop.png) + +### Resize + +![Resize tool](../../assets/images/extra-components/image-editor/example-resize.png) + +## Demo +You can see this and more examples of this component in the [OntimizeWeb playground]({{site.playgroundurl}}/main/media/editor-image). +