Skip to content

Commit

Permalink
Fix canvas capture, and remove color now makes enabled if shift is pr…
Browse files Browse the repository at this point in the history 
…essed
  • Loading branch information
@EtherCD
EtherCD committed Aug 19, 2024
1 parent 60a39d0 commit 585c652
Show file tree
Hide file tree
Showing 4 changed files with 120 additions and 106 deletions.
19 changes: 10 additions & 9 deletions src/components/Place/PlaceSnapshot.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { SnapshotManager } from "../../managers/snapshot";
import { WHITE_TEXTURE } from "../../lib/WhiteTexture";
import { Sprite } from "@pixi/sprite";
import { PlaceManager } from "../../managers/place";
import { config } from "../../config";
import { Point } from "@pixi/math";

export class PlaceSnapshot extends Sprite {
Expand All @@ -17,22 +16,24 @@ export class PlaceSnapshot extends Sprite {
this.visible = false;
this.alpha = 0.5;

SnapshotManager.enable.subscribe((v) => (this.visible = true));
SnapshotManager.offsetPoint.subscribe((v) => {
this.x = v.x;
this.y = v.y;
SnapshotManager.enable.subscribe((v) => (this.visible = v));
SnapshotManager.offsetPoint.subscribe((v: Point) => {
const ov = SnapshotManager.startPoint.value;
if (this.x === 0) {
if (Number.isNaN(v.x)) {
this.x = ov.x;
} else {
this.x = v.x;
}
if (this.y === 0) {
if (Number.isNaN(v.y)) {
this.y = ov.y;
} else {
this.y = v.y;
}
});
SnapshotManager.startPoint.subscribe((v) => {
const ov = SnapshotManager.offsetPoint.value;
this.x = v.x - ov.x;
this.y = v.y - ov.y;
this.x = !Number.isNaN(ov.x) ? v.x - ov.x : v.x;
this.y = !Number.isNaN(ov.y) ? v.y - ov.y : v.y;
const i = PlaceManager.image.value;
if (i) this.tint = i.getPixel(v).getReadableColor();
});
Expand Down
47 changes: 29 additions & 18 deletions src/components/Windows/Palette/ColorDelete/ColorDelete.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,39 @@
import { useContext } from "preact/hooks";
import { useContext, useEffect, useRef, useState } from "preact/hooks";
import { PaletteContext } from "../../../../managers/palette";
import styles from "./ColorDelete.module.css";
import { Icon } from "../../../General/Icon/Icon";

export function ColorDelete() {
const palette = useContext(PaletteContext)
const palette = useContext(PaletteContext);
const [shift, setShift] = useState<boolean>(false);

function onClick(event: MouseEvent) {
if (event.shiftKey) {
palette.reset()
function onClick(event: MouseEvent) {
if (event.shiftKey) {
palette.reset();

return;
}
return;
}

palette.removeColor(palette.palette.value.selected)
}
if (!palette.isDefaultColor(palette.palette.value.selected)) palette.removeColor(palette.palette.value.selected);
}

return (
<button
className={styles.button}
onClick={onClick}
disabled={palette.isDefaultColor(palette.palette.value.selected)}>
function onKeyEvent(event: KeyboardEvent) {
setShift(event.shiftKey);
}

<Icon icon="plus" className={styles.icon} alt={"Удалить выбранный цвет"}/>
</button>
)
}
useEffect(() => {
document.addEventListener("keydown", onKeyEvent);
document.addEventListener("keyup", onKeyEvent);

return () => {
document.removeEventListener("keydown", onKeyEvent);
document.removeEventListener("keyup", onKeyEvent);
};
}, []);

return (
<button className={styles.button} onClick={onClick} disabled={!(shift || !palette.isDefaultColor(palette.palette.value.selected))}>
<Icon icon="plus" className={styles.icon} alt={"Удалить выбранный цвет"} />
</button>
);
}
140 changes: 70 additions & 70 deletions src/managers/palette.ts
View file
Original file line number Diff line number Diff line change
@@ -1,81 +1,81 @@
import { createContext } from "preact";
import { AppColor } from "../classes/AppColor";
import { signal } from "@preact/signals";
import { computed, signal } from "@preact/signals";
import { config } from "../config";
import { AppLocalStorage } from "../classes/AppLocalStorage";

export const PaletteManager = {
palette: signal(config.defaults.colors.palette),
reset() {
PaletteManager.palette.value = config.defaults.colors.palette;

PaletteManager.save()
},
setCurrentColor: (color: AppColor) => {
PaletteManager.palette.value = {
...PaletteManager.palette.value,
selected: color
}

PaletteManager.save()
},
removeColor(color: AppColor) {
PaletteManager.palette.value = {
selected: PaletteManager.palette.value.colors.at(-2) ?? PaletteManager.palette.value.selected,
colors: PaletteManager.palette.value.colors.filter(c => !c.equals(color))
}

PaletteManager.save()
},
isDefaultColor(color: AppColor) {
return config.defaults.colors.palette.colors.some(c => c.equals(color))
},
addColor(color: AppColor) {
PaletteManager.palette.value = {
...PaletteManager.palette.value,
colors: [...PaletteManager.palette.value.colors, color]
}

PaletteManager.save()
},
addAndSelect(color: AppColor) {
const isColorInPalette = PaletteManager.palette.value.colors.some(c => c.equals(color))

if (!isColorInPalette) {
this.addColor(color)
}

this.setCurrentColor(color)

PaletteManager.save()
},
save() {
AppLocalStorage.set("palette", {
colors: PaletteManager.palette.value.colors,
selected: PaletteManager.palette.value.selected
}, ({ colors, selected }) => JSON.stringify({ colors: colors.map(color => color.toHex()), selected: selected.toHex() }))
},
load() {
const palette = AppLocalStorage.get("palette", (flatPalette) => {

return {
colors: flatPalette.colors.map(color => new AppColor(color)),
selected: new AppColor(flatPalette.selected)
}
})

if (!palette) return

PaletteManager.palette.value = palette;
},

}
palette: signal(config.defaults.colors.palette),
reset() {
PaletteManager.palette.value = config.defaults.colors.palette;

PaletteManager.save();
},
setCurrentColor: (color: AppColor) => {
PaletteManager.palette.value = {
...PaletteManager.palette.value,
selected: color,
};

PaletteManager.save();
},
removeColor(color: AppColor) {
PaletteManager.palette.value = {
selected: PaletteManager.palette.value.colors.at(-2) ?? PaletteManager.palette.value.selected,
colors: PaletteManager.palette.value.colors.filter((c) => !c.equals(color)),
};

PaletteManager.save();
},
isDefaultColor(color: AppColor) {
return config.defaults.colors.palette.colors.some((c) => c.equals(color));
},
addColor(color: AppColor) {
PaletteManager.palette.value = {
...PaletteManager.palette.value,
colors: [...PaletteManager.palette.value.colors, color],
};

PaletteManager.save();
},
addAndSelect(color: AppColor) {
const isColorInPalette = PaletteManager.palette.value.colors.some((c) => c.equals(color));

if (!isColorInPalette) {
this.addColor(color);
}

this.setCurrentColor(color);

PaletteManager.save();
},
save() {
AppLocalStorage.set(
"palette",
{
colors: PaletteManager.palette.value.colors,
selected: PaletteManager.palette.value.selected,
},
({ colors, selected }) => JSON.stringify({ colors: colors.map((color) => color.toHex()), selected: selected.toHex() })
);
},
load() {
const palette = AppLocalStorage.get("palette", (flatPalette) => {
return {
colors: flatPalette.colors.map((color) => new AppColor(color)),
selected: new AppColor(flatPalette.selected),
};
});

if (!palette) return;

PaletteManager.palette.value = palette;
},
};

export const PaletteContext = createContext({} as typeof PaletteManager);


export interface FlatPalette {
colors: string[]
selected: string
colors: string[];
selected: string;
}

20 changes: 11 additions & 9 deletions src/managers/snapshot.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const SnapshotManager = {
captureMode: signal(false),

startPoint: signal(new Point()),
offsetPoint: signal(new Point()),
offsetPoint: signal(new Point(NaN, NaN)),
size: signal(new Point()),
scale: signal(4),

Expand All @@ -34,7 +34,7 @@ export const SnapshotManager = {

clear() {
this.startPoint.value = new Point();
this.offsetPoint.value = new Point();
this.offsetPoint.value = new Point(NaN, NaN);
this.size.value = new Point();
this.empty.value = true;
this.captureMode.value = false;
Expand Down Expand Up @@ -67,18 +67,20 @@ export const SnapshotManager = {
width = Math.abs(width);
changed = true;
offsetPoint.x = point.x;
} else if (offsetPoint.x !== 0) {
offsetPoint.x = 0;
} else if (!Number.isNaN(offsetPoint.x)) {
offsetPoint.x = NaN;
changed = true;
}
if (height < 0) {
height = Math.abs(height);
changed = true;
offsetPoint.y = point.y;
} else if (offsetPoint.y !== 0) {
offsetPoint.y = 0;
} else if (!Number.isNaN(offsetPoint.y)) {
offsetPoint.y = NaN;
changed = true;
}
width += Number.isNaN(offsetPoint.x) ? 1 : 0;
height += Number.isNaN(offsetPoint.y) ? 1 : 0;
if (changed) this.offsetPoint.value = offsetPoint;
const normalSize = new Point(width, height);
this.size.value = normalSize;
Expand All @@ -87,17 +89,17 @@ export const SnapshotManager = {
fullScreenshot() {
const image = PlaceManager.image.value;
if (!image) return;
this.clear();
this.stop();
this.size.value = new Point(image.size.x, image.size.y);
this.empty.value = false;
this.toClipboard();
},

async toClipboard(scaleLimit = 10) {
const image = PlaceManager.image.value;
const startPoint = this.startPoint.value;
const offsetPoint = this.offsetPoint.value;
if (!image) return;
const pos = new Point(offsetPoint.x !== 0 ? offsetPoint.x : startPoint.x, offsetPoint.y !== 0 ? offsetPoint.y : startPoint.y);
const pos = new Point(!Number.isNaN(offsetPoint.x) ? offsetPoint.x : startPoint.x, !Number.isNaN(offsetPoint.y) ? offsetPoint.y : startPoint.y);
const size = this.size.value;
let scale = this.scale.value;
if (scale > scaleLimit) scale = scaleLimit;
Expand Down

0 comments on commit 585c652

Please sign in to comment.