std-movement

Level: Atom | Entity: MovableEntity | Persistence: runtime

3 states, 7 events, 7 transitions

Live Preview

orbital MovableEntityOrbital {
  entity MovableEntity [runtime] {
    id : string
    name : string
    description : string
    status : string
    createdAt : string
    x : number
    y : number
  }
  trait MovableEntityMovement -> MovableEntity [interaction] {
    initial: idle
    state idle {
      INIT -> idle
        (fetch MovableEntity)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "stack", direction: "horizontal", gap: "md", children: [{ type: "icon", name: "move", size: "lg" }, { type: "typography", content: "MovableEntitys Movement", variant: "h2" }] }, { type: "status-dot", status: "inactive", label: "Idle" }] }, { type: "divider" }, { type: "simple-grid", columns: 2, children: [{ type: "stat-display", label: "X", value: ["object/get", ["array/first", "@entity"], "x"] }, { type: "stat-display", label: "Y", value: ["object/get", ["array/first", "@entity"], "y"] }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Name" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "name"] }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Description" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "description"] }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Status" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "status"] }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "CreatedAt" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "createdAt"] }] }, { type: "divider" }, { type: "stack", direction: "horizontal", gap: "sm", justify: "end", children: [{ type: "button", label: "Move", event: "MOVE", variant: "primary", icon: "navigation" }] }] })
      MOVE -> moving
        (fetch MovableEntity)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "stack", direction: "horizontal", gap: "md", children: [{ type: "icon", name: "move", size: "lg" }, { type: "typography", content: "MovableEntitys Movement", variant: "h2" }] }, { type: "status-dot", status: "active", pulse: true, label: "Moving" }] }, { type: "divider" }, { type: "simple-grid", columns: 2, children: [{ type: "stat-display", label: "X", value: ["object/get", ["array/first", "@entity"], "x"] }, { type: "stat-display", label: "Y", value: ["object/get", ["array/first", "@entity"], "y"] }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Name" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "name"] }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Description" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "description"] }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Status" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "status"] }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "CreatedAt" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "createdAt"] }] }, { type: "divider" }, { type: "stack", direction: "horizontal", gap: "sm", justify: "end", children: [{ type: "button", label: "Stop", event: "STOP", variant: "danger", icon: "square" }] }] })
    }
    state moving {
      STOP -> idle
        (fetch MovableEntity)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "stack", direction: "horizontal", gap: "md", children: [{ type: "icon", name: "move", size: "lg" }, { type: "typography", content: "MovableEntitys Movement", variant: "h2" }] }, { type: "status-dot", status: "inactive", label: "Idle" }] }, { type: "divider" }, { type: "simple-grid", columns: 2, children: [{ type: "stat-display", label: "X", value: ["object/get", ["array/first", "@entity"], "x"] }, { type: "stat-display", label: "Y", value: ["object/get", ["array/first", "@entity"], "y"] }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Name" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "name"] }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Description" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "description"] }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Status" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "status"] }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "CreatedAt" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "createdAt"] }] }, { type: "divider" }, { type: "stack", direction: "horizontal", gap: "sm", justify: "end", children: [{ type: "button", label: "Move", event: "MOVE", variant: "primary", icon: "navigation" }] }] })
      COLLISION -> colliding
        (render-ui modal { type: "stack", direction: "vertical", gap: "md", children: [{ type: "stack", direction: "horizontal", gap: "sm", children: [{ type: "icon", name: "alert-triangle", size: "md" }, { type: "typography", content: "Collision Detected", variant: "h3" }] }, { type: "divider" }, { type: "typography", content: "A collision has been detected. Resolve to continue.", variant: "body" }, { type: "stack", direction: "horizontal", gap: "sm", justify: "end", children: [{ type: "button", label: "Cancel", event: "CANCEL", variant: "ghost" }, { type: "button", label: "Resolve", event: "RESOLVE", variant: "primary", icon: "check" }] }] })
    }
    state colliding {
      RESOLVE -> idle
        (render-ui modal null)
        (fetch MovableEntity)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "stack", direction: "horizontal", gap: "md", children: [{ type: "icon", name: "move", size: "lg" }, { type: "typography", content: "MovableEntitys Movement", variant: "h2" }] }, { type: "status-dot", status: "inactive", label: "Idle" }] }, { type: "divider" }, { type: "simple-grid", columns: 2, children: [{ type: "stat-display", label: "X", value: ["object/get", ["array/first", "@entity"], "x"] }, { type: "stat-display", label: "Y", value: ["object/get", ["array/first", "@entity"], "y"] }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Name" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "name"] }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Description" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "description"] }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Status" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "status"] }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "CreatedAt" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "createdAt"] }] }, { type: "divider" }, { type: "stack", direction: "horizontal", gap: "sm", justify: "end", children: [{ type: "button", label: "Move", event: "MOVE", variant: "primary", icon: "navigation" }] }] })
      CANCEL -> idle
        (render-ui modal null)
        (fetch MovableEntity)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "stack", direction: "horizontal", gap: "md", children: [{ type: "icon", name: "move", size: "lg" }, { type: "typography", content: "MovableEntitys Movement", variant: "h2" }] }, { type: "status-dot", status: "inactive", label: "Idle" }] }, { type: "divider" }, { type: "simple-grid", columns: 2, children: [{ type: "stat-display", label: "X", value: ["object/get", ["array/first", "@entity"], "x"] }, { type: "stat-display", label: "Y", value: ["object/get", ["array/first", "@entity"], "y"] }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Name" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "name"] }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Description" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "description"] }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Status" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "status"] }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "CreatedAt" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "createdAt"] }] }, { type: "divider" }, { type: "stack", direction: "horizontal", gap: "sm", justify: "end", children: [{ type: "button", label: "Move", event: "MOVE", variant: "primary", icon: "navigation" }] }] })
      CLOSE -> idle
        (render-ui modal null)
        (fetch MovableEntity)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "stack", direction: "horizontal", gap: "md", children: [{ type: "icon", name: "move", size: "lg" }, { type: "typography", content: "MovableEntitys Movement", variant: "h2" }] }, { type: "status-dot", status: "inactive", label: "Idle" }] }, { type: "divider" }, { type: "simple-grid", columns: 2, children: [{ type: "stat-display", label: "X", value: ["object/get", ["array/first", "@entity"], "x"] }, { type: "stat-display", label: "Y", value: ["object/get", ["array/first", "@entity"], "y"] }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Name" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "name"] }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Description" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "description"] }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Status" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "status"] }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "CreatedAt" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "createdAt"] }] }, { type: "divider" }, { type: "stack", direction: "horizontal", gap: "sm", justify: "end", children: [{ type: "button", label: "Move", event: "MOVE", variant: "primary", icon: "navigation" }] }] })
    }
  }
  page "/movableentitys" -> MovableEntityMovement
}

Loading preview...

Orbital Visualization

Loading visualization...

Entity Fields

Field	Type	Default
id	string	-
name	string	-
description	string	-
status	string	"active"
createdAt	string	-
x	number	0
y	number	0

States

State	Type
idle	Initial
moving	-
colliding	-

Events

Event	Payload
INIT	-
MOVE	x: number, y: number
STOP	-
COLLISION	targetId: string
RESOLVE	-
CANCEL	-
CLOSE	-

Transitions

From	Event	To	Effects
idle	INIT	idle	2 effects
idle	MOVE	moving	2 effects
moving	STOP	idle	2 effects
moving	COLLISION	colliding	1 effect
colliding	RESOLVE	idle	3 effects
colliding	CANCEL	idle	3 effects
colliding	CLOSE	idle	3 effects