Skip to content

Commit

Permalink
Merge pull request #15 from chore/format-files
Browse files Browse the repository at this point in the history 
Format files
  • Loading branch information
@ricafolio
ricafolio authored Apr 15, 2024
2 parents a310875 + 32df329 commit 1b16051
Show file tree
Hide file tree
Showing 25 changed files with 283 additions and 245 deletions.
1 change: 1 addition & 0 deletions .prettierignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,4 @@ dist-ssr
*.njsproj
*.sln
*.sw?
*.md
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
Expand Down
11 changes: 5 additions & 6 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,20 @@
import { Toaster } from "react-hot-toast"
import { Provider } from "react-redux"
import store from "@/redux/store"

import Canvas from "@/components/Canvas/Canvas"
import EditingPanel from "@/components/Tab/TabPanel"
import store from "@/redux/store"
import { Toaster } from "react-hot-toast"
import { Provider } from "react-redux"

function App() {
return (
<Provider store={store}>
<div className="flex flex-row flex-wrap">
<Toaster />

<aside className="w-full sm:w-3/12 order-2 sm:order-1 sm:border-r border-gray-800 sm:bg-neutral-900">
<aside className="order-2 w-full border-gray-800 sm:order-1 sm:w-3/12 sm:border-r sm:bg-neutral-900">
<EditingPanel />
</aside>

<main className="w-full sm:w-9/12 order-1 sm:order-2">
<main className="order-1 w-full sm:order-2 sm:w-9/12">
<Canvas />
</main>
</div>
Expand Down
15 changes: 8 additions & 7 deletions src/components/Button/DownloadButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import DownloadIcon from "@/components/Icon/DownloadIcon"
import { useCanvasData, useCanvasImageData } from "@/hooks/useReduxData"
import clsx from "clsx"
import { useRef } from "react"

import DownloadIcon from "@/components/Icon/DownloadIcon"
import toast from "react-hot-toast"
import clsx from "clsx"

export default function DownloadButton() {
const linkRef = useRef<HTMLAnchorElement | null>(null)
Expand All @@ -23,20 +22,22 @@ export default function DownloadButton() {
}

return (
<div className={clsx("bottom-0 left-0 pb-4 px-2", "sm:fixed sm:p-4")}>
<div className={clsx("bottom-0 left-0 px-2 pb-4", "sm:fixed sm:p-4")}>
<a ref={linkRef} id="download" className="hidden"></a>
<button
className={clsx([
"w-full flex items-center justify-center",
"flex w-full items-center justify-center",
"mt-4 px-5 py-3 text-sm font-semibold",
"transition transition-colors",
"rounded bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-500"
"rounded bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-500",
])}
onClick={downloadImage}
disabled={uploadCount !== maxImageUploads}
>
<DownloadIcon className="mr-2" />
<span>Download <span className="inline sm:hidden md:inline">collage</span></span>
<span>
Download <span className="inline sm:hidden md:inline">collage</span>
</span>
</button>
</div>
)
Expand Down
20 changes: 7 additions & 13 deletions src/components/Canvas/Canvas.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,26 @@
import * as fabric from "fabric"

import CanvasFooter from "@/components/Canvas/CanvasFooter"
import { OBJECT_LOCKED, ASPECT_RATIOS } from "@/constants/canvasConfig"
import { useCanvasAction, useTabAction } from "@/hooks/useReduxAction"
import { useCanvasConfigData } from "@/hooks/useReduxData"
import { CustomImageObject } from "@/types"
import * as fabric from "fabric"
import { useEffect, useRef } from "react"

import { useCanvasConfigData } from "@/hooks/useReduxData"
import { useCanvasAction, useTabAction } from "@/hooks/useReduxAction"

import toast from "react-hot-toast"
import CanvasFooter from "@/components/Canvas/CanvasFooter"

export default function Canvas() {
const canvasRef = useRef<HTMLCanvasElement | null>(null)
const inputRef = useRef<HTMLInputElement | null>(null)
const wrapperRef = useRef<HTMLDivElement | null>(null)

// Get necessary Redux data via hooks
const {
activeTemplateIndex,
activeRatioIndex,
activeTemplate
} = useCanvasConfigData()
const { activeTemplateIndex, activeRatioIndex, activeTemplate } =
useCanvasConfigData()

const {
addImageAction,
clearSelectedImageAction,
setCanvasAction,
setSelectedImageAction
setSelectedImageAction,
} = useCanvasAction()

const { changeTabAction } = useTabAction()
Expand Down
181 changes: 105 additions & 76 deletions src/components/Filter/FilterSliderInput.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,25 @@
import { useImageFilterAction } from "@/hooks/useReduxAction"
import { useCanvasData, useCanvasImageData } from "@/hooks/useReduxData"
import type {
FilterControlTypeProps,
FilterListType,
LowercaseFilterIdType,
} from "@/types"
import clsx from "clsx"
import * as fabric from "fabric"
import toast from "react-hot-toast"

import type { FilterControlTypeProps, FilterListType, LowercaseFilterIdType } from "@/types"

import { useCanvasData, useCanvasImageData } from "@/hooks/useReduxData"
import { useImageFilterAction } from "@/hooks/useReduxAction"

export default function FilterControl(props: FilterControlTypeProps) {
const { id, min, max, step, newFilter, isMobile, activeFilter, setActiveFilter } = props
const {
id,
min,
max,
step,
newFilter,
isMobile,
activeFilter,
setActiveFilter,
} = props
const filterTypeLower = id.toLowerCase()

// Get necessary data from Redux store
Expand All @@ -17,9 +28,9 @@ export default function FilterControl(props: FilterControlTypeProps) {
const { changeFilterValue } = useImageFilterAction()

// get image filter historical values or set all to zero if none is selected
const selectedImage = (
selectedImageIndex !== null
? images[selectedImageIndex]
const selectedImage =
selectedImageIndex !== null
? images[selectedImageIndex]
: {
filters: {
brightness: 0,
Expand All @@ -28,30 +39,33 @@ export default function FilterControl(props: FilterControlTypeProps) {
saturation: 0,
vibrance: 0,
blur: 0,
}
},
}
)

// actual range value
const rangeValue = selectedImage.filters[filterTypeLower as LowercaseFilterIdType]
const rangeValue =
selectedImage.filters[filterTypeLower as LowercaseFilterIdType]

// Compute the percentage based on the range value
const computePercentage = () => Math.round(((rangeValue - min) / (max - min)) * 100)
const computePercentage = () =>
Math.round(((rangeValue - min) / (max - min)) * 100)

// Add or update the image filter when the range value changes
const addFilter = async (filterValue: number) => {
if (!canvas) return

const image = canvas.getActiveObject() as fabric.Image
const parsedImage: fabric.Image = await image.toJSON()
const filterIndex = parsedImage.filters.findIndex((f: { type: string }) => filterTypeLower in f)
const filterIndex = parsedImage.filters.findIndex(
(f: { type: string }) => filterTypeLower in f,
)

if (filterIndex !== -1) {
// Tweak existing filter
const filterInstance = image.filters[filterIndex] as FilterListType

// eslint-disable-next-line @typescript-eslint/no-explicit-any
(filterInstance as { [key: string]: any })[filterTypeLower] = filterValue
;(filterInstance as { [key: string]: any })[filterTypeLower] = filterValue
} else {
// Create new filter
image.filters.push(newFilter(filterValue))
Expand All @@ -75,87 +89,102 @@ export default function FilterControl(props: FilterControlTypeProps) {
changeFilterValue({
imageIndex: selectedImageIndex,
filterType: filterTypeLower,
filterValue: parseFloat(value)
filterValue: parseFloat(value),
})
}

if (isMobile) {
return (
<>
{activeFilter === null
{activeFilter === null ? (
// LIST OF FILTERS
? (
<button
onClick={() => setActiveFilter(id)}
className={clsx(
"cursor-pointer transition-colors",
"min-w-20 h-20 mx-1 px-2",
"flex flex-col items-center justify-center text-center",
"rounded hover:bg-neutral-800",
)}>
<span className="w-full text-center">
{selectedImageIndex !== null ? `${computePercentage()}` : "-"}
</span>
<h3 className="w-full text-center text-sm font-medium">{id}</h3>
</button>
)
: (
// SHOW ACTIVE FILTER INNER CONTENT
activeFilter === id && (
<div className="w-full flex items-center">
<button
onClick={() => setActiveFilter(null)}
className={clsx(
"cursor-pointer",
"mx-1 px-1 h-20 w-16",
"flex flex-col items-center justify-center",
"rounded hover:bg-neutral-800",
)}
<button
onClick={() => setActiveFilter(id)}
className={clsx(
"cursor-pointer transition-colors",
"min-w-20 mx-1 h-20 px-2",
"flex flex-col items-center justify-center text-center",
"rounded hover:bg-neutral-800",
)}
>
<span className="w-full text-center">
{selectedImageIndex !== null ? `${computePercentage()}` : "-"}
</span>
<h3 className="w-full text-center text-sm font-medium">{id}</h3>
</button>
) : (
// SHOW ACTIVE FILTER INNER CONTENT
activeFilter === id && (
<div className="flex w-full items-center">
<button
onClick={() => setActiveFilter(null)}
className={clsx(
"cursor-pointer",
"mx-1 h-20 w-16 px-1",
"flex flex-col items-center justify-center",
"rounded hover:bg-neutral-800",
)}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 15 15"
>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 15 15"><path fill="currentColor" fillRule="evenodd" d="M8.842 3.135a.5.5 0 0 1 .023.707L5.435 7.5l3.43 3.658a.5.5 0 0 1-.73.684l-3.75-4a.5.5 0 0 1 0-.684l3.75-4a.5.5 0 0 1 .707-.023Z" clipRule="evenodd"/></svg>
<span className="text-sm">Back</span>
</button>

<div className="grow mx-3">
<div className="flex flex-row w-full items-center transition-colors rounded">
<h3 className="w-1/2 text-left font-medium">{id}</h3>
<span className="w-1/2 text-right">
{selectedImageIndex !== null ? `${computePercentage()}%` : "-"}
</span>
</div>

<div className="w-full flex justify-center items-center">
<input
id={id}
type="range"
min={min}
max={max}
step={step}
value={rangeValue}
onChange={(e) => setValue(e.target.value)}
className="w-full my-2"
/>
</div>
<path
fill="currentColor"
fillRule="evenodd"
d="M8.842 3.135a.5.5 0 0 1 .023.707L5.435 7.5l3.43 3.658a.5.5 0 0 1-.73.684l-3.75-4a.5.5 0 0 1 0-.684l3.75-4a.5.5 0 0 1 .707-.023Z"
clipRule="evenodd"
/>
</svg>
<span className="text-sm">Back</span>
</button>

<div className="mx-3 grow">
<div className="flex w-full flex-row items-center rounded transition-colors">
<h3 className="w-1/2 text-left font-medium">{id}</h3>
<span className="w-1/2 text-right">
{selectedImageIndex !== null
? `${computePercentage()}%`
: "-"}
</span>
</div>

<div className="flex w-full items-center justify-center">
<input
id={id}
type="range"
min={min}
max={max}
step={step}
value={rangeValue}
onChange={(e) => setValue(e.target.value)}
className="my-2 w-full"
/>
</div>
</div>
)
</div>
)
}
)}
</>
)
}

return (
<div data-testid={filterTypeLower} className="border-b border-neutral-800 py-4">
<div className="flex flex-row w-full items-center transition-colors rounded">
<div
data-testid={filterTypeLower}
className="border-b border-neutral-800 py-4"
>
<div className="flex w-full flex-row items-center rounded transition-colors">
<h3 className="w-1/2 text-left font-medium">{id}</h3>
<span className="w-1/2 text-right">
{selectedImageIndex !== null ? `${computePercentage()}%` : "-"}
</span>
</div>

<div className="w-full flex justify-center items-center">
{(
<div className="flex w-full items-center justify-center">
{
<input
id={id}
type="range"
Expand All @@ -164,9 +193,9 @@ export default function FilterControl(props: FilterControlTypeProps) {
step={step}
value={rangeValue}
onChange={(e) => setValue(e.target.value)}
className="w-full my-2"
className="my-2 w-full"
/>
)}
}
</div>
</div>
)
Expand Down
Loading

0 comments on commit 1b16051

Please sign in to comment.