@epxing/designer 0.0.0-stage → 5.3.0-beta.2

package/dist/src/page-designer/widget-preview/Template.js

@@ -0,0 +1,66 @@
+import '../../../style.css';
+import widgetDesignerDirective from "./directive.js";
+import { resolvePreviewName } from "./resolvePreviewName.js";
+import { resolveDirective, openBlock, createElementBlock, Fragment, renderList, withDirectives, createBlock, resolveDynamicComponent } from "vue";
+/* empty css             */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "epx-page-designer-widget-preview-template",
+  directives: { "widget-designer": widgetDesignerDirective },
+  props: {
+    designer: Object,
+    widget: Object,
+    parentWidget: Object,
+    pageRelationList: Array
+  },
+  provide() {
+    const templateInfo = this.designer.getWidgetByType(this.widget.contentType, this.widget.type) || {};
+    const { CONTENT = "{}" } = templateInfo;
+    return {
+      inTemplate: true,
+      templateInfo: {
+        ...this.widget,
+        ...templateInfo,
+        content: JSON.parse(CONTENT)
+      }
+    };
+  },
+  computed: {
+    templateInfo() {
+      return this.designer.getWidgetByType(this.widget.contentType, this.widget.type) || {};
+    },
+    content() {
+      const { CONTENT = "{}" } = this.templateInfo;
+      return JSON.parse(CONTENT);
+    },
+    widgetTree() {
+      const { items } = this.content;
+      return items || [];
+    },
+    // 预览组件名解析统一走 resolvePreviewName（命中项有缓存）
+    widgetName() {
+      return (widget) => resolvePreviewName(this.designer, widget);
+    }
+  }
+};
+const _hoisted_1 = { class: "template-container" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _directive_widget_designer = resolveDirective("widget-designer");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    (openBlock(true), createElementBlock(Fragment, null, renderList($options.widgetTree, (widget) => {
+      return withDirectives((openBlock(), createBlock(resolveDynamicComponent($options.widgetName(widget)), {
+        key: widget.id,
+        widget,
+        designer: $props.designer,
+        "parent-widget": $props.parentWidget,
+        pageRelationList: $props.pageRelationList
+      }, null, 8, ["widget", "designer", "parent-widget", "pageRelationList"])), [
+        [_directive_widget_designer, { widget, designer: $props.designer, parentWidget: $props.parentWidget, templateInfo: $options.templateInfo }]
+      ]);
+    }), 128))
+  ]);
+}
+const TemplatePreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-1ac14290"]]);
+export {
+  TemplatePreview as default
+};

package/dist/src/page-designer/widget-preview/WidgetWrapper.js

