@mce/chart 0.24.4

package/dist/index.css

@@ -0,0 +1,173 @@
+.m-chart-editor {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.m-chart-editor__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 18px 20px;
+  font-size: 18px;
+  font-weight: 700;
+}
+.m-chart-editor__header svg {
+  width: 22px;
+  height: 22px;
+}
+.m-chart-editor__title {
+  flex: 1;
+}
+.m-chart-editor__close {
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: rgba(var(--m-theme-on-surface, 30 30 30), 0.5);
+  display: flex;
+  padding: 4px;
+  border-radius: 6px;
+}
+.m-chart-editor__close:hover {
+  background: rgba(var(--m-theme-on-surface, 30 30 30), 0.08);
+}
+.m-chart-editor__close svg {
+  width: 20px;
+  height: 20px;
+}
+.m-chart-editor__body {
+  flex: 1;
+  display: flex;
+  gap: 24px;
+  padding: 0 20px 8px;
+  min-height: 0;
+  overflow: auto;
+}
+.m-chart-editor__grid-wrap {
+  flex: 1;
+  overflow: auto;
+  border: 1px solid rgba(var(--m-theme-on-surface, 30 30 30), 0.08);
+  border-radius: 8px;
+}
+.m-chart-editor__grid {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 14px;
+}
+.m-chart-editor__grid th, .m-chart-editor__grid td {
+  border: 1px solid rgba(var(--m-theme-on-surface, 30 30 30), 0.08);
+  text-align: center;
+  padding: 0;
+  min-width: 96px;
+  height: 38px;
+}
+.m-chart-editor__grid thead th {
+  background: rgba(var(--m-theme-on-surface, 30 30 30), 0.03);
+  font-weight: 600;
+  color: rgba(var(--m-theme-on-surface, 30 30 30), 0.55);
+}
+.m-chart-editor__grid__corner {
+  min-width: 44px !important;
+  width: 44px;
+}
+.m-chart-editor__rownum {
+  min-width: 44px !important;
+  width: 44px;
+  background: rgba(var(--m-theme-on-surface, 30 30 30), 0.03);
+  color: rgba(var(--m-theme-on-surface, 30 30 30), 0.55);
+  font-weight: 600;
+}
+.m-chart-editor__grid input {
+  width: 100%;
+  height: 100%;
+  border: none;
+  outline: none;
+  background: none;
+  text-align: center;
+  font: inherit;
+  color: inherit;
+  padding: 0 8px;
+  box-sizing: border-box;
+}
+.m-chart-editor__grid input:focus {
+  box-shadow: inset 0 0 0 2px rgb(var(--m-theme-primary, 30 200 230));
+}
+.m-chart-editor__grid input.is-header {
+  font-weight: 600;
+}
+.m-chart-editor__side {
+  width: 380px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-top: 4px;
+}
+.m-chart-editor__field {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border: 1px solid rgba(var(--m-theme-on-surface, 30 30 30), 0.12);
+  border-radius: 8px;
+  padding: 0 12px;
+  height: 44px;
+}
+.m-chart-editor__field > span {
+  flex-shrink: 0;
+  color: rgba(var(--m-theme-on-surface, 30 30 30), 0.55);
+  font-size: 14px;
+}
+.m-chart-editor__field input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: none;
+  font: inherit;
+  color: inherit;
+  height: 100%;
+}
+.m-chart-editor__preview {
+  flex: 1;
+  min-height: 280px;
+  border: 1px solid rgba(var(--m-theme-on-surface, 30 30 30), 0.08);
+  border-radius: 8px;
+  padding: 8px;
+}
+.m-chart-editor__canvas {
+  width: 100%;
+  height: 100%;
+  min-height: 264px;
+}
+.m-chart-editor__preview-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: rgba(var(--m-theme-on-surface, 30 30 30), 0.4);
+  font-size: 13px;
+}
+.m-chart-editor__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 16px 20px;
+}
+.m-chart-editor__btn {
+  border: 1px solid rgba(var(--m-theme-on-surface, 30 30 30), 0.15);
+  background: rgb(var(--m-theme-surface, 255 255 255));
+  color: inherit;
+  border-radius: 8px;
+  padding: 0 20px;
+  height: 40px;
+  font-size: 14px;
+  cursor: pointer;
+}
+.m-chart-editor__btn:hover {
+  background: rgba(var(--m-theme-on-surface, 30 30 30), 0.04);
+}
+.m-chart-editor__btn--primary {
+  border: none;
+  background: rgb(var(--m-theme-primary, 30 200 230));
+  color: rgb(var(--m-theme-on-primary, 255 255 255));
+  font-weight: 600;
+}/*$vite$:1*/

