85 lines
2.3 KiB
TypeScript
85 lines
2.3 KiB
TypeScript
import styled from "styled-components";
|
|
import type { CanvasHandleImageEditorProps } from "../handler/interfaces";
|
|
import { FaEye, FaLock } from "react-icons/fa";
|
|
import { NamePlate } from "./layer-name";
|
|
import type { ImageEditor } from "../handler/image-editor";
|
|
|
|
const Item = styled.div<{ $selected: boolean }>`
|
|
width: 240px;
|
|
height: 30px;
|
|
border: 1px solid var(--secondary-color);
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
${({ $selected }) =>
|
|
$selected &&
|
|
`
|
|
background-color: var(--secondary-color);
|
|
`}
|
|
`;
|
|
|
|
const Img = styled.img`
|
|
margin: 5px;
|
|
max-width: 25px;
|
|
max-height: 25px;
|
|
`;
|
|
const Icon = styled.span`
|
|
padding: 7px 5px;
|
|
cursor: pointer;
|
|
`;
|
|
|
|
export function LayerItem({ image, handler }: CanvasHandleImageEditorProps) {
|
|
const selectLayer = (image: ImageEditor, ctrl: boolean) => {
|
|
if (!ctrl) {
|
|
const selected = handler.selected.filter((e) => e !== image.id);
|
|
for (const sel of selected) {
|
|
handler.setSelect(sel, false);
|
|
}
|
|
}
|
|
image.toggleSelected();
|
|
};
|
|
return (
|
|
<Item
|
|
$selected={image.selected}
|
|
onClick={(ev) => {
|
|
ev.stopPropagation();
|
|
ev.preventDefault();
|
|
selectLayer(image, ev.ctrlKey);
|
|
}}
|
|
>
|
|
<Icon
|
|
style={{ opacity: image.visible ? 1 : 0.1 }}
|
|
onClick={(ev) => {
|
|
ev.stopPropagation();
|
|
ev.preventDefault();
|
|
image.setVisible(!image.visible);
|
|
}}
|
|
>
|
|
<FaEye />
|
|
</Icon>
|
|
|
|
<Img
|
|
draggable="false"
|
|
onClick={(ev) => {
|
|
ev.stopPropagation();
|
|
ev.preventDefault();
|
|
selectLayer(image, ev.ctrlKey);
|
|
}}
|
|
src={image.url}
|
|
alt={image.id}
|
|
/>
|
|
<NamePlate image={image} />
|
|
<Icon
|
|
style={{ opacity: image.locked ? 1 : 0.1 }}
|
|
onClick={(ev) => {
|
|
ev.stopPropagation();
|
|
ev.preventDefault();
|
|
image.setLock(!image.locked);
|
|
}}
|
|
>
|
|
<FaLock />
|
|
</Icon>
|
|
</Item>
|
|
);
|
|
}
|