@@ -0,0 +1,170 @@
+import '../../../style.css';
+import TemplatePreview from "./Template.js";
+import previewMixin from "./Mixin.js";
+import util from "@epxing/core/src/runtime-utils/util";
+import { resolvePreviewName } from "./resolvePreviewName.js";
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, resolveDynamicComponent } from "vue";
+/* empty css                  */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+function appendCss(id, css) {
+  const formatCss = css.replace(/:current/g, ".css_" + id).replace(/url\s*\(([\w+-/.\s]+)\)/g, (str, $1) => {
+    return `url(${util.getFileUrl($1)})`;
+  });
+  const element = document.getElementById("style_" + id);
+  if (element) {
+    element.textContent = formatCss;
+  } else {
+    const style = document.createElement("style");
+    style.id = "style_" + id;
+    style.textContent = formatCss;
+    style.setAttribute("type", "text/css");
+    document.head.appendChild(style);
+  }
+}
+function removeCss(id) {
+  const element = document.getElementById("style_" + id);
+  if (element) document.head.removeChild(element);
+}
+const _sfc_main = {
+  name: "epx-page-designer-widget-wrapper",
+  mixins: [previewMixin],
+  components: {
+    TemplatePreview
+  },
+  inject: {
+    templateInfo: {
+      type: Object,
+      default: () => null
+    }
+  },
+  provide() {
+    return {
+      templateInfo: this.templateInfo
+    };
+  },
+  props: {
+    designer: {
+      type: Object,
+      required: true
+    },
+    parentWidget: {
+      type: Object,
+      default: null
+    },
+    widget: {
+      type: Object,
+      required: true
+    },
+    pageRelationList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      isHover: false,
+      widgetRef: `widget_${this.widget.id}`
+    };
+  },
+  computed: {
+    widgetInfo() {
+      return this.designer.getWidgetByType(this.widget.contentType, this.widget.type) || {};
+    },
+    isContainer() {
+      return this.widgetInfo.CONTAINER === "1";
+    },
+    // 预览组件名解析统一走 resolvePreviewName（命中项有缓存）
+    widgetName() {
+      return resolvePreviewName(this.designer, this.widget);
+    }
+  },
+  methods: {
+    handleMouseEnter(event) {
+      if (!this.templateInfo) {
+        this.isHover = true;
+        event.stopPropagation();
+        this.$emit("widget-hover", this.widget.id);
+      }
+    },
+    handleMouseLeave(event) {
+      if (!this.templateInfo) {
+        this.isHover = false;
+        event.stopPropagation();
+        this.$emit("widget-hover", null);
+      }
+    },
+    handleClick(event) {
+      if (!this.templateInfo && this.widgetInfo.ID) {
+        this.designer.setSelected(this.widget);
+        this.$emit("widget-click", {
+          widget: this.widget,
+          element: this.$el,
+          parentWidget: this.parentWidget
+        });
+        event.stopPropagation();
+      }
+    },
+    // 获取组件 DOM 元素
+    getElement() {
+      return this.$el;
+    }
+  },
+  mounted() {
+    if (this.widget.css) {
+      appendCss(this.widget.id, this.widget.css);
+    }
+    if (this.$el) {
+      if (this.$el.classList) {
+        this.$el.classList.add("css_" + this.widget.id);
+      } else {
+        this.$el.className += " css_" + this.widget.id;
+      }
+    }
+  },
+  watch: {
+    "widget.css"(v) {
+      if (v) {
+        appendCss(this.widget.id, v);
+      }
+    }
+  },
+  beforeUnmount() {
+    removeCss(this.widget.id);
+  }
+};
+const _hoisted_1 = ["data-widget-id"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_template_preview = resolveComponent("template-preview");
+  return openBlock(), createElementBlock("div", {
+    ref: $data.widgetRef,
+    class: normalizeClass([
+      "epx-page-designer-widget-wrapper",
+      { "el-col": !$props.parentWidget },
+      { [`el-col-${$props.widget.span || 24}`]: !$props.parentWidget },
+      { "is-hover": $data.isHover && !$options.templateInfo }
+    ]),
+    "data-widget-id": $props.widget.id,
+    onMouseenter: _cache[0] || (_cache[0] = (...args) => $options.handleMouseEnter && $options.handleMouseEnter(...args)),
+    onMouseleave: _cache[1] || (_cache[1] = (...args) => $options.handleMouseLeave && $options.handleMouseLeave(...args)),
+    onClick: _cache[2] || (_cache[2] = (...args) => $options.handleClick && $options.handleClick(...args))
+  }, [
+    $props.widget.type === "template" ? (openBlock(), createBlock(_component_template_preview, {
+      widget: $props.widget,
+      designer: $props.designer,
+      key: $props.widget.id,
+      "parent-widget": $props.parentWidget,
+      pageRelationList: $props.pageRelationList
+    }, null, 8, ["widget", "designer", "parent-widget", "pageRelationList"])) : (openBlock(), createBlock(resolveDynamicComponent($options.widgetName), {
+      widget: $props.widget,
+      designer: $props.designer,
+      key: $props.widget.id,
+      "parent-widget": $props.parentWidget,
+      templateInfo: $options.templateInfo,
+      pageRelationList: $props.pageRelationList
+    }, null, 8, ["widget", "designer", "parent-widget", "templateInfo", "pageRelationList"]))
+  ], 42, _hoisted_1);
+}
+const WidgetWrapper = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  WidgetWrapper as default
+};

package/dist/src/page-designer/widget-preview/directive.js

