@glodon-aiot/react-components
Version:
aiot react components
135 lines (134 loc) • 3.04 kB
JavaScript
import { assign as o } from "@xstate/immer";
import { createMachine as e } from "xstate";
const d = e({
initial: "idle",
context: {},
states: {
idle: {
on: {
START_ADD_MARKER: {
target: "addingMarker"
},
START_DRAW_LINE: {
target: "drawingLine"
},
START_DRAW_POLYGON: {
target: "drawingPolygon"
}
}
},
addingMarker: {
on: {
RESET: {
target: "idle",
actions: o((t) => {
t.markerPoint = void 0;
})
},
ADD_MARKER: {
target: "drawCompleted",
actions: [o((t, {
point: n
}) => {
t.markerPoint = n;
}), "onAddMarker"]
},
MOUSE_MOVE: {
target: "addingMarker",
actions: o((t, {
point: n
}) => {
t.movingPoint = n;
})
}
}
},
drawingLine: {
on: {
ADD_LINE_START: {
target: "drawingLine",
actions: o((t, n) => {
t.lineStart = n.point;
})
},
ADD_LINE_END: {
target: "drawCompleted",
actions: [o((t, n) => {
t.lineEnd = n.point;
}), "onAddLine"]
},
MOUSE_MOVE: {
target: "drawingLine",
actions: o((t, {
point: n
}) => {
t.movingPoint = n;
})
},
RESET: {
target: "drawCompleted"
},
CANCEL: {
target: "drawCompleted"
}
}
// exit: assign((ctx) => {
// ctx.lineEnd = undefined
// ctx.lineStart = undefined
// }),
},
drawingPolygon: {
on: {
CANCEL: {
target: "canceled"
},
RESET: {
target: "idle",
actions: o((t) => {
t.polygonPoints = void 0;
})
},
ADD_POLYGON_POINT: {
target: "drawingPolygon",
actions: o((t, {
point: n
}) => {
var a;
t.polygonPoints = (a = t.polygonPoints) != null ? a : [], t.polygonPoints.push(n);
})
},
MOUSE_MOVE: {
target: "drawingPolygon",
actions: o((t, {
point: n
}) => {
t.movingPoint = n;
})
},
DRAW_POLYGON_COMPLETE: {
target: "drawCompleted",
actions: ["onAddPolygon"]
}
}
},
drawCompleted: {
always: {
target: "idle"
// actions: ['reset'],
// actions: assign((ctx) => {
// console.log('reset is done')
// // setTimeout(() => {
// // ctx.lineEnd = undefined
// // ctx.lineStart = undefined
// // ctx.markerPoint = undefined
// // ctx.polygonPoints = undefined
// // })
// }),
}
},
canceled: {}
}
});
export {
d as drawableMachine
};