@timelinekit/core 1.0.0

package/package.json

@@ -0,0 +1,99 @@
+{
+  "name": "@timelinekit/core",
+  "version": "1.0.0",
+  "license": "SEE LICENSE IN LICENSE",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./locales/cs": {
+      "types": "./dist/locales/cs.d.ts",
+      "import": "./dist/locales/cs.js"
+    },
+    "./locales/de": {
+      "types": "./dist/locales/de.d.ts",
+      "import": "./dist/locales/de.js"
+    },
+    "./locales/es": {
+      "types": "./dist/locales/es.d.ts",
+      "import": "./dist/locales/es.js"
+    },
+    "./locales/fr": {
+      "types": "./dist/locales/fr.d.ts",
+      "import": "./dist/locales/fr.js"
+    },
+    "./locales/it": {
+      "types": "./dist/locales/it.d.ts",
+      "import": "./dist/locales/it.js"
+    },
+    "./locales/ja": {
+      "types": "./dist/locales/ja.d.ts",
+      "import": "./dist/locales/ja.js"
+    },
+    "./locales/ko": {
+      "types": "./dist/locales/ko.d.ts",
+      "import": "./dist/locales/ko.js"
+    },
+    "./locales/pt": {
+      "types": "./dist/locales/pt.d.ts",
+      "import": "./dist/locales/pt.js"
+    },
+    "./locales/nl": {
+      "types": "./dist/locales/nl.d.ts",
+      "import": "./dist/locales/nl.js"
+    },
+    "./locales/pl": {
+      "types": "./dist/locales/pl.d.ts",
+      "import": "./dist/locales/pl.js"
+    },
+    "./locales/ru": {
+      "types": "./dist/locales/ru.d.ts",
+      "import": "./dist/locales/ru.js"
+    },
+    "./locales/sv": {
+      "types": "./dist/locales/sv.d.ts",
+      "import": "./dist/locales/sv.js"
+    },
+    "./locales/zh": {
+      "types": "./dist/locales/zh.d.ts",
+      "import": "./dist/locales/zh.js"
+    },
+    "./styles": "./dist/styles/gc.css",
+    "./styles/scss": "./styles/gc.scss"
+  },
+  "scripts": {
+    "build": "rollup -c && sass styles/gc.scss dist/styles/gc.css --style=compressed --no-source-map",
+    "dev": "tsc --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "peerDependencies": {
+    "exceljs": "^4.4.0",
+    "jspdf": "^2.5.0"
+  },
+  "peerDependenciesMeta": {
+    "jspdf": {
+      "optional": true
+    },
+    "exceljs": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "rxjs": "~7.8.0"
+  },
+  "devDependencies": {
+    "typescript": "~5.9.2",
+    "vitest": "^4.0.8"
+  },
+  "files": [
+    "dist",
+    "styles",
+    "README.md",
+    "LICENSE"
+  ]
+}

package/styles/_common.scss