@@ -0,0 +1,159 @@
+import '../../../style.css';
+function detach(el) {
+  const targetEl = el._widgetTargetEl || el;
+  const pairs = [["mouseenter", "_widgetMouseEnter"], ["mouseleave", "_widgetMouseLeave"], ["click", "_widgetClick"], ["dragstart", "_widgetDragStart"], ["dragend", "_widgetDragEnd"]];
+  for (const [type, key] of pairs) {
+    if (el[key]) {
+      targetEl.removeEventListener(type, el[key]);
+      delete el[key];
+    }
+  }
+  delete el._widgetTargetEl;
+}
+const widgetDesignerDirective = {
+  beforeMount(el, binding) {
+    const { widget, designer, parentWidget, templateInfo } = binding.value || {};
+    if (!widget || !designer) return;
+    const applyDirective = () => {
+      detach(el);
+      if (el.nodeType !== 1) return;
+      const targetEl = el;
+      targetEl.setAttribute("data-widget-id", widget.id);
+      targetEl.setAttribute("draggable", "true");
+      const widgetInfo = designer.getWidgetByType(widget.contentType, widget.type) || {};
+      const widgetTitle = widgetInfo.TITLE || widgetInfo.NAME || widget.title || "";
+      if (widgetTitle) {
+        targetEl.setAttribute("data-widget-title", widgetTitle);
+      }
+      if (!parentWidget) {
+        if (targetEl.classList) {
+          targetEl.classList.add("el-col");
+          targetEl.classList.add(`el-col-${widget.span || 24}`);
+        } else {
+          targetEl.className += ` el-col el-col-${widget.span || 24}`;
+        }
+      }
+      const handleMouseEnter = (event) => {
+        if (!templateInfo) {
+          event.stopPropagation();
+          if (typeof designer.setHoverById === "function") {
+            designer.setHoverById(widget.id);
+          } else if (designer.emitEvent) {
+            designer.emitEvent("widget-hover", widget.id);
+          }
+        }
+      };
+      const handleMouseLeave = (event) => {
+        if (!templateInfo) {
+          const relatedTarget = event.relatedTarget;
+          if (relatedTarget && targetEl.contains(relatedTarget)) {
+            return;
+          }
+          event.stopPropagation();
+          if (relatedTarget && relatedTarget.closest) {
+            const nextWidgetEl = relatedTarget.closest("[data-widget-id]");
+            if (nextWidgetEl) {
+              const nextId = nextWidgetEl.getAttribute("data-widget-id");
+              if (nextId && typeof designer.setHoverById === "function") {
+                designer.setHoverById(nextId);
+                return;
+              } else if (nextId && designer.emitEvent) {
+                designer.emitEvent("widget-hover", nextId);
+                return;
+              }
+            }
+          }
+          if (typeof designer.clearHover === "function") {
+            designer.clearHover();
+          } else if (designer.emitEvent) {
+            designer.emitEvent("widget-hover", null);
+          }
+        }
+      };
+      const handleClick = (event) => {
+        if (!templateInfo) {
+          const widgetInfo2 = designer.getWidgetByType(widget.contentType, widget.type) || {};
+          if (widgetInfo2.ID) {
+            designer.setSelected(widget);
+            event.stopPropagation();
+            if (designer.emitEvent) {
+              designer.emitEvent("widget-click", {
+                widget,
+                element: targetEl,
+                parentWidget
+              });
+            }
+          }
+        }
+      };
+      const handleDragStart = (event) => {
+        event.stopPropagation();
+        const dragData = {
+          type: "widget-reorder",
+          widgetId: widget.id,
+          parentWidgetId: (parentWidget == null ? void 0 : parentWidget.id) || null
+        };
+        const dragDataStr = JSON.stringify(dragData);
+        event.dataTransfer.setData("text/plain", dragDataStr);
+        event.dataTransfer.effectAllowed = "move";
+        const emptyEl = document.createElement("div");
+        emptyEl.style.cssText = "position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none";
+        document.body.appendChild(emptyEl);
+        event.dataTransfer.setDragImage(emptyEl, 0, 0);
+        setTimeout(() => {
+          if (emptyEl.parentNode) emptyEl.parentNode.removeChild(emptyEl);
+        }, 0);
+        targetEl.style.opacity = "0.5";
+        targetEl.classList.add("epx-widget-dragging");
+        if (designer.startDrag) {
+          designer.startDrag({
+            source: "preview",
+            data: dragData,
+            title: widgetInfo.TITLE || widget.title,
+            icon: widgetInfo.ICON,
+            x: event.clientX,
+            y: event.clientY,
+            isNative: true
+          });
+        }
+      };
+      const handleDragEnd = (event) => {
+        event.stopPropagation();
+        targetEl.style.opacity = "1";
+        targetEl.classList.remove("epx-widget-dragging");
+        if (designer.emitEvent) {
+          designer.emitEvent("drag-end");
+        }
+      };
+      el._widgetTargetEl = targetEl;
+      el._widgetMouseEnter = handleMouseEnter;
+      el._widgetMouseLeave = handleMouseLeave;
+      el._widgetClick = handleClick;
+      el._widgetDragStart = handleDragStart;
+      el._widgetDragEnd = handleDragEnd;
+      targetEl.addEventListener("mouseenter", handleMouseEnter);
+      targetEl.addEventListener("mouseleave", handleMouseLeave);
+      targetEl.addEventListener("click", handleClick);
+      targetEl.addEventListener("dragstart", handleDragStart);
+      targetEl.addEventListener("dragend", handleDragEnd);
+    };
+    applyDirective();
+    el._applyDirective = applyDirective;
+  },
+  mounted(el, binding) {
+    if (el._applyDirective) {
+      setTimeout(() => {
+        if (typeof el._applyDirective === "function") el._applyDirective();
+      }, 0);
+    }
+  },
+  updated(el, binding) {
+  },
+  unmounted(el) {
+    detach(el);
+    delete el._applyDirective;
+  }
+};
+export {
+  widgetDesignerDirective as default
+};

