@mogura/moguchart-plugin-export 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-present Murakami Hiroyuki
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.ja.md

@@ -0,0 +1,76 @@
+# @mogura/moguchart-plugin-export
+
+[English](./README.md)
+
+ガントチャートライブラリ `@mogura/moguchart-core` 用の PNG / PDF エクスポートプラグインです。
+`html2canvas-pro` および `jspdf` を使用し、Shadow DOM や高解像度分割エクスポートに対応しています。
+
+## インストール
+
+```bash
+pnpm add @mogura/moguchart-plugin-export
+# または
+npm install @mogura/moguchart-plugin-export
+```
+
+## 使い方
+
+### 1. プラグインとして登録して使う（推奨）
+
+チャートインスタンスにプラグインを登録すると、`chart.exportImage()` メソッドが有効化されます。
+
+```typescript
+import '@mogura/moguchart-core'
+import { exportPlugin } from '@mogura/moguchart-plugin-export'
+
+const chart = document.querySelector('gantt-chart')
+
+// プラグインの登録
+chart.use(exportPlugin())
+
+// または option.plugins で宣言的に渡すことも可能
+chart.option = {
+  calendar: { ... },
+  plugins: [exportPlugin()]
+}
+
+// PNG エクスポート
+await chart.exportImage('png', {
+  filename: 'my-project-schedule',
+  download: true,
+  scale: 2
+})
+
+// PDF エクスポート
+await chart.exportImage('pdf', {
+  filename: 'my-project-schedule',
+  download: true
+})
+```
+
+### 2. スタンドアロン関数として呼ぶ（必要な時だけ遅延インポート）
+
+エクスポートボタンがクリックされた時だけ動的インポート（Dynamic Import）することで、初期バンドルサイズを最小限に抑えられます。
+
+```typescript
+async function handleExportPdf(chartElement) {
+  const { exportChart } = await import('@mogura/moguchart-plugin-export')
+  await exportChart(chartElement, 'pdf', {
+    filename: 'gantt-export',
+    download: true
+  })
+}
+```
+
+## オプション (`ExportImageOptions`)
+
+| オプション | 型 | デフォルト値 | 説明 |
+| :--- | :--- | :--- | :--- |
+| `filename` | `string` | `'gantt-chart'` | ダウンロード時のファイル名（拡張子なし） |
+| `download` | `boolean` | `false` | `true` の場合、自動的にファイルダウンロードをトリガー |
+| `scale` | `number` | `2` | PNG 出力時の解像度倍率 |
+| `splitHeight` | `number` | 未指定 | 指定ピクセル数で縦に分割し、分割位置にカレンダーヘッダーを挿入 |
+
+## ライセンス
+
+MIT

package/README.md

@@ -0,0 +1,76 @@
+# @mogura/moguchart-plugin-export
+
+[日本語](./README.ja.md)
+
+PNG and PDF export plugin for the `@mogura/moguchart-core` Gantt chart component.
+Powered by `html2canvas-pro` and `jspdf`, supporting Shadow DOM rendering and high-resolution multi-page split exports.
+
+## Installation
+
+```bash
+pnpm add @mogura/moguchart-plugin-export
+# or
+npm install @mogura/moguchart-plugin-export
+```
+
+## Usage
+
+### 1. Register as a Plugin (Recommended)
+
+Register the plugin to your Gantt chart instance to enable the `chart.exportImage()` method.
+
+```typescript
+import '@mogura/moguchart-core'
+import { exportPlugin } from '@mogura/moguchart-plugin-export'
+
+const chart = document.querySelector('gantt-chart')
+
+// Register plugin via chart.use()
+chart.use(exportPlugin())
+
+// Or pass declaratively via option.plugins
+chart.option = {
+  calendar: { ... },
+  plugins: [exportPlugin()]
+}
+
+// Export as PNG image
+await chart.exportImage('png', {
+  filename: 'my-project-schedule',
+  download: true,
+  scale: 2
+})
+
+// Export as PDF document
+await chart.exportImage('pdf', {
+  filename: 'my-project-schedule',
+  download: true
+})
+```
+
+### 2. Standalone Function (Dynamic Import for Code Splitting)
+
+Dynamically import the export function only when the user triggers an export, keeping the initial page bundle minimal.
+
+```typescript
+async function handleExportPdf(chartElement) {
+  const { exportChart } = await import('@mogura/moguchart-plugin-export')
+  await exportChart(chartElement, 'pdf', {
+    filename: 'gantt-export',
+    download: true
+  })
+}
+```
+
+## Options (`ExportImageOptions`)
+
+| Option | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `filename` | `string` | `'gantt-chart'` | File name for downloaded file (without extension) |
+| `download` | `boolean` | `false` | If `true`, automatically triggers browser file download |
+| `scale` | `number` | `2` | Resolution multiplier for PNG rendering |
+| `splitHeight` | `number` | `undefined` | Split height in pixels for vertical multi-page division with repeating calendar headers |
+
+## License
+
+MIT

