diff --git a/view/src/components/Editor/Editor.svelte b/view/src/components/Editor/Editor.svelte
index 93a6712..b748615 100644
--- a/view/src/components/Editor/Editor.svelte
+++ b/view/src/components/Editor/Editor.svelte
@@ -19,6 +19,10 @@
}
let layerOpacity = 50;
+ let _layerOpacity = localStorage.getItem("layerOpacity");
+ if (_layerOpacity) {
+ layerOpacity = _layerOpacity;
+ }
diff --git a/view/src/components/Editor/Painter.svelte b/view/src/components/Editor/Painter.svelte
index 0c89002..f0cb55d 100644
--- a/view/src/components/Editor/Painter.svelte
+++ b/view/src/components/Editor/Painter.svelte
@@ -1,5 +1,11 @@
+
+
+
+
diff --git a/view/src/icons/index.ts b/view/src/icons/index.ts
index 8919a94..784aa35 100644
--- a/view/src/icons/index.ts
+++ b/view/src/icons/index.ts
@@ -9,6 +9,7 @@ export { default as brush } from "./Brush.svelte"
export { default as clear } from "./Clear.svelte"
export { default as cross } from "./Cross.svelte"
export { default as erasor } from "./Erasor.svelte"
+export { default as flood_fill } from "./Fill.svelte"
export { default as pan } from "./Pan.svelte"
export { default as polygon } from "./Polygon.svelte"
export { default as smooth_polygon } from "./SmoothPolygon.svelte"
\ No newline at end of file
diff --git a/view/src/workers/pixel-worker.ts b/view/src/workers/pixel-worker.ts
index c9c5a19..e27882f 100644
--- a/view/src/workers/pixel-worker.ts
+++ b/view/src/workers/pixel-worker.ts
@@ -1,10 +1,11 @@
+import hexToRGB from "helpers/hexToRGB";
+
+
export { };
-self.addEventListener('message', function (e) {
+const countColors = ({ pixels, width, height }) => {
- const { data: { i, pixels, correctDistortion = true, width, height } } = e;
-
// This is the old method just by counting pixels
const oldStore = {};
@@ -80,6 +81,114 @@ self.addEventListener('message', function (e) {
}
}).sort((a, b) => a.value > b.value ? -1 : 1)
+ return result;
+
+}
+
+const distance2D = (x1, y1, x2, y2) => {
+ const dx = x1 - x2;
+ const dy = y1 - y2;
+ return Math.sqrt(dx * dx + dy * dy);
+}
+const distance3D = (x1, y1, z1, x2, y2, z2) => {
+ const dx = x1 - x2;
+ const dy = y1 - y2;
+ const dz = z1 - z2;
+ return Math.sqrt(dx * dx + dy * dy + dz * dz);
+}
+
+const createFloodFillMap = ({ pixels, x, y, width, height }: { pixels: Uint8ClampedArray, x: number, y: number, width: number, height: number }) => {
+
+ const pixelAmount = width * height;
+ const index = (y * width + x) * 3;
+
+ const _R = pixels[index + 0];
+ const _G = pixels[index + 1];
+ const _B = pixels[index + 2];
+
+ let distanceWeight = 0.7;
+
+ // This is the distance to the pixel that is furthest away from xy
+ const maxDistance = distance2D((x < (width / 2)) ? width : 0, (y < (height / 2)) ? height : 0, x, y);
+
+ console.log(maxDistance)
+
+ // This the distance to the color that is furthest away from _R_G_B;
+ let maxColorDistance = 0;
+
+ for (let i = 0; i < pixelAmount; i++) {
+ const r = pixels[i * 3 + 0];
+ const g = pixels[i * 3 + 1];
+ const b = pixels[i * 3 + 2];
+ const dist = distance3D(r, g, b, _R, _G, _B);
+ if (dist > maxColorDistance) maxColorDistance = dist;
+ }
+
+
+ const floodFillMap = new Uint8ClampedArray(pixelAmount);
+
+
+ const maxWeight = (maxDistance * distanceWeight) + maxColorDistance * (1 - distanceWeight);
+
+ for (let i = 0; i < pixelAmount; i++) {
+
+ const _x = i % width;
+ const _y = Math.floor(i / width);
+
+ const r = pixels[i * 3 + 0];
+ const g = pixels[i * 3 + 1];
+ const b = pixels[i * 3 + 2];
+
+ let dist = distance2D(_x, _y, x, y);
+ let colDist = distance3D(r, g, b, _R, _G, _B);
+
+ let weight = 1 - ((dist * distanceWeight) + (colDist * (1 - distanceWeight))) / maxWeight;
+
+ floodFillMap[i] = Math.floor(weight * 255);
+
+ }
+
+
+ return floodFillMap;
+
+}
+
+const drawFloodFill = ({ floodMap, image, color, amount }: { floodMap: Uint8ClampedArray, image: Uint8ClampedArray, color: string, amount: number }) => {
+
+ const [r, g, b] = hexToRGB(color);
+
+
+
+
+ return image;
+
+}
+
+const send = (result, i) => {
//@ts-ignore
self.postMessage({ result, i });
+}
+
+self.addEventListener('message', function (e) {
+
+ const data = e.data;
+
+ const { i, type = "count" } = data;
+
+ switch (type) {
+ case "count":
+ send(countColors(data), i);
+ break;
+ case "flood_map":
+ send(createFloodFillMap(data), i);
+ break;
+ case "flood_fill":
+ send(drawFloodFill(data), i);
+ break;
+ default:
+ console.error("ERROR IN POXEL WORKER")
+ }
+
+
+
}, false);
\ No newline at end of file