package/dist/src/page-designer/widget-preview/dropPosition.js

@@ -0,0 +1,50 @@
+import '../../../style.css';
+const SKIP_CLASSES = ["epx-page-designer-widget-preview__no-widget", "epx-widget-dragging"];
+function createDropCache() {
+  return { listEl: null, scrollTop: 0, listRect: null, rects: [] };
+}
+function clearDropCache(cache) {
+  cache.listEl = null;
+  cache.rects = [];
+  cache.listRect = null;
+}
+function scrollerOf(listEl) {
+  return listEl.closest(".epx-page-designer-widget-preview") || document.scrollingElement || document.documentElement;
+}
+function measure(cache, listEl) {
+  const scrollTop = scrollerOf(listEl).scrollTop || 0;
+  if (cache.listEl !== listEl) {
+    const children = [...listEl.children].filter((el) => !SKIP_CLASSES.some((cls) => el.classList.contains(cls)));
+    cache.listEl = listEl;
+    cache.scrollTop = scrollTop;
+    cache.listRect = listEl.getBoundingClientRect();
+    cache.rects = children.map((el) => el.getBoundingClientRect());
+  }
+  return { listRect: cache.listRect, rects: cache.rects, delta: cache.scrollTop - scrollTop };
+}
+function insertIndex(cache, listEl, clientY) {
+  if (!listEl || !listEl.children || !listEl.children.length) return 0;
+  const { rects, delta } = measure(cache, listEl);
+  for (let i = 0; i < rects.length; i++) {
+    const rect = rects[i];
+    if (rect.top + delta + rect.height / 2 > clientY) return i;
+  }
+  return rects.length;
+}
+function insertLineRect(cache, listEl, clientY) {
+  if (!listEl) return null;
+  const { listRect, rects, delta } = measure(cache, listEl);
+  const index = insertIndex(cache, listEl, clientY);
+  let top;
+  if (rects.length === 0) top = listRect.top + delta + listRect.height / 2;
+  else if (index === 0) top = rects[0].top + delta;
+  else if (index >= rects.length) top = rects[rects.length - 1].bottom + delta;
+  else top = rects[index - 1].bottom + delta;
+  return { top, left: listRect.left, width: listRect.width };
+}
+export {
+  clearDropCache,
+  createDropCache,
+  insertIndex,
+  insertLineRect
+};

package/dist/src/page-designer/widget-preview/index.js

@@ -0,0 +1,23 @@
+import '../../../style.css';
+import { default as default2 } from "./Preview.js";
+import { default as default3 } from "./PreviewItem.js";
+import { default as default4 } from "./Container.js";
+import { default as default5 } from "./Placeholder.js";
+import { default as default6 } from "./Mixin.js";
+import { default as default7 } from "./Template.js";
+import { default as default8 } from "./WidgetWrapper.js";
+import { default as default9 } from "./HoverOverlay.js";
+import { default as default10 } from "./SelectedOverlay.js";
+import { default as default11 } from "./DropZoneOverlay.js";
+export {
+  default11 as DropZoneOverlay,
+  default9 as HoverOverlay,
+  default10 as SelectedOverlay,
+  default2 as WidgetPreview,
+  default4 as WidgetPreviewContainer,
+  default3 as WidgetPreviewItem,
+  default6 as WidgetPreviewMixin,
+  default5 as WidgetPreviewPlaceholder,
+  default7 as WidgetPreviewTemplate,
+  default8 as WidgetWrapper
+};

package/dist/src/page-designer/widget-preview/overlayPositionMixin.js

