@cwellt_software/cwellt-reactjs-lib 1.1.6 → 1.2.0

package/dist/src/components/custom/scheduler-new/presentation/SchedulerPresenter.js

@@ -0,0 +1,166 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { when } from "../../../../common/functions/dsl/UiEventDSL";
+import { CwIcon } from "../../../display/graphics/icon/CwIcon";
+import { getListOfNumbers, getRandomEvents } from "./helpers";
+import { eventIsVisible } from "./logic/eventIsVisible";
+import { getEventSizes } from "./logic/getEventSizes";
+import { OnClickEvent, OnClickRowEvent, OnClickRowHeader, OnClickUtc, OnDoubleClickEvent, OnDragEvent, OnDropCtrlEvent, OnDropEvent, OnLeftDragStart, OnRightClickEvent, OnRightClickRow, OnRightDragStart, UpdateApi, } from "./NewSchedulerUiEvents";
+export const eventToUiState = (it, selectedDate, visibleDays, tooltip) => {
+    const { left, width } = getEventSizes(selectedDate, visibleDays, it.startDate, it.endDate);
+    const eventState = {
+        ...it,
+        left,
+        width,
+        tooltip: tooltip,
+        selected: false,
+        isResizable: false,
+        isDraggable: false,
+    };
+    return eventState;
+};
+export const SchedulerPresenter = () => {
+    const [events, setEvents] = useState([]);
+    const [backgroundEvents, setBackgroundEvents] = useState([]);
+    const [uiState, setUiState] = useState(() => {
+        const visibleDays = 1;
+        const selectedDate = new Date("2024-12-03");
+        const isHeaderVisible = true;
+        return {
+            isUtc: false,
+            selectedDate: selectedDate,
+            isHeaderVisible: isHeaderVisible,
+            visibleDays: visibleDays,
+            rowsHeight: 2,
+            visibleRows: 8,
+        };
+    });
+    const [resources, setResources] = useState([]);
+    const selectedEventRef = useRef("");
+    useEffect(() => {
+        updateDataFromApi();
+    }, []);
+    const updateDataFromApi = () => {
+        const rows = 1;
+        // api call here to events
+        const apiEvents = getListOfNumbers(rows).flatMap((e) => {
+            return getRandomEvents(uiState.selectedDate, uiState.visibleDays * 3, e);
+        });
+        const eventsWithSizes = apiEvents.map((it) => {
+            return eventToUiState(it, uiState.selectedDate, uiState.visibleDays, _jsxs("div", { children: [it.startDate.getHours() + ":" + it.startDate.getMinutes(), " -", it.endDate.getHours() + ":" + it.endDate.getMinutes()] }));
+        });
+        const visibleEvents = eventsWithSizes.filter((event) => {
+            return eventIsVisible(event.startDate, event.endDate, uiState.selectedDate, uiState.visibleDays);
+        });
+        setEvents(visibleEvents);
+        const apiBackgroundEvents = getListOfNumbers(1).map((e) => {
+            const backgroundEvent = {
+                id: e.toString(),
+                rowId: e.toString(),
+                color: "orange",
+                isResizable: false,
+                isDraggable: false,
+                width: 100 / uiState.visibleDays,
+                name: "Birthday",
+                icons: _jsx(CwIcon, { iconId: "house", style: { padding: "0.5rem" } }, "cosa"),
+                startDate: new Date(),
+                left: 0,
+                endDate: new Date(),
+                isVisible: true,
+                selected: false,
+            };
+            return backgroundEvent;
+        });
+        setBackgroundEvents(apiBackgroundEvents);
+        // api call here to rows
+        const apiRows = getListOfNumbers(rows).map((e) => {
+            return {
+                resourceId: e.toString(),
+                title: "JAC" + e,
+            };
+        });
+        const headerProps = apiRows.map((row) => {
+            return {
+                rowId: row.resourceId,
+                title: row.title,
+            };
+        });
+        setResources(headerProps);
+    };
+    const onEvent = (event) => {
+        when(event)
+            .case(OnClickEvent, (event) => {
+            console.log("onClick event: " + event.id);
+        })
+            .case(OnDoubleClickEvent, (event) => {
+            const eventData = resources
+                .map((resource) => {
+                const element = events
+                    .filter((it) => {
+                    return it.rowId === resource.rowId;
+                })
+                    .find((it) => it.id == event.id);
+                return element;
+            })
+                .filter((it) => it !== undefined)[0];
+            console.log("found", eventData?.startDate, eventData?.endDate);
+        })
+            .case(OnDragEvent, (event) => {
+            console.log("onDrag event: " + event.id);
+            selectedEventRef.current = event.id;
+            console.log("selectedEvent set to: " + selectedEventRef.current);
+        })
+            .case(OnDropEvent, (event) => {
+            console.log("onDrop event: " + selectedEventRef.current + " to row: " + event.id);
+            setEvents((prevEvents) => {
+                // Find the index of the event to be updated
+                const eventIndex = prevEvents.findIndex((e) => e.id === selectedEventRef.current);
+                // If event is found, create a new array with the updated event
+                const updatedEvents = [...prevEvents];
+                updatedEvents[eventIndex] = {
+                    ...updatedEvents[eventIndex],
+                    rowId: event.id,
+                };
+                return updatedEvents;
+            });
+            console.log("drop on");
+            selectedEventRef.current = ""; // Reset the selected event ref
+        })
+            .case(OnDropCtrlEvent, (event) => {
+            alert(`Clicked row is ${event.id}`);
+        })
+            .case(OnClickRowEvent, (event) => {
+            alert(`Clicked row is ${event.id}`);
+        })
+            .case(OnRightClickEvent, (event) => {
+            alert(`RightClick event ${event.id}`);
+        })
+            .case(OnRightClickRow, (event) => {
+            alert(`RightClick row ${event.id}`);
+        })
+            .case(OnLeftDragStart, (event) => {
+            alert(`Start left Drag ${event.id}`);
+        })
+            .case(OnRightDragStart, (event) => {
+            alert(`Start Right Drag ${event.id}`);
+        })
+            .case(UpdateApi, () => {
+            updateDataFromApi();
+        })
+            .case(OnClickRowHeader, (event) => {
+            console.log(`Clicked row ${event.id}`);
+        })
+            .case(OnClickUtc, () => {
+            setUiState((old) => {
+                return { ...old, isUtc: !old.isUtc };
+            });
+        });
+    };
+    return {
+        state: uiState,
+        resources: resources,
+        events,
+        backgroundEvents,
+        onEvent: onEvent,
+    };
+};

