mce 0.22.0 → 0.22.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/index.js +16 -5
  2. package/package.json +6 -2
package/dist/index.js CHANGED
@@ -19421,15 +19421,18 @@ var Workflow_default = /* @__PURE__ */ defineComponent({
19421
19421
  function placeholderImage(svg) {
19422
19422
  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
19423
19423
  }
19424
- var IMAGE_PLACEHOLDER = placeholderImage("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"380\" height=\"280\" viewBox=\"0 0 380 280\" fill=\"none\"><rect width=\"380\" height=\"280\" rx=\"20\" fill=\"#f3f4f6\"/><rect x=\"124\" y=\"92\" width=\"132\" height=\"96\" rx=\"12\" stroke=\"#c8ccd4\" stroke-width=\"6\" stroke-linejoin=\"round\"/><circle cx=\"156\" cy=\"124\" r=\"12\" fill=\"#c8ccd4\"/><path d=\"M132 184l40-40 26 26 22-22 36 36\" stroke=\"#c8ccd4\" stroke-width=\"6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>");
19425
- var VIDEO_PLACEHOLDER = placeholderImage("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"380\" height=\"280\" viewBox=\"0 0 380 280\" fill=\"none\"><rect width=\"380\" height=\"280\" rx=\"20\" fill=\"#f3f4f6\"/><circle cx=\"190\" cy=\"140\" r=\"48\" stroke=\"#c8ccd4\" stroke-width=\"6\"/><path d=\"M178 116l40 24-40 24z\" fill=\"#c8ccd4\"/></svg>");
19424
+ var PLACEHOLDER_ICON_OPACITY = .4;
19425
+ var PLACEHOLDER_BUILDERS = {
19426
+ image: (bg, icon) => `<svg xmlns="http://www.w3.org/2000/svg" width="380" height="280" viewBox="0 0 380 280" fill="none"><rect width="380" height="280" rx="20" fill="${bg}"/><rect x="124" y="92" width="132" height="96" rx="12" stroke="${icon}" stroke-opacity="${PLACEHOLDER_ICON_OPACITY}" stroke-width="6" stroke-linejoin="round"/><circle cx="156" cy="124" r="12" fill="${icon}" fill-opacity="${PLACEHOLDER_ICON_OPACITY}"/><path d="M132 184l40-40 26 26 22-22 36 36" stroke="${icon}" stroke-opacity="${PLACEHOLDER_ICON_OPACITY}" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
19427
+ video: (bg, icon) => `<svg xmlns="http://www.w3.org/2000/svg" width="380" height="280" viewBox="0 0 380 280" fill="none"><rect width="380" height="280" rx="20" fill="${bg}"/><circle cx="190" cy="140" r="48" stroke="${icon}" stroke-opacity="${PLACEHOLDER_ICON_OPACITY}" stroke-width="6"/><path d="M178 116l40 24-40 24z" fill="${icon}" fill-opacity="${PLACEHOLDER_ICON_OPACITY}"/></svg>`
19428
+ };
19426
19429
  var DEFAULT_NODES = {
19427
19430
  text: {
19428
19431
  title: "✍️ Double-click to add text",
19429
19432
  body: ["Or describe it below and let AI write for you."]
19430
19433
  },
19431
- image: { image: IMAGE_PLACEHOLDER },
19432
- video: { image: VIDEO_PLACEHOLDER }
19434
+ image: {},
19435
+ video: {}
19433
19436
  };
19434
19437
  //#endregion
19435
19438
  //#region src/plugins/index.ts
@@ -19481,6 +19484,13 @@ var plugins = [
19481
19484
  ...options.workflowNodes?.[type]
19482
19485
  };
19483
19486
  }
19487
+ function themeRgb(name, fallback) {
19488
+ const el = editor.drawboardDom.value;
19489
+ return `rgb(${el && getComputedStyle(el).getPropertyValue(name).trim() || fallback})`;
19490
+ }
19491
+ function buildPlaceholder(type) {
19492
+ return placeholderImage(PLACEHOLDER_BUILDERS[type](themeRgb("--m-theme-surface", "255, 255, 255"), themeRgb("--m-theme-on-surface", "30, 30, 30")));
19493
+ }
19484
19494
  function buildContent(t) {
19485
19495
  return [...t.title ? [{ fragments: [{
19486
19496
  content: t.title,
@@ -19493,6 +19503,7 @@ var plugins = [
19493
19503
  }
19494
19504
  function createWorkflowNode(type) {
19495
19505
  const t = getTemplate(type);
19506
+ const image = t.image ?? (type in PLACEHOLDER_BUILDERS ? buildPlaceholder(type) : void 0);
19496
19507
  const node = {
19497
19508
  name: t.label,
19498
19509
  style: {
@@ -19508,7 +19519,7 @@ var plugins = [
19508
19519
  inEditorIs: `Workflow${type.charAt(0).toUpperCase()}${type.slice(1)}`
19509
19520
  }
19510
19521
  };
19511
- if (t.image) node.foreground = { image: t.image };
19522
+ if (image) node.foreground = { image };
19512
19523
  else {
19513
19524
  Object.assign(node.style, {
19514
19525
  padding: 28,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "mce",
3
3
  "type": "module",
4
- "version": "0.22.0",
4
+ "version": "0.22.2",
5
5
  "description": "A headless infinite canvas editor framework built on WebGL rendering, supports exporting to image, video, and PPT. Only the ESM.",
6
6
  "author": "wxm",
7
7
  "license": "MIT",
@@ -60,7 +60,7 @@
60
60
  "@vueuse/core": "^14.3.0",
61
61
  "diff": "^9.0.0",
62
62
  "lodash-es": "^4.18.1",
63
- "modern-canvas": "^0.20.1",
63
+ "modern-canvas": "^0.21.2",
64
64
  "modern-font": "^0.6.0",
65
65
  "modern-idoc": "^0.11.8",
66
66
  "modern-text": "^2.0.3",
@@ -68,6 +68,7 @@
68
68
  "yjs": "^13.6.30"
69
69
  },
70
70
  "peerDependencies": {
71
+ "echarts": "^5 || ^6",
71
72
  "lottie-web": "^5",
72
73
  "modern-gif": "^2",
73
74
  "typescript": ">=4.7",
@@ -75,6 +76,9 @@
75
76
  "yoga-layout": "^3"
76
77
  },
77
78
  "peerDependenciesMeta": {
79
+ "echarts": {
80
+ "optional": true
81
+ },
78
82
  "lottie-web": {
79
83
  "optional": true
80
84
  },