@@ -0,0 +1,87 @@
+import '../../../style.css';
+const overlayPositionMixin = {
+  data() {
+    return {
+      overlayStyle: {}
+    };
+  },
+  watch: {
+    visible(v) {
+      if (v) this.attachOverlayWatchers();
+      else this.detachOverlayWatchers();
+    },
+    targetElement() {
+      this.attachOverlayWatchers();
+    }
+  },
+  mounted() {
+    window.addEventListener("scroll", this.scheduleOverlayUpdate, true);
+    window.addEventListener("resize", this.scheduleOverlayUpdate);
+    if (this.visible) this.attachOverlayWatchers();
+  },
+  beforeUnmount() {
+    window.removeEventListener("scroll", this.scheduleOverlayUpdate, true);
+    window.removeEventListener("resize", this.scheduleOverlayUpdate);
+    this.detachOverlayWatchers();
+  },
+  methods: {
+    attachOverlayWatchers() {
+      this.detachOverlayWatchers();
+      if (!this.visible || !this.targetElement) return;
+      if (typeof ResizeObserver !== "undefined") {
+        this._overlayResize = new ResizeObserver(() => this.scheduleOverlayUpdate());
+        this._overlayResize.observe(this.targetElement);
+        const inner = document.querySelector(".epx-page-designer-widget-preview__draggable");
+        if (inner) this._overlayResize.observe(inner);
+      }
+      const canvas = document.querySelector(".epx-page-designer-widget-preview");
+      if (canvas && typeof MutationObserver !== "undefined") {
+        this._overlayMutation = new MutationObserver(() => this.scheduleOverlayUpdate());
+        this._overlayMutation.observe(canvas, { subtree: true, childList: true, attributes: true, attributeFilter: ["style", "class"] });
+      }
+      this._overlayRect = null;
+      this.scheduleOverlayUpdate();
+    },
+    detachOverlayWatchers() {
+      if (this._overlayResize) {
+        this._overlayResize.disconnect();
+        this._overlayResize = null;
+      }
+      if (this._overlayMutation) {
+        this._overlayMutation.disconnect();
+        this._overlayMutation = null;
+      }
+      if (this._overlayFrame) {
+        cancelAnimationFrame(this._overlayFrame);
+        this._overlayFrame = null;
+      }
+    },
+    scheduleOverlayUpdate() {
+      if (this._overlayFrame) return;
+      this._overlayFrame = requestAnimationFrame(() => {
+        this._overlayFrame = null;
+        this.updatePosition();
+      });
+    },
+    updatePosition() {
+      if (!this.visible || !this.targetElement || !this.targetElement.isConnected) return;
+      const rect = this.targetElement.getBoundingClientRect();
+      const last = this._overlayRect;
+      if (last && last.top === rect.top && last.left === rect.left && last.width === rect.width && last.height === rect.height) return;
+      this._overlayRect = { top: rect.top, left: rect.left, width: rect.width, height: rect.height };
+      if ("isCovered" in this.$data) this.isCovered = rect.top < 14;
+      this.overlayStyle = {
+        position: "fixed",
+        top: rect.top + "px",
+        left: rect.left + "px",
+        width: rect.width + "px",
+        height: rect.height + "px",
+        pointerEvents: "none",
+        zIndex: this.overlayZIndex || 100
+      };
+    }
+  }
+};
+export {
+  overlayPositionMixin as default
+};

package/dist/src/page-designer/widget-preview/resolvePreviewName.js

@@ -0,0 +1,32 @@
+import '../../../style.css';
+import { resolveComponent } from "@epxing/core/src/app";
+const cache = /* @__PURE__ */ new Map();
+function resolvePreviewName(designer, widget) {
+  const { contentType, type } = widget;
+  const cacheKey = contentType + "|" + (type || "");
+  const hit = cache.get(cacheKey);
+  if (hit) return hit;
+  const widgetInfo = designer.getWidgetByType(contentType, type) || {};
+  let previewCompName = contentType + "--preview";
+  let hasPreview = resolveComponent("epx-" + previewCompName);
+  if (!hasPreview && widgetInfo.UP_PAGE) {
+    const parent = designer.allWidgets.find((item) => item.ID === widgetInfo.UP_PAGE);
+    if (parent) {
+      previewCompName = parent.CODE + "--preview";
+      hasPreview = resolveComponent("epx-" + previewCompName);
+    }
+  }
+  if (hasPreview) {
+    const name = "epx-" + previewCompName;
+    cache.set(cacheKey, name);
+    return name;
+  }
+  return widgetInfo.CONTAINER === "1" ? "epx-page-designer-widget-preview-container" : "epx-page-designer-widget-preview-placeholder";
+}
+function clearPreviewNameCache() {
+  cache.clear();
+}
+export {
+  clearPreviewNameCache,
+  resolvePreviewName
+};