devexpress-reporting-react
Version:
DevExpress Reporting React provides the capability to develop a reporting application to create and customize reports.
62 lines (61 loc) • 3.76 kB
JavaScript
import React from 'react';
import Popup from 'devextreme-react/popup';
import Template from '../../../core/Template';
import dxZoom from '../../../../hooks/dxZoom';
import useDxForceRerender from '../../../../hooks/dxForceRerender';
import { PictureEditorModel } from 'devexpress-reporting/viewer/widgets/pictureEditor/_pictureEditorModel';
import { ViewModelChangedEvent } from '@devexpress/analytics-core/serializer/native/viewModels/viewModelGenerator';
const PictureEditor = ({ options, className }) => {
const pictureEditingRef = React.useRef();
const [zoomScale, setZoomScale] = React.useState();
const [popupOptions, setPopupOptions] = React.useState({});
const [pictureEditorViewModel, setPictureEditorViewModel] = React.useState();
const forceRerender = useDxForceRerender();
const canvasRef = dxZoom(zoomScale);
React.useEffect(() => {
const pictureEditorFieldModel = options.getModel();
const pictureEditorModel = new PictureEditorModel(pictureEditorFieldModel, pictureEditingRef.current, forceRerender);
const data = pictureEditorModel.getViewModel();
data.painter._viewModelEvents?.on(ViewModelChangedEvent, arg => {
if (arg.propertyName === 'scale')
setZoomScale(arg.newValue);
});
setPictureEditorViewModel(data);
pictureEditorFieldModel._setPictureEditor && pictureEditorFieldModel._setPictureEditor(pictureEditorModel);
const parent = data.getPopupContainer(pictureEditingRef.current);
setPopupOptions({
container: data.shadingEnabled ? '.dx-overlay-wrapper.dx-picture-edit-popup-content-fullscreen' : parent,
position: {
my: 'left top',
at: 'right top',
boundary: parent,
of: data.element,
collision: 'fit',
offset: '1 -1'
}
});
const timer = setTimeout(() => {
pictureEditorFieldModel._renderedHandler && pictureEditorFieldModel._renderedHandler();
});
return () => {
clearTimeout(timer);
pictureEditorModel.dispose();
pictureEditorFieldModel._setPictureEditor(null);
setPictureEditorViewModel(null);
};
}, []);
const renderContent = () => {
const popupContentRerender = useDxForceRerender();
return (React.createElement("div", { className: `dx-picture-editing-toolbar ${className}` }, pictureEditorViewModel?.actions.map(action => {
action.templateOptions?._viewModelEvents?.on(ViewModelChangedEvent, popupContentRerender);
return (React.createElement("div", { key: action.id },
React.createElement("div", { className: "dx-picture-editing-toolbar-item", onClick: event => action.action(action, event.nativeEvent), title: action.title },
React.createElement(Template, { className: "dx-picture-editing-toolbar-item-icon", template: action.icon })),
!!action.template && React.createElement(Template, { template: action.template, data: action.templateOptions })));
})));
};
return (React.createElement("div", { ref: pictureEditingRef, className: "dx-picture-editing" },
React.createElement("canvas", { ref: canvasRef }),
React.createElement(Popup, { className: "dx-picture-editing-active", width: "48px", height: "auto", wrapperAttr: { class: 'dx-picture-editing-active' }, position: popupOptions.position, container: popupOptions.container, showTitle: false, onShown: pictureEditorViewModel?.onContentReady, showCloseButton: false, animation: {}, shading: false, visible: true, contentRender: renderContent })));
};
export default PictureEditor;