@bpmn-nova/studio 0.3.1-preview → 0.3.2-preview

package/dist/shell.js

@@ -1,7 +1,6 @@
 import { createDefaultIconRegistry, hydrateIcons } from './modules/icons/index.js';
 import { createDefaultPaletteRegistry, PalettePanel } from './modules/palette/index.js';
 import { createDefaultPropertiesRegistry, PropertiesPanel } from './modules/properties/index.js';
-import { demoRuntime } from './modules/runtime/index.js';
 import { BpmnViewer } from './modules/viewer/index.js';
 import { ThemeController } from './modules/theme/index.js';
 import { openSvgExportPreview } from './modules/export-svg/index.js';
@@ -29,6 +28,39 @@ function mountSlot(slot, container, context) {
   return null;
 }
 
+const STUDIO_MODES = ['design', 'viewer', 'instance'];
+const STUDIO_SHELL_REGIONS = ['header', 'left', 'right', 'footer'];
+const DEFAULT_STUDIO_SHELL_REGIONS = Object.freeze({
+  header: 'default',
+  left: 'default',
+  right: 'default',
+  footer: 'default',
+});
+
+function normalizeAllowedModes(allowedModes) {
+  if (allowedModes === undefined || allowedModes === null) return [...STUDIO_MODES];
+  if (!Array.isArray(allowedModes)) throw new Error('allowedModes must be an array of Studio modes.');
+  const normalized = [...new Set(allowedModes.filter((mode) => STUDIO_MODES.includes(mode)))];
+  if (!normalized.length || normalized.length !== allowedModes.length) {
+    throw new Error('allowedModes must contain one or more unique design, viewer, or instance modes.');
+  }
+  return normalized;
+}
+
+function normalizeRegions(regions, current = DEFAULT_STUDIO_SHELL_REGIONS) {
+  if (regions === undefined || regions === null) return { ...current };
+  if (!regions || typeof regions !== 'object' || Array.isArray(regions)) {
+    throw new Error('regions must be an object containing header, left, right, or footer modes.');
+  }
+  for (const name of Object.keys(regions)) {
+    if (!STUDIO_SHELL_REGIONS.includes(name)) throw new Error(`Unknown Studio Shell region: ${name}.`);
+    if (!['default', 'hidden'].includes(regions[name])) {
+      throw new Error(`Studio Shell region "${name}" must be "default" or "hidden".`);
+    }
+  }
+  return { ...current, ...regions };
+}
+
 export class BpmnStudioShell {
   constructor({
     container,
@@ -41,8 +73,10 @@ export class BpmnStudioShell {
     rendererOptions = {},
     slots = {},
     layout = null,
-    runtime = demoRuntime(),
+    regions = null,
+    runtime = null,
     mode = 'design',
+    allowedModes = null,
     projection = undefined,
     responsive = false,
     projectionOptions = null,
@@ -54,8 +88,13 @@ export class BpmnStudioShell {
     onThemeChange = null,
   } = {}) {
     if (!container || !studio) throw new Error('BpmnStudioShell requires container and studio.');
+    if (typeof layout === 'function' && regions !== null && regions !== undefined) {
+      throw new Error('BpmnStudioShell options "layout" and "regions" cannot be used together.');
+    }
+    const resolvedAllowedModes = normalizeAllowedModes(allowedModes);
+    const resolvedMode = resolvedAllowedModes.includes(mode) ? mode : resolvedAllowedModes[0];
     const instanceProjection = projection || (responsive ? 'auto' : 'approval');
-    const activeProjection = mode === 'instance' ? instanceProjection : 'standard';
+    const activeProjection = resolvedMode === 'instance' ? instanceProjection : 'standard';
     Object.assign(this, {
       container,
       studio,
@@ -66,24 +105,57 @@ export class BpmnStudioShell {
       rendererOptions,
       slots,
       runtime,
-      mode,
+      mode: resolvedMode,
+      allowedModes: resolvedAllowedModes,
       projection: activeProjection,
       _instanceProjection: instanceProjection,
       responsive,
       projectionOptions,
       runtimeAppearance,
       svgExport: svgExport || rendererOptions.svgExport || null,
+      _usesCustomLayout: typeof layout === 'function',
+      _regions: normalizeRegions(regions),
     });
     this.propertiesRegistry = propertiesRegistry || createDefaultPropertiesRegistry({ studio });
     this.interactions = createInteractionController({ studio, templates: templateRegistry });
     this._cleanups = [];
     this._instances = [];
     this._svgExportPreview = null;
+    this.actions = Object.freeze({
+      undo: () => this.studio.undo(),
+      redo: () => this.studio.redo(),
+      beautify: (options) => {
+        this.studio.commands.beautify(options);
+        requestAnimationFrame(() => this._fitActive());
+      },
+      rerouteEdges: (options) => {
+        this.studio.commands.rerouteEdges(options);
+        requestAnimationFrame(() => this._fitActive());
+      },
+      fitView: () => this.fitView(),
+      validate: () => this.studio.validate(),
+      importXml: (xml, engine) => this.studio.importXml(xml, engine),
+      exportXml: (engine) => this.studio.exportXml(engine),
+      exportSvg: (options) => this.exportSvg(options),
+      openSvgExportPreview: (options) => this.openSvgExportPreview(options),
+    });
     this.container.classList.add('nova-studio-shell');
     this.themeController = new ThemeController({ root: this.container, theme, onChange: onThemeChange });
     this.container.style.setProperty('--nova-left-width', `${leftWidth}px`);
     this.container.style.setProperty('--nova-right-width', `${rightWidth}px`);
-    const context = { studio, iconRegistry, paletteRegistry, propertiesRegistry: this.propertiesRegistry, templateRegistry, contextMenuRegistry, interactions: this.interactions };
+    const context = {
+      studio,
+      shell: this,
+      actions: this.actions,
+      getState: () => this.studio.getState(),
+      subscribe: (listener) => this.studio.subscribe(listener),
+      iconRegistry,
+      paletteRegistry,
+      propertiesRegistry: this.propertiesRegistry,
+      templateRegistry,
+      contextMenuRegistry,
+      interactions: this.interactions,
+    };
     const mount = {
       canvas: (host, options = {}) => this._mountCanvas(host, options),
       palette: (host, options = {}) => this._mountPalette(host, options),
@@ -109,7 +181,7 @@ export class BpmnStudioShell {
       { value: 'design', label: '流程设计', iconId: 'ui.design' },
       { value: 'viewer', label: '流程展示', iconId: 'ui.preview' },
       { value: 'instance', label: '审批轨迹', iconId: 'ui.trace' },
-    ]) {
+    ].filter((item) => this.allowedModes.includes(item.value))) {
       const button = node('button');
       button.type = 'button';
       button.setAttribute('data-mode', item.value);
@@ -144,8 +216,8 @@ export class BpmnStudioShell {
     };
 
     const divider = () => tools.appendChild(node('span', 'nova-studio-tool-divider'));
-    const undo = tool('', '撤销 Ctrl/⌘+Z', () => this.studio.undo(), 'is-icon', 'ui.undo');
-    const redo = tool('', '重做 Ctrl/⌘+Y', () => this.studio.redo(), 'is-icon', 'ui.redo');
+    const undo = tool('', '撤销 Ctrl/⌘+Z', () => this.actions.undo(), 'is-icon', 'ui.undo');
+    const redo = tool('', '重做 Ctrl/⌘+Y', () => this.actions.redo(), 'is-icon', 'ui.redo');
     divider();
     const beautifySplit = node('div', 'nova-studio-beautify-split');
     const beautifyButton = node('button', 'nova-studio-tool nova-studio-beautify is-magic');
@@ -200,7 +272,7 @@ export class BpmnStudioShell {
     });
     beautifySplit.append(beautifyButton, beautifyCaret, beautifyMenu);
     tools.appendChild(beautifySplit);
-    const fit = tool('最佳视图', '适应画布内容', () => this._fitActive(), '', 'ui.fitView');
+    const fit = tool('最佳视图', '适应画布内容', () => this.actions.fitView(), '', 'ui.fitView');
 
     const importInput = node('input', 'nova-studio-import-input');
     importInput.type = 'file';
@@ -220,7 +292,7 @@ export class BpmnStudioShell {
     exportSvgButton.addEventListener('click', () => {
       exportPopover.classList.add('is-hidden');
       exportButton.focus({ preventScroll: true });
-      this.openSvgExportPreview();
+      this.actions.openSvgExportPreview();
     });
     const exportBpmnButton = node('button', 'nova-studio-export-option');
     exportBpmnButton.type = 'button';
@@ -240,7 +312,7 @@ export class BpmnStudioShell {
       const file = importInput.files?.[0];
       if (!file) return;
       try {
-        this.studio.importXml(await file.text(), this.studio.model.engine);
+        this.actions.importXml(await file.text(), this.studio.model.engine);
         this._setStatus('已导入 BPMN 文件', 'ok');
         requestAnimationFrame(() => this._fitActive());
       } catch (error) {
@@ -295,9 +367,13 @@ export class BpmnStudioShell {
     this.container.append(header, body);
     hydrateIcons(this.container, this.iconRegistry);
     Object.assign(this, {
+      _header: header,
+      _headerStart: brand,
       _body: body,
       _left: left,
       _right: right,
+      _canvasColumn: canvasColumn,
+      _footer: statusbar,
       _canvasHost: canvasHost,
       _floatingHead: floatingHead,
       _scopeBack: scopeBack,
@@ -328,8 +404,15 @@ export class BpmnStudioShell {
     else this.palette = mount.palette(left, { canvas: this.canvas });
     if (this.slots.right) this._recordCleanup(mountSlot(this.slots.right, right, { ...context, canvas: this.canvas }));
     else this.properties = mount.properties(right, { canvas: this.canvas });
-    if (this.slots.header) { header.innerHTML = ''; this._recordCleanup(mountSlot(this.slots.header, header, { ...context, canvas: this.canvas })); }
+    if (this.slots.header) {
+      header.innerHTML = '';
+      this._recordCleanup(mountSlot(this.slots.header, header, { ...context, canvas: this.canvas }));
+    } else if (this.slots.headerStart) {
+      brand.innerHTML = '';
+      this._recordCleanup(mountSlot(this.slots.headerStart, brand, { ...context, canvas: this.canvas }));
+    }
     if (this.slots.footer) { statusbar.innerHTML = ''; this._recordCleanup(mountSlot(this.slots.footer, statusbar, { ...context, canvas: this.canvas })); }
+    hydrateIcons(this.container, this.iconRegistry);
     this._offState = this.studio.subscribe((event) => {
       if (event.type === 'historyChanged' || event.type === 'modelChanged') {
         undo.disabled = !this.studio.history.canUndo;
@@ -399,14 +482,13 @@ export class BpmnStudioShell {
 
   _runBeautify(action = null) {
     const settings = this.studio.model.settings || {};
-    if (action === 'routing') this.studio.commands.rerouteEdges({ edgeStyle: 'rounded' });
-    else if (action === 'smooth') this.studio.commands.rerouteEdges({ edgeStyle: 'smooth' });
-    else this.studio.commands.beautify({
+    if (action === 'routing') this.actions.rerouteEdges({ edgeStyle: 'rounded' });
+    else if (action === 'smooth') this.actions.rerouteEdges({ edgeStyle: 'smooth' });
+    else this.actions.beautify({
       direction: action || settings.direction || 'horizontal',
       density: settings.layoutDensity || 'balanced',
       edgeStyle: settings.edgeStyle || 'rounded',
     });
-    requestAnimationFrame(() => this._fitActive());
   }
 
   _syncDensityButtons() {
@@ -416,13 +498,14 @@ export class BpmnStudioShell {
   }
 
   _setMode(mode, { force = false } = {}) {
-    if (!['design', 'viewer', 'instance'].includes(mode)) return;
+    if (!this.allowedModes.includes(mode)) return;
     if (!force && this.mode === mode) return;
     this.mode = mode;
     this.projection = mode === 'instance' ? this._instanceProjection : 'standard';
     this._modeButtons?.forEach((button, value) => button.classList.toggle('is-active', value === mode));
     const readonly = mode !== 'design';
     this._body?.classList.toggle('is-readonly', readonly);
+    this._applyRegions({ fit: false });
     this._floatingHead?.classList.toggle('is-hidden', readonly);
     this._designControls?.forEach((control) => control.classList.toggle('is-hidden-by-mode', readonly));
     this._projectionSwitch?.classList.toggle('is-hidden', mode !== 'instance');
@@ -563,6 +646,34 @@ export class BpmnStudioShell {
     this._syncProjectionButtons();
     if (this.mode === 'instance') this.viewer?.setProjection?.(projection);
   }
+  getRegions() { return Object.freeze({ ...this._regions }); }
+  setRegions(regions) {
+    if (this._usesCustomLayout) {
+      throw new Error('BpmnStudioShell setRegions() is unavailable when a custom layout is active.');
+    }
+    const next = normalizeRegions(regions, this._regions);
+    const changed = STUDIO_SHELL_REGIONS.some((name) => next[name] !== this._regions[name]);
+    this._regions = next;
+    if (changed) this._applyRegions();
+    return this.getRegions();
+  }
+  _applyRegions({ fit = true } = {}) {
+    if (this._usesCustomLayout || !this._body) return;
+    const readonly = this.mode !== 'design';
+    const headerHidden = this._regions.header === 'hidden';
+    const leftHidden = readonly || this._regions.left === 'hidden';
+    const rightHidden = this._regions.right === 'hidden';
+    const footerHidden = this._regions.footer === 'hidden';
+    this.container.classList.toggle('is-header-hidden', headerHidden);
+    this._body.classList.toggle('is-left-hidden', leftHidden);
+    this._body.classList.toggle('is-right-hidden', rightHidden);
+    this._canvasColumn?.classList.toggle('is-footer-hidden', footerHidden);
+    if (this._header) this._header.hidden = headerHidden;
+    if (this._left) this._left.hidden = leftHidden;
+    if (this._right) this._right.hidden = rightHidden;
+    if (this._footer) this._footer.hidden = footerHidden;
+    if (fit) requestAnimationFrame(() => this._fitActive());
+  }
   setTheme(theme) { return this.themeController.setTheme(theme); }
   setThemeMode(mode) { return this.themeController.setMode(mode); }
   getThemeState() { return this.themeController.getState(); }
@@ -618,7 +729,7 @@ export class BpmnStudioShell {
   }
 
   _showValidationStatus() {
-    const issues = this.studio.validate();
+    const issues = this.actions.validate();
     if (!issues.length) this._setStatus('校验通过：流程结构正常', 'ok');
     else {
       const errors = issues.filter((issue) => issue.level === 'error').length;
@@ -628,7 +739,7 @@ export class BpmnStudioShell {
   }
 
   _exportBpmn() {
-    const blob = new Blob([this.studio.exportXml()], { type: 'application/xml;charset=utf-8' });
+    const blob = new Blob([this.actions.exportXml()], { type: 'application/xml;charset=utf-8' });
     const url = URL.createObjectURL(blob);
     const anchor = node('a');
     anchor.href = url;

package/dist/styles.css

@@ -1141,6 +1141,8 @@ textarea.property-control { resize: vertical; }
 
 /* @bpmn-nova/internal/studio */
 .nova-studio-shell { --nova-left-width: 244px; --nova-right-width: 360px; --nova-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; --nova-font-size-xs: 10px; --nova-font-size-sm: 12px; --nova-font-size-md: 14px; --nova-font-size-lg: 16px; --nova-font-weight-regular: 400; --nova-font-weight-medium: 500; --nova-font-weight-semibold: 600; --nova-font-weight-bold: 700; position: relative; isolation: isolate; width: 100%; height: 100%; min-height: 520px; overflow: hidden; display: grid; grid-template-rows: 58px minmax(0, 1fr); color: var(--nova-color-text, #263148); background: var(--nova-color-canvas, #f6f7fb); font-family: var(--nova-font-family); }
+.nova-studio-shell.is-header-hidden { grid-template-rows: minmax(0, 1fr); }
+.nova-studio-header[hidden], .nova-studio-left[hidden], .nova-studio-right[hidden], .nova-studio-statusbar[hidden] { display: none !important; }
 .nova-studio-header { min-width: 0; border-bottom: 1px solid var(--nova-color-divider, #e4e8f0); background: var(--nova-color-surface, #fff); display: grid; grid-template-columns: minmax(180px, auto) auto minmax(0, 1fr); align-items: center; gap: 18px; padding: 0 12px 0 14px; }
 .nova-studio-brand { min-width: 0; display: flex; align-items: center; gap: 10px; }
 .nova-studio-brand-mark { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--nova-color-text-inverse, #fff); background: linear-gradient(145deg, var(--nova-color-primary, #5362da), var(--nova-color-primary-hover)); font-size: var(--nova-font-size-md); font-weight: var(--nova-font-weight-bold); box-shadow: var(--nova-shadow-sm); }
@@ -1194,7 +1196,11 @@ textarea.property-control { resize: vertical; }
 .nova-studio-beautify-action-icon > .nova-icon-svg { width: 14px; height: 14px; }
 .nova-studio-beautify-action strong { font-size: var(--nova-font-size-sm); font-weight: var(--nova-font-weight-semibold); line-height: 18px; }.nova-studio-beautify-action small { color: #778195; color: var(--nova-color-text-muted, #778195); font-size: var(--nova-font-size-xs); line-height: 14px; }
 .nova-studio-body { min-width: 0; min-height: 0; display: grid; grid-template-columns: var(--nova-left-width) minmax(320px, 1fr) var(--nova-right-width); }
+.nova-studio-body.is-left-hidden { grid-template-columns: minmax(320px, 1fr) var(--nova-right-width); }
+.nova-studio-body.is-right-hidden { grid-template-columns: var(--nova-left-width) minmax(320px, 1fr); }
+.nova-studio-body.is-left-hidden.is-right-hidden { grid-template-columns: minmax(320px, 1fr); }
 .nova-studio-body.is-readonly { grid-template-columns: minmax(320px, 1fr) var(--nova-right-width); }
+.nova-studio-body.is-readonly.is-right-hidden { grid-template-columns: minmax(320px, 1fr); }
 .nova-studio-body.is-readonly .nova-studio-left { display: none; }
 .nova-studio-left, .nova-studio-right, .nova-studio-canvas-column, .nova-studio-canvas { min-width: 0; min-height: 0; overflow: hidden; }
 .nova-studio-left { border-right: 1px solid var(--nova-color-divider, #e4e8f0); background: var(--nova-color-surface, #fff); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
@@ -1206,6 +1212,7 @@ textarea.property-control { resize: vertical; }
 .nova-studio-left::-webkit-scrollbar-thumb:hover, .nova-studio-right::-webkit-scrollbar-thumb:hover { background: #c1c9d5; background: var(--nova-color-text-muted); }
 .nova-studio-left::-webkit-scrollbar-button, .nova-studio-right::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
 .nova-studio-canvas-column { display: grid; grid-template-rows: minmax(0, 1fr) 35px; background: var(--nova-color-canvas, #f7f8fc); }
+.nova-studio-canvas-column.is-footer-hidden { grid-template-rows: minmax(0, 1fr); }
 .nova-studio-canvas-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
 .nova-studio-canvas { position: relative; }
 .nova-studio-canvas-stage > .nova-studio-canvas { width: 100%; height: 100%; }
@@ -1422,6 +1429,7 @@ textarea.property-control { resize: vertical; }
 }
 @media (max-width: 720px) {
   .nova-studio-shell { grid-template-rows: 54px minmax(0,1fr); }
+  .nova-studio-shell.is-header-hidden { grid-template-rows: minmax(0, 1fr); }
   .nova-studio-header { grid-template-columns: auto minmax(0,1fr); padding-left: 9px; }
   .nova-studio-brand-copy { display: none; }
   .nova-studio-body { grid-template-columns: 1fr; }