diff --git a/src/components/Layer.jsx b/src/components/Layer.jsx
index d2c7ab7..ea2bea6 100644
--- a/src/components/Layer.jsx
+++ b/src/components/Layer.jsx
@@ -6,9 +6,11 @@ import { InputLabel } from "@mui/material";
import { FormControl } from "@mui/material";
import { Paper } from "@mui/material";
import { IconButton } from "@mui/material";
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
import DeleteIcon from '@mui/icons-material/Delete';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
import React from 'react'
import { display } from "@mui/system";
@@ -16,29 +18,29 @@ function makeColorGradients(colorMapValues) {
let gradients = ''
let c = colorMapValues
let n = c.R.length
- gradients += `rgba(${c.R[n-1]},${c.G[n-1]},${c.B[n-1]},${1})`
+ gradients += `rgba(${c.R[n - 1]},${c.G[n - 1]},${c.B[n - 1]},${1})`
gradients += `linear-gradient(90deg,`
- for (let j=0; j< n; j++) {
- gradients += `rgba(${c.R[j]},${c.G[j]},${c.B[j]},${1}) ${(j/(n-1))*100}%,`
+ for (let j = 0; j < n; j++) {
+ gradients += `rgba(${c.R[j]},${c.G[j]},${c.B[j]},${1}) ${(j / (n - 1)) * 100}%,`
}
- gradients = gradients.slice(0,-1)
+ gradients = gradients.slice(0, -1)
gradients += ')'
return gradients
}
-export default function Layer(props){
+export default function Layer(props) {
const image = props.image
const [detailsOpen, setDetailsOpen] = React.useState(false)
const [color, setColor] = React.useState(image.colorMap)
- let ArrowIcon = detailsOpen ? :
+ let ArrowIcon = detailsOpen ? :
console.log(props.colorMapValues)
let allColors = image.colorMaps().map((colorName) => {
return (
)
})
-
- function handleDetails(){
+
+ function handleDetails() {
setDetailsOpen(!detailsOpen)
}
- function handleColorChange(event){
+ function handleColorChange(event) {
let clr = event.target.value
let id = image.id
console.log(clr)
@@ -82,7 +84,7 @@ export default function Layer(props){
setColor(clr)
}
- function handleDelete(){
+ function handleDelete() {
props.onRemoveLayer(image)
}
@@ -93,14 +95,14 @@ export default function Layer(props){
flexDirection: 'column',
}}
>
-
-
{image.name}
-
-
{ArrowIcon}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Color