feat: support image background editor [wip]
dwelle
3 years ago
parent
8b5657e1ce
commit
3c83a322b6
@ -0,0 +1,75 @@
|
||||
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)}
|
||||
/>
|
||||
),
|
||||
});
|
||||
@ -0,0 +1,112 @@
|
||||
import { distance2d } from "../math";
|
||||
import Scene from "../scene/Scene";
|
||||
import {
|
||||
ExcalidrawImageElement,
|
||||
InitializedExcalidrawImageElement,
|
||||
} from "./types";
|
||||
|
||||
export type EditingImageElement = {
|
||||
editorType: "alpha";
|
||||
elementId: ExcalidrawImageElement["id"];
|
||||
origImageData: Readonly<ImageData>;
|
||||
imageData: ImageData;
|
||||
pointerDownState: {
|
||||
screenX: number;
|
||||
screenY: number;
|
||||
sampledPixel: readonly [number, number, number, number] | null;
|
||||
};
|
||||
};
|
||||
|
||||
const getElement = (id: EditingImageElement["elementId"]) => {
|
||||
const element = Scene.getScene(id)?.getNonDeletedElement(id);
|
||||
if (element) {
|
||||
return element as InitializedExcalidrawImageElement;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
export class ImageEditor {
|
||||
static handlePointerDown(
|
||||
editingElement: EditingImageElement,
|
||||
scenePointer: { x: number; y: number },
|
||||
) {
|
||||
const imageElement = getElement(editingElement.elementId);
|
||||
|
||||
if (imageElement) {
|
||||
if (
|
||||
scenePointer.x >= imageElement.x &&
|
||||
scenePointer.x <= imageElement.x + imageElement.width &&
|
||||
scenePointer.y >= imageElement.y &&
|
||||
scenePointer.y <= imageElement.y + imageElement.height
|
||||
) {
|
||||
editingElement.pointerDownState.screenX = scenePointer.x;
|
||||
editingElement.pointerDownState.screenY = scenePointer.y;
|
||||
|
||||
const { width, height, data } = editingElement.origImageData;
|
||||
|
||||
const imageOffsetX = Math.round(
|
||||
(scenePointer.x - imageElement.x) * (width / imageElement.width),
|
||||
);
|
||||
const imageOffsetY = Math.round(
|
||||
(scenePointer.y - imageElement.y) * (height / imageElement.height),
|
||||
);
|
||||
|
||||
const sampledPixel = [
|
||||
data[(imageOffsetY * width + imageOffsetX) * 4 + 0],
|
||||
data[(imageOffsetY * width + imageOffsetX) * 4 + 1],
|
||||
data[(imageOffsetY * width + imageOffsetX) * 4 + 2],
|
||||
data[(imageOffsetY * width + imageOffsetX) * 4 + 3],
|
||||
] as const;
|
||||
|
||||
editingElement.pointerDownState.sampledPixel = sampledPixel;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
static handlePointerMove(
|
||||
editingElement: EditingImageElement,
|
||||
scenePointer: { x: number; y: number },
|
||||
) {
|
||||
const { sampledPixel } = editingElement.pointerDownState;
|
||||
if (sampledPixel) {
|
||||
const { screenX, screenY } = editingElement.pointerDownState;
|
||||
const distance = distance2d(
|
||||
scenePointer.x,
|
||||
scenePointer.y,
|
||||
screenX,
|
||||
screenY,
|
||||
);
|
||||
|
||||
const { width, height, data } = editingElement.origImageData;
|
||||
const newImageData = new ImageData(width, height);
|
||||
|
||||
for (let x = 0; x < width; ++x) {
|
||||
for (let y = 0; y < height; ++y) {
|
||||
if (
|
||||
Math.abs(sampledPixel[0] - data[(y * width + x) * 4 + 0]) +
|
||||
Math.abs(sampledPixel[1] - data[(y * width + x) * 4 + 1]) +
|
||||
Math.abs(sampledPixel[2] - data[(y * width + x) * 4 + 2]) <
|
||||
distance
|
||||
) {
|
||||
newImageData.data[(y * width + x) * 4 + 0] = 0;
|
||||
newImageData.data[(y * width + x) * 4 + 1] = 255;
|
||||
newImageData.data[(y * width + x) * 4 + 2] = 0;
|
||||
newImageData.data[(y * width + x) * 4 + 3] = 0;
|
||||
} else {
|
||||
for (let p = 0; p < 4; ++p) {
|
||||
newImageData.data[(y * width + x) * 4 + p] =
|
||||
data[(y * width + x) * 4 + p];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return newImageData;
|
||||
}
|
||||
}
|
||||
|
||||
static handlePointerUp(editingElement: EditingImageElement) {
|
||||
editingElement.pointerDownState.sampledPixel = null;
|
||||
editingElement.origImageData = editingElement.imageData;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue