honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Prep Screenshots

This commit is contained in:
Peter Paul Kirschner 2021-03-23 22:53:23 +01:00
parent bea779b5fc
commit c8b41ed474
3 changed files with 49 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
samples/react-image-editor/src/components/ImageManipulation/ImageManipulation.tsx
View File

@ -26,11 +26,11 @@ export interface IImageManipulationConfig {
export interface IImageManipulationProps {
src: string;
settings?: IImageManipulationSettings[];
settingschanged?: (settings: IImageManipulationSettings[]) => void;
settingsChanged?: (settings: IImageManipulationSettings[]) => void;
imgLoadError?: () => void;
editMode?: (mode: boolean) => void;
configsettings: IImageManipulationConfig;
displyMode: DisplayMode;
configSettings: IImageManipulationConfig;
displayMode: DisplayMode;
}
export interface IImageManipulationState {
@ -118,6 +118,7 @@ export class ImageManipulation extends React.Component<IImageManipulationProps,
switch (element.type) {
case ManipulationType.Flip:
const filp = element as IFlipSettings;
////#region
if (filp.flipY) {
this.manipulateCtx.translate(0, currentheight);
this.manipulateCtx.scale(1, -1);
@ -135,6 +136,7 @@ export class ImageManipulation extends React.Component<IImageManipulationProps,
break;
}
if (rotate.rotate) {
const angelcalc = rotate.rotate * Math.PI / 180;
const oldwidth = currentwidth;
const oldheight = currentheight;
@ -258,9 +260,9 @@ this.canvasCtx.drawImage(this.bufferRef, sourceX, sourceY, sourceWidth, sourceHe
public render(): React.ReactElement<IImageManipulationProps> {
return (
<div className={styles.imageEditor} style={{
marginTop: this.props.displyMode === DisplayMode.Edit ? '40px' : '0px',
marginTop: this.props.displayMode === DisplayMode.Edit ? '40px' : '0px',
}} >
{this.props.displyMode === DisplayMode.Edit && this.getCommandBar()}
{this.props.displayMode === DisplayMode.Edit && this.getCommandBar()}
<div className={styles.imageplaceholder + ' ' + this.getMaxWidth()}
ref={(element: HTMLDivElement) => { this.wrapperRef = element; }}
style={this.canvasRef && { width: '' + this.canvasRef.width + 'px' }}
@ -398,14 +400,14 @@ this.canvasCtx.drawImage(this.bufferRef, sourceX, sourceY, sourceWidth, sourceHe
if (this.state.redosettings && this.state.redosettings.length > 0) {
this.setState({ redosettings: [] }, () => {
if (this.props.settingschanged) {
this.props.settingschanged(newhist);
if (this.props.settingsChanged) {
this.props.settingsChanged(newhist);
}
});
} else {
if (this.props.settingschanged) {
this.props.settingschanged(newhist);
if (this.props.settingsChanged) {
this.props.settingsChanged(newhist);
}
}
@ -444,8 +446,8 @@ this.canvasCtx.drawImage(this.bufferRef, sourceX, sourceY, sourceWidth, sourceHe
svalue: svalue
});
}
if (this.props.settingschanged) {
this.props.settingschanged(tmpsettings);
if (this.props.settingsChanged) {
this.props.settingsChanged(tmpsettings);
}
}
@ -502,7 +504,7 @@ this.canvasCtx.drawImage(this.bufferRef, sourceX, sourceY, sourceWidth, sourceHe
}
return (<div>
<div>
{this.props.configsettings.rotateButtons.map((value: number, index: number) => {
{this.props.configSettings.rotateButtons.map((value: number, index: number) => {
let icon: string = 'CompassNW';
if (value !== 0) { icon = 'Rotate'; }
@ -824,13 +826,13 @@ this.canvasCtx.drawImage(this.bufferRef, sourceX, sourceY, sourceWidth, sourceHe
}
if (this.state.redosettings && this.state.redosettings.length > 0) {
this.setState({ redosettings: [] }, () => {
if (this.props.settingschanged) {
this.props.settingschanged(state);
if (this.props.settingsChanged) {
this.props.settingsChanged(state);
}
});
} else {
if (this.props.settingschanged) {
this.props.settingschanged(state);
if (this.props.settingsChanged) {
this.props.settingsChanged(state);
}
}
}
@ -839,8 +841,8 @@ this.canvasCtx.drawImage(this.bufferRef, sourceX, sourceY, sourceWidth, sourceHe
if (this.props.settings && this.props.settings.length > 0) {
let state = clone(this.props.settings);
state.splice(state.length - 1, 1);
if (this.props.settingschanged) {
this.props.settingschanged(clone(state));
if (this.props.settingsChanged) {
this.props.settingsChanged(clone(state));
}
}
}
@ -881,8 +883,8 @@ this.canvasCtx.drawImage(this.bufferRef, sourceX, sourceY, sourceWidth, sourceHe
redo.push(last);
this.setState({ redosettings: redo },
() => {
if (this.props.settingschanged) {
this.props.settingschanged(settings);
if (this.props.settingsChanged) {
this.props.settingsChanged(settings);
}
});
@ -900,8 +902,8 @@ this.canvasCtx.drawImage(this.bufferRef, sourceX, sourceY, sourceWidth, sourceHe
settings.push(redo);
this.setState({ redosettings: redosettings },
() => {
if (this.props.settingschanged) {
this.props.settingschanged(settings);
if (this.props.settingsChanged) {
this.props.settingsChanged(settings);
}
});
@ -915,8 +917,8 @@ this.canvasCtx.drawImage(this.bufferRef, sourceX, sourceY, sourceWidth, sourceHe
onClick={() => {
this.setState({ redosettings: [] },
() => {
if (this.props.settingschanged) {
this.props.settingschanged([]);
if (this.props.settingsChanged) {
this.props.settingsChanged([]);
}
});

32
samples/react-image-editor/src/components/ImageManipulation/ImageManipulation.types.tsx
View File

@ -6,14 +6,7 @@ const flipVerticalIcon: any = require('../../svg/flipVertical.svg');
const resizeIcon: any = require('../../svg/resize.svg');
import * as strings from 'ImageManipulationStrings';
export enum ManipulationType {
Crop,
Scale,
Rotate,
Flip,
Filter,
Resize
}
export enum SettingPanelType {
Closed = 1,
@ -42,11 +35,6 @@ export enum FilterType {
ColorOverLay*/
}
export interface IManipulationBase {
type: ManipulationType;
}
export interface ICrop {
sx: number;
sy: number;
@ -61,8 +49,20 @@ export interface IResize {
aspect?: number;
}
export interface ICropSettings extends IManipulationBase, ICrop {
export enum ManipulationType {
Crop,
Scale,
Rotate,
Flip,
Filter,
Resize
}
export interface IManipulationBase {
type: ManipulationType;
}
export interface ICropSettings extends IManipulationBase, ICrop {
}
export interface IFlipSettings extends IManipulationBase {
flipX: boolean;
@ -81,10 +81,10 @@ export interface IFilterSettings extends IManipulationBase {
svalue?: string;
}
export interface IResizeSettings extends IManipulationBase, IResize {
}
export type IImageManipulationSettings = IFilterSettings | IRotateSettings | IScaleSettings | IFlipSettings | ICropSettings | IResizeSettings;
export type IImageManipulationSettings = IFilterSettings | IRotateSettings |
IScaleSettings | IFlipSettings | ICropSettings | IResizeSettings;
export const filterTypeData: IFilterTypeData = {

12
samples/react-image-editor/src/webparts/reactImageEditor/components/ReactImageEditor.tsx
View File

@ -74,16 +74,18 @@ export default class ReactImageEditor extends React.Component<IReactImageEditorP
description='Please configure the web part.'
buttonLabel='Configure'
onConfigure={this._onConfigure} />) :
(<ImageManipulation
(
<ImageManipulation
settings={settings}
configsettings={{
configSettings={{
rotateButtons: [-90, -45, -30, 0, 30, 45, 90]
}
}
displyMode={DisplayMode.Edit}
settingschanged={this.props.updateManipulationSettingsProperty}
displayMode={DisplayMode.Edit}
settingsChanged={this.props.updateManipulationSettingsProperty}
src={url}
/>)}
/>
)}
</div >
);