package/dist/export.d.ts

@@ -0,0 +1,18 @@
+/**
+ * ガントチャートを PNG 画像または PDF としてエクスポートするユーティリティ。
+ */
+import type { GanttChartElement } from '@mogura/moguchart-core';
+export interface ExportImageOptions {
+    /** ダウンロード時のファイル名（拡張子なし）。省略時は 'gantt-chart' */
+    filename?: string;
+    /** true の場合、自動的にファイルダウンロードを開始する。デフォルト: false */
+    download?: boolean;
+    /** PNG 出力時のスケール倍率（高解像度化）。デフォルト: 2 */
+    scale?: number;
+    /** 画像を指定したピクセル数で縦に分割し、分割位置にカレンダー（ヘッダー）を挿入する。未指定時は分割しない */
+    splitHeight?: number;
+}
+/**
+ * html2canvas-pro を使用してエクスポートする（Shadow DOMネイティブ対応版）
+ */
+export declare function exportGanttWithHtml2Canvas(chartElement: GanttChartElement, format?: 'png' | 'pdf', options?: ExportImageOptions): Promise<string | Blob>;

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+import type { GanttChartElement, GanttPlugin } from '@mogura/moguchart-core';
+import { exportGanttWithHtml2Canvas, type ExportImageOptions } from './export';
+export interface ExportPluginConfig {
+    defaultScale?: number;
+    defaultFilename?: string;
+}
+/**
+ * ガントチャートのエクスポート（PNG/PDF）プラグイン
+ */
+export declare function exportPlugin(config?: ExportPluginConfig): GanttPlugin<ExportPluginConfig>;
+/**
+ * クラス形式の ExportPlugin
+ */
+export declare class ExportPlugin implements GanttPlugin<ExportPluginConfig> {
+    name: string;
+    version: string;
+    config?: ExportPluginConfig;
+    constructor(config?: ExportPluginConfig);
+    install(chart: GanttChartElement, options?: ExportPluginConfig): void | undefined;
+}
+/**
+ * スタンドアロン実行関数
+ */
+export declare function exportChart(chart: GanttChartElement, format?: 'png' | 'pdf', options?: ExportImageOptions): Promise<string | Blob>;
+export { exportGanttWithHtml2Canvas };
+export type { ExportImageOptions };

package/dist/moguchart-plugin-export.mjs