package/dist/index.js

@@ -0,0 +1,441 @@
+import { Dialog, Icon, definePlugin, useEditor } from "mce";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, onBeforeUnmount, openBlock, ref, renderList, toDisplayString, unref, vModelText, vShow, watch, withCtx, withDirectives } from "vue";
+//#region src/ChartEditor.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "m-chart-editor" };
+var _hoisted_2 = { class: "m-chart-editor__header" };
+var _hoisted_3 = { class: "m-chart-editor__body" };
+var _hoisted_4 = { class: "m-chart-editor__grid-wrap" };
+var _hoisted_5 = { class: "m-chart-editor__grid" };
+var _hoisted_6 = { class: "m-chart-editor__rownum" };
+var _hoisted_7 = ["value", "onInput"];
+var _hoisted_8 = { class: "m-chart-editor__side" };
+var _hoisted_9 = { class: "m-chart-editor__field" };
+var _hoisted_10 = { class: "m-chart-editor__field" };
+var _hoisted_11 = { class: "m-chart-editor__field" };
+var _hoisted_12 = { class: "m-chart-editor__preview" };
+var _hoisted_13 = {
+	key: 0,
+	class: "m-chart-editor__preview-empty"
+};
+var MIN_ROWS = 9;
+var MIN_COLS = 3;
+//#endregion
+//#region src/ChartEditor.vue
+var ChartEditor_default = /* @__PURE__ */ defineComponent({
+	__name: "ChartEditor",
+	setup(__props) {
+		const { state, elementSelection } = useEditor();
+		const COL_LETTERS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
+		const el = computed(() => elementSelection.value[0]);
+		const active = computed(() => state.value === "chartEditing" && Boolean(el.value?.chart?.isValid?.()));
+		const chartType = ref("column");
+		const title = ref("");
+		const xAxisTitle = ref("");
+		const yAxisTitle = ref("");
+		const grid = ref([]);
+		function emptyGrid(rows = MIN_ROWS, cols = MIN_COLS) {
+			return Array.from({ length: rows }, () => Array.from({ length: cols }, () => ""));
+		}
+		function load() {
+			const c = el.value?.chart?.toJSON?.() ?? {};
+			chartType.value = c.type ?? "column";
+			title.value = c.title ?? "";
+			xAxisTitle.value = c.categoryAxis?.title ?? "";
+			yAxisTitle.value = c.valueAxis?.title ?? "";
+			const cats = c.categories ?? [];
+			const series = c.series ?? [];
+			const g = emptyGrid(Math.max(cats.length + 2, MIN_ROWS), Math.max(series.length + 2, MIN_COLS));
+			g[0][0] = "类别";
+			series.forEach((s, i) => {
+				g[0][i + 1] = s.name ?? `系列 ${i + 1}`;
+			});
+			cats.forEach((cat, r) => {
+				g[r + 1][0] = String(cat);
+			});
+			series.forEach((s, ci) => {
+				(s.values ?? []).forEach((v, r) => {
+					g[r + 1][ci + 1] = String(v);
+				});
+			});
+			grid.value = g;
+		}
+		watch(active, (on) => {
+			if (on) {
+				load();
+				nextTick(renderPreview);
+			}
+		});
+		function ensureSpare() {
+			const g = grid.value;
+			if (g.some((row) => row[row.length - 1].trim() !== "")) g.forEach((row) => row.push(""));
+			if (g[g.length - 1].some((c) => c.trim() !== "")) g.push(Array.from({ length: g[0].length }, () => ""));
+		}
+		function onCell(r, c, value) {
+			grid.value[r][c] = value;
+			ensureSpare();
+			renderPreview();
+		}
+		function clearData() {
+			const g = grid.value;
+			for (let r = 1; r < g.length; r++) for (let c = 0; c < g[r].length; c++) g[r][c] = "";
+			renderPreview();
+		}
+		function close() {
+			state.value = void 0;
+		}
+		function parseGrid() {
+			const g = grid.value;
+			const categories = [];
+			const rowIdx = [];
+			for (let r = 1; r < g.length; r++) {
+				const v = (g[r][0] ?? "").trim();
+				if (v) {
+					categories.push(v);
+					rowIdx.push(r);
+				}
+			}
+			const series = [];
+			for (let c = 1; c < g[0].length; c++) {
+				const name = (g[0][c] ?? "").trim();
+				const values = rowIdx.map((r) => {
+					const n = Number((g[r][c] ?? "").trim());
+					return Number.isFinite(n) ? n : 0;
+				});
+				if (name || values.some((v) => v !== 0)) series.push({
+					name: name || `系列 ${c}`,
+					values
+				});
+			}
+			return {
+				categories,
+				series
+			};
+		}
+		function apply() {
+			const node = el.value;
+			if (!node) return;
+			const { categories, series } = parseGrid();
+			const base = node.chart?.toJSON?.() ?? {};
+			node.chart = {
+				...base,
+				type: chartType.value,
+				categories,
+				series,
+				title: title.value || void 0,
+				categoryAxis: {
+					...base.categoryAxis,
+					title: xAxisTitle.value || void 0
+				},
+				valueAxis: {
+					...base.valueAxis,
+					title: yAxisTitle.value || void 0
+				}
+			};
+			node.requestDraw?.();
+			close();
+		}
+		const previewEl = ref();
+		const previewError = ref(false);
+		let echartsLib;
+		let chartInstance;
+		function buildOption() {
+			const { categories, series } = parseGrid();
+			const t = chartType.value;
+			if (t === "pie" || t === "doughnut") return {
+				title: {
+					text: title.value,
+					textStyle: { fontSize: 13 }
+				},
+				tooltip: { trigger: "item" },
+				series: [{
+					type: "pie",
+					radius: t === "doughnut" ? ["40%", "70%"] : "70%",
+					data: categories.map((c, i) => ({
+						name: c,
+						value: series[0]?.values[i] ?? 0
+					}))
+				}]
+			};
+			const horizontal = t === "bar";
+			const isArea = t === "area";
+			const etype = t === "line" || isArea ? "line" : "bar";
+			const catAxis = {
+				type: "category",
+				data: categories,
+				name: xAxisTitle.value || void 0
+			};
+			const valAxis = {
+				type: "value",
+				name: yAxisTitle.value || void 0
+			};
+			return {
+				title: {
+					text: title.value,
+					textStyle: { fontSize: 13 }
+				},
+				tooltip: { trigger: "axis" },
+				legend: series.length > 1 ? { bottom: 0 } : void 0,
+				grid: {
+					left: 48,
+					right: 16,
+					top: 36,
+					bottom: 32
+				},
+				xAxis: horizontal ? valAxis : catAxis,
+				yAxis: horizontal ? catAxis : valAxis,
+				series: series.map((s) => ({
+					name: s.name,
+					type: etype,
+					data: s.values,
+					areaStyle: isArea ? {} : void 0
+				}))
+			};
+		}
+		async function renderPreview() {
+			if (!active.value || !previewEl.value) return;
+			try {
+				if (!echartsLib) echartsLib = await import("echarts");
+				if (!chartInstance) chartInstance = echartsLib.init(previewEl.value);
+				chartInstance.setOption(buildOption(), true);
+				previewError.value = false;
+			} catch {
+				previewError.value = true;
+			}
+		}
+		watch([
+			title,
+			xAxisTitle,
+			yAxisTitle,
+			chartType
+		], renderPreview);
+		function disposePreview() {
+			chartInstance?.dispose?.();
+			chartInstance = void 0;
+		}
+		watch(active, (on) => {
+			if (!on) disposePreview();
+		});
+		onBeforeUnmount(disposePreview);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Dialog), {
+				"model-value": active.value,
+				width: "min(1040px, 92vw)",
+				"onUpdate:modelValue": _cache[3] || (_cache[3] = (v) => {
+					if (!v) close();
+				})
+			}, {
+				default: withCtx(() => [createElementVNode("div", _hoisted_1, [
+					createElementVNode("header", _hoisted_2, [
+						createVNode(unref(Icon), { icon: "$chartBar" }),
+						_cache[4] || (_cache[4] = createElementVNode("span", { class: "m-chart-editor__title" }, "图表数据", -1)),
+						createElementVNode("button", {
+							class: "m-chart-editor__close",
+							type: "button",
+							onClick: close
+						}, [createVNode(unref(Icon), { icon: "$close" })])
+					]),
+					createElementVNode("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [createElementVNode("table", _hoisted_5, [createElementVNode("thead", null, [createElementVNode("tr", null, [_cache[5] || (_cache[5] = createElementVNode("th", { class: "m-chart-editor__corner" }, null, -1)), (openBlock(true), createElementBlock(Fragment, null, renderList(grid.value[0], (_, c) => {
+						return openBlock(), createElementBlock("th", { key: c }, toDisplayString(unref(COL_LETTERS)[c]), 1);
+					}), 128))])]), createElementVNode("tbody", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(grid.value, (row, r) => {
+						return openBlock(), createElementBlock("tr", { key: r }, [createElementVNode("td", _hoisted_6, toDisplayString(r + 1), 1), (openBlock(true), createElementBlock(Fragment, null, renderList(row, (cell, c) => {
+							return openBlock(), createElementBlock("td", { key: c }, [createElementVNode("input", {
+								value: cell,
+								class: normalizeClass({ "is-header": r === 0 }),
+								onInput: ($event) => onCell(r, c, $event.target.value)
+							}, null, 42, _hoisted_7)]);
+						}), 128))]);
+					}), 128))])])]), createElementVNode("div", _hoisted_8, [
+						createElementVNode("label", _hoisted_9, [_cache[6] || (_cache[6] = createElementVNode("span", null, "主标题", -1)), withDirectives(createElementVNode("input", {
+							"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => title.value = $event),
+							placeholder: "请输入主标题"
+						}, null, 512), [[vModelText, title.value]])]),
+						createElementVNode("label", _hoisted_10, [_cache[7] || (_cache[7] = createElementVNode("span", null, "X轴标题", -1)), withDirectives(createElementVNode("input", {
+							"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => xAxisTitle.value = $event),
+							placeholder: "请输入X轴标题"
+						}, null, 512), [[vModelText, xAxisTitle.value]])]),
+						createElementVNode("label", _hoisted_11, [_cache[8] || (_cache[8] = createElementVNode("span", null, "Y轴标题", -1)), withDirectives(createElementVNode("input", {
+							"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => yAxisTitle.value = $event),
+							placeholder: "请输入Y轴标题"
+						}, null, 512), [[vModelText, yAxisTitle.value]])]),
+						createElementVNode("div", _hoisted_12, [withDirectives(createElementVNode("div", {
+							ref_key: "previewEl",
+							ref: previewEl,
+							class: "m-chart-editor__canvas"
+						}, null, 512), [[vShow, !previewError.value]]), previewError.value ? (openBlock(), createElementBlock("div", _hoisted_13, " 预览不可用（未安装 echarts） ")) : createCommentVNode("", true)])
+					])]),
+					createElementVNode("footer", { class: "m-chart-editor__footer" }, [createElementVNode("button", {
+						class: "m-chart-editor__btn",
+						type: "button",
+						onClick: clearData
+					}, " 清空数据 "), createElementVNode("button", {
+						class: "m-chart-editor__btn m-chart-editor__btn--primary",
+						type: "button",
+						onClick: apply
+					}, " 确认修改 ")])
+				])]),
+				_: 1
+			}, 8, ["model-value"]);
+		};
+	}
+});
+//#endregion
+//#region src/create.ts
+/** A chart backed by the native `chart` element property (column/line/pie/…). */
+function createChartElement(type = "column", options = {}) {
+	const { width = 360, height = 240, categories = [
+		"一月",
+		"二月",
+		"三月",
+		"四月",
+		"五月"
+	], series = [{
+		name: "系列 1",
+		values: [
+			40,
+			70,
+			55,
+			90,
+			60
+		]
+	}] } = options;
+	return {
+		style: {
+			width,
+			height
+		},
+		chart: {
+			type,
+			categories,
+			series,
+			legend: "bottom"
+		},
+		meta: {
+			inPptIs: "Shape",
+			inCanvasIs: "Element2D",
+			inEditorIs: "Chart"
+		}
+	};
+}
+//#endregion
+//#region src/plugin.ts
+function plugin() {
+	return definePlugin((editor) => {
+		const { elementSelection, addElement, activateTool, registerToolbeltShapeItem, registerIcon, registerEnterHandler, registerEditingState } = editor;
+		registerIcon("chartBar", "M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z");
+		registerIcon("chartLine", "M3.5,18.49L9.5,12.48L13.5,16.48L22,6.92L20.59,5.51L13.5,13.47L9.5,9.47L2,16.99L3.5,18.49Z");
+		registerIcon("chartPie", "M11,2V22C5.9,21.5 2,17.2 2,12C2,6.8 5.9,2.5 11,2M13,2V11H22C21.5,6.2 17.8,2.5 13,2M13,13V22C17.7,21.5 21.5,17.8 22,13H13Z");
+		registerToolbeltShapeItem("chartBar");
+		registerToolbeltShapeItem("chartLine");
+		registerToolbeltShapeItem("chartPie");
+		registerEnterHandler((el, ed) => {
+			if (el.chart?.isValid?.()) {
+				ed.state.value = "chartEditing";
+				return true;
+			}
+			return false;
+		});
+		registerEditingState("chartEditing");
+		function getChart(node) {
+			const el = node ?? elementSelection.value[0];
+			return el?.chart?.toJSON?.() ?? el?.chart;
+		}
+		function patch(patchData, node) {
+			const el = node ?? elementSelection.value[0];
+			if (!el?.chart) return;
+			el.chart = {
+				...el.chart.toJSON?.() ?? {},
+				...patchData
+			};
+			el.requestDraw?.();
+		}
+		function setChartType(type, node) {
+			patch({ type }, node);
+		}
+		function setChartData(data, node) {
+			const next = {};
+			if (data.categories !== void 0) next.categories = data.categories;
+			if (data.series !== void 0) next.series = data.series;
+			patch(next, node);
+		}
+		function setChartOptions(options, node) {
+			const next = {};
+			if (options.legend !== void 0) next.legend = options.legend;
+			if (options.title !== void 0) next.title = options.title;
+			patch(next, node);
+		}
+		return {
+			name: "mce:chart",
+			commands: [
+				{
+					command: "getChart",
+					handle: getChart
+				},
+				{
+					command: "setChartType",
+					handle: setChartType
+				},
+				{
+					command: "setChartData",
+					handle: setChartData
+				},
+				{
+					command: "setChartOptions",
+					handle: setChartOptions
+				}
+			],
+			tools: [
+				{
+					name: "chartBar",
+					handle: (start) => {
+						addElement(createChartElement("column"), {
+							position: start,
+							active: true
+						});
+						return { end: () => activateTool(void 0) };
+					}
+				},
+				{
+					name: "chartLine",
+					handle: (start) => {
+						addElement(createChartElement("line"), {
+							position: start,
+							active: true
+						});
+						return { end: () => activateTool(void 0) };
+					}
+				},
+				{
+					name: "chartPie",
+					handle: (start) => {
+						addElement(createChartElement("pie"), {
+							position: start,
+							active: true
+						});
+						return { end: () => activateTool(void 0) };
+					}
+				}
+			],
+			components: [{
+				type: "overlay",
+				component: ChartEditor_default
+			}],
+			messages: {
+				en: {
+					chartBar: "Bar Chart",
+					chartLine: "Line Chart",
+					chartPie: "Pie Chart"
+				},
+				zhHans: {
+					chartBar: "柱状图",
+					chartLine: "折线图",
+					chartPie: "饼图"
+				}
+			}
+		};
+	});
+}
+//#endregion
+//#region src/index.ts
+var src_default = plugin;
+//#endregion
+export { createChartElement, src_default as default, plugin };

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@mce/chart",
+  "type": "module",
+  "version": "0.24.4",
+  "description": "Chart plugin for mce",
+  "author": "wxm",
+  "license": "MIT",
+  "homepage": "https://github.com/qq15725/mce",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/qq15725/mce.git"
+  },
+  "bugs": {
+    "url": "https://github.com/qq15725/mce/issues"
+  },
+  "keywords": [
+    "mce",
+    "chart",
+    "plugin"
+  ],
+  "sideEffects": true,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    },
+    "./*.mjs": "./*.js",
+    "./*": "./*"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "browser": "./dist/index.js",
+  "typings": "dist/index.d.ts",
+  "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "*",
+        "dist/*",
+        "dist/*.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "echarts": "^6.1.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.7",
+    "mce": "0.24.4"
+  },
+  "peerDependencies": {
+    "mce": "^0",
+    "vue": "^3.5.0"
+  },
+  "scripts": {
+    "build:code": "vite build",
+    "build:tsc": "NODE_ENV=production vue-tsc --emitDeclarationOnly --project tsconfig.json",
+    "build": "pnpm build:code && pnpm build:tsc",
+    "lint": "eslint src",
+    "typecheck": "vue-tsc --noEmit --project tsconfig.json"
+  }
+}