marcel/omni-tools
1
0
Fork 0
mirror of https://github.com/iib0011/omni-tools.git synced 2025-09-20 06:29:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: ResultFooter

Browse Source
This commit is contained in:
Ibrahima G. Coulibaly
2024-06-25 01:10:41 +01:00
parent ff61712923
commit 173e49a10f
5 changed files with 104 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
.idea/workspace.xml generated
View File

@@ -4,17 +4,12 @@
<option name="autoReloadType" value="SELECTIVE" />
</component>
<component name="ChangeListManager">
<list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: change colors in png init">
<change afterPath="$PROJECT_DIR$/src/components/options/ColorSelector.tsx" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/config/uiConfig.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.eslintrc" beforeDir="false" afterPath="$PROJECT_DIR$/.eslintrc" afterDir="false" />
<list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: change colors in png">
<change afterPath="$PROJECT_DIR$/src/components/result/ResultFooter.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/input/ToolFileInput.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/input/ToolFileInput.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/result/ToolFileResult.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/result/ToolFileResult.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/result/ToolTextResult.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/result/ToolTextResult.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/index.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/meta.ts" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -168,7 +163,8 @@
<workItem from="1719164664347" duration="2033000" />
<workItem from="1719166718305" duration="1783000" />
<workItem from="1719168519203" duration="17675000" />
<workItem from="1719197816332" duration="27000" />
<workItem from="1719197816332" duration="1453000" />
<workItem from="1719273044735" duration="1047000" />
</task>
<task id="LOCAL-00001" summary="feat: use vite and ts">
<option name="closed" value="true" />
@@ -538,7 +534,15 @@
<option name="project" value="LOCAL" />
<updated>1719193884293</updated>
</task>
<option name="localTasksCounter" value="47" />
<task id="LOCAL-00047" summary="feat: change colors in png">
<option name="closed" value="true" />
<created>1719197875189</created>
<option name="number" value="00047" />
<option name="presentableId" value="LOCAL-00047" />
<option name="project" value="LOCAL" />
<updated>1719197875189</updated>
</task>
<option name="localTasksCounter" value="48" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
@@ -559,7 +563,6 @@
<option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
<option name="CHECK_NEW_TODO" value="false" />
<option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
<MESSAGE value="ubf jn" />
<MESSAGE value="feat: conventional commit" />
<MESSAGE value="test: init" />
<MESSAGE value="chore: remove prebuild" />
@@ -584,7 +587,8 @@
<MESSAGE value="fix: readme" />
<MESSAGE value="fix: create-tool.mjs" />
<MESSAGE value="feat: change colors in png init" />
<option name="LAST_COMMIT_MESSAGE" value="feat: change colors in png init" />
<MESSAGE value="feat: change colors in png" />
<option name="LAST_COMMIT_MESSAGE" value="feat: change colors in png" />
</component>
<component name="XSLT-Support.FileAssociations.UIState">
<expand />

34
src/components/result/ResultFooter.tsx Normal file
View File

@@ -0,0 +1,34 @@
import { Stack } from '@mui/material';
import Button from '@mui/material/Button';
import DownloadIcon from '@mui/icons-material/Download';
import ContentPasteIcon from '@mui/icons-material/ContentPaste';
import React from 'react';
export default function ResultFooter({
handleDownload,
handleCopy,
disabled
}: {
handleDownload: () => void;
handleCopy: () => void;
disabled?: boolean;
}) {
return (
<Stack mt={1} direction={'row'} spacing={2}>
<Button
disabled={disabled}
onClick={handleDownload}
startIcon={<DownloadIcon />}
>
Save as
</Button>
<Button
disabled={disabled}
onClick={handleCopy}
startIcon={<ContentPasteIcon />}
>
Copy to clipboard
</Button>
</Stack>
);
}

43
src/components/result/ToolFileResult.tsx
View File