@@ -0,0 +1,134 @@
+import e from "html2canvas-pro";
+import { jsPDF as t } from "jspdf";
+import { getThemeColors as n } from "@mogura/moguchart-core";
+//#region src/export.ts
+function r(e, t) {
+	let n = document.createElement("a");
+	n.href = e, n.download = t, n.click();
+}
+async function i(i, a = "png", o = {}) {
+	let { filename: s = "gantt-chart", download: c = !1, scale: l = 2, splitHeight: u } = o, d = i.shadowRoot?.querySelector(".scroll-container"), f = d ? d.scrollWidth : i.scrollWidth, p = d ? d.scrollHeight : i.scrollHeight, m = d || i, h = n(i.theme, i.option?.customTheme).bg || "#ffffff", g = await e(m, {
+		backgroundColor: h,
+		scale: l,
+		width: f,
+		height: p,
+		windowWidth: f,
+		windowHeight: p,
+		scrollX: 0,
+		scrollY: 0,
+		x: 0,
+		y: 0,
+		logging: !1
+	});
+	if (u && p > u) {
+		let e = 50, t = i.shadowRoot?.querySelector("gantt-calendar");
+		t && t.offsetHeight > 0 ? e = t.offsetHeight : i.calendarHeight && (e = i.calendarHeight);
+		let n = g.height / p, r = p - e, a = u - e, o = [];
+		typeof i.getRowPositions == "function" && (o = i.getRowPositions().map((e) => e.bottom));
+		let s = [0], c = 0;
+		if (a > 0) for (; c < r;) {
+			let e = c + a;
+			if (e >= r) {
+				s.push(r);
+				break;
+			}
+			let t = -1;
+			for (let n = 0; n < o.length; n++) {
+				let r = o[n];
+				r > c && r <= e && (t = Math.max(t, r));
+			}
+			if (t === -1) for (let e = 0; e < o.length; e++) {
+				let n = o[e];
+				if (n > c) {
+					t = n;
+					break;
+				}
+			}
+			(t === -1 || t === c) && (t = e), s.push(t), c = t;
+		}
+		else s.push(r);
+		let l = s.length - 1;
+		if (l > 0) {
+			let t = Math.floor(e * n), r = g.width, i = 0, a = [];
+			for (let r = 0; r < l; r++) {
+				let o = s[r], c = s[r + 1], l = Math.round((e + o) * n), u = Math.round((e + c) * n), d = u - l;
+				a.push({
+					srcStart: l,
+					srcEnd: u,
+					destHeight: d
+				}), i += t + d;
+			}
+			let o = document.createElement("canvas");
+			o.width = r, o.height = i;
+			let c = o.getContext("2d");
+			if (c) {
+				let e = 0;
+				for (let n = 0; n < l; n++) {
+					c.drawImage(g, 0, 0, r, t, 0, e, r, t), e += t;
+					let i = a[n];
+					c.drawImage(g, 0, i.srcStart, r, i.destHeight, 0, e, r, i.destHeight), e += i.destHeight;
+				}
+				g = o, p = i / n;
+			} else console.warn("[export] Failed to get 2D context for new canvas. It might be too large.");
+		}
+	}
+	if (a === "pdf") {
+		let e = g.toDataURL("image/jpeg", .9), n = new t({
+			orientation: f > p ? "l" : "p",
+			unit: "px",
+			format: [f, p],
+			compress: !0
+		});
+		return n.addImage(e, "JPEG", 0, 0, f, p, void 0, "FAST"), c && n.save(`${s}.pdf`), n.output("blob");
+	}
+	{
+		let e = g.toDataURL("image/png");
+		return c && r(e, `${s}.png`), e;
+	}
+}
+//#endregion
+//#region src/index.ts
+function a(e) {
+	return {
+		name: "export",
+		version: "1.0.0",
+		install(t, n) {
+			let r = {
+				...e,
+				...n
+			};
+			t.exportImage = async (e = "png", n = {}) => {
+				let a = t._scrollContainer || t.shadowRoot?.querySelector(".scroll-container"), o = a ? a.scrollLeft : 0, s = a ? a.scrollTop : 0;
+				t.isExporting = !0, await t.updateComplete, await new Promise((e) => requestAnimationFrame(e));
+				try {
+					return await i(t, e, {
+						scale: r.defaultScale ?? 2,
+						filename: r.defaultFilename,
+						...n
+					});
+				} finally {
+					t.isExporting = !1, await t.updateComplete, a && (a.scrollLeft = o, a.scrollTop = s);
+				}
+			};
+		}
+	};
+}
+var o = class {
+	constructor(e) {
+		this.name = "export", this.version = "1.0.0", this.config = e;
+	}
+	install(e, t) {
+		return a(this.config).install?.(e, t);
+	}
+};
+async function s(e, t = "png", n = {}) {
+	let r = e._scrollContainer || e.shadowRoot?.querySelector(".scroll-container"), a = r ? r.scrollLeft : 0, o = r ? r.scrollTop : 0;
+	e.isExporting = !0, await e.updateComplete, await new Promise((e) => requestAnimationFrame(e));
+	try {
+		return await i(e, t, n);
+	} finally {
+		e.isExporting = !1, await e.updateComplete, r && (r.scrollLeft = a, r.scrollTop = o);
+	}
+}
+//#endregion
+export { o as ExportPlugin, s as exportChart, i as exportGanttWithHtml2Canvas, a as exportPlugin };

