Skip to content

Commit

Permalink
upload works.
Browse files Browse the repository at this point in the history
  • Loading branch information
@ishaisagi-hns
ishaisagi-hns committed Dec 19, 2024
1 parent 0dbc452 commit d491812
Show file tree
Hide file tree
Showing 4 changed files with 344 additions and 115 deletions.
2 changes: 1 addition & 1 deletion samples/react-image-editor/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-image-editor",
"version": "1.0.0",
"version": "1.1.0",
"private": true,
"main": "lib/index.js",
"engines": {
Expand Down
165 changes: 81 additions & 84 deletions samples/react-image-editor/src/components/ImageManipulation/ImageManipulation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,10 +85,9 @@ export class ImageManipulation extends React.Component<IImageManipulationProps,
this.state = {
settingPanel: SettingPanelType.Closed,
redosettings: [],
lockAspectCrop: true, // Initialized as true
lockAspectResize: true, // Initialized as true
lockAspectCrop: true,
lockAspectResize: true
};

this.openPanel = this.openPanel.bind(this);
this.setRotate = this.setRotate.bind(this);
this.calcRotate = this.calcRotate.bind(this);
Expand All @@ -101,36 +100,8 @@ export class ImageManipulation extends React.Component<IImageManipulationProps,

public componentDidMount(): void {
this.imageChanged(this.props.src);

const aspect = this.getAspect();

if (this.state.lockAspectCrop) {
const cropSettings: ICropSettings = {
type: ManipulationType.Crop,
sx: 0,
sy: 0,
width: this.canvasRef ? this.canvasRef.width : 0,
height: this.canvasRef ? this.canvasRef.height : 0,
aspect,
};
this.addOrUpdateLastManipulation(cropSettings);
console.log('Applied initial crop settings:', cropSettings);
}

if (this.state.lockAspectResize) {
const resizeSettings: IResizeSettings = {
type: ManipulationType.Resize,
width: this.canvasRef ? this.canvasRef.width : 0,
height: this.canvasRef ? this.canvasRef.height : 0,
aspect,
};
this.addOrUpdateLastManipulation(resizeSettings);
console.log('Applied initial resize settings:', resizeSettings);
}
}



public componentDidUpdate(prevProps: IImageManipulationProps): void {
if (prevProps.src !== this.props.src) {
this.imageChanged(this.props.src);
Expand Down Expand Up @@ -383,11 +354,11 @@ export class ImageManipulation extends React.Component<IImageManipulationProps,
);
}


private getResizeGrid(): JSX.Element {
const lastset: IResizeSettings = this.getLastManipulation() as IResizeSettings;
let lastdata: IResizeSettings;


// Initialize resize data based on the current settings or default to aspect ratio
if (lastset && lastset.type === ManipulationType.Resize) {
lastdata = lastset;
} else {
Expand All @@ -401,26 +372,18 @@ export class ImageManipulation extends React.Component<IImageManipulationProps,
aspect: aspect,
};
}

// Ensure minimum dimensions
lastdata.width = Math.max(lastdata.width, 1);
lastdata.height = Math.max(lastdata.height, 1);


console.log('Resize data passed to ImageGrid:', lastdata);

return (
<ImageGrid
width={lastdata.width}
height={lastdata.height}
aspect={lastdata.aspect}
onChange={(size) => {
const aspect = this.state.lockAspectResize ? this.getAspect() : undefined;
this.setResize(size.width, size.height, aspect);
}}
onChange={(size) => this.setResize(size.width, size.height, lastdata.aspect)}
/>
);
}



private getMaxWidth(): string {
Expand Down Expand Up @@ -792,7 +755,23 @@ export class ImageManipulation extends React.Component<IImageManipulationProps,
return values;
}


private setResize(width: number, height: number, aspect: number): void {
const values: IResizeSettings = this.getResizeValues();
if (width) {
values.width = width;
if (aspect) {
values.height = values.width / aspect;
}
}
if (height) {
values.height = height;
if (aspect) {
values.width = values.height * aspect;
}
}
values.aspect = aspect;
this.addOrUpdateLastManipulation(values);
}

