Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Renaming, forking, deleting state fixes #311

Merged
merged 1 commit into from
Jul 8, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion client/app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ document.addEventListener("paste", (e) => {
if (store.selectTool.selectBox) {
position = store.selectTool.selectBox.topLeft();
}
if (store.toolMode.get() === ToolMode.TEXT && store.textTool.currentPosition) {
if (store.toolMode() === ToolMode.TEXT && store.textTool.currentPosition) {
position = store.textTool.currentPosition;
}
const pastedLayer = textToLayer(clipboardText, position);
Expand Down
16 changes: 11 additions & 5 deletions client/drawer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -109,15 +109,15 @@ export function Drawer() {
{drawingId.shareSpec ? (
<Icons.Share
color={
store.route.toString() === drawingId.toString()
store.route.get().toString() === drawingId.toString()
? "primary"
: "inherit"
}
/>
) : (
<Icons.FileCopy
color={
store.route.toString() === drawingId.toString()
store.route.get().toString() === drawingId.toString()
? "primary"
: "inherit"
}
Expand Down Expand Up @@ -435,7 +435,7 @@ function ToolControl(
return useWatchable(() => {
return (
<ListItem
selected={store.toolMode.get() === props.tool}
selected={store.toolMode() === props.tool}
button={true}
onClick={() => store.setToolMode(props.tool)}
>
Expand Down Expand Up @@ -503,7 +503,7 @@ function ToolHelp(
}>
) {
return useWatchable(() => {
return store.toolMode.get() === props.tool ? <>{props.children}</> : null;
return store.toolMode() === props.tool ? <>{props.children}</> : null;
});
}

Expand Down Expand Up @@ -538,7 +538,13 @@ function NewDrawingButton() {
}
confirmButton={
<Button
onClick={() => history.push(DrawingId.local(newDrawingName).href)}
onClick={() => {
store.localDrawingIds.set([
...store.localDrawingIds.get(),
DrawingId.local(newDrawingName),
]);
history.push(DrawingId.local(newDrawingName).href);
}}
color="primary"
>
Create
Expand Down
70 changes: 37 additions & 33 deletions client/store/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -108,20 +108,18 @@ export class Store {
}

public setRoute(value: DrawingId) {

this._route.set(value);

this._route.set(value);
}

public readonly freeformCharacter = watchableValue("x");

public readonly selectedToolMode = watchableValue(ToolMode.BOX);

public get toolMode() {
public toolMode(): ToolMode | undefined {
if (this.route.get().shareSpec) {
return null;
return undefined;
}
return this.selectedToolMode;
return this.selectedToolMode.get();
}

public readonly unicode = watchableAdapter(Persistent.json("unicode", true));
Expand Down Expand Up @@ -164,17 +162,17 @@ export class Store {
);

get currentTool(): IDrawFunction {
return this.toolMode.get() === ToolMode.BOX
return this.toolMode() === ToolMode.BOX
? this.boxTool
: this.toolMode.get() === ToolMode.LINES
: this.toolMode() === ToolMode.LINES
? this.lineTool
: this.toolMode.get() === ToolMode.ARROWS
: this.toolMode() === ToolMode.ARROWS
? this.arrowTool
: this.toolMode.get() === ToolMode.FREEFORM
: this.toolMode() === ToolMode.FREEFORM
? this.freeformTool
: this.toolMode.get() === ToolMode.TEXT
: this.toolMode() === ToolMode.TEXT
? this.textTool
: this.toolMode.get() === ToolMode.SELECT
: this.toolMode() === ToolMode.SELECT
? this.selectTool
: this.nullTool;
}
Expand Down Expand Up @@ -207,17 +205,17 @@ export class Store {
let canvas = this.canvases.get(drawingId.toString());
if (!canvas) {
// Add the drawing ID to the list of all drawing IDs if it's a local one.
if (
!!drawingId.localId &&
!this.localDrawingIds
.get()
.some(
(otherDrawingId) =>
otherDrawingId.toString() === drawingId.toString()
)
) {
this.localDrawingIds.set([...this.localDrawingIds.get(), drawingId]);
}
// if (
// !!drawingId.localId &&
// !this.localDrawingIds
// .get()
// .some(
// (otherDrawingId) =>
// otherDrawingId.toString() === drawingId.toString()
// )
// ) {
// this.localDrawingIds.set([...this.localDrawingIds.get(), drawingId]);
// }
canvas = new CanvasStore(drawingId);
this.canvases.set(drawingId.toString(), canvas);
}
Expand Down Expand Up @@ -252,27 +250,29 @@ export class Store {
public renameDrawing(originalLocalId: string, newLocalId: string) {
const originalId = DrawingId.local(originalLocalId);
const newId = DrawingId.local(newLocalId);
this.localDrawingIds.set(
this.localDrawingIds
.get()
.map((drawingId) =>
drawingId.toString() === originalId.toString() ? newId : drawingId
)
);

Object.keys(localStorage)
.filter((key) => key.startsWith(this.canvas(originalId).persistentKey()))
.filter((key) =>
key.startsWith(this.canvas(originalId).persistentKey() + "/")
)
.forEach((key) => {
localStorage.removeItem(key);
localStorage.setItem(
key.replace(
this.canvas(originalId).persistentKey(),
this.canvas(newId).persistentKey()
),
localStorage.getItem(key)
);
localStorage.removeItem(key);
});
this.canvases.delete(newId.toString());
this.canvases.delete(originalId.toString());
this.localDrawingIds.set([
...this.localDrawingIds
.get()
.filter((drawingId) => drawingId.toString() !== originalId.toString()),
newId,
]);
window.location.hash = newId.href;
}

public saveDrawing(shareDrawingId: DrawingId, name: string) {
Expand All @@ -281,6 +281,10 @@ export class Store {
localDrawing.persistentCommitted.set(
sharedDrawing.persistentCommitted.get()
);
this.localDrawingIds.set([
...this.localDrawingIds.get(),
DrawingId.local(name),
]);
}
}

Expand Down
Loading