chore: fix lint and typecheck issues

packages/effects/common-ui/src/components/resize/resize.vue

@@ -264,13 +264,64 @@ const currentStick = ref<null | string>(null);
 
 const parentElement = ref<HTMLElement | null>(null);
 
-const width = computed(() => parentWidth.value! - left.value! - right.value!);
+function getPointerPosition(
+  ev: Partial<{
+    pageX: number;
+    pageY: number;
+    touches: ArrayLike<{ pageX: number; pageY: number }>;
+  }>,
+): null | { pointerX: number; pointerY: number } {
+  const touch = ev.touches?.[0];
+  const pointerX = ev.pageX ?? touch?.pageX;
+  const pointerY = ev.pageY ?? touch?.pageY;
 
-const height = computed(() => parentHeight.value! - top.value! - bottom.value!);
+  if (
+    pointerX === null ||
+    pointerX === undefined ||
+    pointerY === null ||
+    pointerY === undefined
+  ) {
+    return null;
+  }
+
+  return { pointerX, pointerY };
+}
+
+const width = computed(() => {
+  const currentParentWidth = parentWidth.value;
+  const currentLeft = left.value;
+  const currentRight = right.value;
+
+  if (
+    currentParentWidth === null ||
+    currentLeft === null ||
+    currentRight === null
+  ) {
+    return 0;
+  }
+
+  return currentParentWidth - currentLeft - currentRight;
+});
+
+const height = computed(() => {
+  const currentParentHeight = parentHeight.value;
+  const currentTop = top.value;
+  const currentBottom = bottom.value;
+
+  if (
+    currentParentHeight === null ||
+    currentTop === null ||
+    currentBottom === null
+  ) {
+    return 0;
+  }
+
+  return currentParentHeight - currentTop - currentBottom;
+});
 
 const rect = computed(() => ({
-  left: Math.round(left.value!),
-  top: Math.round(top.value!),
+  left: Math.round(left.value ?? 0),
+  top: Math.round(top.value ?? 0),
   width: Math.round(width.value),
   height: Math.round(height.value),
 }));