package/dist/src/components/custom/scheduler-new/presentation/components/header/HeaderDivision.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import moment from "moment";
+import styles from "../../styles/scheduler-header.module.css";
+export const SchedulerHeaderDivision = ({ topDivisions, bottomDivisions, classification, topWidth, startDate, endDate }) => {
+    const isToday = () => {
+        if (!startDate)
+            return false;
+        const today = moment();
+        if (endDate) {
+            return today.isBetween(startDate, endDate, 'day', '[]');
+        }
+        return today.isSame(startDate, 'day');
+    };
+    return (_jsxs("div", { style: {
+            width: topWidth,
+            cursor: "pointer"
+        }, children: [_jsx("div", { className: `${styles["scheduler-dates"]} ${isToday() ? styles["current-day"] : ""}`, children: _jsx("span", { children: topDivisions }) }), _jsx("div", { style: { display: "flex", justifyContent: "space-between", flex: 1 }, children: bottomDivisions.map((element) => (_jsx("div", { className: styles["scheduler-hours"], children: _jsx("span", { children: element }) }, classification + element + topDivisions))) })] }));
+};
+export const _preview = () => {
+    const today = new Date();
+    return (_jsx(SchedulerHeaderDivision, { topDivisions: new Date().toLocaleDateString(), bottomDivisions: [
+            new Date(1, 1, 1).toLocaleDateString(),
+            new Date(1, 2, 3).toLocaleDateString(),
+            new Date(2, 2, 2).toLocaleDateString(),
+        ], classification: "test", startDate: today, endDate: today }));
+};

