steps can now contain individual content on editor side

src/assets/icon/remove.svg

@@ -1,5 +1 @@
-<svg  viewBox="0 0 80 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M240-440q-17 0-28.5-11.5T200-480q0-17 11.5-28.5T240-520h480q17 0 28.5 11.5T760-480q0 17-11.5 28.5T720-440H240Z"/></svg>
-    <path d="M24.5 4.5H55.5C66.5457 4.5 75.5 13.4543 75.5 24.5C75.5 35.5457 66.5457 44.5 55.5 44.5H24.5C13.4543 44.5 4.5 35.5457 4.5 24.5C4.5 13.4543 13.4543 4.5 24.5 4.5Z"
-          stroke="black" stroke-width="9"/>
-    <line x1="24.5" y1="24.5" x2="55.5" y2="24.5" stroke="black" stroke-width="9" stroke-linecap="round"/>
-</svg>

src/components/editor/StepsTree.tsx

@@ -1,45 +1,87 @@
-import {StepInfoNode} from "../../model/tactic/Tactic";
 import "../../style/steps-tree.css"
-import BendableArrow from "../arrows/BendableArrow";
+import { StepInfoNode } from "../../model/tactic/Tactic"
-import {useRef} from "react";
+import BendableArrow from "../arrows/BendableArrow"
+import { useRef } from "react"
+import AddSvg from "../../assets/icon/add.svg?react"
+import RemoveSvg from "../../assets/icon/remove.svg?react"
 
 export interface StepsTreeProps {
     root: StepInfoNode
+    onAddChildren: (parent: StepInfoNode) => void
+    onRemoveNode: (node: StepInfoNode) => void
+    onStepSelected: (node: StepInfoNode) => void
 }
 