@@ -348,36 +399,48 @@ const rectCorrectionByAspectRatio = (rect: {
   newTop: number;
 }) => {
   let { newLeft, newRight, newTop, newBottom } = rect;
-  // const { parentWidth, parentHeight, currentStick, aspectFactor, dimensionsBeforeMove } = this;
+  const currentParentWidth = parentWidth.value;
+  const currentParentHeight = parentHeight.value;
+  const stick = currentStick.value;
+  const factor = aspectFactor.value;
 
-  let newWidth = parentWidth.value! - newLeft - newRight;
-  let newHeight = parentHeight.value! - newTop - newBottom;
+  if (
+    currentParentWidth === null ||
+    currentParentHeight === null ||
+    !stick ||
+    factor === null
+  ) {
+    return { newLeft, newRight, newTop, newBottom };
+  }
 
-  if (currentStick.value![1] === 'm') {
+  let newWidth = currentParentWidth - newLeft - newRight;
+  let newHeight = currentParentHeight - newTop - newBottom;
+
+  if (stick[1] === 'm') {
     const deltaHeight = newHeight - dimensionsBeforeMove.value.height;
 
-    newLeft -= (deltaHeight * aspectFactor.value!) / 2;
-    newRight -= (deltaHeight * aspectFactor.value!) / 2;
-  } else if (currentStick.value![0] === 'm') {
+    newLeft -= (deltaHeight * factor) / 2;
+    newRight -= (deltaHeight * factor) / 2;
+  } else if (stick[0] === 'm') {
     const deltaWidth = newWidth - dimensionsBeforeMove.value.width;
 
-    newTop -= deltaWidth / aspectFactor.value! / 2;
-    newBottom -= deltaWidth / aspectFactor.value! / 2;
-  } else if (newWidth / newHeight > aspectFactor.value!) {
-    newWidth = aspectFactor.value! * newHeight;
+    newTop -= deltaWidth / factor / 2;
+    newBottom -= deltaWidth / factor / 2;
+  } else if (newWidth / newHeight > factor) {
+    newWidth = factor * newHeight;
 
-    if (currentStick.value![1] === 'l') {
-      newLeft = parentWidth.value! - newRight - newWidth;
+    if (stick[1] === 'l') {
+      newLeft = currentParentWidth - newRight - newWidth;
     } else {
-      newRight = parentWidth.value! - newLeft - newWidth;
+      newRight = currentParentWidth - newLeft - newWidth;
     }
   } else {
-    newHeight = newWidth / aspectFactor.value!;
+    newHeight = newWidth / factor;
 
-    if (currentStick.value![0] === 't') {
-      newTop = parentHeight.value! - newBottom - newHeight;
+    if (stick[0] === 't') {
+      newTop = currentParentHeight - newBottom - newHeight;
     } else {
-      newBottom = parentHeight.value! - newTop - newHeight;
+      newBottom = currentParentHeight - newTop - newHeight;
     }
   }
 
@@ -385,11 +448,17 @@ const rectCorrectionByAspectRatio = (rect: {
 };
 
 const stickMove = (delta: { x: number; y: number }) => {
+  const stick = currentStick.value;
+
+  if (!stick) {
+    return;
+  }
+
   let newTop = dimensionsBeforeMove.value.top;
   let newBottom = dimensionsBeforeMove.value.bottom;
   let newLeft = dimensionsBeforeMove.value.left;
   let newRight = dimensionsBeforeMove.value.right;
-  switch (currentStick.value![0]) {
+  switch (stick[0]) {
     case 'b': {
       newBottom = dimensionsBeforeMove.value.bottom + delta.y;
 
@@ -419,7 +488,7 @@ const stickMove = (delta: { x: number; y: number }) => {
     }
   }
 
-  switch (currentStick.value![1]) {
+  switch (stick[1]) {
     case 'l': {
       newLeft = dimensionsBeforeMove.value.left - delta.x;
 
@@ -512,89 +581,121 @@ const calcDragLimitation = () => {
 };
 
 const calcResizeLimits = () => {
-  // const { aspectFactor, width, height, bottom, top, left, right } = this;
-
   const parentLim = parentLimitation.value ? 0 : null;
+  const currentAspectFactor = aspectFactor.value;
+  const currentLeft = left.value;
+  const currentRight = right.value;
+  const currentTop = top.value;
+  const currentBottom = bottom.value;
+  const stick = currentStick.value;
 
-  if (aspectRatio.value) {
-    if (minw.value / minh.value > (aspectFactor.value as number)) {
-      minh.value = minw.value / (aspectFactor.value as number);
+  if (
+    currentLeft === null ||
+    currentRight === null ||
+    currentTop === null ||
+    currentBottom === null
+  ) {
+    return {
+      left: { min: parentLim, max: parentLim },
+      right: { min: parentLim, max: parentLim },
+      top: { min: parentLim, max: parentLim },
+      bottom: { min: parentLim, max: parentLim },
+    };
+  }
+
+  let minWidth = minw.value;
+  let minHeight = minh.value;
+
+  if (aspectRatio.value && currentAspectFactor) {
+    if (minWidth / minHeight > currentAspectFactor) {
+      minHeight = minWidth / currentAspectFactor;
     } else {
-      minw.value = ((aspectFactor.value as number) * minh.value) as number;
+      minWidth = currentAspectFactor * minHeight;
     }
   }
 
   const limits = {
     left: {
       min: parentLim,
-      max: (left.value as number) + (width.value - minw.value),
+      max: currentLeft + (width.value - minWidth),
     },
     right: {
       min: parentLim,
-      max: (right.value as number) + (width.value - minw.value),
+      max: currentRight + (width.value - minWidth),
     },
     top: {
       min: parentLim,
-      max: (top.value as number) + (height.value - minh.value),
+      max: currentTop + (height.value - minHeight),
     },
     bottom: {
       min: parentLim,
-      max: (bottom.value as number) + (height.value - minh.value),
+      max: currentBottom + (height.value - minHeight),
     },
   };
 
-  if (aspectRatio.value) {
+  if (aspectRatio.value && currentAspectFactor) {
     const aspectLimits = {
       left: {
         min:
-          left.value! -
-          Math.min(top.value!, bottom.value!) * aspectFactor.value! * 2,
+          currentLeft -
+          Math.min(currentTop, currentBottom) * currentAspectFactor * 2,
         max:
-          left.value! +
-          ((height.value - minh.value!) / 2) * aspectFactor.value! * 2,
+          currentLeft +
+          ((height.value - minHeight) / 2) * currentAspectFactor * 2,
       },
       right: {
         min:
-          right.value! -
-          Math.min(top.value!, bottom.value!) * aspectFactor.value! * 2,
+          currentRight -
+          Math.min(currentTop, currentBottom) * currentAspectFactor * 2,
         max:
-          right.value! +
-          ((height.value - minh.value!) / 2) * aspectFactor.value! * 2,
+          currentRight +
+          ((height.value - minHeight) / 2) * currentAspectFactor * 2,
       },
       top: {
         min:
-          top.value! -
-          (Math.min(left.value!, right.value!) / aspectFactor.value!) * 2,
+          currentTop -
+          (Math.min(currentLeft, currentRight) / currentAspectFactor) * 2,
         max:
-          top.value! +
-          ((width.value - minw.value) / 2 / aspectFactor.value!) * 2,
+          currentTop + ((width.value - minWidth) / 2 / currentAspectFactor) * 2,
       },
       bottom: {
         min:
-          bottom.value! -
-          (Math.min(left.value!, right.value!) / aspectFactor.value!) * 2,
+          currentBottom -
+          (Math.min(currentLeft, currentRight) / currentAspectFactor) * 2,
         max:
-          bottom.value! +
-          ((width.value - minw.value) / 2 / aspectFactor.value!) * 2,
+          currentBottom +
+          ((width.value - minWidth) / 2 / currentAspectFactor) * 2,
       },
     };
 
-    if (currentStick.value![0] === 'm') {
+    if (stick?.[0] === 'm') {
       limits.left = {
-        min: Math.max(limits.left.min!, aspectLimits.left.min),
+        min: Math.max(
+          limits.left.min ?? aspectLimits.left.min,
+          aspectLimits.left.min,
+        ),
         max: Math.min(limits.left.max, aspectLimits.left.max),
       };
       limits.right = {
-        min: Math.max(limits.right.min!, aspectLimits.right.min),
+        min: Math.max(
+          limits.right.min ?? aspectLimits.right.min,
+          aspectLimits.right.min,
+        ),
         max: Math.min(limits.right.max, aspectLimits.right.max),
       };
-    } else if (currentStick.value![1] === 'm') {
+    } else if (stick?.[1] === 'm') {
       limits.top = {
-        min: Math.max(limits.top.min!, aspectLimits.top.min),
+        min: Math.max(
+          limits.top.min ?? aspectLimits.top.min,
+          aspectLimits.top.min,
+        ),
         max: Math.min(limits.top.max, aspectLimits.top.max),
       };
       limits.bottom = {
-        min: Math.max(limits.bottom.min!, aspectLimits.bottom.min),
+        min: Math.max(
+          limits.bottom.min ?? aspectLimits.bottom.min,
+          aspectLimits.bottom.min,
+        ),
         max: Math.min(limits.bottom.max, aspectLimits.bottom.max),
       };
     }
@@ -604,9 +705,9 @@ const calcResizeLimits = () => {
 };
 
 const positionStyle = computed(() => ({
-  top: `${top.value}px`,
-  left: `${left.value}px`,
-  zIndex: zIndex.value!,
+  top: `${top.value ?? 0}px`,
+  left: `${left.value ?? 0}px`,
+  zIndex: zIndex.value ?? 'auto',
 }));
 
 const sizeStyle = computed(() => ({
@@ -719,10 +820,13 @@ const stickDown = (
 
   stickDrag.value = true;
 
-  const pointerX = ev.pageX === undefined ? ev.touches[0].pageX : ev.pageX;
-  const pointerY = ev.pageY === undefined ? ev.touches[0].pageY : ev.pageY;
+  const pointerPosition = getPointerPosition(ev);
 
-  saveDimensionsBeforeMove({ pointerX, pointerY });
+  if (!pointerPosition) {
+    return;
+  }
+
+  saveDimensionsBeforeMove(pointerPosition);
 
   currentStick.value = stick;
 
@@ -736,13 +840,19 @@ const move = (ev: MouseEvent & TouchEvent) => {
 
   ev.stopPropagation();
 
-  // touches 兼容性代码
-  const pageX = ev.pageX === undefined ? ev.touches![0]!.pageX : ev.pageX;
-  const pageY = ev.pageY === undefined ? ev.touches![0]!.pageY : ev.pageY;
+  const pointerPosition = getPointerPosition(ev);
+
+  if (!pointerPosition) {
+    return;
+  }
 
   const delta = {
-    x: (dimensionsBeforeMove.value.pointerX - pageX) / parentScaleX.value,
-    y: (dimensionsBeforeMove.value.pointerY - pageY) / parentScaleY.value,
+    x:
+      (dimensionsBeforeMove.value.pointerX - pointerPosition.pointerX) /
+      parentScaleX.value,
+    y:
+      (dimensionsBeforeMove.value.pointerY - pointerPosition.pointerY) /
+      parentScaleY.value,
   };
 
   if (stickDrag.value) {
@@ -810,12 +920,17 @@ onMounted(() => {
 
   left.value = x.value;
   top.value = y.value;
-  right.value = (parentWidth.value -
-    (w.value === 'auto' ? container.value!.scrollWidth : (w.value as number)) -
-    left.value) as number;
-  bottom.value = (parentHeight.value -
-    (h.value === 'auto' ? container.value!.scrollHeight : (h.value as number)) -
-    top.value) as number;
+  const containerElement = container.value;
+  const contentWidth =
+    w.value === 'auto'
+      ? (containerElement?.scrollWidth ?? 0)
+      : (w.value as number);
+  const contentHeight =
+    h.value === 'auto'
+      ? (containerElement?.scrollHeight ?? 0)
+      : (h.value as number);
+  right.value = (parentWidth.value ?? 0) - contentWidth - (left.value ?? 0);
+  bottom.value = (parentHeight.value ?? 0) - contentHeight - (top.value ?? 0);
 
   addEvents(domEvents.value);
 
@@ -839,13 +954,14 @@ onMounted(() => {
     );
   }
 });
-
 onBeforeUnmount(() => {
   removeEvents(domEvents.value);
 });
 
 const bodyDown = (ev: MouseEvent & TouchEvent) => {
   const { target, button } = ev;
+  const targetElement = target instanceof HTMLElement ? target : null;
+  const uid = getCurrentInstance()?.uid.toString();
 
   if (!preventActiveBehavior.value) {
     active.value = true;
@@ -863,17 +979,13 @@ const bodyDown = (ev: MouseEvent & TouchEvent) => {
 
   if (
     dragHandle.value &&
-    (target! as HTMLElement).dataset.dragHandle !==
-      getCurrentInstance()?.uid.toString()
+    targetElement &&
+    targetElement.dataset.dragHandle !== uid
   ) {
     return;
   }
 
-  if (
-    dragCancel.value &&
-    (target! as HTMLElement).dataset.dragCancel ===
-      getCurrentInstance()?.uid.toString()
-  ) {
+  if (dragCancel.value && targetElement?.dataset.dragCancel === uid) {
     return;
   }
 
@@ -889,10 +1001,13 @@ const bodyDown = (ev: MouseEvent & TouchEvent) => {
     bodyDrag.value = true;
   }
 
-  const pointerX = ev.pageX === undefined ? ev.touches[0]!.pageX : ev.pageX;
-  const pointerY = ev.pageY === undefined ? ev.touches[0]!.pageY : ev.pageY;
+  const pointerPosition = getPointerPosition(ev);
 
-  saveDimensionsBeforeMove({ pointerX, pointerY });
+  if (!pointerPosition) {
+    return;
+  }
+
+  saveDimensionsBeforeMove(pointerPosition);
 
   if (parentLimitation.value) {
     limits.value = calcDragLimitation();
@@ -921,8 +1036,10 @@ watch(
 watch(
   () => z.value,
   (val) => {
-    if ((val as number) >= 0 || val === 'auto') {
-      zIndex.value = val as number;
+    if (typeof val === 'number' && val >= 0) {
+      zIndex.value = val;
+    } else if (val === 'auto') {
+      zIndex.value = null;
     }
   },
   { immediate: true },
@@ -931,13 +1048,22 @@ watch(
 watch(
   () => x.value,
   (newVal, oldVal) => {
-    if (stickDrag.value || bodyDrag.value || newVal === left.value) {
+    const currentLeft = left.value;
+    const currentTop = top.value;
+
+    if (
+      stickDrag.value ||
+      bodyDrag.value ||
+      currentLeft === null ||
+      currentTop === null ||
+      newVal === currentLeft
+    ) {
       return;
     }
 
     const delta = oldVal - newVal;
 
-    bodyDown({ pageX: left.value!, pageY: top.value! } as MouseEvent &
+    bodyDown({ pageX: currentLeft, pageY: currentTop } as MouseEvent &
       TouchEvent);
     bodyMove({ x: delta, y: 0 });
 
@@ -950,13 +1076,22 @@ watch(
 watch(
   () => y.value,
   (newVal, oldVal) => {
-    if (stickDrag.value || bodyDrag.value || newVal === top.value) {
+    const currentLeft = left.value;
+    const currentTop = top.value;
+
+    if (
+      stickDrag.value ||
+      bodyDrag.value ||
+      currentLeft === null ||
+      currentTop === null ||
+      newVal === currentTop
+    ) {
       return;
     }
 
     const delta = oldVal - newVal;
 
-    bodyDown({ pageX: left.value, pageY: top.value } as MouseEvent &
+    bodyDown({ pageX: currentLeft, pageY: currentTop } as MouseEvent &
       TouchEvent);
     bodyMove({ x: 0, y: delta });
 
@@ -969,16 +1104,23 @@ watch(
 watch(
   () => w.value,
   (newVal, oldVal) => {
+    const currentRight = right.value;
+    const currentTop = top.value;
+
     if (stickDrag.value || bodyDrag.value || newVal === width.value) {
       return;
     }
 
+    if (currentRight === null || currentTop === null) {
+      return;
+    }
+
     const stick = 'mr';
     const delta = (oldVal as number) - (newVal as number);
 
     stickDown(
       stick,
-      { pageX: right.value, pageY: top.value! + height.value / 2 },
+      { pageX: currentRight, pageY: currentTop + height.value / 2 },
       true,
     );
     stickMove({ x: delta, y: 0 });
@@ -992,16 +1134,23 @@ watch(
 watch(
   () => h.value,
   (newVal, oldVal) => {
+    const currentLeft = left.value;
+    const currentBottom = bottom.value;
+
     if (stickDrag.value || bodyDrag.value || newVal === height.value) {
       return;
     }
 
+    if (currentLeft === null || currentBottom === null) {
+      return;
+    }
+
     const stick = 'bm';
     const delta = (oldVal as number) - (newVal as number);
 
     stickDown(
       stick,
-      { pageX: left.value! + width.value / 2, pageY: bottom.value },
+      { pageX: currentLeft + width.value / 2, pageY: currentBottom },
       true,
     );
     stickMove({ x: 0, y: delta });
@@ -1015,7 +1164,7 @@ watch(
 watch(
   () => parentW.value,
   (val) => {
-    right.value = val - width.value - left.value!;
+    right.value = val - width.value - (left.value ?? 0);
     parentWidth.value = val;
   },
 );
@@ -1023,7 +1172,7 @@ watch(
 watch(
   () => parentH.value,
   (val) => {
-    bottom.value = val - height.value - top.value!;
+    bottom.value = val - height.value - (top.value ?? 0);
     parentHeight.value = val;
   },
 );