package/dist/src/components/custom/scheduler-new/presentation/components/header/HeaderTitle.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from "../../styles/scheduler-header.module.css";
+export const HeaderTitle = ({ title, dividerText, width }) => {
+    return (_jsxs("div", { className: styles["scheduler-header-title"], style: { width: width }, children: [_jsx("div", { children: _jsx("h5", { children: title }) }), _jsx("div", { children: _jsx("span", { children: dividerText }) })] }));
+};
+export const _preview = () => {
+    return _jsx(HeaderTitle, { title: "Test title", dividerText: "Divider test", width: 5 });
+};

package/dist/src/components/custom/scheduler-new/presentation/components/header/SchedulerHeader.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import moment from "moment";
+import { dateFromPercentage } from "../../logic/dateFromPercentage";
+import { getPercentageFromMouseEvent } from "../../logic/getPercentageFromMouseEvent";
+import { OnEndClickHeaderEvent, OnStartClickHeaderEvent } from "../../NewSchedulerUiEvents";
+import styles from "../../styles/scheduler-header.module.css";
+import { TimeLine } from "../timeline/TimeLine";
+import { SchedulerHeaderDivision } from "./HeaderDivision";
+import { HeaderTitle } from "./HeaderTitle";
+export const SchedulerHeader = ({ content, divisions, visibleDays, selectedDate, width, onEvent, timeLinePercentage, isUtc }) => {
+    const topWidth = (100 / visibleDays);
+    const { title, classification } = content;
+    return (_jsxs("div", { style: { display: "flex" }, children: [_jsx(HeaderTitle, { title: title, dividerText: classification, width: width }), _jsxs("div", { className: styles["scheduler-header-divisions"], style: { flex: 1, display: "flex", position: "relative" }, onMouseDown: (e) => {
+                    e.preventDefault();
+                    const clickPercentage = getPercentageFromMouseEvent(e);
+                    const date = dateFromPercentage(selectedDate, visibleDays, clickPercentage);
+                    onEvent(new OnStartClickHeaderEvent(date));
+                }, onMouseUp: (e) => {
+                    e.preventDefault();
+                    const clickPercentage = getPercentageFromMouseEvent(e);
+                    const date = dateFromPercentage(selectedDate, visibleDays, clickPercentage);
+                    onEvent(new OnEndClickHeaderEvent(date));
+                }, children: [divisions.map((day) => {
+                        const thisTopWidth = visibleDays > 15
+                            ? topWidth * day.bottom.length
+                            : topWidth;
+                        const dateStr = day.startDate ? moment(day.startDate) : moment(day.top, "DD.MM.YYYY");
+                        const startDate = dateStr.toDate();
+                        const endDate = day.endDate ? moment(day.endDate).toDate() : undefined;
+                        return (_jsx(SchedulerHeaderDivision, { topDivisions: day.top, bottomDivisions: day.bottom, classification: classification, topWidth: thisTopWidth + "%", startDate: startDate, endDate: endDate }, day.top + classification));
+                    }), !(timeLinePercentage < 0 || timeLinePercentage > 100) && (_jsx(TimeLine, { color: "red", left: `${timeLinePercentage}%`, top: "50%", height: "50%", isHeader: true, isUtc: isUtc }))] })] }));
+};
+export const _preview = () => {
+    const header = {
+        width: 100,
+        content: {
+            title: "Flights",
+            classification: "Aircraft/Time",
+        },
+        isUtc: true,
+        divisions: [
+            {
+                top: "Aug 21",
+                bottom: ["12am", "3am", "6am", "9am", "12pm", "3pm", "6pm", "9pm"],
+                startDate: new Date(2024, 7, 21), // Mes es 0-based, así que 7 es Agosto
+                endDate: new Date(2024, 7, 21)
+            },
+            {
+                top: "Aug 22",
+                bottom: ["12am", "3am", "6am", "9am", "12pm", "3pm", "6pm", "9pm"],
+                startDate: new Date(2024, 7, 22),
+                endDate: new Date(2024, 7, 22)
+            },
+            /*{
+                top: "Aug 23",
+                bottom: ["12am", "3am", "6am", "9am", "12pm", "3pm", "6pm", "9pm"]
+            },
+            {
+                top: "Aug 24",
+                bottom: ["12am", "3am", "6am", "9am", "12pm", "3pm", "6pm", "9pm"]
+            },
+            {
+                top: "Aug 25",
+                bottom: ["12am", "3am", "6am", "9am", "12pm", "3pm", "6pm", "9pm"]
+            },
+            {
+                top: "Aug 26",
+                bottom: ["12am", "3am", "6am", "9am", "12pm", "3pm", "6pm", "9pm"]
+            },
+            {
+                top: "Aug 27",
+                bottom: ["12am", "3am", "6am", "9am", "12pm", "3pm", "6pm", "9pm"]
+            },
+            {
+                top: "Aug 28",
+                bottom: ["12am", "3am", "6am", "9am", "12pm", "3pm", "6pm", "9pm"]
+            }*/
+        ],
+        visibleDays: 2,
+        selectedDate: new Date(),
+        timeLinePercentage: 50,
+        onEvent: () => {
+        }
+    };
+    return _jsx(SchedulerHeader, { ...header });
+};

