Skip to content

Commit

Permalink
Switch to a visualize/design/source mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@riccardo-forina
riccardo-forina committed Nov 20, 2024
1 parent 0129bb0 commit fd1f090
Show file tree
Hide file tree
Showing 13 changed files with 341 additions and 195 deletions.
5 changes: 3 additions & 2 deletions packages/ui/src/OpenApiEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -263,7 +263,7 @@ function Editor() {
switch (selectedNode.type) {
case "validation":
case "root":
return undefined;
return <Label color={"yellow"}>OpenApi</Label>;
case "path":
return <Label color={"green"}>Path</Label>;
case "datatype":
Expand Down Expand Up @@ -296,7 +296,8 @@ function Editor() {
switch (true) {
case selectedNode.type === "validation":
return <ValidationMessages />;
case view === "designer":
case view === "design":
case view === "visualize":
switch (selectedNode.type) {
case "root":
return actorRef ? (
Expand Down
89 changes: 80 additions & 9 deletions packages/ui/src/OpenApiEditorMachine.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,12 @@ import { CodeEditorMachine } from "./codeEditor/CodeEditorMachine.ts";
import { PathDesignerMachine } from "./pathDesigner/PathDesignerMachine.ts";
import { DataTypeDesignerMachine } from "./dataTypeDesigner/DataTypeDesignerMachine.ts";
import { ResponseDesignerMachine } from "./responseDesigner/ResponseDesignerMachine.ts";
import { EditorToolbarView } from "./components/EditorToolbar.tsx";

type Context = EditorModel & {
navigationFilter: string;
selectedNode: SelectedNode | { type: "validation" };
view: "designer" | "code";
view: Exclude<EditorToolbarView, "hidden">;
actorRef?:
| ActorRefFrom<typeof DocumentDesignerMachine>
| ActorRefFrom<typeof PathDesignerMachine>
Expand All @@ -41,6 +42,21 @@ type Events =
| {
readonly type: "SELECT_DOCUMENT_ROOT_DESIGNER";
}
| {
readonly type: "SELECT_PATH_VISUALIZER";
readonly path: string;
readonly nodePath: string;
}
| {
readonly type: "SELECT_DATA_TYPE_VISUALIZER";
readonly name: string;
readonly nodePath: string;
}
| {
readonly type: "SELECT_RESPONSE_VISUALIZER";
readonly name: string;
readonly nodePath: string;
}
| {
readonly type: "SELECT_PATH_DESIGNER";
readonly path: string;
Expand All @@ -56,6 +72,9 @@ type Events =
readonly name: string;
readonly nodePath: string;
}
| {
readonly type: "SELECT_DOCUMENT_ROOT_VISUALIZER";
}
| {
readonly type: "SELECT_DOCUMENT_ROOT_CODE";
}
Expand Down Expand Up @@ -107,6 +126,9 @@ type Events =
| {
readonly type: "REDO";
}
| {
readonly type: "GO_TO_VISUALIZER_VIEW";
}
| {
readonly type: "GO_TO_DESIGNER_VIEW";
}
Expand Down Expand Up @@ -162,7 +184,7 @@ export const OpenApiEditorMachine = setup({
selectedNode: {
type: "root",
},
view: "designer",
view: "visualize",
},
initial: "viewChanged",
states: {
Expand All @@ -184,12 +206,15 @@ export const OpenApiEditorMachine = setup({
return undefined;
}
switch (context.view) {
case "designer":
case "design":
case "visualize":
switch (context.selectedNode.type) {
case "root":
console.log("SPAWN", context.view);
return spawn("documentRootDesigner", {
input: {
parentRef: self,
editable: context.view === "design",
},
});
case "path":
Expand Down Expand Up @@ -328,13 +353,53 @@ export const OpenApiEditorMachine = setup({
target: ".debouncing",
actions: assign({ navigationFilter: ({ event }) => event.filter }),
},
SELECT_DOCUMENT_ROOT_VISUALIZER: {
target: ".viewChanged",
actions: assign({
selectedNode: { type: "root" },
view: "visualize",
}),
},
SELECT_DOCUMENT_ROOT_DESIGNER: {
target: ".viewChanged",
actions: assign({
selectedNode: { type: "root" },
view: "designer",
view: "design",
}),
},
SELECT_PATH_VISUALIZER: {
target: ".viewChanged",
actions: assign(({ event }) => ({
selectedNode: {
type: "path",
path: event.path,
nodePath: event.nodePath,
},
view: "visualize",
})),
},
SELECT_DATA_TYPE_VISUALIZER: {
target: ".viewChanged",
actions: assign(({ event }) => ({
selectedNode: {
type: "datatype",
name: event.name,
nodePath: event.nodePath,
},
view: "visualize",
})),
},
SELECT_RESPONSE_VISUALIZER: {
target: ".viewChanged",
actions: assign(({ event }) => ({
selectedNode: {
type: "response",
name: event.name,
nodePath: event.nodePath,
},
view: "visualize",
})),
},
SELECT_PATH_DESIGNER: {
target: ".viewChanged",
actions: assign(({ event }) => ({
Expand All @@ -343,7 +408,7 @@ export const OpenApiEditorMachine = setup({
path: event.path,
nodePath: event.nodePath,
},
view: "designer",
view: "design",
})),
},
SELECT_DATA_TYPE_DESIGNER: {
Expand All @@ -354,7 +419,7 @@ export const OpenApiEditorMachine = setup({
name: event.name,
nodePath: event.nodePath,
},
view: "designer",
view: "design",
})),
},
SELECT_RESPONSE_DESIGNER: {
Expand All @@ -365,7 +430,7 @@ export const OpenApiEditorMachine = setup({
name: event.name,
nodePath: event.nodePath,
},
view: "designer",
view: "design",
})),
},
SELECT_DOCUMENT_ROOT_CODE: {
Expand Down Expand Up @@ -416,13 +481,19 @@ export const OpenApiEditorMachine = setup({
GO_TO_DESIGNER_VIEW: {
target: ".viewChanged",
actions: assign({
view: "code",
view: "design",
}),
},
GO_TO_CODE_VIEW: {
target: ".viewChanged",
actions: assign({
view: "designer",
view: "code",
}),
},
GO_TO_VISUALIZER_VIEW: {
target: ".viewChanged",
actions: assign({
view: "visualize",
}),
},
UNDO: ".undoing",
Expand Down
64 changes: 44 additions & 20 deletions packages/ui/src/components/EditorSidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@ import { NavigationDataTypes } from "./NavigationDataTypes.tsx";
export function EditorSidebar() {
const {
isFiltering,
isDesignerView,
view,
paths,
responses,
dataTypes,
filter,
selectedNode,
} = OpenApiEditorMachineContext.useSelector((state) => ({
isFiltering: state.matches("debouncing") || state.matches("filtering"),
isDesignerView: state.context.view === "designer",
view: state.context.view,
paths: state.context.navigation.paths,
responses: state.context.navigation.responses,
dataTypes: state.context.navigation.dataTypes,
Expand Down Expand Up @@ -62,15 +62,23 @@ export function EditorSidebar() {
<NavigationPaths
paths={paths}
filtered={filtered}
onClick={(p) =>
onClick={(p) => {
const type = (() => {
switch (view) {
case "visualize":
return "SELECT_PATH_VISUALIZER";
case "design":
return "SELECT_PATH_DESIGNER";
case "code":
return "SELECT_PATH_CODE";
}
})();
actorRef.send({
type: isDesignerView
? "SELECT_PATH_DESIGNER"
: "SELECT_PATH_CODE",
type,
path: p.path,
nodePath: p.nodePath,
})
}
});
}}
isActive={(p) =>
"path" in selectedNode && p.path === selectedNode?.path
}
Expand All @@ -80,15 +88,23 @@ export function EditorSidebar() {
<NavigationDataTypes
dataTypes={dataTypes}
filtered={filtered}
onClick={(dt) =>
onClick={(dt) => {
const type = (() => {
switch (view) {
case "visualize":
return "SELECT_DATA_TYPE_VISUALIZER";
case "design":
return "SELECT_DATA_TYPE_DESIGNER";
case "code":
return "SELECT_DATA_TYPE_CODE";
}
})();
actorRef.send({
type: isDesignerView
? "SELECT_DATA_TYPE_DESIGNER"
: "SELECT_DATA_TYPE_CODE",
type,
name: dt.name,
nodePath: dt.nodePath,
})
}
});
}}
isActive={(p) =>
"name" in selectedNode && p.name === selectedNode?.name
}
Expand All @@ -98,15 +114,23 @@ export function EditorSidebar() {
<NavigationResponses
responses={responses}
filtered={filtered}
onClick={(r) =>
onClick={(r) => {
const type = (() => {
switch (view) {
case "visualize":
return "SELECT_RESPONSE_VISUALIZER";
case "design":
return "SELECT_RESPONSE_DESIGNER";
case "code":
return "SELECT_RESPONSE_CODE";
}
})();
actorRef.send({
type: isDesignerView
? "SELECT_RESPONSE_DESIGNER"
: "SELECT_RESPONSE_CODE",
type,
name: r.name,
nodePath: r.nodePath,
})
}
});
}}
isActive={(p) =>
"name" in selectedNode && p.name === selectedNode?.name
}
Expand Down
Loading

0 comments on commit fd1f090

Please sign in to comment.