[]
78 | ): IParsedTask {
79 | let data;
80 | if (tasks) {
81 | data = tasks.filter(t => t.parent == task.id);
82 | }
83 | const copy = { data, ...task };
84 | if (copy.data?.length) {
85 | copy.data.forEach((kid: IParsedTask) => {
86 | if (tasks || (kid.type != "summary" && kid.data))
87 | kid = setSummaryDates(kid, tasks);
88 | if (!copy.start || copy.start > kid.start) {
89 | copy.start = new Date(kid.start);
90 | }
91 | if (
92 | !copy.end ||
93 | copy.end < kid.end ||
94 | (kid.type === "milestone" && copy.end < kid.start)
95 | ) {
96 | copy.end = new Date(kid.end || kid.start);
97 | }
98 | });
99 | } else if (task.type === "summary") {
100 | throw Error(
101 | "Summary tasks must have start and end dates if they have no subtasks"
102 | );
103 | }
104 |
105 | return copy;
106 | }
107 |
108 | export function updateTask(
109 | t: IGanttTask,
110 | i: number,
111 | cellWidth: number,
112 | cellHeight: number,
113 | scales: GanttScaleData,
114 | baselines: boolean
115 | ): IGanttTask {
116 | calculateTaskDimensions(
117 | t,
118 | i,
119 | cellWidth,
120 | cellHeight,
121 | scales,
122 | baselines,
123 | false
124 | );
125 |
126 | if (baselines) {
127 | calculateTaskDimensions(
128 | t,
129 | i,
130 | cellWidth,
131 | cellHeight,
132 | scales,
133 | baselines,
134 | true
135 | );
136 | }
137 |
138 | return t;
139 | }
140 |
141 | function calculateTaskDimensions(
142 | t: IGanttTask,
143 | i: number,
144 | cellWidth: number,
145 | cellHeight: number,
146 | scales: GanttScaleData,
147 | baselines: boolean,
148 | isBaseline: boolean
149 | ) {
150 | const { start: scaleStart, end: scaleEnd, lengthUnit, diff } = scales;
151 | const start = (isBaseline ? "base_" : "") + "start";
152 | const end = (isBaseline ? "base_" : "") + "end";
153 | const x = "$x" + (isBaseline ? "_base" : "");
154 | const y = "$y" + (isBaseline ? "_base" : "");
155 | const w = "$w" + (isBaseline ? "_base" : "");
156 | const h = "$h" + (isBaseline ? "_base" : "");
157 | const skip = "$skip" + (isBaseline ? "_baseline" : "");
158 |
159 | let startDate = t[start];
160 | let endDate = t[end];
161 |
162 | if (isBaseline && !startDate) {
163 | t[skip] = true;
164 | return;
165 | }
166 |
167 | if (
168 | t[start] < scaleStart &&
169 | (t[end] < scaleStart || isEqual(t[end], scaleStart))
170 | ) {
171 | startDate = endDate = scaleStart;
172 | } else if (t[start] > scaleEnd) {
173 | startDate = endDate = scaleEnd;
174 | }
175 |
176 | t[x] = Math.round(diff(startDate, scaleStart, lengthUnit) * cellWidth);
177 | t[y] = isBaseline
178 | ? t.$y + t.$h + baselineTopPadding
179 | : cellHeight * i + defaultPadding;
180 | t[w] = Math.round(diff(endDate, startDate, lengthUnit, true) * cellWidth);
181 | t[h] = isBaseline
182 | ? baselineHeight
183 | : baselines
184 | ? cellHeight - heightAdjustment - baselineAdjustment
185 | : cellHeight - heightAdjustment;
186 |
187 | if (t.type === "milestone") {
188 | t[x] = t[x] - t.$h / 2;
189 | t[w] = t.$h;
190 |
191 | if (isBaseline) {
192 | t[y] = t.$y + baselineHeight;
193 | t[w] = t[h] = t.$h;
194 | }
195 | }
196 |
197 | t[skip] = isEqual(startDate, endDate);
198 | }
199 |
--------------------------------------------------------------------------------
/store/test/columns.spec.ts:
--------------------------------------------------------------------------------
1 | import { describe, test, expect } from "vitest";
2 | import { normalizeColumns, defaultColumns } from "../src/columns";
3 |
4 | describe("columns", () => {
5 | test("normalize column config", () => {
6 | const columns = normalizeColumns(defaultColumns);
7 |
8 | expect(columns.length).to.eq(4);
9 |
10 | for (const col of columns) {
11 | expect(col.width).to.not.be.undefined;
12 | expect(col.align).to.not.be.undefined;
13 | if (col.id === "start" || col.id === "end")
14 | expect(col.template).to.not.be.undefined;
15 | if (col.id === "action") expect(col.action).to.not.be.undefined;
16 | else {
17 | expect(col.resize).to.be.true;
18 | expect(col.sort).to.be.true;
19 | }
20 | }
21 |
22 | expect(normalizeColumns([])).to.deep.eq([]);
23 | });
24 | });
25 |
--------------------------------------------------------------------------------
/store/test/links.spec.ts:
--------------------------------------------------------------------------------
1 | import { describe, test, expect } from "vitest";
2 | import { updateLink } from "../src/links";
3 |
4 | describe("links", () => {
5 | test("link updating", () => {
6 | const link = { id: 1, source: 1, target: 2, type: "e2s" };
7 | const startTask = { $x: 100, $y: 3, $w: 300 };
8 | const endTask = { $x: 200, $y: 41, $w: 200 };
9 |
10 | const updatedLink = updateLink(
11 | link as any,
12 | startTask as any,
13 | endTask as any,
14 | 38,
15 | false
16 | );
17 |
18 | expect(updatedLink.id).to.eq(1);
19 | expect(updatedLink.source).to.eq(1);
20 | expect(updatedLink.target).to.eq(2);
21 | expect(updatedLink.type).to.eq("e2s");
22 | expect(updatedLink.$p).to.eq(
23 | "400,19,420,19,420,38,180,38,180,57,200,57,195,54,195,60,200,57"
24 | );
25 | });
26 | });
27 |
--------------------------------------------------------------------------------
/store/test/scales.spec.ts:
--------------------------------------------------------------------------------
1 | import { describe, test, expect } from "vitest";
2 | import { calcScales, resetScales } from "../src/scales";
3 | import { getData, scaleHeight, cellWidth } from "./stubs/data";
4 | import { GanttScaleData } from "../src/types";
5 | import GanttDataTree from "../src/GanttDataTree";
6 |
7 | describe("scales", () => {
8 | test("calculate scales", () => {
9 | const { tasks } = getData();
10 |
11 | const _scales = calcScales(
12 | new Date(2024, 3, 1),
13 | new Date(2024, 3, 10),
14 | "day",
15 | new GanttDataTree(tasks)
16 | );
17 |
18 | expect(_scales._start).to.deep.eq(new Date(2024, 3, 1));
19 | expect(_scales._end).to.deep.eq(new Date(2024, 3, 10));
20 | });
21 |
22 | test("recalculate scales", () => {
23 | const { scales } = getData();
24 |
25 | const _scales = resetScales(
26 | new Date(2024, 3, 1),
27 | new Date(2024, 3, 10),
28 | "day",
29 | cellWidth,
30 | scaleHeight,
31 | scales
32 | ) as GanttScaleData;
33 |
34 | expect(_scales.start).to.deep.eq(new Date(2024, 3, 1));
35 | expect(_scales.end).to.deep.eq(new Date(2024, 3, 10));
36 | expect(_scales.width).to.eq(900);
37 | expect(_scales.height).to.eq(60);
38 | expect(_scales.lengthUnitWidth).to.eq(100);
39 | expect(_scales.lengthUnit).to.eq("day");
40 | expect(_scales.minUnit).to.eq("day");
41 | });
42 | });
43 |
--------------------------------------------------------------------------------
/store/test/sidebar.spec.ts:
--------------------------------------------------------------------------------
1 | import { describe, test, expect } from "vitest";
2 | import { normalizeEditor } from "../src/sidebar";
3 | import { taskTypes } from "./stubs/data";
4 |
5 | describe("sidebar", () => {
6 | test("normalize editor config", () => {
7 | const editorShape = normalizeEditor({ taskTypes }); // assign IDs to fields and set options for available task types
8 |
9 | for (const field of editorShape) {
10 | expect(field.id).to.not.be.undefined;
11 | if (field.type === "select" && field.key === "type")
12 | expect(field.options).to.deep.eq(taskTypes);
13 | }
14 | });
15 | });
16 |
--------------------------------------------------------------------------------
/store/test/stubs/writable.ts:
--------------------------------------------------------------------------------
1 | export function writable(value: any) {
2 | let subscriptions: any[] = [];
3 | const trigger = (b: any) =>
4 | subscriptions.forEach((a: any) => {
5 | if (a) a(b);
6 | });
7 |
8 | return {
9 | subscribe: (handler: any) => {
10 | subscriptions.push(handler);
11 | trigger(value);
12 |
13 | return () =>
14 | (subscriptions = subscriptions.filter(a => a != handler));
15 | },
16 | set: (nv: any) => {
17 | value = nv;
18 | trigger(value);
19 | },
20 | update: (cb: any) => {
21 | value = cb(value);
22 | trigger(value);
23 | },
24 | };
25 | }
26 |
--------------------------------------------------------------------------------
/store/test/tasks.spec.ts:
--------------------------------------------------------------------------------
1 | import { describe, test, expect } from "vitest";
2 | import { updateTask } from "../src/tasks";
3 | import { resetScales } from "../src/scales";
4 | import { GanttScaleData } from "../src/types";
5 | import { getData, cellHeight, cellWidth, scaleHeight } from "./stubs/data";
6 |
7 | describe("tasks", () => {
8 | test("recalculate task position", () => {
9 | const task = {
10 | id: 1,
11 | text: "Task 1",
12 | type: "task",
13 | start: new Date(2024, 3, 2),
14 | end: new Date(2024, 3, 5),
15 | };
16 |
17 | const { scales } = getData();
18 |
19 | const _scales = resetScales(
20 | new Date(2024, 3, 1),
21 | new Date(2024, 3, 10),
22 | "day",
23 | cellWidth,
24 | scaleHeight,
25 | scales
26 | ) as GanttScaleData;
27 |
28 | const updatedTask = updateTask(
29 | task as any,
30 | 0,
31 | cellWidth,
32 | cellHeight,
33 | _scales,
34 | false
35 | );
36 |
37 | expect(updatedTask.$x).to.eq(100);
38 | expect(updatedTask.$y).to.eq(3); // 0 + default padding
39 | expect(updatedTask.$w).to.eq(300);
40 | expect(updatedTask.$h).to.eq(31);
41 | expect(updatedTask.$skip).to.eq(false);
42 | });
43 |
44 | test("recalculate task position, milestone", () => {
45 | const task = {
46 | id: 1,
47 | text: "Task 1",
48 | type: "milestone",
49 | start: new Date(2024, 3, 2),
50 | end: new Date(2024, 3, 5),
51 | };
52 |
53 | const { scales } = getData();
54 |
55 | const _scales = resetScales(
56 | new Date(2024, 3, 1),
57 | new Date(2024, 3, 10),
58 | "day",
59 | cellWidth,
60 | scaleHeight,
61 | scales
62 | ) as GanttScaleData;
63 |
64 | const updatedTask = updateTask(
65 | task as any,
66 | 0,
67 | cellWidth,
68 | cellHeight,
69 | _scales,
70 | false
71 | );
72 |
73 | expect(updatedTask.$x).to.eq(84.5);
74 | expect(updatedTask.$y).to.eq(3); // 0 + default padding
75 | expect(updatedTask.$w).to.eq(31);
76 | expect(updatedTask.$h).to.eq(31);
77 | });
78 |
79 | test("recalculate task position, baselines enabled", () => {
80 | const task = {
81 | id: 1,
82 | text: "Task 1",
83 | type: "task",
84 | start: new Date(2024, 3, 2),
85 | end: new Date(2024, 3, 5),
86 | base_start: new Date(2024, 3, 2),
87 | base_end: new Date(2024, 3, 5),
88 | };
89 |
90 | const { scales } = getData();
91 |
92 | const _scales = resetScales(
93 | new Date(2024, 3, 1),
94 | new Date(2024, 3, 10),
95 | "day",
96 | cellWidth,
97 | scaleHeight,
98 | scales
99 | ) as GanttScaleData;
100 |
101 | const updatedTask = updateTask(
102 | task as any,
103 | 0,
104 | cellWidth,
105 | cellHeight,
106 | _scales,
107 | true
108 | );
109 |
110 | expect(updatedTask.$x).to.eq(100);
111 | expect(updatedTask.$y).to.eq(3); // 0 + default padding
112 | expect(updatedTask.$w).to.eq(300);
113 | expect(updatedTask.$h).to.eq(19);
114 | expect(updatedTask.$skip).to.eq(false);
115 |
116 | expect(updatedTask.$x_base).to.eq(100);
117 | expect(updatedTask.$y_base).to.eq(26);
118 | expect(updatedTask.$w_base).to.eq(300);
119 | expect(updatedTask.$h_base).to.eq(8);
120 | });
121 | });
122 |
--------------------------------------------------------------------------------
/store/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "moduleResolution": "node",
4 | "module": "esnext",
5 | "lib": ["ESNext", "DOM"],
6 | "target": "ESNext",
7 | "types": ["vite/client"],
8 |
9 | "isolatedModules": true,
10 | "resolveJsonModule": true,
11 | "esModuleInterop": true,
12 | "skipLibCheck": true,
13 | "forceConsistentCasingInFileNames": true,
14 | "allowJs": true,
15 | "checkJs": false,
16 |
17 | "noImplicitAny": true,
18 | "sourceMap": true,
19 |
20 | "baseUrl": ".",
21 | "declaration": true,
22 | "outDir": "dist/"
23 | },
24 | "watchOptions": {},
25 | "include": ["src/**/*.ts"]
26 | }
27 |
--------------------------------------------------------------------------------
/store/vite.config.js:
--------------------------------------------------------------------------------
1 | // vite.config.ts
2 | import { resolve } from "path";
3 | import { defineConfig, loadEnv } from "vite";
4 | import dts from "vite-plugin-dts";
5 | import conditionalCompile from "vite-plugin-conditional-compile";
6 | import esbuild from "esbuild";
7 |
8 | const minify = {
9 | name: "minify",
10 | closeBundle: () => {
11 | esbuild.buildSync({
12 | entryPoints: ["./dist/index.js"],
13 | minify: true,
14 | allowOverwrite: true,
15 | outfile: "./dist/index.js",
16 | });
17 | },
18 | };
19 |
20 | export default function ({ mode }) {
21 | process.env = { ...process.env, ...loadEnv(mode, process.cwd(), "WX") };
22 | const trial = !!process.env.WX_TRIAL_PACKAGE;
23 |
24 | const config = {
25 | build: {
26 | lib: {
27 | entry: resolve(__dirname, "src/index.ts"),
28 | name: "store",
29 | formats: ["es"],
30 | fileName: () => `index.js`,
31 | },
32 | sourcemap: !trial,
33 | minify: mode !== "development",
34 | target: "esnext",
35 | },
36 | test: {
37 | coverage: {
38 | reporter: ["text"],
39 | },
40 | },
41 | plugins: [],
42 | };
43 |
44 | if (mode !== "development") {
45 | config.plugins.push(conditionalCompile({}));
46 | }
47 |
48 | if (!trial) {
49 | config.plugins.push(dts({ outDir: resolve(__dirname, "dist/types") }));
50 | } else {
51 | config.plugins.push(dts({ outDir: resolve(__dirname, "dist/types") }));
52 | }
53 | if (mode !== "development") {
54 | config.plugins.push(minify);
55 | }
56 |
57 | return defineConfig(config);
58 | }
59 |
--------------------------------------------------------------------------------
/svelte/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | cypress/screenshots
3 | cypress/videos
4 |
--------------------------------------------------------------------------------
/svelte/cypress.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "cypress";
2 |
3 | export default defineConfig({
4 | video: false,
5 | e2e: {
6 | setupNodeEvents() {},
7 | },
8 | });
9 |
--------------------------------------------------------------------------------
/svelte/cypress/e2e/basic/scales.cy.js:
--------------------------------------------------------------------------------
1 | context("Scale", () => {
2 | it("scale works with local data", () => {
3 | cy.visit("/index.html#/zoom/willow");
4 | cy.viewport(1300, 900);
5 |
6 | let cellWidth = 100;
7 | const zoomSteps = 6;
8 | const zoomDelta = 50; // each zoom step is 50px
9 | const initialZoomStep = cellWidth / zoomDelta; // get initial zoom step
10 | const minCellWidth = 50;
11 | const maxCellWidth = 300;
12 |
13 | const scroll = zoom => {
14 | cy.get(".wx-chart").trigger("wheel", {
15 | deltaY: zoom === "zoom-in" ? -100 : 100,
16 | ctrlKey: true,
17 | });
18 | };
19 | cy.get(".wx-scale .wx-row").first().as("topRowScale");
20 | cy.get(".wx-scale .wx-row:last-child > :first-child").should(
21 | "have.css",
22 | "width",
23 | `${cellWidth}px`
24 | );
25 |
26 | for (let i = initialZoomStep; i <= zoomSteps; i++) {
27 | cellWidth =
28 | cellWidth + zoomDelta > maxCellWidth
29 | ? minCellWidth
30 | : cellWidth + zoomDelta;
31 |
32 | scroll("zoom-in");
33 | cy.get(".wx-scale .wx-row:last-child > :first-child").should(
34 | "have.css",
35 | "width",
36 | `${cellWidth}px`
37 | );
38 |
39 | i < zoomSteps
40 | ? cy.get("@topRowScale").should("contain", "April 2024")
41 | : cy.get("@topRowScale").should("contain", "Apr 6");
42 | }
43 |
44 | cy.shot("zoom-in works");
45 |
46 | cy.get("@topRowScale").should("contain", "Apr 6");
47 | for (let i = initialZoomStep; i <= zoomSteps; i++) {
48 | cellWidth =
49 | cellWidth - zoomDelta < minCellWidth
50 | ? maxCellWidth
51 | : cellWidth - zoomDelta;
52 |
53 | scroll("zoom-out");
54 | cy.get(".wx-scale .wx-row:last-child > :first-child").should(
55 | "have.css",
56 | "width",
57 | `${cellWidth}px`
58 | );
59 |
60 | cy.get("@topRowScale").should("contain", "April 2024");
61 | }
62 |
63 | cy.shot("zoom-out works");
64 | });
65 | });
66 |
--------------------------------------------------------------------------------
/svelte/cypress/e2e/demos.cy.js:
--------------------------------------------------------------------------------
1 | const cases = [
2 | "/base/:skin",
3 | "/locale/:skin",
4 | "/tooltips/:skin",
5 | "/fullscreen/:skin",
6 | "/templates/:skin",
7 | "/markers/:skin",
8 | "/holidays/:skin",
9 | "/no-grid/:skin",
10 | "/grid-fill-space-columns/:skin",
11 | "/grid-fixed-columns/:skin",
12 | "/grid-custom-columns/:skin",
13 | "/toolbar/:skin",
14 | "/toolbar-buttons/:skin",
15 | "/context-menu/:skin",
16 | "/menu-handler/:skin",
17 | "/menu-options/:skin",
18 | "/custom-form-controls/:skin",
19 | "/custom-edit-form/:skin",
20 | "/baseline/:skin",
21 | "/cell-borders/:skin",
22 | "/sizes/:skin",
23 | "/scales/:skin",
24 | "/prevent-actions/:skin",
25 | "/readonly/:skin",
26 | "/performance/:skin",
27 | "/gantt-multiple/:skin",
28 | "/start-end/:skin",
29 | "/zoom/:skin",
30 | "/custom-zoom/:skin",
31 | "/length-unit/:skin",
32 | "/task-types/:skin",
33 | //"/backend/:skin",
34 | //"/backend-provider/:skin",
35 | "/sorting/:skin",
36 | "/sorting-api/:skin",
37 | ];
38 |
39 | const skins = ["material", "willow", "willow-dark"];
40 | const links = [];
41 |
42 | cases.forEach(w => {
43 | skins.forEach(s => {
44 | links.push(w.replace(":skin", s));
45 | });
46 | });
47 |
48 | context("Basic functionality", () => {
49 | it("widget", () => {
50 | links.forEach(w => {
51 | cy.visit(`/index.html#${w}`);
52 | cy.wait(500);
53 | cy.shot(w, { area: ".content" });
54 | });
55 | });
56 | });
57 |
--------------------------------------------------------------------------------
/svelte/cypress/fixtures/example.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Using fixtures to represent data",
3 | "email": "hello@cypress.io",
4 | "body": "Fixtures are a great way to mock data for responses to routes"
5 | }
6 |
--------------------------------------------------------------------------------
/svelte/cypress/support/commands.js:
--------------------------------------------------------------------------------
1 | // ***********************************************
2 | // This example commands.js shows you how to
3 | // create various custom commands and overwrite
4 | // existing commands.
5 | //
6 | // For more comprehensive examples of custom
7 | // commands please read more here:
8 | // https://on.cypress.io/custom-commands
9 | // ***********************************************
10 |
11 | Cypress.Commands.add("shot", (...args) => {
12 | // eslint-disable-next-line cypress/no-unnecessary-waiting
13 | cy.wait(100);
14 |
15 | const name = args.filter(a => typeof a !== "object").join("-");
16 | const conf =
17 | typeof args[args.length - 1] === "object" ? args[args.length - 1] : {};
18 | const sconf = { ...conf, overwrite: true };
19 |
20 | if (conf.area) cy.get(conf.area).screenshot(name, sconf);
21 | else cy.screenshot(name, sconf);
22 | });
23 |
24 | Cypress.Commands.add(
25 | "clickNoScroll",
26 | {
27 | prevSubject: "element",
28 | },
29 | subject => {
30 | cy.wrap(subject).click({ scrollBehavior: false });
31 | }
32 | );
33 |
34 | Cypress.Commands.add(
35 | "wxG",
36 | {
37 | prevSubject: "optional",
38 | },
39 | (subject, type, id, side) => {
40 | subject = subject ? cy.wrap(subject) : cy;
41 | switch (type) {
42 | case "toolbar":
43 | //[fixme] change on wx-toolbar after update svelte-toolbar version
44 | return subject.get(".wx-toolbar");
45 | case "toolbar-button":
46 | return subject.get(
47 | `.wx-toolbar .wx-tb-element[data-id="${id}"]`
48 | );
49 | case "grid":
50 | return subject.get(".wx-grid");
51 | case "grid-header":
52 | return subject.get(".wx-grid .wx-h-row");
53 | case "grid-task-list":
54 | return subject.get(".wx-grid .wx-data");
55 | case "grid-item":
56 | return subject.get(`.wx-grid .wx-row[data-id="${id}"]`);
57 |
58 | case "editor":
59 | return subject.get(".wx-sidebar");
60 | case "chart-task-list":
61 | return subject.get(".wx-chart .wx-bars");
62 | case "chart-link-list":
63 | return subject.get(".wx-chart .wx-links");
64 | case "chart-item":
65 | return subject.get(`.wx-bar[data-id="${id}"]`);
66 | case "chart-selected-line":
67 | return subject.get(`.wx-area > .wx-selected[data-id="${id}"]`);
68 | case "link":
69 | return subject
70 | .get(`.wx-bar[data-id="${id}"]`)
71 | .find(`.wx-link.wx-${side}`);
72 | case "menu":
73 | return subject.get(".wx-menu");
74 | case "menu-option":
75 | return subject.get(`.wx-menu .wx-item[data-id="${id}"]`);
76 |
77 | default:
78 | throw `not supported arguments for wxG: ${type}, ${id}`;
79 | }
80 | }
81 | );
82 |
83 | Cypress.Commands.add("findRootRows", () => {
84 | cy.wxG("grid-task-list")
85 | .find(".wx-row")
86 | .filter((_, el) => {
87 | return (
88 | Cypress.$(el).find(".wx-content").css("padding-left") === "0px"
89 | );
90 | });
91 | });
92 |
--------------------------------------------------------------------------------
/svelte/cypress/support/e2e.js:
--------------------------------------------------------------------------------
1 | // ***********************************************************
2 | // This example support/index.js is processed and
3 | // loaded automatically before your test files.
4 | //
5 | // This is a great place to put global configuration and
6 | // behavior that modifies Cypress.
7 | //
8 | // You can change the location of this file or turn off
9 | // automatically serving support files with the
10 | // 'supportFile' configuration option.
11 | //
12 | // You can read more here:
13 | // https://on.cypress.io/configuration
14 | // ***********************************************************
15 |
16 | // Import commands.js using ES2015 syntax:
17 | import "./commands";
18 |
19 | // Alternatively you can use CommonJS syntax:
20 | // require('./commands')
21 |
--------------------------------------------------------------------------------
/svelte/demos/cases/BasicInit.svelte:
--------------------------------------------------------------------------------
1 |
9 |
10 |
17 |
18 |
Chart cell borders
19 |
20 |
21 |
22 |
23 |
31 |
11 |
19 |
--------------------------------------------------------------------------------
/svelte/demos/cases/ContextMenuHandler.svelte:
--------------------------------------------------------------------------------
1 |
26 |
27 |
28 |
36 |
--------------------------------------------------------------------------------
/svelte/demos/cases/ContextMenuOptions.svelte:
--------------------------------------------------------------------------------
1 |
35 |
36 |
37 |
45 |
--------------------------------------------------------------------------------
/svelte/demos/cases/DropDownMenu.svelte:
--------------------------------------------------------------------------------
1 |
21 |
22 |
25 |
26 | menu.show(ev)}>Task action
28 |
29 |
30 |
31 |
39 |
49 |
51 |
--------------------------------------------------------------------------------
/svelte/demos/cases/GanttBaseline.svelte:
--------------------------------------------------------------------------------
1 |
29 |
30 |
35 |
37 |
--------------------------------------------------------------------------------
/svelte/demos/cases/GanttCustomSort.svelte:
--------------------------------------------------------------------------------
1 |
37 |
38 |
39 |
40 |
Sort by
41 |
sort("text")}
42 | >Task Name
44 |
sort("start")}
45 | >Start Date
47 |
sort("duration")}
48 | >Duration
50 |
51 |
52 |
53 |
61 |
11 |
Point over Gantt chart, then hold Ctrl and use mouse wheel to zoom
12 |
13 |
20 |
39 |
51 |
52 |
58 |
--------------------------------------------------------------------------------
/svelte/demos/cases/GanttFormControls.svelte:
--------------------------------------------------------------------------------
1 |
50 |
51 |
10 |
Click the "expand" icon, or click on Gantt and press Ctrl+Shift+F
11 |
12 |
13 |
15 |
16 |
57 |
58 |
60 |
61 |
70 |
22 |
23 |
25 | {#if lang === "en"}
26 |
27 |
28 |
29 |
37 |
38 | {/if}
39 |
40 | {#if lang === "cn"}
41 |
42 |
44 |
45 |
53 |
54 |
55 | {/if}
56 |
27 |
35 |
36 |
44 |
--------------------------------------------------------------------------------
/svelte/demos/cases/GanttMultiple.svelte:
--------------------------------------------------------------------------------
1 |
29 |
30 |
31 |
32 | Add Gantt
33 |
34 |
35 | {#each gantts as gantt}
36 |
50 | {/each}
51 |
21 |
22 | {#if start}
23 | 10 000 tasks (
24 | {years}
25 | years ) rendered in
26 | (start = new Date())}>
30 | Press me to render Gantt chart with 10 000 tasks
31 |
32 | {/if}
33 |
34 |
35 | {#if start}
36 |
37 |
44 | {/if}
45 |
43 |
44 |
45 | {#snippet children({ id })}
46 |
49 |
50 | {#snippet children({ id })}
51 |
54 |
55 | {#snippet children({ id })}
56 |
59 |
60 | {#snippet children({ id })}
61 |
64 |
65 |
71 |
80 |
34 |
36 |
--------------------------------------------------------------------------------
/svelte/demos/cases/GanttReadOnly.svelte:
--------------------------------------------------------------------------------
1 |
9 |
10 |
16 |
17 |
26 |
27 |
28 |
38 |
17 |
Sorting by the "Task Name" column only
18 |
19 |
27 |
15 |
16 |
17 |
18 | {#snippet children({ id })}
19 |
22 |
23 | {#snippet children({ id })}
24 |
27 |
28 |
29 |
30 |
31 |
41 |
59 |
60 |
68 |
69 |
--------------------------------------------------------------------------------
/svelte/demos/cases/GanttSummariesNoDrag.svelte:
--------------------------------------------------------------------------------
1 |
19 |
20 |
21 |
22 |
30 |
31 |
--------------------------------------------------------------------------------
/svelte/demos/cases/GanttSummariesProgress.svelte:
--------------------------------------------------------------------------------
1 |
110 |
111 |
112 |
113 |
114 |
124 |
125 |
11 |
19 |
20 |
77 |
--------------------------------------------------------------------------------
/svelte/demos/cases/GanttText.svelte:
--------------------------------------------------------------------------------
1 |
20 |
21 |
14 |
22 |
23 |
29 |
--------------------------------------------------------------------------------
/svelte/demos/cases/GanttToolbarButtons.svelte:
--------------------------------------------------------------------------------
1 |
29 |
30 |
32 |
40 |
41 |
47 |
--------------------------------------------------------------------------------
/svelte/demos/cases/GanttToolbarCustom.svelte:
--------------------------------------------------------------------------------
1 |
82 |
83 |
85 |
93 |
94 |
100 |
--------------------------------------------------------------------------------
/svelte/demos/cases/GanttTooltips.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
21 |
--------------------------------------------------------------------------------
/svelte/demos/cases/GanttZoom.svelte:
--------------------------------------------------------------------------------
1 |
15 |
16 |
17 |
Point over Gantt chart, then hold Ctrl and use mouse wheel to zoom
18 |
19 |
28 |
9 | {data[1]}
10 |
11 |
12 |
33 |
--------------------------------------------------------------------------------
/svelte/demos/common/ListRoutes.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
7 | {#each routes as route}
8 | {'"' + route + '",\n'}
9 | {/each}
10 |
11 |
12 | {#if row.assigned}
13 |
14 |
15 |
16 | {/if}
17 |
18 |
{row.assigned}
19 |
56 |
57 |
58 |
59 |
60 |
64 |
65 |
Name
66 |
67 |
68 |
Description
69 |
70 |
71 | {#if taskTypes.length > 1}
72 |
Type
73 |
74 | {/if}
75 |
76 |
Start date
77 |
78 |
79 | {#if task.type !== "milestone"}
80 |
End date
81 |
82 |
86 | {/if}
87 |
88 |
Delete
91 |
92 |
93 |
95 |
96 |
169 |
--------------------------------------------------------------------------------
/svelte/demos/custom/MyTaskContent.svelte:
--------------------------------------------------------------------------------
1 |
15 |
16 | {#if data.type !== "milestone"}
17 | {data.text || ""}
18 |
19 | {#if data.clicked}Was clicked{:else}Click Me{/if}
20 |
21 | {:else}
22 | {data.text || ""}
23 | {/if}
24 |
25 |
50 |
--------------------------------------------------------------------------------
/svelte/demos/custom/MyTooltipContent.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 | {#if data}
9 |
10 |
11 | {data.type}:
12 | {data.text}
13 |
14 |
15 | start:
16 | {format(data.start, mask)}
17 |
18 | {#if data.end}
19 |
20 | end:
21 | {format(data.end, mask)}
22 |
23 | {/if}
24 |
Svelte Widgets
7 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/svelte/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "wx-svelte-gantt",
3 | "version": "2.1.1",
4 | "description": "Interactive and customizable Gantt chart component written in Svelte",
5 | "productTag": "gantt",
6 | "productTrial": false,
7 | "type": "module",
8 | "scripts": {
9 | "build": "vite build",
10 | "build:dist": "vite build --mode dist",
11 | "build:tests": "vite build --mode test",
12 | "lint": "yarn eslint ./demos ./src",
13 | "start": "vite --open",
14 | "start:tests": "vite --open=/tests/ --host 0.0.0.0 --port 5100 --mode test",
15 | "test": "true",
16 | "test:cypress": "cypress run -P ./ --config \"baseUrl=http://localhost:5100/tests\""
17 | },
18 | "svelte": "src/index.js",
19 | "exports": {
20 | ".": {
21 | "svelte": "./src/index.js"
22 | },
23 | "./package.json": "./package.json"
24 | },
25 | "license": "GPL-3.0",
26 | "repository": {
27 | "type": "git",
28 | "url": "https://github.com/svar-widgets/gantt.git"
29 | },
30 | "bugs": {
31 | "url": "https://forum.svar.dev"
32 | },
33 | "homepage": "https://svar.dev/svelte/gantt/",
34 | "dependencies": {
35 | "wx-gantt-data-provider": "2.1.1",
36 | "wx-gantt-locales": "2.1.1",
37 | "wx-gantt-store": "2.1.1",
38 | "wx-lib-dom": "0.8.0",
39 | "wx-lib-state": "1.9.0",
40 | "wx-lib-svelte": "0.5.1",
41 | "wx-svelte-core": "2.1.0",
42 | "wx-svelte-menu": "2.1.0",
43 | "wx-svelte-grid": "2.1.0",
44 | "wx-svelte-toolbar": "2.1.0"
45 | },
46 | "files": [
47 | "src",
48 | "readme.md",
49 | "whatsnew.md",
50 | "license.txt"
51 | ],
52 | "keywords": [
53 | "svelte",
54 | "gantt",
55 | "gantt-chart",
56 | "svelte-gantt",
57 | "svelte-gantt-chart",
58 | "gantt chart",
59 | "gantt-chart-component",
60 | "gantt-diagram",
61 | "svelte-gantt-component",
62 | "svar widgets",
63 | "svar gantt",
64 | "timeline"
65 | ]
66 | }
67 |
--------------------------------------------------------------------------------
/svelte/postcss.config.js:
--------------------------------------------------------------------------------
1 | import autoprefixer from "autoprefixer";
2 |
3 | const plugins = [autoprefixer];
4 | export { plugins };
5 |
--------------------------------------------------------------------------------
/svelte/readme.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | # SVAR Svelte Gantt Chart
4 |
5 |
6 |
7 |
8 |
9 | [Website](https://svar.dev/svelte/gantt/) • [Getting Started](https://docs.svar.dev/svelte/gantt/getting_started/) • [Demos](https://docs.svar.dev/svelte/gantt/samples/#/base/willow)
10 |
11 |
12 |
13 |
14 |
15 | [](https://www.npmjs.com/package/wx-svelte-gantt)
16 | [](https://github.com/svar-widgets/gantt/blob/main/license.txt)
17 | [](https://www.npmjs.com/package/wx-svelte-gantt)
18 | [](https://github.com/svar-widgets/gantt)
19 |
20 |
21 |
22 | [SVAR Svelte Gantt](https://svar.dev/svelte/gantt/) is a customizable, easy-to-use, and interactive Gantt chart component written in Svelte. Its intuitive interface allows users to add and manage tasks and dependencies directly on the timeline using drag-and-drop or via a simple task edit form.
23 |
24 |
25 |
26 |
133 | {@render children?.()}
134 |
135 |
136 |
145 |
--------------------------------------------------------------------------------
/svelte/src/components/Fullscreen.svelte:
--------------------------------------------------------------------------------
1 |
39 |
40 |
41 |
42 | {@render children?.()}
43 |
44 | toggleFullscreen()}
48 | />
49 |
50 |
133 |
142 |
--------------------------------------------------------------------------------
/svelte/src/components/Resizer.svelte:
--------------------------------------------------------------------------------
1 |
69 |
70 |
71 |
72 |
81 |
82 |
100 |
--------------------------------------------------------------------------------
/svelte/src/components/TimeScale.svelte:
--------------------------------------------------------------------------------
1 |
9 |
10 |
11 | {#each $scales.rows as row}
12 |
13 | {#each row.cells as cell}
14 |
20 | {cell.value}
21 |
22 | {/each}
23 |
24 | {/each}
25 |
32 |
--------------------------------------------------------------------------------
/svelte/src/components/chart/Links.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 | {#each $links as link (link.id)}
11 |
14 |
15 |
33 |
--------------------------------------------------------------------------------
/svelte/src/components/grid/ActionCell.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 | {#if cell || column.action == "add-task"}
9 |
10 |
12 | {/if}
13 |
14 |
27 |
--------------------------------------------------------------------------------
/svelte/src/components/grid/TextCell.svelte:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 | {#if row.data || row.lazy}
13 |
17 | {:else}
{/if}
18 |
{row.text}
19 |
53 |
54 |
55 |
56 |
57 |
58 | {#each links.data as obj}
59 |
60 |
61 |
62 | {obj.task.text || ""}
63 |
64 |
65 |
66 |
67 |
68 |
73 | onChange(e, obj.link.id)}
74 | >
75 | {#snippet children({ option })}
76 | {option.label}
77 | {/snippet}
78 |
79 |
80 |
81 |
82 |
83 |
89 |
90 | {/each}
91 |
92 |
93 |
94 |
{@render children()}
8 | {:else}
9 | {@render children()}
8 | {:else}
9 | {@render children()}
8 | {:else}
9 |
48 |
{label}
49 |
50 |
51 |
59 |
61 |
62 |
72 |
73 |
81 |
86 |
87 |
88 |
6 | {#if icon}
8 |
9 |
47 |
--------------------------------------------------------------------------------
/svelte/src/widgets/Tooltip.svelte:
--------------------------------------------------------------------------------
1 |
93 |
94 |
95 |
96 |
113 |
114 |
137 |
--------------------------------------------------------------------------------
/svelte/svelte.config.js:
--------------------------------------------------------------------------------
1 | import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
2 |
3 | export default {
4 | // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
5 | // for more information about preprocessors
6 | preprocess: vitePreprocess(),
7 | };
8 |
--------------------------------------------------------------------------------
/svelte/tests/Index.svelte:
--------------------------------------------------------------------------------
1 |
47 |
48 |
53 |
54 |
55 |
57 |
58 |
59 |
60 |
98 |
--------------------------------------------------------------------------------
/svelte/tests/cases/LocalData.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 |
11 |
13 |
14 |
--------------------------------------------------------------------------------
/svelte/tests/common/Index.svelte:
--------------------------------------------------------------------------------
1 |
53 |
54 |
59 |
60 |
61 |
63 |
64 |
65 |
66 |
104 |
--------------------------------------------------------------------------------
/svelte/tests/common/ListRoutes.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
7 | {#each routes as route}
8 | {'"' + route + '",\n'}
9 | {/each}
10 | Svelte Widgets
7 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/svelte/tests/index.js:
--------------------------------------------------------------------------------
1 | import Demos from "./Index.svelte";
2 | import { mount } from "svelte";
3 |
4 | mount(Demos, {
5 | target: document.querySelector("#wx_demo_area") || document.body,
6 | });
7 |
--------------------------------------------------------------------------------
/svelte/tests/routes.js:
--------------------------------------------------------------------------------
1 | import LocalData from "./cases/LocalData.svelte";
2 |
3 | export const links = [["/local-data", "", LocalData]];
4 |
--------------------------------------------------------------------------------
/svelte/vite.config.js:
--------------------------------------------------------------------------------
1 | import { loadEnv } from "vite";
2 | import { resolve } from "path";
3 | import { existsSync } from "fs";
4 | import { svelte } from "@sveltejs/vite-plugin-svelte";
5 | import { visualizer } from "rollup-plugin-visualizer";
6 | import { waitChanges, waitOn } from "wx-vite-tools";
7 | import conditionalCompile from "vite-plugin-conditional-compile";
8 | import pkg from "./package.json" with { type: "json" };
9 |
10 | export default async ({ mode }) => {
11 | process.env = { ...process.env, ...loadEnv(mode, process.cwd(), "WX") };
12 | const files = [];
13 |
14 | if (mode !== "production") {
15 | const paths = [
16 | resolve(__dirname, "../store/dist/index.js"),
17 | resolve(__dirname, "../provider/dist/index.js"),
18 | ];
19 |
20 | paths.forEach(path => {
21 | if (existsSync(path)) {
22 | files.push(path);
23 | }
24 | });
25 | }
26 |
27 | const plugins = [];
28 |
29 | if (files.length) plugins.push(waitChanges({ files }));
30 | if (mode !== "development") plugins.push(conditionalCompile());
31 | plugins.push(svelte({}));
32 |
33 | const name = pkg.productTag;
34 |
35 | let build,
36 | publicDir = resolve(__dirname, "public"),
37 | server = {},
38 | base = "";
39 |
40 | if (mode === "test") {
41 | build = {
42 | rollupOptions: {
43 | input: { tests: resolve(__dirname, "tests/index.html") },
44 | },
45 | };
46 | server.port = 5100;
47 | } else {
48 | build = {
49 | rollupOptions: {
50 | input: { index: resolve(__dirname, "index.html") },
51 | },
52 | };
53 | }
54 |
55 | if (process.env.WX_BUILD_STATS) {
56 | build = {
57 | lib: {
58 | entry: resolve(__dirname, "src/index.js"),
59 | name,
60 | formats: ["es"],
61 | fileName: format => `${name}.${format}.js`,
62 | },
63 | outDir: "./dist",
64 | sourcemap: true,
65 | minify: true,
66 | target: "esnext",
67 | };
68 | publicDir = false;
69 | plugins.push(visualizer({ filename: "dist/stats.html" }));
70 | }
71 |
72 | if (files.length) await waitOn({ files });
73 |
74 | return {
75 | base,
76 | build,
77 | publicDir,
78 | resolve: { dedupe: ["svelte"] },
79 | plugins,
80 | server,
81 | watch: {
82 | persistent: true,
83 | include: ["src/**/*.ts", "src/**/*.js"],
84 | },
85 | };
86 | };
87 |
--------------------------------------------------------------------------------
/svelte/whatsnew.md:
--------------------------------------------------------------------------------
1 | ## 2.1.1
2 |
3 | ### Fixes
4 |
5 | - Regression with table and chart alignment
6 | - Regression with fullscreen functionality
7 | - Right and center alignment does not apply to header cells
8 |
9 | ## 2.1.0
10 |
11 | ### Updates
12 |
13 | - Ability to use custom HTML in column cells
14 | - Optimizing inner zoom and scale logic
15 |
16 | ### Fixes
17 |
18 | - Impossible to use numeric id for Toolbar and Menu options
19 |
20 | ## 2.0.1
21 |
22 | ### New features
23 |
24 | - Svelte 5 support
25 |
26 | ## 1.2.0
27 |
28 | - Released under GPLv3
29 |
30 | ## 1.1.0
31 |
32 | ### New features
33 |
34 | - Summary tasks
35 | - Sorting Grid columns
36 | - Batch mode for DataProvider to handle mass operations
37 | - `sort-tasks` action is added
38 | - POST /{batchURL} route is added
39 | - `columns` property is extended with the `sort` parameter
40 | - `minCellWidth` and `maxCellWidth` settings are added to the `zoom` property
41 | - `update-task` and `copy-task` actions are extended with the `eventSource` parameter
42 | - `source` parameter is added to the "move-task" and "delete-task" actions
43 | - RestDataProvider config has the `batchUrl` property
44 | - New parameters (`source` and `lazy`) added to the "copy-task" action
45 |
46 | ### Updates
47 |
48 | - Common minCellwidth and maxCellWidth for zoom levels
49 | - Skipping meaningless actions in Context Menu and Toolbar
50 |
51 | ### Fixes
52 |
53 | - Scroll in Grid is not smooth
54 | - Impossible to resize chart bars on the left more than for one cell
55 | - When a branch is removed, only links of the parent task are removed
56 | - Unstable move down behaviour: tasks are inserted in wrong positions
57 | - Resizing columns: horizontal scrollbar does not appear
58 | - Text of tasks is higher than a dragged bar during reordering
59 | - Last task is misplaced after reordering when there are few tasks
60 | - Reordering of tasks with child tasks is broken
61 | - Impossible to define cellWidth if default zoom is enabled
62 | - Data is removed from task object after the "update-task" operation
63 | - Outdenting does not work for 3rd-level tasks
64 | - Auto scale is calculated incorrectly if the last task is a milestone
65 | - Parent task is not always opened after adding a new task
66 | - Task start date is not set according to the top-level target task
67 | - Zooming in and out between levels does not work correctly
68 |
69 | ## 1.1
70 |
71 | ### New features
72 |
73 | - Summary tasks
74 | - Sorting Grid columns
75 | - Batch mode for DataProvider to handle mass operations
76 | - New "sort-tasks" action is added
77 | - New POST /{batchURL} route is added
78 | - The `columns` property is extended with the `sort` parameter
79 | - The `minCellWidth` and `maxCellWidth` settings are added to the `zoom` property
80 | - The "update-task" and "copy-task" actions are extended with the `eventSource` parameter
81 | - The `source` parameter is added to the "move-task" and "delete-task" actions
82 | - RestDataProvider config has the `batchUrl` property
83 | - New parameters (`source` and `lazy`) added to the "copy-task" action
84 |
85 | ### Updates
86 |
87 | - Common minCellwidth and maxCellWidth for zoom levels
88 | - Skipping meaningless actions in Context Menu and Toolbar
89 |
90 | ### Fixes
91 |
92 | - Scroll in Grid is not smooth
93 | - Impossible to resize chart bars on the left more than for one cell
94 | - When a branch is removed, only links of the parent task are removed
95 | - Unstable move down behaviour: tasks are inserted in wrong positions
96 | - Resizing columns: horizontal scrollbar does not appear
97 | - Text of tasks is higher than a dragged bar during reordering
98 | - Last task is misplaced after reordering when there are few tasks
99 | - Reordering of tasks with child tasks is broken
100 | - Impossible to define cellWidth if default zoom is enabled
101 | - Data is removed from task object after the "update-task" operation
102 | - Outdenting does not work for 3rd-level tasks
103 | - Auto scale is calculated incorrectly if the last task is a milestone
104 | - Parent task is not always opened after adding a new task
105 | - Task start date is not set according to the top-level target task
106 | - Zooming in and out between levels does not work correctly
107 |
108 | ## 1.0
109 |
110 | ### Initial features
111 |
112 | - Fast behavior and clear API
113 | - Configurable Grid columns
114 | - Configurable Chart scales and cell sizes
115 | - Task types:"project", "task", "milestone" and custom
116 | - Baselines
117 | - Holiday and custom markers in Chart area
118 | - Configurable Editor panel
119 | - Configurable Context Menu and Toolbar
120 | - Tooltips for tasks in Chart area
121 | - Readonly mode
122 | - Fullscreen mode
123 | - Wouse-wheel zooming in Chart area
124 | - Responsive behaviour of Grid area
125 | - Localization of labels and dates
126 | - Ready-made DataProvider to intergate with server
127 |
--------------------------------------------------------------------------------
/vitest.workspace.js:
--------------------------------------------------------------------------------
1 | import { defineWorkspace } from "vitest/config";
2 |
3 | export default defineWorkspace([
4 | "./site/vite.config.js",
5 | "./store/vite.config.js",
6 | "./svelte/vite.config.js",
7 | "./provider/vite.config.js",
8 | ]);
9 |
--------------------------------------------------------------------------------
25 |