package/dist/src/components/custom/scheduler-new/presentation/components/row/BackgroundEvent.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getContrastColor, getHSLColor } from '../../../../../../common/functions/colorManipulation';
+import { CwGenericTooltip } from "../../../../../display/data/generic_tooltip/CwGenericTooltip";
+import styles from "../../styles/new-scheduler.module.css";
+export const BackgroundEvent = ({ value, heightRem }) => {
+    const backColor = getHSLColor(value.color, value.alpha ?? 0.5);
+    const textColor = getContrastColor(value.color);
+    return value.isVisible ? (_jsx("div", { style: {
+            left: `${value.left}%`,
+            width: `${value.width}%`,
+            position: "absolute",
+            height: `${heightRem}rem`,
+            pointerEvents: "auto",
+        }, children: _jsx(CwGenericTooltip, { content: value.tooltip, position: "bottom", dissapearsWhenHover: true, showDelay: 200, children: _jsx("div", { style: {
+                    overflow: "hidden",
+                    backgroundColor: backColor,
+                    height: `${heightRem}rem`,
+                }, children: _jsx("div", { style: {
+                        display: "flex",
+                        flexDirection: "row",
+                        width: "100%",
+                        contentVisibility: "auto",
+                        height: `${heightRem}rem`,
+                    }, children: _jsxs("div", { style: {
+                            width: value.width + "%",
+                            fontSize: "var(--cw-font-size-smallest)",
+                            padding: "0.25rem",
+                            color: textColor,
+                            alignItems: "flex-end"
+                        }, className: styles["scheduler-event-container"], children: [value.icons ? _jsx("div", { style: {
+                                    display: "flex",
+                                    flexDirection: "row",
+                                    alignItems: "center",
+                                    whiteSpace: "nowrap",
+                                    color: textColor,
+                                }, children: value.icons }) : null, _jsx("span", { className: styles["scheduler-event-text"], children: value.name })] }) }) }) }) })) : null;
+};
+export const BackgroundEventPreview = () => {
+    const event = {
+        value: {
+            id: "",
+            startDate: new Date(),
+            endDate: new Date(),
+            rowId: "",
+            color: "orange",
+            left: 0,
+            width: 30,
+            name: "Birthday",
+            icons: _jsx("span", { className: "cwi-icons cwi-birthday" }),
+            isVisible: true,
+            isDraggable: false,
+            isResizable: false,
+            selected: false,
+        },
+        heightRem: 2,
+        onEvent: () => {
+        }
+    };
+    return _jsx(BackgroundEvent, { ...event });
+};

package/dist/src/components/custom/scheduler-new/presentation/components/row/DefaultRowHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultRowHeader.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/custom/scheduler-new/presentation/components/row/DefaultRowHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mDAAmD,CAAC;AAKjF,MAAM,WAAW,WAAW;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,WAAW;IACpD,KAAK,EAAE,CAAC,CAAC;IAET,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,cAAc,CAAC,WAAW,CAAC,CA0B5D,CAAC"}
+{"version":3,"file":"DefaultRowHeader.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/custom/scheduler-new/presentation/components/row/DefaultRowHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mDAAmD,CAAC;AAIjF,MAAM,WAAW,WAAW;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,WAAW;IACpD,KAAK,EAAE,CAAC,CAAC;IAET,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,cAAc,CAAC,WAAW,CAAC,CA0B5D,CAAC"}

