@flowgram-vue/panel-manager-plugin 0.2.0

package/dist/index.cjs

@@ -0,0 +1,757 @@
+'use strict';
+
+var core = require('@flowgram-vue/core');
+var vanilla = require('zustand/vanilla');
+var nanoid = require('nanoid');
+var inversify = require('inversify');
+var vue = require('vue');
+var utils = require('@flowgram-vue/utils');
+var clsx = require('clsx');
+var shallow = require('zustand/shallow');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var PanelRestore = /* @__PURE__ */ Symbol("PanelRestore");
+var PanelRestoreImpl = class {
+  constructor() {
+    this.map = /* @__PURE__ */ new Map();
+  }
+  store(k, v) {
+    this.map.set(k, v);
+  }
+  restore(k) {
+    return this.map.get(k);
+  }
+};
+PanelRestoreImpl = __decorateClass([
+  inversify.injectable()
+], PanelRestoreImpl);
+var ResizeBarInner = vue.defineComponent({
+  name: "ResizeBar",
+  props: {
+    size: { type: Number, required: true },
+    direction: { type: String, default: void 0 },
+    onResize: { type: Function, required: true }
+  },
+  setup(props) {
+    const currentPoint = vue.ref(null);
+    const isDragging = vue.ref(false);
+    const isHovered = vue.ref(false);
+    const isVertical = () => props.direction === "vertical";
+    const onMouseMove = (e) => {
+      const delta = currentPoint.value - (isVertical() ? e.clientX : e.clientY);
+      props.onResize(props.size + delta);
+    };
+    const onMouseUp = () => {
+      currentPoint.value = null;
+      document.body.removeEventListener("mouseup", onMouseUp);
+      document.body.removeEventListener("mousemove", onMouseMove);
+      isDragging.value = false;
+    };
+    vue.onBeforeUnmount(() => {
+      document.body.removeEventListener("mouseup", onMouseUp);
+      document.body.removeEventListener("mousemove", onMouseMove);
+    });
+    return () => vue.h(
+      "div",
+      {
+        onMousedown: (e) => {
+          currentPoint.value = isVertical() ? e.clientX : e.clientY;
+          e.stopPropagation();
+          e.preventDefault();
+          isDragging.value = true;
+          document.body.addEventListener("mouseup", onMouseUp);
+          document.body.addEventListener("mousemove", onMouseMove);
+        },
+        onMouseenter: () => {
+          isHovered.value = true;
+        },
+        onMouseleave: () => {
+          isHovered.value = false;
+        },
+        style: {
+          position: "absolute",
+          top: "0",
+          left: "0",
+          zIndex: 999,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          pointerEvents: "auto",
+          ...isVertical() ? {
+            cursor: "ew-resize",
+            height: "100%",
+            marginLeft: "-5px",
+            width: "10px"
+          } : {
+            cursor: "ns-resize",
+            width: "100%",
+            marginTop: "-5px",
+            height: "10px"
+          }
+        }
+      },
+      [
+        vue.h("div", {
+          style: {
+            ...isVertical() ? {
+              width: "3px",
+              height: "100%"
+            } : {
+              height: "3px",
+              width: "100%"
+            },
+            backgroundColor: isDragging.value || isHovered.value ? "var(--g-playground-line)" : "transparent"
+          }
+        })
+      ]
+    );
+  }
+});
+function ResizeBar(props) {
+  return vue.h(ResizeBarInner, props);
+}
+
+// src/services/panel-config.ts
+var PanelManagerConfig = /* @__PURE__ */ Symbol("PanelManagerConfig");
+var defineConfig = (config) => {
+  const defaultConfig = {
+    right: {
+      max: 1
+    },
+    bottom: {
+      max: 1
+    },
+    dockedRight: {
+      max: 1
+    },
+    dockedBottom: {
+      max: 1
+    },
+    factories: [],
+    autoResize: true,
+    layerProps: {},
+    resizeBarRender: ResizeBar,
+    getPopupContainer: (ctx) => ctx.playground.node.parentNode
+  };
+  return {
+    ...defaultConfig,
+    ...config
+  };
+};
+
+// src/utils.ts
+var merge = (...objs) => {
+  const result = {};
+  for (const obj of objs) {
+    if (!obj || typeof obj !== "object") continue;
+    for (const key of Object.keys(obj)) {
+      const value = obj[key];
+      if (result[key] === void 0) {
+        result[key] = value;
+      }
+    }
+  }
+  return result;
+};
+
+// src/services/panel-factory.ts
+var PanelEntityFactory = /* @__PURE__ */ Symbol("PanelEntityFactory");
+var PanelEntityFactoryConstant = /* @__PURE__ */ Symbol("PanelEntityFactoryConstant");
+var PanelEntityConfigConstant = /* @__PURE__ */ Symbol("PanelEntityConfigConstant");
+var PANEL_SIZE_DEFAULT = 400;
+var PanelEntity = class {
+  constructor() {
+    this.initialized = false;
+    /** 实例唯一标识 */
+    this.id = nanoid.nanoid();
+    /** 渲染缓存 */
+    this.node = null;
+  }
+  get area() {
+    return this.config.area;
+  }
+  get mode() {
+    return this.config.area.startsWith("docked") ? "docked" : "floating";
+  }
+  get key() {
+    return this.factory.key;
+  }
+  get renderer() {
+    if (!this.node) {
+      this.node = this.factory.render(this.config.props);
+    }
+    return this.node;
+  }
+  get fullscreen() {
+    return this.store.getState().fullscreen;
+  }
+  set fullscreen(next) {
+    this.store.setState({ fullscreen: next });
+  }
+  get resizable() {
+    if (this.fullscreen) {
+      return false;
+    }
+    return this.factory.resize !== void 0 ? this.factory.resize : this.globalConfig.autoResize;
+  }
+  get keepDOM() {
+    return this.factory.keepDOM;
+  }
+  get visible() {
+    return this.store.getState().visible;
+  }
+  set visible(next) {
+    this.store.setState({ visible: next });
+  }
+  get layer() {
+    return document.querySelector(
+      this.mode ? ".gedit-flow-panel-layer-wrap-docked" : ".gedit-flow-panel-layer-wrap-floating"
+    );
+  }
+  init() {
+    if (this.initialized) {
+      return;
+    }
+    this.initialized = true;
+    const cache = this.restore.restore(this.key);
+    const initialState = merge(
+      {
+        size: this.config.defaultSize,
+        fullscreen: this.config.fullscreen
+      },
+      cache ? cache : {},
+      {
+        size: this.factory.defaultSize || PANEL_SIZE_DEFAULT,
+        fullscreen: this.factory.fullscreen || false,
+        ...this.factory.keepDOM ? { visible: true } : {}
+      }
+    );
+    this.store = vanilla.createStore(() => initialState);
+  }
+  mergeState() {
+  }
+  dispose() {
+    this.restore.store(this.key, this.store.getState());
+  }
+};
+__decorateClass([
+  inversify.inject(PanelRestore)
+], PanelEntity.prototype, "restore", 2);
+__decorateClass([
+  inversify.inject(PanelEntityFactoryConstant)
+], PanelEntity.prototype, "factory", 2);
+__decorateClass([
+  inversify.inject(PanelEntityConfigConstant)
+], PanelEntity.prototype, "config", 2);
+__decorateClass([
+  inversify.inject(PanelManagerConfig)
+], PanelEntity.prototype, "globalConfig", 2);
+PanelEntity = __decorateClass([
+  inversify.injectable()
+], PanelEntity);
+exports.PanelManager = class PanelManager {
+  constructor() {
+    this.panelRegistry = /* @__PURE__ */ new Map();
+    this.panels = /* @__PURE__ */ new Map();
+    this.onPanelsChangeEvent = new utils.Emitter();
+    this.onPanelsChange = this.onPanelsChangeEvent.event;
+  }
+  init() {
+    this.config.factories.forEach((factory) => this.register(factory));
+  }
+  /** registry panel factory */
+  register(factory) {
+    this.panelRegistry.set(factory.key, factory);
+  }
+  /** open panel */
+  open(key, area = "right", options) {
+    const factory = this.panelRegistry.get(key);
+    if (!factory) {
+      return;
+    }
+    const sameKeyPanels = this.getPanels(area).filter((p) => p.key === key);
+    if (factory.keepDOM && sameKeyPanels.length) {
+      const [panel] = sameKeyPanels;
+      this.panels.delete(panel.id);
+      this.panels.set(panel.id, panel);
+      panel.visible = true;
+    } else {
+      if (!factory.allowDuplicates && sameKeyPanels.length) {
+        sameKeyPanels.forEach((p) => this.remove(p.id));
+      }
+      const panel = this.createPanel({
+        factory,
+        config: {
+          area,
+          ...options
+        }
+      });
+      this.panels.set(panel.id, panel);
+    }
+    this.trim(area);
+    this.onPanelsChangeEvent.fire();
+  }
+  /** close panel */
+  close(key) {
+    const panels = this.getPanels();
+    const closedPanels = key ? panels.filter((p) => p.key === key) : panels;
+    closedPanels.forEach((panel) => {
+      this.remove(panel.id);
+    });
+    this.onPanelsChangeEvent.fire();
+  }
+  trim(area) {
+    const panels = this.getPanels(area).filter((p) => !p.keepDOM || p.visible);
+    const areaConfig = this.getAreaConfig(area);
+    while (panels.length > areaConfig.max) {
+      const removed = panels.shift();
+      if (removed) {
+        this.remove(removed.id);
+      }
+    }
+  }
+  remove(id) {
+    const panel = this.panels.get(id);
+    if (!panel) {
+      return;
+    }
+    if (panel.keepDOM) {
+      panel.visible = false;
+    } else {
+      panel.dispose();
+      this.panels.delete(id);
+    }
+  }
+  getPanels(area) {
+    const panels = [];
+    this.panels.forEach((panel) => {
+      if (!area || panel.area === area) {
+        panels.push(panel);
+      }
+    });
+    return panels;
+  }
+  getAreaConfig(area) {
+    switch (area) {
+      case "docked-bottom":
+        return this.config.dockedBottom;
+      case "docked-right":
+        return this.config.dockedRight;
+      case "bottom":
+        return this.config.bottom;
+      case "right":
+      default:
+        return this.config.right;
+    }
+  }
+  dispose() {
+    this.onPanelsChangeEvent.dispose();
+  }
+};
+__decorateClass([
+  inversify.inject(PanelManagerConfig)
+], exports.PanelManager.prototype, "config", 2);
+__decorateClass([
+  inversify.inject(PanelEntityFactory)
+], exports.PanelManager.prototype, "createPanel", 2);
+exports.PanelManager = __decorateClass([
+  inversify.injectable()
+], exports.PanelManager);
+var useGlobalCSS = ({ cssText, id, cleanup }) => {
+  vue.onMounted(() => {
+    if (typeof document === "undefined") return;
+    if (document.getElementById(id)) return;
+    const style = document.createElement("style");
+    style.id = id;
+    style.textContent = cssText;
+    document.head.appendChild(style);
+  });
+  vue.onBeforeUnmount(() => {
+    const existing = document.getElementById(id);
+    if (existing && cleanup) existing.remove();
+  });
+};
+var usePanelManager = () => core.useService(exports.PanelManager);
+
+// src/contexts.ts
+var PanelContextKey = /* @__PURE__ */ Symbol("PanelContext");
+
+// src/composables/use-panel.ts
+var usePanel = () => {
+  const panel = vue.inject(PanelContextKey);
+  if (!panel) {
+    throw new Error("usePanel must be used within a PanelContext provider");
+  }
+  return panel;
+};
+var usePanelStore = (selector) => {
+  const panel = usePanel();
+  const selected = vue.shallowRef(selector(panel.store.getState()));
+  const unsubscribe = panel.store.subscribe((state) => {
+    const next = selector(state);
+    if (!shallow.shallow(selected.value, next)) {
+      selected.value = next;
+    }
+  });
+  vue.onBeforeUnmount(unsubscribe);
+  return selected;
+};
+
+// src/components/panel-layer/panel.ts
+var PanelItem = vue.defineComponent({
+  name: "PanelItem",
+  props: {
+    panel: { type: Object, required: true },
+    hidden: { type: Boolean, default: false }
+  },
+  setup(props) {
+    const panelManager = usePanelManager();
+    const elRef = vue.ref(null);
+    const isHorizontal = vue.computed(() => ["right", "docked-right"].includes(props.panel.area));
+    const storeState = usePanelStore((s) => ({
+      size: s.size,
+      fullscreen: s.fullscreen
+    }));
+    const layerSize = vue.ref(storeState.value.size);
+    const currentSize = vue.computed(
+      () => storeState.value.fullscreen ? layerSize.value : storeState.value.size
+    );
+    const sizeStyle = vue.computed(
+      () => isHorizontal.value ? { width: `${currentSize.value}px` } : { height: `${currentSize.value}px` }
+    );
+    const handleResize = (next) => {
+      let nextSize = next;
+      if (typeof props.panel.factory.maxSize === "number" && nextSize > props.panel.factory.maxSize) {
+        nextSize = props.panel.factory.maxSize;
+      } else if (typeof props.panel.factory.minSize === "number" && nextSize < props.panel.factory.minSize) {
+        nextSize = props.panel.factory.minSize;
+      }
+      props.panel.store.setState({ size: nextSize });
+    };
+    vue.onMounted(() => {
+      if (elRef.value && !storeState.value.fullscreen) {
+        const { width, height } = elRef.value.getBoundingClientRect();
+        const realSize = isHorizontal.value ? width : height;
+        props.panel.store.setState({ size: realSize });
+      }
+    });
+    let observer;
+    const syncObserver = () => {
+      observer?.disconnect();
+      observer = void 0;
+      if (!storeState.value.fullscreen) {
+        return;
+      }
+      const layer = props.panel.layer;
+      if (!layer) {
+        return;
+      }
+      observer = new ResizeObserver(([entry]) => {
+        const { width, height } = entry.contentRect;
+        layerSize.value = isHorizontal.value ? width : height;
+      });
+      observer.observe(layer);
+    };
+    vue.onMounted(syncObserver);
+    vue.onBeforeUnmount(() => observer?.disconnect());
+    return () => {
+      void storeState.value.fullscreen;
+      syncObserver();
+      const resizeBar = props.panel.resizable ? panelManager.config.resizeBarRender({
+        size: storeState.value.size,
+        direction: isHorizontal.value ? "vertical" : "horizontal",
+        onResize: handleResize
+      }) : null;
+      return vue.h(
+        "div",
+        {
+          class: clsx__default.default(
+            "gedit-flow-panel-wrap",
+            isHorizontal.value ? "panel-horizontal" : "panel-vertical"
+          ),
+          ref: elRef,
+          style: {
+            display: props.hidden ? "none" : "block",
+            ...props.panel.factory.style,
+            ...props.panel.config.style,
+            ...sizeStyle.value
+          }
+        },
+        [resizeBar, props.panel.renderer]
+      );
+    };
+  }
+});
+var PanelContextWrap = vue.defineComponent({
+  name: "PanelContextWrap",
+  props: {
+    panel: { type: Object, required: true },
+    hidden: { type: Boolean, default: false }
+  },
+  setup(props) {
+    vue.provide(PanelContextKey, props.panel);
+    return () => vue.h(PanelItem, { panel: props.panel, hidden: props.hidden });
+  }
+});
+var PanelArea = vue.defineComponent({
+  name: "PanelArea",
+  props: {
+    area: { type: String, required: true }
+  },
+  setup(props) {
+    const panelManager = usePanelManager();
+    const panels = vue.ref(panelManager.getPanels(props.area));
+    let pending;
+    const dispose = panelManager.onPanelsChange(() => {
+      if (pending) {
+        clearTimeout(pending);
+      }
+      pending = setTimeout(() => {
+        panels.value = panelManager.getPanels(props.area);
+      }, 0);
+    });
+    vue.onBeforeUnmount(() => {
+      if (pending) {
+        clearTimeout(pending);
+      }
+      dispose.dispose();
+    });
+    return () => panels.value.map(
+      (panel) => vue.h(PanelContextWrap, {
+        key: panel.id,
+        panel,
+        hidden: !!(panel.keepDOM && !panel.visible)
+      })
+    );
+  }
+});
+
+// src/components/panel-layer/css.ts
+var globalCSS = `
+  .gedit-flow-panel-layer-wrap * {
+    box-sizing: border-box;
+  }
+  .gedit-flow-panel-layer-wrap {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+  .gedit-flow-panel-layer-wrap-docked {
+
+  }
+  .gedit-flow-panel-layer-wrap-floating {
+    pointer-events: none;
+  }
+
+  .gedit-flow-panel-left-area {
+    width: 100%;
+    min-width: 0;
+    flex-grow: 0;
+    flex-shrink: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  .gedit-flow-panel-right-area {
+    height: 100%;
+    flex-grow: 1;
+    flex-shrink: 0;
+    min-width: 0;
+    display: flex;
+    max-width: 100%;
+  }
+
+  .gedit-flow-panel-main-area {
+    position: relative;
+    overflow: hidden;
+    flex-grow: 0;
+    flex-shrink: 1;
+    width: 100%;
+    height: 100%;
+  }
+  .gedit-flow-panel-bottom-area {
+    flex-grow: 1;
+    flex-shrink: 0;
+    width: 100%;
+    min-height: 0;
+  }
+  .gedit-flow-panel-wrap {
+    pointer-events: auto;
+    overflow: auto;
+    position: relative;
+  }
+  .gedit-flow-panel-wrap.panel-horizontal {
+    height: 100%;
+  }
+  .gedit-flow-panel-wrap.panel-vertical {
+    width: 100%;
+  }
+`;
+
+// src/components/panel-layer/panel-layer.ts
+var PanelLayer = vue.defineComponent({
+  name: "PanelLayer",
+  props: {
+    mode: { type: String, default: "floating" },
+    className: { type: String, default: void 0 },
+    style: { type: Object, default: void 0 }
+  },
+  setup(props, { slots }) {
+    useGlobalCSS({
+      cssText: globalCSS,
+      id: "flow-panel-layer-css"
+    });
+    return () => vue.h(
+      "div",
+      {
+        class: clsx__default.default(
+          "gedit-flow-panel-layer-wrap",
+          props.mode === "docked" && "gedit-flow-panel-layer-wrap-docked",
+          props.mode === "floating" && "gedit-flow-panel-layer-wrap-floating",
+          props.className
+        ),
+        style: props.style
+      },
+      [
+        vue.h("div", { class: "gedit-flow-panel-left-area" }, [
+          vue.h("div", { class: "gedit-flow-panel-main-area" }, slots.default?.()),
+          vue.h("div", { class: "gedit-flow-panel-bottom-area" }, [
+            vue.h(PanelArea, { area: props.mode === "docked" ? "docked-bottom" : "bottom" })
+          ])
+        ]),
+        vue.h("div", { class: "gedit-flow-panel-right-area" }, [
+          vue.h(PanelArea, { area: props.mode === "docked" ? "docked-right" : "right" })
+        ])
+      ]
+    );
+  }
+});
+var DockedPanelLayer = vue.defineComponent({
+  name: "DockedPanelLayer",
+  setup(_props, { attrs, slots }) {
+    return () => vue.h(
+      PanelLayer,
+      {
+        mode: "docked",
+        className: attrs.className,
+        style: attrs.style
+      },
+      {
+        default: () => slots.default?.()
+      }
+    );
+  }
+});
+
+// src/services/panel-layer.ts
+var PanelLayer2 = class extends core.Layer {
+  constructor() {
+    super(...arguments);
+    this.panelRoot = utils.domUtils.createDivWithClass("gedit-flow-panel-layer");
+    this.layout = null;
+  }
+  onReady() {
+    this.panelConfig.getPopupContainer(this.pluginContext).appendChild(this.panelRoot);
+    this.toDispose.push(
+      utils.Disposable.create(() => {
+        this.panelRoot.remove();
+      })
+    );
+    const commonStyle = {
+      pointerEvents: "none",
+      width: "100%",
+      height: "100%",
+      position: "absolute",
+      left: 0,
+      top: 0,
+      zIndex: 100
+    };
+    utils.domUtils.setStyle(this.panelRoot, commonStyle);
+  }
+  render() {
+    if (!this.layout) {
+      const { children, ...layoutProps } = this.panelConfig.layerProps;
+      const playgroundContainer = this.playgroundContainer;
+      const panelRoot = this.panelRoot;
+      const LayerProvide = vue.defineComponent({
+        name: "PanelLayerProvide",
+        setup() {
+          vue.provide(core.PlaygroundVueContainerKey, playgroundContainer);
+          try {
+            vue.provide(core.PlaygroundVueRefKey, playgroundContainer.get(core.Playground));
+          } catch {
+          }
+          return () => vue.h(vue.Teleport, { to: panelRoot }, [
+            vue.h(PanelLayer, layoutProps, () => children)
+          ]);
+        }
+      });
+      this.layout = vue.h(LayerProvide);
+    }
+    return this.layout;
+  }
+};
+__decorateClass([
+  inversify.inject(PanelManagerConfig)
+], PanelLayer2.prototype, "panelConfig", 2);
+__decorateClass([
+  inversify.inject(core.PluginContext)
+], PanelLayer2.prototype, "pluginContext", 2);
+__decorateClass([
+  inversify.inject(core.PlaygroundContainerFactory)
+], PanelLayer2.prototype, "playgroundContainer", 2);
+PanelLayer2 = __decorateClass([
+  inversify.injectable()
+], PanelLayer2);
+
+// src/create-panel-manager-plugin.ts
+var createPanelManagerPlugin = core.definePluginCreator({
+  onBind: ({ bind }, opt) => {
+    bind(exports.PanelManager).to(exports.PanelManager).inSingletonScope();
+    bind(PanelRestore).to(PanelRestoreImpl).inSingletonScope();
+    bind(PanelManagerConfig).toConstantValue(defineConfig(opt));
+    bind(PanelEntityFactory).toFactory(
+      (context) => ({
+        factory,
+        config
+      }) => {
+        const container = context.container.createChild();
+        container.bind(PanelEntityFactoryConstant).toConstantValue(factory);
+        container.bind(PanelEntityConfigConstant).toConstantValue(config);
+        const panel = container.resolve(PanelEntity);
+        panel.init();
+        return panel;
+      }
+    );
+  },
+  onInit(ctx) {
+    ctx.playground.registerLayer(PanelLayer2);
+    const panelManager = ctx.container.get(exports.PanelManager);
+    panelManager.init();
+  }
+});
+
+exports.DockedPanelLayer = DockedPanelLayer;
+exports.PanelRestore = PanelRestore;
+exports.ResizeBar = ResizeBar;
+exports.createPanelManagerPlugin = createPanelManagerPlugin;
+exports.usePanel = usePanel;
+exports.usePanelManager = usePanelManager;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map