@@ -1,17 +1,22 @@
import { Box } from '@mui/material';
import React from 'react';
import React, { useContext } from 'react';
import InputHeader from '../InputHeader';
import greyPattern from '@assets/grey-pattern.png';
import { globalInputHeight } from '../../config/uiConfig';
import ResultFooter from './ResultFooter';
import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
export default function ToolFileResult({
title = 'Result',
value
value,
extension
}: {
title?: string;
value: File | null;
extension: string;
}) {
const [preview, setPreview] = React.useState<string | null>(null);
const { showSnackBar } = useContext(CustomSnackBarContext);
React.useEffect(() => {
if (value) {
@@ -24,6 +29,35 @@ export default function ToolFileResult({
}
}, [value]);
const handleCopy = () => {
if (value) {
const blob = new Blob([value], { type: value.type });
const clipboardItem = new ClipboardItem({ [value.type]: blob });
navigator.clipboard
.write([clipboardItem])
.then(() => showSnackBar('File copied', 'success'))
.catch((err) => {
showSnackBar('Failed to copy: ' + err, 'error');
});
}
};
const handleDownload = () => {
if (value) {
const filename = 'output-omni-tools.' + extension;
const blob = new Blob([value], { type: value.type });
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}
};
return (
<Box>
<InputHeader title={title} />
@@ -55,6 +89,11 @@ export default function ToolFileResult({
</Box>
)}
</Box>
<ResultFooter
disabled={!value}
handleCopy={handleCopy}
handleDownload={handleDownload}
/>
</Box>
);
}

10
src/components/result/ToolTextResult.tsx
View File

@@ -6,6 +6,7 @@ import ContentPasteIcon from '@mui/icons-material/ContentPaste';
import React, { useContext } from 'react';
import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
import InputHeader from '../InputHeader';
import ResultFooter from './ResultFooter';
export default function ToolTextResult({
title = 'Result',
@@ -40,14 +41,7 @@ export default function ToolTextResult({
<Box>
<InputHeader title={title} />
<TextField value={value} fullWidth multiline rows={10} />
<Stack mt={1} direction={'row'} spacing={2}>
<Button onClick={handleDownload} startIcon={<DownloadIcon />}>
Save as
</Button>
<Button onClick={handleCopy} startIcon={<ContentPasteIcon />}>
Copy to clipboard
</Button>
</Stack>
<ResultFooter handleCopy={handleCopy} handleDownload={handleDownload} />
</Box>
);
}

14
src/pages/image/png/change-colors-in-png/index.tsx
View File

@@ -67,6 +67,10 @@ export default function ChangeColorsInPng() {
Math.pow(c1[2] - c2[2], 2)
);
};
const maxColorDistance = Math.sqrt(
Math.pow(255, 2) + Math.pow(255, 2) + Math.pow(255, 2)
);
const similarityThreshold = (similarity / 100) * maxColorDistance;
for (let i = 0; i < data.length; i += 4) {
const currentColor: [number, number, number] = [
@@ -74,7 +78,7 @@ export default function ChangeColorsInPng() {
data[i + 1],
data[i + 2]
];
if (colorDistance(currentColor, fromColor) <= similarity) {
if (colorDistance(currentColor, fromColor) <= similarityThreshold) {
data[i] = toColor[0]; // Red
data[i + 1] = toColor[1]; // Green
data[i + 2] = toColor[2]; // Blue
@@ -109,7 +113,11 @@ export default function ChangeColorsInPng() {
/>
</Grid>
<Grid item xs={6}>
<ToolFileResult title={'Output PNG with new colors'} value={result} />
<ToolFileResult
title={'Output PNG with new colors'}
value={result}
extension={'png'}
/>
</Grid>
</Grid>
<ToolOptions>
@@ -131,7 +139,7 @@ export default function ChangeColorsInPng() {
<ColorSelector
value={values.toColor}
onChange={(val) => setFieldValue('toColor', val)}
description={'With this color (to color).\n'}
description={'With this color (to color)'}
/>
</Box>
<Box></Box>