package/dist/src/components/custom/scheduler-new/presentation/components/row/DefaultRowHeader.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { OnClickRowHeader } from "../../NewSchedulerUiEvents";
+import styles from "../../styles/scheduler-row.module.css";
+export const DefaultRowHeader = ({ value, width, onEvent }) => {
+    return (_jsxs("div", { style: {
+            width: width,
+            // background: color,
+        }, onClick: (_) => {
+            onEvent(new OnClickRowHeader(value.rowId));
+        }, className: styles["scheduler-row-header"], children: [_jsxs("div", { children: [_jsx("strong", { children: value.title }), value.title2 && _jsxs("span", { children: ["-", value.title2] }), " ", _jsx("strong", { children: value.subtitle })] }), value.subtitle && _jsxs("div", { style: { opacity: 0.5 }, children: [value.title3 && _jsxs("span", { className: styles["scheduler-crewmember-functions"], children: ["(", value.title3, ")"] }), value.subtitle2 && _jsxs("span", { children: ["-", value.subtitle2] })] })] }));
+};
+// @ts-ignore
+const _preview = () => {
+    return _jsx(DefaultRowHeader, { value: {
+            rowId: "1",
+            title: "JAC",
+            title2: "CMD",
+            subtitle: "ICAO",
+            subtitle2: "IATA"
+        }, 
+        // color={"red"}
+        width: 180, onEvent: () => {
+        } });
+};

package/dist/src/components/custom/scheduler-new/presentation/components/row/Event.d.ts

@@ -1,6 +1,6 @@
-import type { ItemType } from "antd/lib/menu/hooks/useItems";
 import { type FC, type ReactElement, type ReactNode } from "react";
 import type { OnEvent } from "../../../../../../common/functions/dsl/UiEventDSL";
