Merge pull request #125 from AnsGoo/dev-lib

fix: 修改了部分API

.eslintignore

@@ -5,3 +5,4 @@
 public
 ./packages/**/es/**
 ./packages/**/lib/**
+**/dist/**

packages/base/tsconfig.json

@@ -27,38 +27,19 @@
     "baseUrl": "./src",
     "typeRoots":[
       "node_modules/@types",
-      "packages/**/*.d.ts",
-      "packages/*.d.ts",
+      "src/**/*.d.ts",
       "./env.d.ts",
-      "./packages/*.d.ts"
+      "./src/*.d.ts"
     ]
   },
   "include": [
-    "./scripts/src/**/*.ts",
-    "./scripts/src/**/*.d.ts",
-    "./scripts/src/**/*.tsx",
-    "./scripts/src/**/*.vue",
-    "./ui/src/**/*.ts",
-    "./ui/src/**/*.d.ts",
-    "./ui/src/**/*.tsx",
-    "./ui/src/**/*.vue",
-    "./data/src/**/*.ts",
-    "./data/src/**/*.d.ts",
-    "./data/src/**/*.tsx",
-    "./data/src/**/*.vue",
-    "./base/src/**/*.ts",
-    "./base/src/**/*.d.ts",
-    "./base/src/**/*.tsx",
-    "./base/src/**/*.vue",
-    "./designer/src/**/*.ts",
-    "./designer/src/**/*.d.ts",
-    "./designer/src/**/*.tsx",
-    "./designer/src/**/*.vue"
+    "./src/**/*.ts",
+    "./src/**/*.d.ts",
+    "./src/**/*.tsx",
+    "./src/**/*.vue",
+
   ],
   "exclude": [
     "node_modules",
-    "examples/*",
-    "../examples/*",
-    "../../examples/*"
   ]
 }

packages/data/tsconfig.json

@@ -27,38 +27,19 @@
     "baseUrl": "./src",
     "typeRoots":[
       "node_modules/@types",
-      "packages/**/*.d.ts",
-      "packages/*.d.ts",
+      "src/**/*.d.ts",
       "./env.d.ts",
-      "./packages/*.d.ts"
+      "./src/*.d.ts"
     ]
   },
   "include": [
-    "./scripts/src/**/*.ts",
-    "./scripts/src/**/*.d.ts",
-    "./scripts/src/**/*.tsx",
-    "./scripts/src/**/*.vue",
-    "./ui/src/**/*.ts",
-    "./ui/src/**/*.d.ts",
-    "./ui/src/**/*.tsx",
-    "./ui/src/**/*.vue",
-    "./data/src/**/*.ts",
-    "./data/src/**/*.d.ts",
-    "./data/src/**/*.tsx",
-    "./data/src/**/*.vue",
-    "./base/src/**/*.ts",
-    "./base/src/**/*.d.ts",
-    "./base/src/**/*.tsx",
-    "./base/src/**/*.vue",
-    "./designer/src/**/*.ts",
-    "./designer/src/**/*.d.ts",
-    "./designer/src/**/*.tsx",
-    "./designer/src/**/*.vue"
+    "./src/**/*.ts",
+    "./src/**/*.d.ts",
+    "./src/**/*.tsx",
+    "./src/**/*.vue",
+
   ],
   "exclude": [
     "node_modules",
-    "examples/*",
-    "../examples/*",
-    "../../examples/*"
   ]
 }

packages/designer/src/components/Group/Group.vue