package/dist/moguchart-plugin-export.umd.js

@@ -0,0 +1 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("html2canvas-pro"),require("jspdf"),require("@mogura/moguchart-core")):typeof define==`function`&&define.amd?define([`exports`,`html2canvas-pro`,`jspdf`,`@mogura/moguchart-core`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.MoguchartPluginExport={},e.html2canvas,e.jsPDF,e.MoguchartCore))})(this,function(e,t,n,r){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var i=Object.create,a=Object.defineProperty,o=Object.getOwnPropertyDescriptor,s=Object.getOwnPropertyNames,c=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty,u=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=s(t),c=0,u=i.length,d;c<u;c++)d=i[c],!l.call(e,d)&&d!==n&&a(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=o(t,d))||r.enumerable});return e};t=((e,t,n)=>(n=e==null?{}:i(c(e)),u(t||!e||!e.__esModule||!l.call(e,`default`)?a(n,`default`,{value:e,enumerable:!0}):n,e)))(t,1);function d(e,t){let n=document.createElement(`a`);n.href=e,n.download=t,n.click()}async function f(e,i=`png`,a={}){let{filename:o=`gantt-chart`,download:s=!1,scale:c=2,splitHeight:l}=a,u=e.shadowRoot?.querySelector(`.scroll-container`),f=u?u.scrollWidth:e.scrollWidth,p=u?u.scrollHeight:e.scrollHeight,m=u||e,h=(0,r.getThemeColors)(e.theme,e.option?.customTheme).bg||`#ffffff`,g=await(0,t.default)(m,{backgroundColor:h,scale:c,width:f,height:p,windowWidth:f,windowHeight:p,scrollX:0,scrollY:0,x:0,y:0,logging:!1});if(l&&p>l){let t=50,n=e.shadowRoot?.querySelector(`gantt-calendar`);n&&n.offsetHeight>0?t=n.offsetHeight:e.calendarHeight&&(t=e.calendarHeight);let r=g.height/p,i=p-t,a=l-t,o=[];typeof e.getRowPositions==`function`&&(o=e.getRowPositions().map(e=>e.bottom));let s=[0],c=0;if(a>0)for(;c<i;){let e=c+a;if(e>=i){s.push(i);break}let t=-1;for(let n=0;n<o.length;n++){let r=o[n];r>c&&r<=e&&(t=Math.max(t,r))}if(t===-1)for(let e=0;e<o.length;e++){let n=o[e];if(n>c){t=n;break}}(t===-1||t===c)&&(t=e),s.push(t),c=t}else s.push(i);let u=s.length-1;if(u>0){let e=Math.floor(t*r),n=g.width,i=0,a=[];for(let n=0;n<u;n++){let o=s[n],c=s[n+1],l=Math.round((t+o)*r),u=Math.round((t+c)*r),d=u-l;a.push({srcStart:l,srcEnd:u,destHeight:d}),i+=e+d}let o=document.createElement(`canvas`);o.width=n,o.height=i;let c=o.getContext(`2d`);if(c){let t=0;for(let r=0;r<u;r++){c.drawImage(g,0,0,n,e,0,t,n,e),t+=e;let i=a[r];c.drawImage(g,0,i.srcStart,n,i.destHeight,0,t,n,i.destHeight),t+=i.destHeight}g=o,p=i/r}else console.warn(`[export] Failed to get 2D context for new canvas. It might be too large.`)}}if(i===`pdf`){let e=g.toDataURL(`image/jpeg`,.9),t=new n.jsPDF({orientation:f>p?`l`:`p`,unit:`px`,format:[f,p],compress:!0});return t.addImage(e,`JPEG`,0,0,f,p,void 0,`FAST`),s&&t.save(`${o}.pdf`),t.output(`blob`)}{let e=g.toDataURL(`image/png`);return s&&d(e,`${o}.png`),e}}function p(e){return{name:`export`,version:`1.0.0`,install(t,n){let r={...e,...n};t.exportImage=async(e=`png`,n={})=>{let i=t._scrollContainer||t.shadowRoot?.querySelector(`.scroll-container`),a=i?i.scrollLeft:0,o=i?i.scrollTop:0;t.isExporting=!0,await t.updateComplete,await new Promise(e=>requestAnimationFrame(e));try{return await f(t,e,{scale:r.defaultScale??2,filename:r.defaultFilename,...n})}finally{t.isExporting=!1,await t.updateComplete,i&&(i.scrollLeft=a,i.scrollTop=o)}}}}}var m=class{constructor(e){this.name=`export`,this.version=`1.0.0`,this.config=e}install(e,t){return p(this.config).install?.(e,t)}};async function h(e,t=`png`,n={}){let r=e._scrollContainer||e.shadowRoot?.querySelector(`.scroll-container`),i=r?r.scrollLeft:0,a=r?r.scrollTop:0;e.isExporting=!0,await e.updateComplete,await new Promise(e=>requestAnimationFrame(e));try{return await f(e,t,n)}finally{e.isExporting=!1,await e.updateComplete,r&&(r.scrollLeft=i,r.scrollTop=a)}}e.ExportPlugin=m,e.exportChart=h,e.exportGanttWithHtml2Canvas=f,e.exportPlugin=p});

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@mogura/moguchart-plugin-export",
+  "type": "module",
+  "version": "1.1.0",
+  "description": "PNG and PDF export plugin for @mogura/moguchart-core",
+  "license": "MIT",
+  "author": "Murakami Hiroyuki",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hiro-murakami/moguchart-core.git",
+    "directory": "packages/plugin-export"
+  },
+  "homepage": "https://github.com/hiro-murakami/moguchart-core",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "gantt",
+    "moguchart",
+    "export",
+    "pdf",
+    "png",
+    "html2canvas",
+    "jspdf"
+  ],
+  "files": [
+    "dist",
+    "README.md",
+    "README.ja.md"
+  ],
+  "main": "./dist/moguchart-plugin-export.umd.js",
+  "module": "./dist/moguchart-plugin-export.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/moguchart-plugin-export.mjs",
+      "require": "./dist/moguchart-plugin-export.umd.js"
+    }
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0",
+    "@mogura/moguchart-core": "1.1.0"
+  },
+  "dependencies": {
+    "html2canvas-pro": "^2.0.2",
+    "jspdf": "^4.2.1"
+  },
+  "devDependencies": {
+    "@types/node": "^24.12.0",
+    "jsdom": "^27.4.0",
+    "lit": "^3.3.2",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.0",
+    "vitest": "^4.0.16",
+    "@mogura/moguchart-core": "1.1.0"
+  },
+  "scripts": {
+    "build": "vite build && pnpm exec tsc -p tsconfig.build.json",
+    "test": "vitest",
+    "test:run": "vitest run"
+  }
+}