76 lines
2.2 KiB
TypeScript
76 lines
2.2 KiB
TypeScript
import { getSelectedElements, isSomeElementSelected } from "../scene";
|
|
import { ToolButton } from "../components/ToolButton";
|
|
import { backgroundIcon } from "../components/icons";
|
|
import { register } from "./register";
|
|
import { getNonDeletedElements } from "../element";
|
|
import { isInitializedImageElement } from "../element/typeChecks";
|
|
import Scene from "../scene/Scene";
|
|
|
|
export const actionEditImageAlpha = register({
|
|
name: "editImageAlpha",
|
|
perform: async (elements, appState, _, app) => {
|
|
if (appState.editingImageElement) {
|
|
return {
|
|
appState: {
|
|
...appState,
|
|
editingImageElement: null,
|
|
},
|
|
commitToHistory: false,
|
|
};
|
|
}
|
|
|
|
const selectedElements = getSelectedElements(elements, appState);
|
|
const selectedElement = selectedElements[0];
|
|
if (
|
|
selectedElements.length === 1 &&
|
|
isInitializedImageElement(selectedElement)
|
|
) {
|
|
const imgData = app.imageCache.get(selectedElement.fileId);
|
|
if (!imgData) {
|
|
return false;
|
|
}
|
|
|
|
const image = await imgData.image;
|
|
const { width, height } = image;
|
|
|
|
const canvas = document.createElement("canvas");
|
|
canvas.height = height;
|
|
canvas.width = width;
|
|
const context = canvas.getContext("2d")!;
|
|
|
|
context.drawImage(image, 0, 0, width, height);
|
|
|
|
const imageData = context.getImageData(0, 0, width, height);
|
|
|
|
Scene.mapElementToScene(selectedElement.id, app.scene);
|
|
|
|
return {
|
|
appState: {
|
|
...appState,
|
|
editingImageElement: {
|
|
editorType: "alpha",
|
|
elementId: selectedElement.id,
|
|
origImageData: imageData,
|
|
imageData,
|
|
pointerDownState: { screenX: 0, screenY: 0, sampledPixel: null },
|
|
},
|
|
},
|
|
commitToHistory: false,
|
|
};
|
|
}
|
|
return false;
|
|
},
|
|
PanelComponent: ({ elements, appState, updateData }) => (
|
|
<ToolButton
|
|
type="button"
|
|
icon={backgroundIcon}
|
|
label="Edit Image Alpha"
|
|
className={appState.editingImageElement ? "active" : ""}
|
|
title={"Edit image alpha"}
|
|
aria-label={"Edit image alpha"}
|
|
onClick={() => updateData(null)}
|
|
visible={isSomeElementSelected(getNonDeletedElements(elements), appState)}
|
|
/>
|
|
),
|
|
});
|