jvs-ppt-ui 0.0.12 → 0.0.14

package/src/composables/sidebar/useSidebarElementTransform.ts

@@ -1,6 +1,7 @@
 import { computed, type Ref, type ComputedRef } from 'vue'
 import { shapeFormulas } from '../../utils/pptxShapesLazy'
 import { useSlides } from '../useSlides'
+import { applyGroupGeometryFlip } from '../../utils/groupFlip'
 
 export function useSidebarElementTransform(
   selectedElement: ComputedRef<any>,
@@ -65,10 +66,16 @@ export function useSidebarElementTransform(
     if (selectedElementIds.value.length > 1 && activeSlide.value) {
       activeSlide.value.elements.forEach((el: any) => {
         if (selectedElementIds.value.includes(el.id)) {
-          if (!el.style) el.style = {}
-          el.style.flipH = !el.style.flipH
+          if (el.type === 'group') {
+            applyGroupGeometryFlip(el, true, false)
+          } else {
+            if (!el.style) el.style = {}
+            el.style.flipH = !el.style.flipH
+          }
         }
       })
+    } else if (selectedElement.value && selectedElement.value.type === 'group') {
+      applyGroupGeometryFlip(selectedElement.value, true, false)
     } else {
       getStyle().flipH = !getStyle().flipH
     }
@@ -79,10 +86,16 @@ export function useSidebarElementTransform(
     if (selectedElementIds.value.length > 1 && activeSlide.value) {
       activeSlide.value.elements.forEach((el: any) => {
         if (selectedElementIds.value.includes(el.id)) {
-          if (!el.style) el.style = {}
-          el.style.flipV = !el.style.flipV
+          if (el.type === 'group') {
+            applyGroupGeometryFlip(el, false, true)
+          } else {
+            if (!el.style) el.style = {}
+            el.style.flipV = !el.style.flipV
+          }
         }
       })
+    } else if (selectedElement.value && selectedElement.value.type === 'group') {
+      applyGroupGeometryFlip(selectedElement.value, false, true)
     } else {
       getStyle().flipV = !getStyle().flipV
     }

package/src/composables/useSlides.ts

@@ -12,6 +12,7 @@ import {
   inferElementTextType,
   normalizeTextType
 } from '../utils/textTypes'
+import { applyGroupGeometryFlip } from '../utils/groupFlip'
 import type { CustomUploadHandler, UploadResourceContext, UploadResourceType } from '../types'
 
 export type { SlideTextType }
@@ -340,15 +341,15 @@ function setAiConfig(config?: { apiUrl?: string; headers?: Record<string, string
   }
 }
 
-// 素材库配置状态（支持获取分类树/首页、分页查询、获取单独类型、素材保存 API）
-export const DEFAULT_MATERIAL_API_URL = '/jvs-dam/api/dam/material/tree'
-export const DEFAULT_MATERIAL_PAGE_API_URL = '/jvs-dam/api/dam/material/page'
+// 素材库配置状态（公网免版权素材检索 stock/search、单页模板、素材保存 API）
+export const DEFAULT_MATERIAL_API_URL = '/jvs-dam/stock/search'
+export const DEFAULT_MATERIAL_PAGE_API_URL = '/jvs-dam/stock/search'
 
 const defaultEnvMaterialUrl = (typeof import.meta !== 'undefined' && (import.meta as any).env) 
-  ? String((import.meta as any).env?.VITE_MATERIAL_TREE_API_URL || (import.meta as any).env?.VITE_MATERIAL_API_URL || (import.meta as any).env?.VITE_MATERIAL_LIST_API_URL || DEFAULT_MATERIAL_API_URL) 
+  ? String((import.meta as any).env?.VITE_MATERIAL_STOCK_API_URL || (import.meta as any).env?.VITE_MATERIAL_API_URL || (import.meta as any).env?.VITE_MATERIAL_LIST_API_URL || (import.meta as any).env?.VITE_MATERIAL_TREE_API_URL || DEFAULT_MATERIAL_API_URL) 
   : DEFAULT_MATERIAL_API_URL
 const defaultEnvMaterialPageUrl = (typeof import.meta !== 'undefined' && (import.meta as any).env) 
-  ? String((import.meta as any).env?.VITE_MATERIAL_PAGE_API_URL || DEFAULT_MATERIAL_PAGE_API_URL) 
+  ? String((import.meta as any).env?.VITE_MATERIAL_PAGE_API_URL || (import.meta as any).env?.VITE_MATERIAL_STOCK_API_URL || DEFAULT_MATERIAL_PAGE_API_URL) 
   : DEFAULT_MATERIAL_PAGE_API_URL
 const defaultEnvMaterialTypeUrl = (typeof import.meta !== 'undefined' && (import.meta as any).env?.VITE_MATERIAL_TYPE_API_URL) 
   ? String((import.meta as any).env.VITE_MATERIAL_TYPE_API_URL) 
@@ -357,11 +358,11 @@ const defaultEnvMaterialSaveUrl = (typeof import.meta !== 'undefined' && (import
   ? String((import.meta as any).env.VITE_MATERIAL_SAVE_API_URL) 
   : ''
 
-/** 素材库获取所有内容/首页分类树的 API 地址 */
+/** 素材库检索公网素材/所有内容的 API 地址 */
 const materialApiUrl = ref<string>(defaultEnvMaterialUrl)
-/** 素材库首页分类树 API 地址 */
+/** 素材库首页/分类检索 API 地址 */
 const materialTreeApiUrl = ref<string>(defaultEnvMaterialUrl)
-/** 素材库分页查询 API 地址 */
+/** 素材库分页/关键词检索 API 地址 */
 const materialPageApiUrl = ref<string>(defaultEnvMaterialPageUrl)
 /** 素材库按类型获取单独分类素材的 API 地址 */
 const materialTypeApiUrl = ref<string>(defaultEnvMaterialTypeUrl)
@@ -6590,7 +6591,7 @@ function convertPPTistToLocalIfNeed(newSlides: any): Slide[] {
         const grpFlipH = !!(el.flipH || el.isFlipH || el.style?.flipH)
         const grpFlipV = !!(el.flipV || el.isFlipV || el.style?.flipV)
 
-        return {
+        const groupObj: any = {
           id: el.id || 'group_' + Date.now().toString(36) + Math.random().toString(36).substring(2, 7),
           type: 'group',
           name: el.name || '组合',
@@ -6609,6 +6610,12 @@ function convertPPTistToLocalIfNeed(newSlides: any): Slide[] {
           isFlipV: grpFlipV,
           elements: el.elements.map((child: any) => convertChildRecursive(child, topW, topH))
         }
+
+        if (grpFlipH || grpFlipV) {
+          applyGroupGeometryFlip(groupObj, grpFlipH, grpFlipV)
+        }
+
+        return groupObj
       }
 
       const elemPattern = extractPatternFromFill(el)
@@ -7291,6 +7298,9 @@ function preprocessImportedSlides(slides: any[]) {
           }
           processEl(child, grpW, grpH)
         })
+        if (el.flipH || el.isFlipH || el.style?.flipH || el.flipV || el.isFlipV || el.style?.flipV) {
+          applyGroupGeometryFlip(el)
+        }
       }
     }
     for (const el of slide.elements) {

package/src/utils/groupFlip.ts

@@ -0,0 +1,108 @@
+/**
+ * 组合 (Group) 翻转与几何镜像计算工具函数
+ * 
+ * 遵循微软 PowerPoint / DrawingML 规范标准：
+ * 当对组合执行水平/垂直翻转时：
+ * 1. 组合内部子元素的相对几何位置镜像对调（left / top 沿中心线镜像）；
+ * 2. 子元素若是形状/图片，其自身的翻转状态联动反转；
+ * 3. 子元素若是纯文本（Text），文字字形永远保持正向可读（Text is never mirrored），禁止倒影；
+ * 4. 几何镜像处理完成后，Group 容器自身不再需要使用 CSS scale(-1) 进行整体物理镜像。
+ */
+
+export function applyGroupGeometryFlip(group: any, forceFlipH?: boolean, forceFlipV?: boolean) {
+  if (!group || !Array.isArray(group.elements) || group.elements.length === 0) return
+
+  const flipH = forceFlipH !== undefined ? forceFlipH : Boolean(group.flipH || group.isFlipH || group.style?.flipH)
+  const flipV = forceFlipV !== undefined ? forceFlipV : Boolean(group.flipV || group.isFlipV || group.style?.flipV)
+
+  if (!flipH && !flipV) return
+
+  const grpW = typeof group.width === 'number' && group.width > 0 ? group.width : (parseFloat(group.style?.width) || 0)
+  const grpH = typeof group.height === 'number' && group.height > 0 ? group.height : (parseFloat(group.style?.height) || 0)
+
+  for (const child of group.elements) {
+    if (!child) continue
+
+    // 1. 水平翻转：镜像相对水平位置
+    if (flipH) {
+      if (typeof child.style?.left === 'string' && child.style.left.endsWith('%')) {
+        const lPct = parseFloat(child.style.left) || 0
+        const wPct = parseFloat(child.style.width) || 0
+        child.style.left = `${+(100 - lPct - wPct).toFixed(4)}%`
+      } else if (typeof child.left === 'number' && grpW > 0) {
+        const cW = typeof child.width === 'number' ? child.width : (parseFloat(child.style?.width) || 0)
+        child.left = +(grpW - child.left - cW).toFixed(4)
+      }
+    }
+
+    // 2. 垂直翻转：镜像相对垂直位置
+    if (flipV) {
+      if (typeof child.style?.top === 'string' && child.style.top.endsWith('%')) {
+        const tPct = parseFloat(child.style.top) || 0
+        const hPct = parseFloat(child.style.height) || 0
+        child.style.top = `${+(100 - tPct - hPct).toFixed(4)}%`
+      } else if (typeof child.top === 'number' && grpH > 0) {
+        const cH = typeof child.height === 'number' ? child.height : (parseFloat(child.style?.height) || 0)
+        child.top = +(grpH - child.top - cH).toFixed(4)
+      }
+    }
+
+    // 3. 子元素自身翻转状态更新：纯文本和连线永不翻转，形状/图片等反转
+    const is2DArrow = /^(?:rightArrow|leftArrow|upArrow|downArrow|leftRightArrow|upDownArrow|quadArrow|leftRightUpArrow|bentArrow|uturnArrow|leftUpArrow|bentUpArrow|curvedRightArrow|curvedLeftArrow|curvedUpArrow|curvedDownArrow|stripedRightArrow|notchedRightArrow|pentagon|chevron|circularArrow|swooshArrow|.*ArrowCallout)$/i.test(String(child.shapType || ''))
+    const isConnector = !is2DArrow && (
+      child.type === 'line' ||
+      Boolean(child.startConnection || child.endConnection) ||
+      Boolean(child.borderTailEnd || child.borderHeadEnd) ||
+      /^(?:line|straightConnector\d*|bentConnector\d*|curvedConnector\d*)$/i.test(String(child.shapType || '')) ||
+      (/连接符/i.test(String(child.name || '')) && !is2DArrow)
+    )
+    const isPureText = child.type === 'text' || isConnector
+
+    if (isPureText) {
+      child.flipH = false
+      child.isFlipH = false
+      if (child.style) child.style.flipH = false
+      child.flipV = false
+      child.isFlipV = false
+      if (child.style) child.style.flipV = false
+    } else if (child.type === 'group') {
+      applyGroupGeometryFlip(child, flipH, flipV)
+    } else {
+      if (flipH) {
+        const curH = Boolean(child.flipH || child.isFlipH || child.style?.flipH)
+        child.flipH = !curH
+        child.isFlipH = !curH
+        if (child.style) child.style.flipH = !curH
+      }
+      if (flipV) {
+        const curV = Boolean(child.flipV || child.isFlipV || child.style?.flipV)
+        child.flipV = !curV
+        child.isFlipV = !curV
+        if (child.style) child.style.flipV = !curV
+      }
+    }
+  }
+
+  // 4. 子元素全部完成几何镜像后，Group 容器自身无需再 scale 镜像，避免将内部文本整体反转为倒影字
+  group.flipH = false
+  group.isFlipH = false
+  if (group.style) {
+    group.style.flipH = false
+    group.style.flipV = false
+  }
+  group.flipV = false
+  group.isFlipV = false
+}
+
+/**
+ * 判断一个元素是否为包含文本的组合元素（或纯文本元素），
+ * 渲染层用此判断避免在外层容器施加 scale(-1) 导致内部文字倒影。
+ */
+export function isTextContainingElement(el: any): boolean {
+  if (!el) return false
+  if (el.type === 'text' || el.type === 'line') return true
+  if (el.type === 'group' && Array.isArray(el.elements)) {
+    return el.elements.some((child: any) => isTextContainingElement(child))
+  }
+  return false
+}