std-undo

Level: Atom | Entity: UndoAction | Persistence: runtime

1 states, 5 events, 5 transitions

Live Preview

orbital UndoActionOrbital {
  entity UndoAction [runtime] {
    id : string
    name : string
    description : string
    status : string
    createdAt : string
    undoStack : [string]
    redoStack : [string]
    current : string
  }
  trait UndoActionUndo -> UndoAction [interaction] {
    state idle {
      INIT -> idle
        (fetch UndoAction)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "history", size: "lg" }, { type: "typography", content: "History", variant: "h2" }] }, { type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "tooltip", content: "Undo the last action", children: [{ type: "button", label: "Undo", event: "UNDO", variant: "ghost", icon: "undo" }] }, { type: "tooltip", content: "Redo the last undone action", children: [{ type: "button", label: "Redo", event: "REDO", variant: "ghost", icon: "redo" }] }, { type: "divider", orientation: "vertical" }, { type: "tooltip", content: "Clear all history", children: [{ type: "button", label: "Clear", event: "CLEAR", variant: "ghost", icon: "trash-2" }] }] }] }, { type: "divider" }, { type: "stack", direction: "horizontal", gap: "md", align: "center", children: [{ type: "typography", variant: "caption", color: "muted", content: "Last action:" }, { type: "badge", label: ["object/get", ["array/first", "@entity"], "current"] }] }] })
      PUSH -> idle
        (set @entity.undoStack (array/append @entity.undoStack @entity.current))
        (set @entity.current @payload.data)
        (set @entity.redoStack [])
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "history", size: "lg" }, { type: "typography", content: "History", variant: "h2" }] }, { type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "tooltip", content: "Undo the last action", children: [{ type: "button", label: "Undo", event: "UNDO", variant: "ghost", icon: "undo" }] }, { type: "tooltip", content: "Redo the last undone action", children: [{ type: "button", label: "Redo", event: "REDO", variant: "ghost", icon: "redo" }] }, { type: "divider", orientation: "vertical" }, { type: "tooltip", content: "Clear all history", children: [{ type: "button", label: "Clear", event: "CLEAR", variant: "ghost", icon: "trash-2" }] }] }] }, { type: "divider" }, { type: "stack", direction: "horizontal", gap: "md", align: "center", children: [{ type: "typography", variant: "caption", color: "muted", content: "Last action:" }, { type: "badge", label: ["object/get", ["array/first", "@entity"], "current"] }] }] })
      UNDO -> idle
        (set @entity.redoStack (array/append @entity.redoStack @entity.current))
        (set @entity.current (array/last @entity.undoStack))
        (set @entity.undoStack (array/slice @entity.undoStack 0 -1))
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "history", size: "lg" }, { type: "typography", content: "History", variant: "h2" }] }, { type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "tooltip", content: "Undo the last action", children: [{ type: "button", label: "Undo", event: "UNDO", variant: "ghost", icon: "undo" }] }, { type: "tooltip", content: "Redo the last undone action", children: [{ type: "button", label: "Redo", event: "REDO", variant: "ghost", icon: "redo" }] }, { type: "divider", orientation: "vertical" }, { type: "tooltip", content: "Clear all history", children: [{ type: "button", label: "Clear", event: "CLEAR", variant: "ghost", icon: "trash-2" }] }] }] }, { type: "divider" }, { type: "stack", direction: "horizontal", gap: "md", align: "center", children: [{ type: "typography", variant: "caption", color: "muted", content: "Last action:" }, { type: "badge", label: ["object/get", ["array/first", "@entity"], "current"] }] }] })
      REDO -> idle
        (set @entity.undoStack (array/append @entity.undoStack @entity.current))
        (set @entity.current (array/last @entity.redoStack))
        (set @entity.redoStack (array/slice @entity.redoStack 0 -1))
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "history", size: "lg" }, { type: "typography", content: "History", variant: "h2" }] }, { type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "tooltip", content: "Undo the last action", children: [{ type: "button", label: "Undo", event: "UNDO", variant: "ghost", icon: "undo" }] }, { type: "tooltip", content: "Redo the last undone action", children: [{ type: "button", label: "Redo", event: "REDO", variant: "ghost", icon: "redo" }] }, { type: "divider", orientation: "vertical" }, { type: "tooltip", content: "Clear all history", children: [{ type: "button", label: "Clear", event: "CLEAR", variant: "ghost", icon: "trash-2" }] }] }] }, { type: "divider" }, { type: "stack", direction: "horizontal", gap: "md", align: "center", children: [{ type: "typography", variant: "caption", color: "muted", content: "Last action:" }, { type: "badge", label: ["object/get", ["array/first", "@entity"], "current"] }] }] })
      CLEAR -> idle
        (set @entity.undoStack [])
        (set @entity.redoStack [])
        (set @entity.current "")
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "history", size: "lg" }, { type: "typography", content: "History", variant: "h2" }] }, { type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "tooltip", content: "Undo the last action", children: [{ type: "button", label: "Undo", event: "UNDO", variant: "ghost", icon: "undo" }] }, { type: "tooltip", content: "Redo the last undone action", children: [{ type: "button", label: "Redo", event: "REDO", variant: "ghost", icon: "redo" }] }, { type: "divider", orientation: "vertical" }, { type: "tooltip", content: "Clear all history", children: [{ type: "button", label: "Clear", event: "CLEAR", variant: "ghost", icon: "trash-2" }] }] }] }, { type: "divider" }, { type: "stack", direction: "horizontal", gap: "md", align: "center", children: [{ type: "typography", variant: "caption", color: "muted", content: "Last action:" }, { type: "badge", label: ["object/get", ["array/first", "@entity"], "current"] }] }] })
    }
  }
  page "/undoactions/undo" -> UndoActionUndo
}

Loading preview...

Orbital Visualization

Loading visualization...

Entity Fields

Field	Type	Default
id	string	-
name	string	-
description	string	-
status	string	"active"
createdAt	string	-
undoStack	array	[]
redoStack	array	[]
current	string	""

States

State	Type
idle	Initial

Events

Event	Payload
INIT	-
PUSH	data: string
UNDO	-
REDO	-
CLEAR	-

Transitions

From	Event	To	Effects
idle	INIT	idle	2 effects
idle	PUSH	idle	4 effects
idle	UNDO	idle	4 effects
idle	REDO	idle	4 effects
idle	CLEAR	idle	4 effects