+
-
-
- )}
+
+
+
+
setEditorSettings(settings)}
/>
+
);
};
-const DisplayImage = ({
- image,
- setOverlay,
- setImageDisplayRatio,
-}: {
+interface DisplayImageProps {
image: File | Blob;
setOverlay?: boolean;
setImageDisplayRatio?: (val: number) => void;
-}) => {
- const [overlaySize, setOverlaySize] = useState<[number, number] | null>();
- const imageRef = createRef();
+}
+
+const DisplayImage = (props: DisplayImageProps) => {
+ const [overlaySize, setOverlaySize] = createSignal<[number, number] | null>();
- useEffect(() => {
- if (!imageRef.current) return;
+ let imageRef: HTMLImageElement;
- imageRef.current.onload = once(e => {
- setImageDisplayRatio?.(e.target.width / e.target.naturalWidth);
+ createEffect(() => {
+ if (!imageRef) return;
+
+ imageRef.onload = (e: any) => {
+ props.setImageDisplayRatio?.(e.target.width / e.target.naturalWidth);
setOverlaySize([e.target.width, e.target.height]);
- });
- }, [imageRef.current]);
+ };
+ });
return (
(true);
-
- const updateHeightWidth = useCallback(
- debounce(({ height, width }: { height?: number | null; width?: number | null }) => {
- if (height) {
- if (keetRatio)
- onEditorSettingsChanged({
- ...editorSettings,
- height,
- width: Math.ceil((height / editorSettings.height) * editorSettings.width),
- });
- if (!keetRatio) onEditorSettingsChanged({ ...editorSettings, height });
- }
+const Editor = (props: EditorProperties) => {
+ const [keetRatio, setKeepRatio] = createSignal(true);
- if (width) {
- if (keetRatio)
- onEditorSettingsChanged({
- ...editorSettings,
- height: Math.ceil((width / editorSettings.width) * editorSettings.height),
- width,
- quality: editorSettings.quality,
- });
- if (!keetRatio) onEditorSettingsChanged({ ...editorSettings, width });
- }
- }, 300),
- [editorSettings, keetRatio],
- );
+ const updateHeightWidth = ({ height, width }: { height?: number | null; width?: number | null }) => {
+ if (height) {
+ if (keetRatio())
+ props.onEditorSettingsChanged({
+ ...props.editorSettings,
+ height,
+ width: Math.ceil((height / props.editorSettings.height) * props.editorSettings.width),
+ });
+ if (!keetRatio()) props.onEditorSettingsChanged({ ...props.editorSettings, height });
+ }
+
+ if (width) {
+ if (keetRatio())
+ props.onEditorSettingsChanged({
+ ...props.editorSettings,
+ height: Math.ceil((width / props.editorSettings.width) * props.editorSettings.height),
+ width,
+ quality: props.editorSettings.quality,
+ });
+ if (!keetRatio()) props.onEditorSettingsChanged({ ...props.editorSettings, width });
+ }
+ };
- const setThumbnail = useCallback(
- debounce(size => {
- if (!imageMetadata) return;
+ const setThumbnail = size => {
+ if (!props.imageMetadata) return;
- setKeepRatio(true);
- if (imageMetadata.height > imageMetadata.width) {
- updateHeightWidth({ height: Math.min(size, imageMetadata.height) });
- } else {
- updateHeightWidth({ width: Math.min(size, imageMetadata.width) });
- }
- }),
- [imageMetadata],
- );
+ setKeepRatio(true);
+ if (props.imageMetadata.height > props.imageMetadata.width) {
+ updateHeightWidth({ height: Math.min(size, props.imageMetadata.height) });
+ } else {
+ updateHeightWidth({ width: Math.min(size, props.imageMetadata.width) });
+ }
+ };
- const reset = useCallback(() => {
- if (!imageMetadata) return;
+ const reset = () => {
+ if (!props.imageMetadata) return;
setKeepRatio(true);
- updateHeightWidth({ width: imageMetadata.width, height: imageMetadata.height });
- }, [imageMetadata]);
+ updateHeightWidth({ width: props.imageMetadata.width, height: props.imageMetadata.height });
+ };
return (
-
Original Image
- {originalImage && originalImageMetadata && ( - <> -
- File Size: {formatBytes(originalImage.size)} w: {originalImageMetadata.width}px h:
- {originalImageMetadata.height}px
-
-
+ File Size: {formatBytes(originalImage().size)} w: {originalImageMetadata().width}px h:
+ {originalImageMetadata().height}px
+
+ Transformed Image
- {alteredImage &&File Size: {formatBytes(alteredImage.size)}
}
- {alteredImage && File Size: {formatBytes(alteredImage().size)}
+
- {setOverlay && overlaySize && (
-
- )}
- })
+
+ {overlaySize => (
+
+ )}
+
+ })
);
};
@@ -175,137 +194,148 @@ interface EditorProperties {
onEditorSettingsChanged: (settings: EditorSettings) => void;
}
-const Editor = ({ imageMetadata, editorSettings, onEditorSettingsChanged }: EditorProperties) => {
- const [keetRatio, setKeepRatio] = useState
-
Manipulator settings
-Optimalize
+
+
Manipulator settings
+ Optimalize
Quality:{" "}
-