Skip to content

Commit

Permalink
all reordering
Browse files Browse the repository at this point in the history
  • Loading branch information
@Brendonovich
Brendonovich committed Sep 8, 2024
1 parent 490e86b commit 7e4a294
Show file tree
Hide file tree
Showing 11 changed files with 1,260 additions and 880 deletions.
1,085 changes: 656 additions & 429 deletions interface/src/Sidebar/Project/CustomTypes.tsx
View file

Large diffs are not rendered by default.

166 changes: 72 additions & 94 deletions interface/src/Sidebar/Project/Graphs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
import {
ContextMenuContent,
ContextMenuItem,
ContextMenuRenameItem,
} from "../../components/Graph/ContextMenu";
import { SidebarSection } from "../../components/Sidebar";
import { IconButton } from "../../components/ui";
Expand Down Expand Up @@ -108,101 +109,78 @@ export function Graphs(props: Props) {
<li class="group/item gap-1">
<Dialog open={deleteOpen()} onOpenChange={setDeleteOpen}>
<InlineTextEditorContext>
<Show when>
{(_) => {
const inlineEditorContext = useInlineTextEditorCtx()!;

return (
<ContextMenu placement="bottom-start">
<InlineTextEditor<ValidComponent>
as={(asProps) => (
<ContextMenu.Trigger<"button">
{...asProps}
as="button"
type="button"
onClick={() => props.onGraphClicked(graph)}
/>
)}
selected={props.currentGraph === graph.id}
value={graph.name}
onChange={(value) => {
interfaceCtx.execute("setGraphName", {
<ContextMenu placement="bottom-start">
<InlineTextEditor<ValidComponent>
as={(asProps) => (
<ContextMenu.Trigger<"button">
{...asProps}
as="button"
type="button"
onClick={() => props.onGraphClicked(graph)}
/>
)}
selected={props.currentGraph === graph.id}
value={graph.name}
onChange={(value) => {
interfaceCtx.execute("setGraphName", {
graphId: graph.id,
name: value,
});
}}
/>
<ContextMenuContent>
<ContextMenuRenameItem />
<ContextMenuItem
onSelect={() => {
writeClipboardItemToClipboard(
graphToClipboardItem(graph),
);
}}
>
<IconTablerCopy />
Copy
</ContextMenuItem>
<Show when={!isSearching()}>
<Show when={i() !== 0}>
<ContextMenuItem
onSelect={() =>
interfaceCtx.execute("moveGraphToIndex", {
graphId: graph.id,
name: value,
});
}}
/>
<ContextMenuContent>
<ContextMenuItem
onSelect={() =>
inlineEditorContext.setEditing(true)
}
>
<IconAntDesignEditOutlined /> Rename
</ContextMenuItem>
<ContextMenuItem
onSelect={() => {
writeClipboardItemToClipboard(
graphToClipboardItem(graph),
);
}}
>
<IconTablerCopy />
Copy
</ContextMenuItem>
<Show when={!isSearching()}>
<Show when={i() !== 0}>
<ContextMenuItem
onSelect={() =>
interfaceCtx.execute(
"moveGraphToIndex",
{
graphId: graph.id,
currentIndex: i(),
newIndex: i() - 1,
},
)
}
>
<IconMaterialSymbolsArrowDropUpRounded class="transform scale-150" />
Move Up
</ContextMenuItem>
</Show>
<Show
when={i() !== filteredGraphs().length - 1}
>
<ContextMenuItem
onSelect={() =>
interfaceCtx.execute(
"moveGraphToIndex",
{
graphId: graph.id,
currentIndex: i(),
newIndex: i() + 1,
},
)
}
>
<IconMaterialSymbolsArrowDropDownRounded class="transform scale-150" />
Move Down
</ContextMenuItem>
</Show>
</Show>

<ContextMenuItem
class="text-red-500"
onSelect={() => {
setDeleteOpen(true);
}}
>
<IconAntDesignDeleteOutlined />
Delete
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
);
}}
</Show>
currentIndex: i(),
newIndex: i() - 1,
})
}
>
<IconMaterialSymbolsArrowDropUpRounded class="transform scale-150" />
Move Up
</ContextMenuItem>
</Show>
<Show when={i() !== filteredGraphs().length - 1}>
<ContextMenuItem
onSelect={() =>
interfaceCtx.execute("moveGraphToIndex", {
graphId: graph.id,
currentIndex: i(),
newIndex: i() + 1,
})
}
>
<IconMaterialSymbolsArrowDropDownRounded class="transform scale-150" />
Move Down
</ContextMenuItem>
</Show>
</Show>
<ContextMenuItem
class="text-red-500"
onSelect={() => {
setDeleteOpen(true);
}}
>
<IconAntDesignDeleteOutlined />
Delete
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
</InlineTextEditorContext>
<Dialog.Portal>
<Dialog.Overlay class="absolute inset-0 bg-black/40" />
Expand Down
165 changes: 150 additions & 15 deletions interface/src/actions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
splitIORef,
} from "@macrograph/runtime";
import {
createDeferrer,
deserializeCommentBox,
deserializeConnections,
deserializeCustomEnum,
Expand Down Expand Up @@ -942,10 +943,13 @@ export const historyActions = (core: Core, editor: EditorState) => ({
core.project.customStructs.delete(entry.structId);
},
rewind(entry) {
const deferrer = createDeferrer();
const struct = deserializeCustomStruct(
core.project,
v.parse(serde.CustomStruct, entry.data),
deferrer,
);
deferrer.run();

core.project.customStructs.set(entry.structId, struct);
},
Expand Down Expand Up @@ -1087,9 +1091,11 @@ export const historyActions = (core: Core, editor: EditorState) => ({
core.project.customEnums.delete(entry.enumId);
},
rewind(entry) {
const deferrer = createDeferrer();
const enm = deserializeCustomEnum(
core.project,
v.parse(serde.CustomEnum, entry.data),
deferrer,
);

core.project.customEnums.set(entry.enumId, enm);
Expand Down Expand Up @@ -2055,23 +2061,152 @@ export const historyActions = (core: Core, editor: EditorState) => ({
return input;
},
perform(entry) {
if (entry.newIndex < entry.currentIndex) {
core.project.graphOrder.splice(entry.currentIndex, 1);
core.project.graphOrder.splice(entry.newIndex, 0, entry.graphId);
} else {
console.log(entry);
core.project.graphOrder.splice(entry.currentIndex, 1);
core.project.graphOrder.splice(entry.newIndex, 0, entry.graphId);
}
core.project.graphOrder.splice(entry.currentIndex, 1);
core.project.graphOrder.splice(entry.newIndex, 0, entry.graphId);
},
rewind(entry) {
if (entry.newIndex < entry.currentIndex) {
core.project.graphOrder.splice(entry.newIndex, 0, entry.graphId);
core.project.graphOrder.splice(entry.currentIndex, 1);
} else {
core.project.graphOrder.splice(entry.currentIndex, 1);
core.project.graphOrder.splice(entry.newIndex, 0, entry.graphId);
}
core.project.graphOrder.splice(entry.newIndex, 1);
core.project.graphOrder.splice(entry.currentIndex, 0, entry.graphId);
},
}),
moveCustomEventFieldToIndex: historyAction({
prepare(input: {
eventId: number;
fieldId: string;
currentIndex: number;
newIndex: number;
}) {
const event = core.project.customEvents.get(input.eventId);
if (!event) return;

const field = event.field(input.fieldId);
if (!field) return;
if (event.fields[input.currentIndex] !== field) return;
if (input.currentIndex === input.newIndex) return;

return input;
},
perform(entry) {
const event = core.project.customEvents.get(entry.eventId);
if (!event) return;

const [field] = event.fields.splice(entry.currentIndex, 1);
event.fields.splice(entry.newIndex, 0, field!);
},
rewind(entry) {
const event = core.project.customEvents.get(entry.eventId);
if (!event) return;

const [field] = event.fields.splice(entry.currentIndex, 1);
event.fields.splice(entry.newIndex, 0, field!);
},
}),
moveCustomStructFieldToIndex: historyAction({
prepare(input: {
structId: number;
fieldId: string;
currentIndex: number;
newIndex: number;
}) {
const struct = core.project.customStructs.get(input.structId);
if (!struct) return;

const field = struct.fields[input.fieldId];
if (!field) return;
if (struct.fieldOrder[input.currentIndex] !== field.id) return;
if (input.currentIndex === input.newIndex) return;

return input;
},
perform(entry) {
const struct = core.project.customStructs.get(entry.structId);
if (!struct) return;

struct.fieldOrder.splice(entry.currentIndex, 1);
struct.fieldOrder.splice(entry.newIndex, 0, entry.fieldId);
},
rewind(entry) {
const struct = core.project.customStructs.get(entry.structId);
if (!struct) return;

struct.fieldOrder.splice(entry.newIndex, 1);
struct.fieldOrder.splice(entry.currentIndex, 0, entry.fieldId);
},
}),
moveCustomEnumVariantToIndex: historyAction({
prepare(input: {
enumId: number;
variantId: string;
currentIndex: number;
newIndex: number;
}) {
if (input.currentIndex === input.newIndex) return;

const enm = core.project.customEnums.get(input.enumId);
if (!enm) return;

const variant = enm.variants[input.currentIndex];
if (!variant) return;
if (variant.id !== input.variantId) return;

return input;
},
perform(entry) {
const enm = core.project.customEnums.get(entry.enumId);
if (!enm) return;

const [variant] = enm.variants.splice(entry.currentIndex, 1);
enm.variants.splice(entry.newIndex, 0, variant!);
},
rewind(entry) {
const enm = core.project.customEnums.get(entry.enumId);
if (!enm) return;

const [variant] = enm.variants.splice(entry.newIndex, 1);
enm.variants.splice(entry.currentIndex, 0, variant!);
},
}),
moveCustomEnumVariantFieldToIndex: historyAction({
prepare(input: {
enumId: number;
variantId: string;
fieldId: string;
currentIndex: number;
newIndex: number;
}) {
const enm = core.project.customEnums.get(input.enumId);
if (!enm) return;

const variant = enm.variant(input.variantId);
if (!variant) return;

const field = variant.fields[input.fieldId];
if (!field) return;

if (variant.fieldOrder[input.currentIndex] !== field.id) return;
if (input.currentIndex === input.newIndex) return;

return input;
},
perform(entry) {
const enm = core.project.customEnums.get(entry.enumId);
if (!enm) return;

const variant = enm.variant(entry.variantId);
if (!variant) return;

variant.fieldOrder.splice(entry.currentIndex, 1);
variant.fieldOrder.splice(entry.newIndex, 0, entry.fieldId);
},
rewind(entry) {
const enm = core.project.customEnums.get(entry.enumId);
if (!enm) return;

const variant = enm.variant(entry.variantId);
if (!variant) return;

variant.fieldOrder.splice(entry.newIndex, 1);
variant.fieldOrder.splice(entry.currentIndex, 0, entry.fieldId);
},
}),
});
Expand Down
Loading

0 comments on commit 7e4a294

Please sign in to comment.