diff --git a/package.json b/package.json index 3bd2d410..840ed173 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "develop": "concurrently npm:watch npm:storybook", "website": "lerna run start --scope=@gitgraph/website --stream", "deploy:website": "lerna run deploy --scope=@gitgraph/website --stream", - "lint": "eslint packages/*/src/**/*.{ts,tsx,js,jsx}", + "lint": "eslint packages/**/src/**/*.{ts,tsx}", "lint:fix": "npm run lint -- --fix", "pretest": "npm run build", "test": "jest", diff --git a/packages/gitgraph-js/src/gitgraph.ts b/packages/gitgraph-js/src/gitgraph.ts index 8129c5e3..bae1baf4 100644 --- a/packages/gitgraph-js/src/gitgraph.ts +++ b/packages/gitgraph-js/src/gitgraph.ts @@ -63,7 +63,7 @@ interface CommitYWithOffsets { function createGitgraph( graphContainer: HTMLElement, - options?: GitgraphOptions, + options?: GitgraphOptions & { responsive?: boolean }, ) { let commitsElements: { [commitHash: string]: { @@ -85,9 +85,16 @@ function createGitgraph( // Create an `svg` context in which we'll render the graph. const svg = createSvg(); - adaptSvgOnUpdate(); + adaptSvgOnUpdate(Boolean(options && options.responsive)); graphContainer.appendChild(svg); + if (options && options.responsive) { + graphContainer.setAttribute( + "style", + "display:inline-block; position: relative; width:100%; padding-bottom:100%; vertical-align:middle; overflow:hidden;", + ); + } + // React on gitgraph updates to re-render the graph. const gitgraph = new GitgraphCore(options); gitgraph.subscribe((data) => { @@ -123,7 +130,7 @@ function createGitgraph( ); } - function adaptSvgOnUpdate(): void { + function adaptSvgOnUpdate(adaptToContainer: boolean): void { const observer = new MutationObserver(() => { if (shouldRecomputeOffsets) { shouldRecomputeOffsets = false; @@ -131,7 +138,7 @@ function createGitgraph( render(lastData); } else { positionCommitsElements(); - adaptGraphDimensions(); + adaptGraphDimensions(adaptToContainer); } }); @@ -221,7 +228,7 @@ function createGitgraph( }); } - function adaptGraphDimensions(): void { + function adaptGraphDimensions(adaptToContainer: boolean): void { const { height, width } = svg.getBBox(); // FIXME: In horizontal mode, we mimic @gitgraph/react behavior @@ -245,8 +252,16 @@ function createGitgraph( // Add `BRANCH_LABEL_PADDING_Y` so we don't crop branch label. BRANCH_LABEL_PADDING_Y + TOOLTIP_PADDING + verticalCustomOffset; - svg.setAttribute("width", (width + widthOffset).toString()); - svg.setAttribute("height", (height + heightOffset).toString()); + if (adaptToContainer) { + svg.setAttribute("preserveAspectRatio", "xMinYMin meet"); + svg.setAttribute( + "viewBox", + `0 0 ${width + widthOffset} ${height + heightOffset}`, + ); + } else { + svg.setAttribute("width", (width + widthOffset).toString()); + svg.setAttribute("height", (height + heightOffset).toString()); + } } } diff --git a/packages/gitgraph-react/src/Gitgraph.tsx b/packages/gitgraph-react/src/Gitgraph.tsx index d94b1094..146333ea 100644 --- a/packages/gitgraph-react/src/Gitgraph.tsx +++ b/packages/gitgraph-react/src/Gitgraph.tsx @@ -116,7 +116,7 @@ class Gitgraph extends React.Component { {this.state.commits.map((commit) => ( + )) + .add("responsive", () => ( + + {(graphContainer) => { + const gitgraph = createGitgraph(graphContainer, { + generateCommitHash: createFixedHashGenerator(), + responsive: true, + }); + + const master = gitgraph.branch("master").commit("Initial commit"); + const develop = gitgraph.branch("develop"); + develop.commit("one"); + master.commit("two"); + develop.commit("three"); + master.merge(develop); + }} + ));