@@ -75,9 +75,9 @@ if (useData) {
 const canvasState = useCanvasState()
 const editMode = computed<boolean>(() => canvasState.isEditMode)
 
-const curComponent = computed(() => canvasState.curComponent)
+const curComponent = computed(() => canvasState.activeComponent)
 const isActive = computed(() => {
-  let curComponent = canvasState.curComponent
+  let curComponent = canvasState.activeComponent
   while (curComponent) {
     if (curComponent.parent?.id === props.component.id) {
       return true

packages/designer/src/editor/Area.vue

@@ -28,7 +28,7 @@ const width = computed<number>(() => actionState.style.width)
 const height = computed<number>(() => actionState.style.height)
 
 const stopWatch: WatchStopHandle = watch(
-  () => canvasState.curComponent,
+  () => canvasState.activeComponent,
   () => {
     if (actionState.components.length > 0) {
       actionState.setHidden()

packages/designer/src/editor/Editor.vue

@@ -126,7 +126,7 @@ const componentData = computed(() => {
 })
 
 const canvasStyleData = computed(() => canvasState.canvasStyleData)
-const curComponent = computed(() => canvasState.curComponent)
+const curComponent = computed(() => canvasState.activeComponent)
 
 const bgStyle = computed<Record<string, string>>(() => {
   const backgroundStyle = backgroundToCss(canvasStyleData.value.background)
@@ -144,8 +144,8 @@ const bgStyle = computed<Record<string, string>>(() => {
 })
 
 const copyComponent = () => {
-  if (canvasState.curComponent) {
-    clipBoardState.copy(canvasState.curComponent)
+  if (canvasState.activeComponent) {
+    clipBoardState.copy(canvasState.activeComponent)
   }
 }
 
@@ -178,7 +178,7 @@ const editor = ref<ElRef>(null)
 const isShowReferLine = ref<boolean>(true)
 const handleMouseDown = (e: MouseEvent) => {
   // 阻止默认事件，防止拖拽时出现拖拽图标
-  canvasState.setClickComponentStatus(false)
+  canvasState.deactivateComponent()
   e.preventDefault()
   e.stopPropagation()
   actionState.setHidden()
@@ -252,8 +252,8 @@ const handleDragOver = (e) => {
 }
 
 const deselectCurComponent = () => {
-  if (!canvasState.isClickComponent) {
-    canvasState.setCurComponent(undefined)
+  if (!canvasState.activeComponent) {
+    canvasState.activateComponent(undefined)
   }
 }
 </script>

packages/designer/src/editor/MarkLine.vue

@@ -65,19 +65,19 @@ useEventBus(StaticKey.DRAG_STOP, () => {
 
 const showLine = (isDownward, isRightward) => {
   const components = canvasState.componentData as Array<CustomComponent>
-  if (canvasState.curComponent) {
+  if (canvasState.activeComponent) {
     const {
       top: mytop,
       left: myleft,
       right: myright,
       bottom: mybottom
-    }: Location = calcComponentAxis(canvasState.curComponent.positionStyle)
+    }: Location = calcComponentAxis(canvasState.activeComponent.positionStyle)
     const curComponentHalfwidth = (myright - myleft) / 2
     const curComponentHalfHeight = (mybottom - mytop) / 2
 
     hideLine()
     components.forEach((component) => {
-      if (component == canvasState.curComponent) return
+      if (component == canvasState.activeComponent) return
       const componentStyle = calcComponentAxis(component.positionStyle)
       const { top, left, bottom, right } = componentStyle
       const componentHalfwidth = (right - left) / 2
@@ -166,7 +166,7 @@ const showLine = (isDownward, isRightward) => {
       }
 
       const needToShow: Array<any> = []
-      const { rotate } = canvasState.curComponent!.style
+      const { rotate } = canvasState.activeComponent!.style
       Object.keys(conditions).forEach((key) => {
         // 遍历符合的条件并处理
         conditions[key].forEach((condition) => {
@@ -180,7 +180,7 @@ const showLine = (isDownward, isRightward) => {
                   height: mybottom - mytop
                 })
               : condition.dragShift
-          canvasState.setCurComponentStyle(['position', key], value)
+          canvasState.activateComponentStyle(['position', key], value)
 
           condition.lineNode.style[key] = `${condition.lineShift}px`
           needToShow.push(condition.line)
@@ -201,7 +201,7 @@ const isNearly = (dragValue, targetValue) => {
 }
 
 const translatecurComponentShift = (key, condition, curComponentStyle) => {
-  const { width, height } = canvasState.curComponent!.style
+  const { width, height } = canvasState.activeComponent!.style
   if (key == 'top') {
     return Math.round(condition.dragShift - ((height as number) - curComponentStyle.height) / 2)
   }

packages/designer/src/editor/Shape/Shape.tsx

@@ -29,7 +29,7 @@ export default defineComponent({
     const clipBoardState = useClipBoardState()
 
     const copy = () => {
-      clipBoardState.copy(canvasState.curComponent!)
+      clipBoardState.copy(canvasState.activeComponent!)
     }
 
     const deleteComponent = () => {
@@ -52,7 +52,7 @@ export default defineComponent({
      * 复制组件ID
      */
     const copyComponentId = () => {
-      const id = canvasState.curComponent!.id
+      const id = canvasState.activeComponent!.id
       copyText(id as string)
     }
 
@@ -66,11 +66,11 @@ export default defineComponent({
 
     const contextmenus = (_: HTMLDivElement, event: MouseEvent): Optional<ContextmenuItem[]> => {
       // 如果当前有选中组件，并且接受到contextmenu事件的组件正是当前组件，就停止事件冒泡
-      if (canvasState.curComponent && canvasState.curComponent.id === props.info!.id) {
+      if (canvasState.activeComponent && canvasState.activeComponent.id === props.info!.id) {
         event.stopPropagation()
-      } else if (!canvasState.curComponent && !props.info!.parent) {
+      } else if (!canvasState.activeComponent && !props.info!.parent) {
         // 如果当前没有选中组件，就选中最底层的组件
-        canvasState.setCurComponent(props.info!, props.index!.toString())
+        canvasState.activateComponent(props.info!, props.index!.toString())
         event.stopPropagation()
       } else {
         return
@@ -80,7 +80,7 @@ export default defineComponent({
         {
           text: '拆分',
           subText: '',
-          disable: canvasState.curComponent?.component !== 'Group',
+          disable: canvasState.activeComponent?.component !== 'Group',
           handler: decompose
         },
         { divider: true },
@@ -157,7 +157,7 @@ export default defineComponent({
     })
 
     const appendComponent = () => {
-      actionState.appendComponent(canvasState.curComponent)
+      actionState.appendComponent(canvasState.activeComponent)
       actionState.appendComponent(props.info!)
     }
 
@@ -172,7 +172,7 @@ export default defineComponent({
       }
 
       // 如果没选择组件，或者选中的组件不是自己，就把事件向外冒泡
-      if (!canvasState.curComponent || props.info!.id !== canvasState.curComponent.id) return
+      if (!canvasState.activeComponent || props.info!.id !== canvasState.activeComponent.id) return
 
       // 如果组件锁定了，就把事件向外冒泡
       if (props.info!.locked) return
@@ -222,11 +222,11 @@ export default defineComponent({
       e.preventDefault()
       if (!props.isInner) {
         e.stopPropagation()
-        canvasState.setCurComponent(props.info, props.index!.toString())
+        canvasState.activateComponent(props.info, props.index!.toString())
       } else {
         if (props.info!.parent?.id === canvasState.benchmarkComponent?.id) {
           e.stopPropagation()
-          canvasState.setCurComponent(props.info, props.index!.toString())
+          canvasState.activateComponent(props.info, props.index!.toString())
         }
       }
     }
@@ -240,7 +240,7 @@ export default defineComponent({
       if (props.info && (!props.info.parent || props.info.parent?.active)) {
         // 阻止向父组件冒泡
         e.stopPropagation()
-        canvasState.setCurComponent(props.info, props.index!.toString())
+        canvasState.activateComponent(props.info, props.index!.toString())
       }
     }
 
@@ -252,7 +252,8 @@ export default defineComponent({
         return
       }
 
-      if (!(canvasState.curComponent && props.info!.id === canvasState.curComponent.id)) return
+      if (!(canvasState.activeComponent && props.info!.id === canvasState.activeComponent.id))
+        return
       e.stopPropagation()
       e.preventDefault()
 
@@ -306,7 +307,8 @@ export default defineComponent({
       }
       e.preventDefault()
       e.stopPropagation()
-      if (!(canvasState.curComponent && props.info!.id === canvasState.curComponent.id)) return
+      if (!(canvasState.activeComponent && props.info!.id === canvasState.activeComponent.id))
+        return
       if (props.info!.locked) return
 
       // 初始坐标和初始角度
@@ -351,11 +353,11 @@ export default defineComponent({
     }
 
     const getCursor = () => {
-      if (!canvasState.curComponent) {
+      if (!canvasState.activeComponent) {
         return {}
       }
 
-      const rotate: number = mod360(canvasState.curComponent!.style.rotate) // 取余 360
+      const rotate: number = mod360(canvasState.activeComponent!.style.rotate) // 取余 360
       const result = {}
       let lastMatchIndex = -1 // 从上一个命中的角度的索引开始匹配下一个，降低时间复杂度
       const angleToCursor = [
@@ -421,7 +423,8 @@ export default defineComponent({
      */
     const keyDown = (e: KeyboardEvent): void => {
       document.addEventListener('keyup', keyUp)
-      if (!(canvasState.curComponent && props.info!.id === canvasState.curComponent.id)) return
+      if (!(canvasState.activeComponent && props.info!.id === canvasState.activeComponent.id))
+        return
 
       const aliasCtrlKey = e.ctrlKey || e.metaKey
 
@@ -475,7 +478,8 @@ export default defineComponent({
     }
 
     const keyUp = (e: KeyboardEvent): void => {
-      if (!(canvasState.curComponent && props.info!.id === canvasState.curComponent.id)) return
+      if (!(canvasState.activeComponent && props.info!.id === canvasState.activeComponent.id))
+        return
 
       e.stopPropagation()
       if (props.info) {
@@ -490,7 +494,7 @@ export default defineComponent({
     })
 
     watch(
-      () => canvasState.curComponent,
+      () => canvasState.activeComponent,
       (newValue: CustomComponent | undefined) => {
         if (newValue && props.info!.id === newValue.id) {
           document.addEventListener('keydown', keyDown)