-export default function StepsTree({root}: StepsTreeProps) {
+export default function StepsTree({
-    return <div className="steps-tree">
+    root,
-        <StepsTreeNode node={root}/>
+    onAddChildren,
+    onRemoveNode,
+    onStepSelected,
+}: StepsTreeProps) {
+    return (
+        <div className="steps-tree">
+            <StepsTreeNode
+                node={root}
+                isNodeRoot={true}
+                onStepSelected={onStepSelected}
+                onAddChildren={onAddChildren}
+                onRemoveNode={onRemoveNode}
+            />
         </div>
+    )
 }
 
 interface StepsTreeContentProps {
     node: StepInfoNode
+    isNodeRoot: boolean
+    onAddChildren: (parent: StepInfoNode) => void
+    onRemoveNode: (node: StepInfoNode) => void
+    onStepSelected: (node: StepInfoNode) => void
 }
 
-function StepsTreeNode({node}: StepsTreeContentProps) {
+function StepsTreeNode({
+    node,
+    isNodeRoot,
+    onAddChildren,
+    onRemoveNode,
+    onStepSelected,
+}: StepsTreeContentProps) {
     const ref = useRef<HTMLDivElement>(null)
     return (
-        <div ref={ref}
+        <div ref={ref} className={"step-group"}>
-             className={"step-group"}>
+            <StepPiece
-            <StepPiece id={node.id}/>
+                id={node.id}
-            {node.children.map(child => (
+                onAddButtonClicked={() => onAddChildren(node)}
+                onRemoveButtonClicked={
+                    isNodeRoot ? undefined : () => onRemoveNode(node)
+                }
+                onSelected={() => onStepSelected(node)}
+            />
+            {node.children.map((child) => (
                 <BendableArrow
                     key={child.id}
                     area={ref}
                     startPos={"step-piece-" + node.id}
                     segments={[{ next: "step-piece-" + child.id }]}
-                    onSegmentsChanges={() => {
+                    onSegmentsChanges={() => {}}
-                    }}
                     forceStraight={true}
                     wavy={false}
-                    //TODO remove magic constant
+                    //TODO remove magic constants
                     startRadius={10}
                     endRadius={10}
                 />
             ))}
             <div className={"step-children"}>
-                {node.children.map(child => <StepsTreeNode key={child.id} node={child}/>)}
+                {node.children.map((child) => (
+                    <StepsTreeNode
+                        key={child.id}
+                        isNodeRoot={false}
+                        node={child}
+                        onAddChildren={onAddChildren}
+                        onRemoveNode={onRemoveNode}
+                        onStepSelected={onStepSelected}
+                    />
+                ))}
             </div>
         </div>
     )
@@ -47,11 +89,37 @@ function StepsTreeNode({node}: StepsTreeContentProps) {
 
 interface StepPieceProps {
     id: number
+    onAddButtonClicked?: () => void
+    onRemoveButtonClicked?: () => void
+    onSelected: () => void
 }
 
-function StepPiece({id}: StepPieceProps) {
+function StepPiece({
+    id,
+    onAddButtonClicked,
+    onRemoveButtonClicked,
+    onSelected,
+}: StepPieceProps) {
     return (
-        <div id={"step-piece-" + id} className={"step-piece"}>
+        <div
+            id={"step-piece-" + id}
+            tabIndex={1}
+            className={"step-piece"}
+            onClick={onSelected}>
+            <div className="step-piece-actions">
+                {onAddButtonClicked && (
+                    <AddSvg
+                        onClick={() => onAddButtonClicked()}
+                        className={"add-icon"}
+                    />
+                )}
+                {onRemoveButtonClicked && (
+                    <RemoveSvg
+                        onClick={() => onRemoveButtonClicked()}
+                        className={"remove-icon"}
+                    />
+                )}
+            </div>
             <p>{id}</p>
         </div>
     )

src/editor/PlayerDomains.ts

@@ -1,10 +1,30 @@
-import {BallState, Player, PlayerLike, PlayerPhantom,} from "../model/tactic/Player"
+import {
-import {ComponentId, StepContent, TacticComponent,} from "../model/tactic/Tactic"
+    BallState,
+    Player,
+    PlayerLike,
+    PlayerPhantom,
+} from "../model/tactic/Player"
+import {
+    ComponentId,
+    StepContent,
+    TacticComponent,
+} from "../model/tactic/Tactic"
 
 import { removeComponent, updateComponent } from "./TacticContentDomains"
-import {removeAllActionsTargeting, spreadNewStateFromOriginStateChange,} from "./ActionsDomains"
+import {
+    removeAllActionsTargeting,
+    spreadNewStateFromOriginStateChange,
+} from "./ActionsDomains"
 import { ActionKind } from "../model/tactic/Action"
-import {add, minus, norm, Pos, posWithinBase, ratioWithinBase, relativeTo,} from "../geo/Pos.ts"
+import {
+    add,
+    minus,
+    norm,
+    Pos,
+    posWithinBase,
+    ratioWithinBase,
+    relativeTo,
+} from "../geo/Pos.ts"
 import { PLAYER_RADIUS_PIXELS } from "../components/editor/CourtPlayer.tsx"
 
 export function getOrigin(

src/editor/StepsDomain.ts

@@ -0,0 +1,36 @@
+import { StepInfoNode } from "../model/tactic/Tactic"
+
+export function addStepNode(
+    root: StepInfoNode,
+    parent: StepInfoNode,
+    child: StepInfoNode,
+): StepInfoNode {
+    if (root.id === parent.id) {
+        return {
+            ...root,
+            children: root.children.concat(child),
+        }
+    }
+
+    return {
+        ...root,
+        children: root.children.map((c) => addStepNode(c, parent, child)),
+    }
+}
+
+export function removeStepNode(
+    root: StepInfoNode,
+    node: StepInfoNode,
+): StepInfoNode | null {
+    if (root.id === node.id) {
+        return null
+    }
+
+    return {
+        ...root,
+        children: root.children.flatMap((child) => {
+            const result = removeStepNode(child, node)
+            return result ? [result] : []
+        }),
+    }
+}

src/editor/TacticContentDomains.ts

@@ -1,4 +1,5 @@
 import { Pos, ratioWithinBase } from "../geo/Pos"
+
 import {
     BallState,
     Player,
@@ -50,7 +51,6 @@ export function placeObjectAt(
 ): StepContent {
     const pos = ratioWithinBase(refBounds, courtBounds)
 
-
     let courtObject: CourtObject
 
     switch (rackedObject.key) {

src/model/tactic/Tactic.ts

@@ -2,16 +2,19 @@ import { Player, PlayerPhantom } from "./Player"
 import { Action } from "./Action"
 import { CourtObject } from "./CourtObjects"
 
-export interface Tactic {
+export interface TacticInfo {
     readonly id: number
     readonly name: string
     readonly courtType: CourtType
-    readonly currentStepContent: StepContent
     readonly rootStepNode: StepInfoNode
 }
 
-export interface StepContent {
+export interface TacticStep {
     readonly stepId: number
+    readonly content: StepContent
+}
+
+export interface StepContent {
     readonly components: TacticComponent[]
 }
 

src/pages/Editor.tsx

@@ -20,13 +20,18 @@ import {Rack} from "../components/Rack"
 import { PlayerPiece } from "../components/editor/PlayerPiece"
 
 import {
-    CourtType, StepContent, StepInfoNode,
+    CourtType,
-    Tactic,
+    StepContent,
+    StepInfoNode,
     TacticComponent,
+    TacticInfo,
 } from "../model/tactic/Tactic"
 import { fetchAPI, fetchAPIGet } from "../Fetcher"
 
-import SavingState, {SaveState, SaveStates,} from "../components/editor/SavingState"
+import SavingState, {
+    SaveState,
+    SaveStates,
+} from "../components/editor/SavingState"
 
 import { BALL_TYPE } from "../model/tactic/CourtObjects"
 import { CourtAction } from "../components/editor/CourtAction"
@@ -45,10 +50,22 @@ import {
     updateComponent,
 } from "../editor/TacticContentDomains"
 
-import {BallState, Player, PlayerInfo, PlayerLike, PlayerTeam,} from "../model/tactic/Player"
+import {
+    BallState,
+    Player,
+    PlayerInfo,
+    PlayerLike,
+    PlayerTeam,
+} from "../model/tactic/Player"
+
 import { RackedCourtObject, RackedPlayer } from "../editor/RackedItems"
 import CourtPlayer from "../components/editor/CourtPlayer"
-import {createAction, getActionKind, isActionValid, removeAction,} from "../editor/ActionsDomains"
+import {
+    createAction,
+    getActionKind,
+    isActionValid,
+    removeAction,
+} from "../editor/ActionsDomains"
 import ArrowAction from "../components/actions/ArrowAction"
 import { middlePos, Pos, ratioWithinBase } from "../geo/Pos"
 import { Action, ActionKind } from "../model/tactic/Action"
@@ -63,6 +80,7 @@ import { CourtBall } from "../components/editor/CourtBall"
 import { useNavigate, useParams } from "react-router-dom"
 import { DEFAULT_TACTIC_NAME } from "./NewTacticPage.tsx"
 import StepsTree from "../components/editor/StepsTree"
+import { addStepNode, removeStepNode } from "../editor/StepsDomain"
 
 const ERROR_STYLE: CSSProperties = {
     borderColor: "red",
@@ -72,15 +90,16 @@ const GUEST_MODE_CONTENT_STORAGE_KEY = "guest_mode_content"
 const GUEST_MODE_TITLE_STORAGE_KEY = "guest_mode_title"
 
 export interface EditorViewProps {
-    tactic: Tactic
+    tactic: TacticInfo
     onContentChange: (tactic: StepContent) => Promise<SaveState>
     onNameChange: (name: string) => Promise<boolean>
 }
+
 interface TacticDto {
     id: number
     name: string
     courtType: CourtType
-    content: string
+    content: { components: TacticComponent[] }
     root: StepInfoNode
 }
 
@@ -94,9 +113,9 @@ export default function EditorPage({ guestMode }: EditorPageProps) {
             return {
                 id: -1,
                 courtType: "PLAIN",
-                content: '{"components": []}',
+                content: { components: [] },
                 name: DEFAULT_TACTIC_NAME,
-                root: {id: 1, children: []}
+                root: { id: 1, children: [] },
             }
         }
         return null
@@ -117,13 +136,17 @@ export default function EditorPage({ guestMode }: EditorPageProps) {
             const treeResponse = await treeResponsePromise
             const contentResponse = await contentResponsePromise
 
-            if (infoResponse.status == 401 || contentResponse.status == 401) {
+            if (
+                infoResponse.status == 401 ||
+                treeResponse.status == 401 ||
+                contentResponse.status == 401
+            ) {
                 navigation("/login")
                 return
             }
 
             const { name, courtType } = await infoResponse.json()
-            const content = await contentResponse.text()
+            const content = await contentResponse.json()
             const { root } = await treeResponse.json()
 
             setTactic({ id, name, courtType, content, root })
@@ -136,10 +159,11 @@ export default function EditorPage({ guestMode }: EditorPageProps) {
         return (
             <Editor
                 id={id}
-                rootStepNode={tactic.root}
+                initialStepsNode={tactic.root}
                 courtType={tactic.courtType}
-                content={tactic.content}
+                initialStepContent={tactic.content}
-                name={tactic.name}
+                initialName={tactic.name}
+                initialStepId={1}
             />
         )
     }
@@ -153,23 +177,63 @@ function EditorLoadingScreen() {
 
 export interface EditorProps {
     id: number
-    name: string
+    initialName: string
-    content: string
+    courtType: "PLAIN" | "HALF"
-    courtType: CourtType,
+    initialStepContent: StepContent
-    rootStepNode: StepInfoNode
+    initialStepId: number
+    initialStepsNode: StepInfoNode
 }
 
-function Editor({ id, name, courtType, content, rootStepNode }: EditorProps) {
+function Editor({
+    id,
+    initialName,
+    courtType,
+    initialStepContent,
+    initialStepId,
+    initialStepsNode,
+}: EditorProps) {
     const isInGuestMode = id == -1
+    const navigate = useNavigate()
 
     const storageContent = localStorage.getItem(GUEST_MODE_CONTENT_STORAGE_KEY)
-    const stepContent =
+    const stepInitialContent = {
-        isInGuestMode && storageContent != null ? storageContent : content
+        ...(isInGuestMode && storageContent != null
+            ? JSON.parse(storageContent)
+            : initialStepContent),
+    }
 
-    const storageName = localStorage.getItem(GUEST_MODE_TITLE_STORAGE_KEY)
+    const storage_name = localStorage.getItem(GUEST_MODE_TITLE_STORAGE_KEY)
-    const editorName = isInGuestMode && storageName != null ? storageName : name
+    const editorName =
+        isInGuestMode && storage_name != null ? storage_name : initialName
 
-    const navigate = useNavigate()
+    const [stepId, setStepId] = useState(initialStepId)
+    const [stepContent, setStepContent, saveState] = useContentState(
+        stepInitialContent,
+        isInGuestMode ? SaveStates.Guest : SaveStates.Ok,
+        useMemo(
+            () =>
+                debounceAsync(async (content: StepContent) => {
+                    if (isInGuestMode) {
+                        localStorage.setItem(
+                            GUEST_MODE_CONTENT_STORAGE_KEY,
+                            JSON.stringify(content),
+                        )
+                        return SaveStates.Guest
+                    }
+                    const response = await fetchAPI(
+                        `tactics/${id}/steps/${stepId}`,
+                        {
+                            content: {
+                                components: content.components,
+                            },
+                        },
+                        "PUT",
+                    )
+                    return response.ok ? SaveStates.Ok : SaveStates.Err
+                }, 250),
+            [id, isInGuestMode, stepId],
+        ),
+    )
 
     return (
         <EditorView
@@ -177,12 +241,13 @@ function Editor({ id, name, courtType, content, rootStepNode }: EditorProps) {
                 name: editorName,
                 id,
                 courtType,
-                currentStepContent: {
+                rootStepNode: initialStepsNode,
-                    stepId: 1,
-                    ...JSON.parse(stepContent)
-                },
-                rootStepNode,
             }}
+            currentStepContent={stepContent}
+            currentStepId={stepId}
+            setCurrentStepContent={(content) => setStepContent(content, true)}
+            courtType={courtType}
+            saveState={saveState}
             onContentChange={async (content: StepContent) => {
                 if (isInGuestMode) {
                     localStorage.setItem(
@@ -195,7 +260,6 @@ function Editor({ id, name, courtType, content, rootStepNode }: EditorProps) {
                     `tactics/${id}/steps/1`,
                     { content },
                     "PUT",
-
                 )
                 if (response.status == 401) {
                     navigate("/login")
@@ -212,47 +276,70 @@ function Editor({ id, name, courtType, content, rootStepNode }: EditorProps) {
                     `tactics/${id}/name`,
                     { name },
                     "PUT",
-
                 )
                 if (response.status == 401) {
                     navigate("/login")
                 }
                 return response.ok
             }}
-            onStepSelected={() => {
+            selectStep={async (step) => {
+                const response = await fetchAPIGet(
+                    `tactics/${id}/steps/${step}`,
+                )
+                if (!response.ok) return null
+                setStepContent(
+                    { stepId: step, ...(await response.json()) },
+                    false,
+                )
+            }}
+            onAddStep={async (parent) => {
+                const response = await fetchAPI(`tactics/${id}/steps`, {
+                    parentId: parent.id,
+                })
+                if (!response.ok) return null
+                const { stepId } = await response.json()
+                return { id: stepId, children: [] }
+            }}
+            onRemoveStep={async (step) => {
+                const response = await fetchAPI(
+                    `tactics/${id}/steps/${step.id}`,
+                    {},
+                    "DELETE",
+                )
+                return response.ok
             }}
-            stepsContentsRoot={rootStepNode}
-            courtType={courtType}
         />
     )
 }
 
 export interface EditorViewProps {
-    tactic: Tactic
+    tactic: TacticInfo
-    onContentChange: (tactic: StepContent) => Promise<SaveState>
+    currentStepContent: StepContent
-    onStepSelected: (stepId: number) => void,
+    currentStepId: number
+    saveState: SaveState
+    setCurrentStepContent: Dispatch<SetStateAction<StepContent>>
+
+    selectStep: (stepId: number) => void
     onNameChange: (name: string) => Promise<boolean>
-    stepsContentsRoot: StepInfoNode
+    onRemoveStep: (step: StepInfoNode) => Promise<boolean>
+    onAddStep: (parent: StepInfoNode) => Promise<StepInfoNode | null>
     courtType: "PLAIN" | "HALF"
 }
 
 function EditorView({
-
+    tactic: { name, rootStepNode: initialStepsNode },
-                        tactic: {id, name, currentStepContent: initialContent},
+    setCurrentStepContent: setContent,
-                        onContentChange,
+    currentStepContent: content,
+    saveState,
     onNameChange,
-                        onStepSelected,
+    selectStep,
-                        stepsContentsRoot,
+    onRemoveStep,
+    onAddStep,
     courtType,
 }: EditorViewProps) {
-    const isInGuestMode = id == -1
-
     const [titleStyle, setTitleStyle] = useState<CSSProperties>({})
-    const [content, setContent, saveState] = useContentState(
+
-        initialContent,
+    const [rootStepsNode, setRootStepsNode] = useState(initialStepsNode)
-        isInGuestMode ? SaveStates.Guest : SaveStates.Ok,
-        useMemo(() => debounceAsync(onContentChange), [onContentChange]),
-    )
 
     const [allies, setAllies] = useState(() =>
         getRackPlayers(PlayerTeam.Allies, content.components),
@@ -617,7 +704,39 @@ function EditorView({
                         </div>
                     </div>
                 </div>
-                <EditorStepsTree isVisible={isStepsTreeVisible} root={stepsContentsRoot}/>
+                <EditorStepsTree
+                    isVisible={isStepsTreeVisible}
+                    root={rootStepsNode}
+                    onAddChildren={useCallback(
+                        async (parent) => {
+                            const addedNode = await onAddStep(parent)
+                            if (addedNode == null) {
+                                console.error(
+                                    "could not add step : onAddStep returned null node",
+                                )
+                                return
+                            }
+                            setRootStepsNode((root) =>
+                                addStepNode(root, parent, addedNode),
+                            )
+                        },
+                        [onAddStep],
+                    )}
+                    onRemoveNode={useCallback(
+                        async (removed) => {
+                            const isOk = await onRemoveStep(removed)
+                            if (isOk)
+                                setRootStepsNode(
+                                    (root) => removeStepNode(root, removed)!,
+                                )
+                        },
+                        [onRemoveStep],
+                    )}
+                    onStepSelected={useCallback(
+                        (node) => selectStep(node.id),
+                        [selectStep],
+                    )}
+                />
             </div>
         </div>
     )
@@ -626,60 +745,30 @@ function EditorView({
 interface EditorStepsTreeProps {
     isVisible: boolean
     root: StepInfoNode
+    onAddChildren: (parent: StepInfoNode) => void
+    onRemoveNode: (node: StepInfoNode) => void
+    onStepSelected: (node: StepInfoNode) => void
 }
 
-function EditorStepsTree({isVisible, root}: EditorStepsTreeProps) {
+function EditorStepsTree({
-    const fakeRoot: StepInfoNode = {
+    isVisible,
-        id: 0,
+    root,
-        children: [
+    onAddChildren,
-            {
+    onRemoveNode,
-                id: 1,
+    onStepSelected,
-                children: [
+}: EditorStepsTreeProps) {
-                    {
-                        id: 2,
-                        children: []
-                    },
-                    {
-                        id: 3,
-                        children: [{
-                            id: 4,
-                            children: []
-                        }]
-                    }
-                ]
-            },
-            {
-                id: 5,
-                children: [
-                    {
-                        id: 6,
-                        children: []
-                    },
-                    {
-                        id: 7,
-                        children: []
-                    }
-                ]
-            },
-            {
-                id: 8,
-                children: [
-                    {
-                        id: 9,
-                        children: [
-                            {
-                                id: 10,
-                                children: []
-                            }
-                        ]
-                    }
-                ]
-            }
-        ]
-    }
     return (
-        <div id="steps-div" style={{transform: isVisible ? "translateX(0)" : "translateX(100%)"}}>
+        <div
-            <StepsTree root={fakeRoot}/>
+            id="steps-div"
+            style={{
+                transform: isVisible ? "translateX(0)" : "translateX(100%)",
+            }}>
+            <StepsTree
+                root={root}
+                onStepSelected={onStepSelected}
+                onAddChildren={onAddChildren}
+                onRemoveNode={onRemoveNode}
+            />
         </div>
     )
 }
@@ -904,19 +993,23 @@ function useContentState<S>(
     initialContent: S,
     initialSaveState: SaveState,
     saveStateCallback: (s: S) => Promise<SaveState>,
-): [S, Dispatch<SetStateAction<S>>, SaveState] {
+): [
+    S,
+    (newState: SetStateAction<S>, callSaveCallback: boolean) => void,
+    SaveState,
+] {
     const [content, setContent] = useState(initialContent)
     const [savingState, setSavingState] = useState(initialSaveState)
 
     const setContentSynced = useCallback(
-        (newState: SetStateAction<S>) => {
+        (newState: SetStateAction<S>, callSaveCallback: boolean) => {
             setContent((content) => {
                 const state =
                     typeof newState === "function"
                         ? (newState as (state: S) => S)(content)
                         : newState
 
-                if (state !== content) {
+                if (state !== content && callSaveCallback) {
                     setSavingState(SaveStates.Saving)
                     saveStateCallback(state)
                         .then(setSavingState)

src/style/editor.css

@@ -61,11 +61,15 @@
 
 #steps-div {
     background-color: var(--editor-tree-background);
-    overflow: hidden;
     width: 20%;
 
     transform: translateX(100%);
     transition: transform 500ms;
+    overflow: scroll;
+}
+
+#steps-div::-webkit-scrollbar {
+    display: none;
 }
 
 #allies-rack,

src/style/steps-tree.css

@@ -1,4 +1,5 @@
 .step-piece {
+    position: relative;
     font-family: monospace;
     pointer-events: all;
 
@@ -16,6 +17,42 @@
     justify-content: center;
 
     user-select: none;
+    cursor: pointer;
+}
+
+.step-piece:focus,
+.step-piece:hover {
+    background-color: var(--editor-tree-step-piece-hovered);
+}
+
+.step-piece:focus-within .step-piece-actions {
+    visibility: visible;
+}
+
+.step-piece:hover .step-piece-actions {
+    visibility: visible;
+}
+
+.step-piece-actions {
+    visibility: hidden;
+    display: flex;
+    position: absolute;
+    column-gap: 5px;
+    top: -140%;
+}
+
+.add-icon,
+.remove-icon {
+    background-color: white;
+    border-radius: 100%;
+}
+
+.add-icon {
+    fill: var(--add-icon-fill);
+}
+
+.remove-icon {
+    fill: var(--remove-icon-fill);
 }
 
 .step-children {

src/style/theme/default.css

@@ -31,4 +31,8 @@
     --font-content: Helvetica;
     --editor-tree-background: #503636;
     --editor-tree-step-piece: #0bd9d9;
+    --editor-tree-step-piece-hovered: #ea9b9b;
+
+    --add-icon-fill: #00a206;
+    --remove-icon-fill: #e50046;
 }