+import { type MenuOption } from "../../../../../control/action/contextmenu/CwAnchoredMenu";
 export interface SchedulerEventDm {
     id: string;
     name: string;
@@ -18,7 +18,7 @@ export interface SchedulerEventDm {
     icons?: ReactElement;
     rectangleColors?: string[];
     tooltip?: ReactNode;
-    contextMenuItems?: ItemType[];
+    contextMenuItems?: MenuOption[];
     primaryTimeMarkerColor?: string;
     secondaryTimeMarkerColor?: string;
     eventType?: number;

package/dist/src/components/custom/scheduler-new/presentation/components/row/Event.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Event.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/custom/scheduler-new/presentation/components/row/Event.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAE7D,OAAO,EAAY,KAAK,EAAE,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mDAAmD,CAAC;AAiBjF,MAAM,WAAW,gBAAgB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,IAAI,CAAC;IAChB,OAAO,EAAE,IAAI,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC9B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,gBAAgB;IAC9D,KAAK,EAAE,CAAC,CAAC;IACT,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CA8MpE,CAAC;AAEF,eAAO,MAAM,QAAQ,+CA8BpB,CAAC"}
+{"version":3,"file":"Event.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/custom/scheduler-new/presentation/components/row/Event.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,EAAE,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mDAAmD,CAAC;AAEjF,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,0DAA0D,CAAC;AAe3G,MAAM,WAAW,gBAAgB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,IAAI,CAAC;IAChB,OAAO,EAAE,IAAI,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,gBAAgB,CAAC,EAAE,UAAU,EAAE,CAAC;IAChC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,gBAAgB;IAC9D,KAAK,EAAE,CAAC,CAAC;IACT,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAmMpE,CAAC;AAEF,eAAO,MAAM,QAAQ,+CA8BpB,CAAC"}

package/dist/src/components/custom/scheduler-new/presentation/components/row/Event.js

@@ -0,0 +1,150 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dropdown } from "antd";
+import { useState } from "react";
+import { getContrastColor, getHSLColor } from '../../../../../../common/functions/colorManipulation';
+import useSingleAndDoubleClicks from "../../../../../../common/functions/useSingleAndDoubleClicks";
+import { CwGenericTooltip } from "../../../../../display/data/generic_tooltip/CwGenericTooltip";
+import { OnClickContextMenu, OnClickEvent, OnDoubleClickEvent, OnDragEvent, OnLeftDragStart, OnMultiClickEvent, OnRangeClickEvent, OnRightClickEvent, OnRightDragStart, } from "../../NewSchedulerUiEvents";
+import styles from "../../styles/new-scheduler.module.css";
+import { EventSideDrag } from "./EventSideDrag";
+export const SchedulerEvent = ({ value, heightRem, onEvent }) => {
+    const [isOnDrag, setIsOnDrag] = useState(false);
+    const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
+    // Calculate colors of the event
+    const backColor = getHSLColor(value.color, value.alpha ?? 0.75);
+    const textColor = getContrastColor(value.color);
+    const eventTransparent = value.alpha ? value.alpha < 0.7 : false;
+    const canClick = value.isDraggable || value.isClickable === true;
+    const { handleClick, handleDoubleClick } = useSingleAndDoubleClicks((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (!canClick) {
+            return;
+        }
+        // https://developer.mozilla.org/en-US/docs/Web/API/NavigatorUAData/platform
+        // change for navigator.userAgentData.platform when acepted in all browsers
+        const isMac = navigator.platform.toUpperCase().includes("MAC");
+        const isCtrlOrAltPressed = isMac ? e.altKey : e.ctrlKey;
+        if (e.shiftKey) {
+            onEvent(new OnRangeClickEvent(value.id));
+        }
+        else if (isCtrlOrAltPressed) {
+            onEvent(new OnMultiClickEvent(value.id));
+        }
+        else {
+            onEvent(new OnClickEvent(value.id));
+        }
+    }, (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        onEvent(new OnDoubleClickEvent(value.id));
+    });
+    return (_jsx(Dropdown, { open: isContextMenuOpen, onOpenChange: setIsContextMenuOpen, placement: "bottom", menu: {
+            items: value.contextMenuItems,
+            onClick: (e) => {
+                e.domEvent.nativeEvent.preventDefault();
+                e.domEvent.nativeEvent.stopPropagation();
+                e.domEvent.nativeEvent.stopImmediatePropagation();
+                e.domEvent.preventDefault();
+                e.domEvent.stopPropagation();
+                onEvent(new OnClickContextMenu(value.id, e.key));
+            },
+            onMouseLeave: () => setIsContextMenuOpen(false),
+        }, trigger: ["contextMenu"], overlayStyle: { animationDuration: "0" }, arrow: (value.contextMenuItems?.length ?? 0) > 0, children: _jsx("div", { style: {
+                top: "2px",
+                left: `${value.left}%`,
+                width: `${value.width}%`,
+                position: "absolute",
+                zIndex: isOnDrag ? 999 : undefined,
+                contentVisibility: "auto",
+                pointerEvents: "auto",
+            }, onClick: handleClick, onDoubleClick: handleDoubleClick, draggable: value.isDraggable, onMouseDown: (_) => {
+                if (value.isDraggable)
+                    setIsOnDrag(true);
+            }, onMouseLeave: (_) => {
+                if (value.isDraggable)
+                    setIsOnDrag(false);
+            }, onDragStart: (_) => {
+                if (value.isDraggable)
+                    onEvent(new OnDragEvent(value.id));
+            }, onDragEnd: (_) => {
+                if (value.isDraggable)
+                    setIsOnDrag(false);
+            }, onContextMenu: (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                onEvent(new OnRightClickEvent(value.id));
+            }, children: _jsx(CwGenericTooltip, { content: value.tooltip, position: "bottom", hide: isOnDrag, dissapearsWhenHover: true, showDelay: 200, children: _jsxs("div", { style: {
+                        border: value.selected ? "2px solid black" : "none",
+                        backgroundColor: backColor,
+                        height: `calc(${heightRem}rem - 4px)`,
+                        opacity: eventTransparent ? 0.5 : 1,
+                    }, className: styles["scheduler-event"], children: [_jsxs("div", { style: {
+                                display: "flex",
+                                flexDirection: "row",
+                                alignItems: "stretch",
+                                width: "100%",
+                                cursor: value.isDraggable ? "pointer" : "default",
+                                height: `calc(${heightRem}rem - 10px)`,
+                            }, children: [value.isResizable && (_jsx(EventSideDrag, { left: true, heightRem: heightRem * 0.7, onStartEvent: () => {
+                                        onEvent(new OnLeftDragStart(value.id));
+                                    } })), _jsxs("div", { className: styles["scheduler-event-container"], children: [_jsx("div", { style: {
+                                                display: "flex",
+                                                flexDirection: "row",
+                                                alignItems: "center",
+                                                whiteSpace: "nowrap",
+                                                color: textColor,
+                                            }, children: value.icons }), _jsx("span", { style: {
+                                                padding: "0.1rem",
+                                                color: textColor,
+                                                display: "flex",
+                                                flex: 1,
+                                                alignItems: "center",
+                                                width: "100%",
+                                            }, children: value.rectangleColors && value.rectangleColors.length > 0 ? (_jsx("div", { style: {
+                                                    display: "flex",
+                                                    width: "100%",
+                                                }, children: value.rectangleColors.map((item, i) => (_jsx("div", { className: "cwellt_rectangle_indicator", style: {
+                                                        backgroundColor: item,
+                                                        flex: 1,
+                                                        height: "8px",
+                                                        margin: 0,
+                                                        padding: 0,
+                                                    } }, value.id + "_" + i))) })) : (value.name) })] }), value.isResizable && (_jsx(EventSideDrag, { heightRem: heightRem * 0.7, onStartEvent: () => {
+                                        onEvent(new OnRightDragStart(value.id));
+                                    } }))] }), value.primaryTimeMarkerColor && (_jsx("div", { className: styles["time-marker"], style: {
+                                backgroundColor: value.primaryTimeMarkerColor,
+                            } })), value.secondaryTimeMarkerColor && (_jsx("div", { className: styles["time-marker"], style: {
+                                backgroundColor: value.secondaryTimeMarkerColor,
+                            } }))] }) }) }, value.id) }, value.id));
+};
+export const _preview = () => {
+    const props = {
+        value: {
+            id: "",
+            rowId: "1",
+            name: "test",
+            color: "red",
+            startDate: new Date(),
+            endDate: new Date(),
+            isDraggable: true,
+            isResizable: true,
+            icons: _jsx("span", { className: "cwi-icons cwi-plane" }),
+            left: 0,
+            width: 10,
+            tooltip: _jsx("div", {}),
+            contextMenuItems: [
+                {
+                    key: "removeRemarks",
+                    label: _jsx("span", { className: "cwellt_contextMenu", children: "DELETE Remark" }),
+                },
+            ],
+            selected: false,
+        },
+        heightRem: 10,
+        onEvent: (uiEvent) => {
+            console.log("event: " + uiEvent);
+        },
+    };
+    return _jsx(SchedulerEvent, { ...props });
+};

package/dist/src/components/custom/scheduler-new/presentation/components/row/EventSideDrag.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const EventSideDrag = ({ left = false, heightRem, onStartEvent }) => {
+    return (_jsx("span", { draggable: true, onDragStart: (e) => {
+            e.stopPropagation();
+            onStartEvent(e.clientX);
+        }, style: {
+            cursor: left ? "w-resize" : "e-resize",
+            width: "0.3rem",
+            height: `${heightRem}rem`,
+        } }));
+};

package/dist/src/components/custom/scheduler-new/presentation/components/row/SchedulerRow.d.ts

@@ -1,6 +1,6 @@
-import type { ItemType } from "antd/lib/menu/hooks/useItems";
 import { ReactElement, type ComponentType } from "react";
 import { OnEvent } from "../../../../../../common/functions/dsl/UiEventDSL";
+import { type MenuOption } from "../../../../../control/action/contextmenu/CwAnchoredMenu";
 import { LineState } from "../../state/ui/SchedulerState";
 import { BackgroundEventDm } from "./BackgroundEvent";
 import { RowHeaderDm, type RowHeaderProps } from "./DefaultRowHeader";
@@ -9,7 +9,7 @@ export interface SchedulerRowProps<T extends RowHeaderDm, P extends SchedulerEve
     events: P[];
     backgroundEvents: BackgroundEventDm[];
     rowHeader: RowHeaderProps<T>;
-    contextMenuItems?: ItemType[];
+    contextMenuItems?: MenuOption[];
     EventComp: ComponentType<SchedulerEventState<P>>;
     RowTitleComp: ComponentType<RowHeaderProps<T>>;
     BackgroundEventComp: ComponentType<SchedulerEventState<BackgroundEventDm>>;

package/dist/src/components/custom/scheduler-new/presentation/components/row/SchedulerRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SchedulerRow.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/custom/scheduler-new/presentation/components/row/SchedulerRow.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,8BAA8B,CAAC;AAE3D,OAAO,EAAO,YAAY,EAAY,KAAK,aAAa,EAAC,MAAM,OAAO,CAAC;AACvE,OAAO,EAAC,OAAO,EAAC,MAAM,mDAAmD,CAAC;AAa1E,OAAO,EAAC,SAAS,EAAC,MAAM,+BAA+B,CAAC;AAIxD,OAAO,EAAkB,iBAAiB,EAAC,MAAM,mBAAmB,CAAC;AACrE,OAAO,EAAmB,WAAW,EAAE,KAAK,cAAc,EAAC,MAAM,oBAAoB,CAAC;AACtF,OAAO,EAAiB,gBAAgB,EAAE,mBAAmB,EAAC,MAAM,SAAS,CAAC;AAG9E,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,WAAW,EAAE,CAAC,SAAS,gBAAgB;IACnF,MAAM,EAAE,CAAC,EAAE,CAAC;IACZ,gBAAgB,EAAE,iBAAiB,EAAE,CAAC;IACtC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IAC7B,gBAAgB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC9B,SAAS,EAAE,aAAa,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;IACjD,YAAY,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/C,mBAAmB,EAAE,aAAa,CAAC,mBAAmB,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAC3E,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,SAAS,EAAE,CAAC;IAC1B,aAAa,EAAE,SAAS,EAAE,CAAC;IAC3B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,YAAY,EAAE,IAAI,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;CACpB;AAYD,eAAO,MAAM,YAAY,EA4LpB,CAAC,CAAqB,SAAX,WAAW,EAAE,CAA0B,SAAhB,gBAAgB,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,KACtF,YAAY,CAAC;AAEd,eAAO,MAAM,mBAAmB,+CA4E/B,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SchedulerRow.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/custom/scheduler-new/presentation/components/row/SchedulerRow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,YAAY,EAAoB,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AACjF,OAAO,EAAE,OAAO,EAAE,MAAM,mDAAmD,CAAC;AAE5E,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,0DAA0D,CAAC;AAY3G,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAI1D,OAAO,EAAmB,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAoB,WAAW,EAAE,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACxF,OAAO,EAAkB,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAGhF,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,WAAW,EAAE,CAAC,SAAS,gBAAgB;IACnF,MAAM,EAAE,CAAC,EAAE,CAAC;IACZ,gBAAgB,EAAE,iBAAiB,EAAE,CAAC;IACtC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IAC7B,gBAAgB,CAAC,EAAE,UAAU,EAAE,CAAC;IAChC,SAAS,EAAE,aAAa,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;IACjD,YAAY,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/C,mBAAmB,EAAE,aAAa,CAAC,mBAAmB,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAC3E,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,SAAS,EAAE,CAAC;IAC1B,aAAa,EAAE,SAAS,EAAE,CAAC;IAC3B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,YAAY,EAAE,IAAI,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,EAwLpB,CAAC,CAAqB,SAAX,WAAW,EAAE,CAA0B,SAAhB,gBAAgB,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,KACrF,YAAY,CAAC;AAEf,eAAO,MAAM,mBAAmB,+CA4E/B,CAAC;AAEF,eAAe,YAAY,CAAC"}