@@ -0,0 +1,405 @@
+.gc-host {
+    display: block;
+    height: 100%;
+    overflow: hidden;
+}
+
+.gc-wrapper {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    gap: 0px;
+    color: var(--gc-sheet-text-color, #000000);
+}
+
+.gc-divider {
+    width: 0px;
+    height: 100%;
+    position: relative;
+
+    .resizer {
+        top: 0px;
+        bottom: 0px;
+        position: absolute;
+        right: -10px;
+        z-index: 30;
+        width: 20px;
+        cursor: ew-resize;
+    }
+}
+
+.gc-sheet {
+    $header-height: 50px;
+    $row-header-width: 30px;
+    $row-height: 30px;
+    $cell-padding: 8px;
+
+    height: 100%;
+    display: inline-block;
+
+    .row-header {
+        width: $row-header-width;
+    }
+
+    .header {
+        position: sticky;
+        top: 0;
+        z-index: 8;
+
+        height: $header-height;
+        border-top: 1px solid var(--gc-sheet-header-cell-border-color, #a0a0a0);
+        border-bottom: 1px solid var(--gc-sheet-header-cell-border-color, #a0a0a0);
+        border-left: 1px solid var(--gc-sheet-header-cell-border-color, #a0a0a0);
+        display: flex;
+        align-items: center;
+        gap: 0px;
+        background-color: var(--gc-sheet-header-bg-color, #f8f8f8);
+
+        .row-header {
+            z-index: 9;
+            background-color: var(--gc-sheet-header-bg-color, #f8f8f8);
+        }
+
+        &.reordering {
+            cursor: grabbing;
+
+            .cell .resizer {
+                cursor: grabbing;
+            }
+        }
+
+        .reorder-indicator {
+            position: absolute;
+            width: 2px;
+            height: 100%;
+            background-color: var(--gc-sheet-focus-border-color, #0078d4);
+            z-index: 11;
+            pointer-events: none;
+            top: 0;
+        }
+
+        .cell {
+            display: flex;
+            align-items: center;
+            border-right: 1px solid var(--gc-sheet-header-cell-divider-color, #a0a0a0);
+            height: $header-height;
+            padding-left: $cell-padding;
+            padding-right: $cell-padding;
+            position: relative;
+            user-select: none;
+
+            .resizer {
+                height: 100%;
+                position: absolute;
+                right: -10px;
+                z-index: 10;
+                width: 20px;
+                cursor: ew-resize;
+            }
+
+            &.dotted {
+                text-decoration: underline dotted !important;
+            }
+
+            &.dragging {
+                opacity: 0.3;
+            }
+
+            &.hidden {
+                display: none !important;
+            }
+        }
+    }
+
+    .content {
+        overflow-x: auto;
+        overflow-y: auto;
+        height: 100%;
+        outline: none;
+        background-color: var(--gc-sheet-bg-color, #ffffff);
+
+        .row {
+            height: $row-height;
+            border-bottom: 1px solid var(--gc-sheet-grid-line-color, #e0e0e0);
+            display: flex;
+            align-items: center;
+            gap: 0px;
+            background-color: var(--gc-sheet-bg-color, #ffffff);
+
+            &.hidden {
+                display: none;
+            }
+
+            .row-header {
+                background-color: var(--gc-sheet-header-bg-color, #f8f8f8);
+                border-bottom: 1px solid var(--gc-sheet-header-cell-border-color, #a0a0a0);
+                border-left: 1px solid var(--gc-sheet-header-cell-border-color, #a0a0a0);
+                border-right: 1px solid var(--gc-sheet-header-cell-border-color, #a0a0a0) !important;
+                justify-content: center;
+                cursor: default !important;
+                user-select: none;
+            }
+
+            .cell {
+                display: flex;
+                align-items: center;
+                align-self: stretch;
+                border-right: 1px solid var(--gc-sheet-grid-line-color, #e0e0e0);
+                padding-left: $cell-padding;
+                padding-right: $cell-padding;
+                overflow-x: hidden;
+                white-space: nowrap;
+                user-select: none;
+                position: relative;
+
+                &.row-header {
+                    position: sticky;
+                    left: 0;
+                    z-index: 2;
+                }
+
+                .editor {
+                    height: calc($row-height - 2px);
+                    width: 100%;
+                    padding-left: 0px;
+                    padding-right: 0px;
+                    border: none;
+                    background-color: var(--gc-editor-bg-color, #ffffff);
+                    color: var(--gc-editor-text-color, #000000);
+                }
+
+                input.editor {
+                    line-height: calc($row-height - 4px);
+                }
+
+                input.editor:focus {
+                    outline: none;
+                }
+
+                &.focused {
+                    outline: 2px solid var(--gc-sheet-focus-border-color, #4a7cf6);
+                    outline-offset: -2px;
+                }
+
+                .highlight {
+                    border: 1px solid var(--gc-sheet-highlight-border-color, #647ee8);
+                    position: absolute;
+                    z-index: 10;
+                    left: 0px;
+                    top: 0px;
+                    right: 0px;
+                    bottom: 0px;
+                }
+
+                &.hidden {
+                    display: none !important;
+                }
+            }
+
+            &.hover {
+                background-color: var(--gc-sheet-hover-bg-color, #f8f8f8);
+
+                .cell {
+                    background-color: var(--gc-sheet-hover-bg-color, #f8f8f8);
+                }
+            }
+            &:hover {
+                background-color: var(--gc-sheet-hover-bg-color, #f8f8f8);
+
+                .cell {
+                    background-color: var(--gc-sheet-hover-bg-color, #f8f8f8);
+                }
+            }
+
+            &.selected {
+                background-color: var(--gc-sheet-selected-bg-color, #f8f8f8);
+
+                .cell {
+                    background-color: var(--gc-sheet-selected-bg-color, #f8f8f8);
+                }
+
+                .row-header {
+                    background-color: var(--gc-sheet-selected-row-header-color, #e8e8e8);
+                }
+            }
+
+            &.frozen {
+                background-color: var(--gc-sheet-bg-color, #ffffff);
+                border-bottom: 1px solid var(--gc-sheet-header-cell-border-color, #a0a0a0);
+
+                .cell {
+                    background-color: var(--gc-sheet-bg-color, #ffffff);
+                }
+            }
+        }
+
+    }
+}
+
+.gc-chart {
+    flex: 1;
+    height: 100%;
+    display: inline-block;
+
+    overflow-x: scroll;
+    overflow-y: hidden;
+    z-index: 16; // for the scrollbar to be on top
+    outline: none;
+
+    &:focus-visible {
+        outline: 2px solid var(--gc-sheet-focus-border-color, #4a7cf6);
+        outline-offset: -2px;
+    }
+
+    .inner {
+        width: 1000px;
+        height: 1px;
+    }
+
+    .canvas {
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        z-index: 15;
+    }
+
+    &.no-pointer-events {
+        pointer-events: none;
+    }
+
+    &.cursor-pointer {
+        cursor: pointer !important;
+    }
+    &.cursor-all-scroll {
+        cursor: all-scroll !important;
+    }
+    &.cursor-ew-resize {
+        cursor: ew-resize !important;
+    }
+    &.cursor-ns-resize {
+        cursor: ns-resize !important;
+    }
+    &.cursor-nwse-resize {
+        cursor: nwse-resize !important;
+    }
+    &.cursor-nesw-resize {
+        cursor: nesw-resize !important;
+    }
+    &.cursor-crosshair {
+        cursor: crosshair !important;
+    }
+}
+
+.reorder-ghost {
+    position: fixed;
+    z-index: 1000;
+    pointer-events: none;
+    opacity: 0.5;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    border: 1px solid color-mix(in srgb, var(--gc-sheet-header-cell-border-color, #a0a0a0) 50%, transparent);
+    background-color: var(--gc-sheet-header-bg-color, #f8f8f8);
+    color: var(--gc-sheet-text-color, #000000);
+}
+
+// Light scrollbars
+.gc-wrapper[data-color-scheme="light"] {
+    .gc-sheet .content,
+    .gc-chart {
+        scrollbar-color: #cccccc #f5f5f5;
+
+        &::-webkit-scrollbar {
+            width: 12px;
+            height: 12px;
+        }
+        &::-webkit-scrollbar-track {
+            background: #f5f5f5;
+        }
+        &::-webkit-scrollbar-thumb {
+            background: #cccccc;
+            border-radius: 6px;
+
+            &:hover {
+                background: #d8d8d8;
+            }
+        }
+    }
+}
+
+// Dark scrollbars
+.gc-wrapper[data-color-scheme="dark"] {
+    .gc-sheet .content,
+    .gc-chart {
+        scrollbar-color: #555555 #1e1e1e;
+
+        &::-webkit-scrollbar {
+            width: 12px;
+            height: 12px;
+        }
+        &::-webkit-scrollbar-track {
+            background: #1e1e1e;
+        }
+        &::-webkit-scrollbar-thumb {
+            background: #555555;
+            border-radius: 6px;
+        }
+    }
+}
+
+// Resource Scheduler - vertical scrollbar on the right
+.gc-scheduler {
+    .gc-sheet .content {
+        overflow-y: hidden;
+    }
+
+    .gc-scrollbar {
+        overflow-y: auto;
+        overflow-x: hidden;
+        height: 100%;
+
+        > div {
+            width: 1px;
+        }
+    }
+}
+
+// Light scrollbar for scheduler
+.gc-scheduler[data-color-scheme="light"] {
+    .gc-scrollbar {
+        scrollbar-color: #cccccc #f5f5f5;
+
+        &::-webkit-scrollbar {
+            width: 12px;
+        }
+        &::-webkit-scrollbar-track {
+            background: #f5f5f5;
+        }
+        &::-webkit-scrollbar-thumb {
+            background: #cccccc;
+            border-radius: 6px;
+
+            &:hover {
+                background: #d8d8d8;
+            }
+        }
+    }
+}
+
+// Dark scrollbar for scheduler
+.gc-scheduler[data-color-scheme="dark"] {
+    .gc-scrollbar {
+        scrollbar-color: #555555 #1e1e1e;
+
+        &::-webkit-scrollbar {
+            width: 12px;
+        }
+        &::-webkit-scrollbar-track {
+            background: #1e1e1e;
+        }
+        &::-webkit-scrollbar-thumb {
+            background: #555555;
+            border-radius: 6px;
+        }
+    }
+}

package/styles/gc.scss

@@ -0,0 +1,82 @@
+@use 'common';
+
+.gc-sheet .content .row {
+
+    .tree-with-name {
+        flex-wrap: nowrap;
+
+        .tree {
+            margin-left: 3px;
+            display: flex;
+            flex: 0 0 auto;
+            justify-content: end;
+            align-items: center;
+        }
+
+        .name {
+            display: flex;
+            align-items: center;
+            padding-left: 5px;
+            overflow-x: visible;
+            white-space: nowrap;
+            user-select: none;
+        }
+    }
+
+    .resources {
+        gap: 7px;
+
+        .wrapper {
+            display: flex;
+            align-items: center;
+            gap: 3px;
+
+            .avatar {
+                width: 26px;
+                height: 26px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-radius: 50%;
+                color: white;
+                font-size: 10pt;
+            }
+
+            .capacity {
+                font-size: 11pt;
+            }
+        }
+    }
+
+    .task-summary {
+        font-weight: bold;
+    }
+}
+
+.gc-tree-icon {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    padding: 5px 5px 5px 5px;
+
+    .tree-icon {
+        width: 6px;
+        height: 6px;
+        display: inline-block;
+        transform: rotate(0deg);
+        transition: transform 0.3s ease;
+        border-style: solid;
+        border-width: 2px 2px 0 0;
+        border-color: var(--gc-tree-icon-color, #606060);
+    }
+
+    &.collapsed .tree-icon {
+        transform: rotate(45deg);
+        margin-bottom: 3px;
+    }
+
+    &.expanded .tree-icon {
+        transform: rotate(-225deg);
+        margin-bottom: 6px;
+    }
+}

package/styles/rs.scss

@@ -0,0 +1,32 @@
+@use 'common';
+
+.gc-sheet .content .row {
+
+    .pin-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 2px;
+        opacity: 0.5;
+
+        svg {
+            width: 12px;
+            height: 12px;
+        }
+    }
+}
+
+.gc-sheet .content .rows {
+    position: relative;
+}
+
+.gc-sheet .content .rows .row-reorder-indicator {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background-color: var(--gc-sheet-focus-border-color, #0078d4);
+    z-index: 11;
+    pointer-events: none;
+    transform: translateY(-1px);
+}