private getCropValues(): ICropSettings {
const state: IImageManipulationSettings = this.getLastManipulation();
Expand All @@ -813,54 +792,70 @@ export class ImageManipulation extends React.Component<IImageManipulationProps,
const values: ICropSettings = this.getCropValues();
const currentheight: number = this.bufferRef.height;
const currentwidth: number = this.bufferRef.width;

if (!isNaN(sx) && sx >= 0) {
values.sx = Math.min(sx, currentwidth - 1);
if (sx >= currentwidth) {
values.sx = currentwidth - 1;
} else {
values.sx = sx;
}

// limit max width
if ((values.width + values.sx) > currentwidth) {
values.width = currentwidth - values.sx;
}

}
if (!isNaN(sy) && sy >= 0) {
values.sy = Math.min(sy, currentheight - 1);
if (sy >= currentheight) {
values.sy = currentheight - 1;
} else {
values.sy = sy;
}

// limit max height
if ((values.height + values.sy) > currentheight) {
values.height = currentheight - values.sy;
}
}
if (!isNaN(width) && width >= 0) {
values.width = Math.min(width, currentwidth - values.sx);
if (aspect) {
values.height = values.width / aspect;
if ((width + values.sx) > currentwidth) {
values.width = currentwidth - values.sx;
} else {
values.width = width;
}
}
if (!isNaN(height) && height >= 0) {
values.height = Math.min(height, currentheight - values.sy);
if (aspect) {
values.width = values.height * aspect;
if ((height + values.sy) > currentheight) {
values.height = currentheight - values.sy;
} else {
values.height = height;
}
}
values.aspect = aspect;
this.addOrUpdateLastManipulation(values);
}
if (isNaN(values.aspect) && !isNaN(aspect)) {
// aspect added

private setResize(width: number, height: number, aspect: number): void {
const values: IResizeSettings = this.getResizeValues();

if (width && width > 0) {
values.width = width;
if (aspect) {
values.height = width / aspect;
// limit w
if ((values.width + values.sx) > currentwidth) {
values.width = currentwidth - values.sx;
}
}
if (height && height > 0) {
values.height = height;
if (aspect) {
values.width = height * aspect;

values.height = values.width / aspect;
// limit h adn recalulate w
if ((values.height + values.sy) > currentheight) {
values.height = currentheight - values.sy;
values.width = values.height * aspect;
}
}

// Ensure minimum dimensions
values.width = Math.max(values.width, 1);
values.height = Math.max(values.height, 1);


values.aspect = aspect;
if (aspect && (!isNaN(sx) || !isNaN(width))) {
values.height = values.width / aspect;
}
if (aspect && (!isNaN(sy) || !isNaN(height))) {
values.width = values.height * aspect;
}
this.addOrUpdateLastManipulation(values);
}



private setRotate(value: number): void {
this.addOrUpdateLastManipulation({
Expand Down Expand Up @@ -928,23 +923,25 @@ export class ImageManipulation extends React.Component<IImageManipulationProps,
if (!state) {
state = [];
}

// Update or add the new manipulation

if (state.length > 0 && state[state.length - 1].type === changed.type) {
state[state.length - 1] = changed;
} else {
state.push(changed);
}

// Clear redo settings and trigger the settingsChanged callback
this.setState({ redosettings: [] }, () => {

if (this.state.redosettings && this.state.redosettings.length > 0) {
this.setState({ redosettings: [] }, () => {
if (this.props.settingsChanged) {
this.props.settingsChanged(state);
}
});
} else {
if (this.props.settingsChanged) {
console.log('Updating settings:', state); // Debugging
this.props.settingsChanged(state);
}
});
}
}


private removeLastManipulation(): void {
if (this.props.settings && this.props.settings.length > 0) {
Expand Down
68 changes: 58 additions & 10 deletions samples/react-image-editor/src/webparts/reactImageEditor/ReactImageEditorWebPart.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,16 +30,24 @@ export default class ReactImageEditorWebPart extends BaseClientSideWebPart<IReac
title: this.properties.title,
url: this.properties.url,
settings: this.properties.settings,
showEditIcon:this.properties.showEditIcon,
altText:this.properties.altText,


showEditIcon: this.properties.showEditIcon,
altText: this.properties.altText,
hideRecentTab: this.properties.hideRecentTab,
hideWebSearchTab: this.properties.hideWebSearchTab,
hideStockImages: this.properties.hideStockImages,
hideOrganisationalAssetTab: this.properties.hideOrganisationalAssetTab,
hideOneDriveTab: this.properties.hideOneDriveTab,
hideSiteFilesTab: this.properties.hideSiteFilesTab,
hideLocalUploadTab: this.properties.hideLocalUploadTab,
hideLinkUploadTab: this.properties.hideLinkUploadTab,



updateTitleProperty: (value: string) => { this.properties.title = value; },
updateUrlProperty: (value: string) => {
// tslint:disable-next-line: curly
if (this.properties.url !== value)
this.properties.url = value;
// tslint:disable-next-line: curly
if (this.properties.url !== value)
this.properties.url = value;
this.properties.settings = [];
this.render();
},
Expand Down Expand Up @@ -73,16 +81,56 @@ export default class ReactImageEditorWebPart extends BaseClientSideWebPart<IReac
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('altText',{label:strings.AltTextFieldLabel}),
PropertyPaneTextField('altText', { label: strings.AltTextFieldLabel }),
PropertyPaneToggle('showTitle', {
label: strings.ShowTitleFieldLabel
})
,
PropertyPaneToggle('showEditIcon', {
label: strings.ShowEditIconFieldLabel
}),
PropertyPaneLabel('urlInfo',{text:`The selected image is at ${this.properties.url?this.properties.url:'Not yet selected'} `})

PropertyPaneLabel('urlInfo', { text: `The selected image is at ${this.properties.url ? this.properties.url : 'Not yet selected'} ` }),
PropertyPaneToggle('hideRecentTab', {
label: 'Hide Recent Tab',
onText: 'Yes',
offText: 'No'
}),
PropertyPaneToggle('hideWebSearchTab', {
label: 'Hide Web Search Tab',
onText: 'Yes',
offText: 'No'
}),
PropertyPaneToggle('hideStockImages', {
label: 'Hide Stock Images Tab',
onText: 'Yes',
offText: 'No'
}),
PropertyPaneToggle('hideOrganisationalAssetTab', {
label: 'Hide Organisational Asset Tab',
onText: 'Yes',
offText: 'No'
}),
PropertyPaneToggle('hideOneDriveTab', {
label: 'Hide OneDrive Tab',
onText: 'Yes',
offText: 'No'
}),
PropertyPaneToggle('hideSiteFilesTab', {
label: 'Hide Site Files Tab',
onText: 'Yes',
offText: 'No'
}),
PropertyPaneToggle('hideLocalUploadTab', {
label: 'Hide Local Upload Tab',
onText: 'Yes',
offText: 'No'
}),
PropertyPaneToggle('hideLinkUploadTab', {
label: 'Hide Link Upload Tab',
onText: 'Yes',
offText: 'No'
}),

]
}
]
Expand Down
Loading

0 comments on commit d491812

Please sign in to comment.