logic

Author: xinfei1

src/App.test.js renamed to src/App.spec.js

@@ -1,11 +1,12 @@
 import React, { Component } from 'react';
+import background_card from '@/logo.svg'
 //拖拽预览组件类
 export default class CardListDragPreview extends Component {
 	render() {
 		const { cardListLength, cardId } = this.props;
 		let divDom = [];
 		for (let index = 0; index < cardListLength; index++) {
-			//第一个显示layer的dom，需要显示图片和数量红色气泡
+			//第一个显示layer的dom，需要显示图片
 			if (index === cardListLength - 1) {
 				const myIndex = index >= 3 ? 3 : index;
 				divDom.push(
@@ -15,6 +16,12 @@ export default class CardListDragPreview extends Component {
 						style={{ left: `${myIndex * 5}px`, top: `${myIndex * 5}px` }}
 					>
 						<span className='layer-card-span'>{cardId}</span>
+						<img 
+							src={background_card}
+							alt='logo'
+							width='107'
+							height='113'
+						/>
 					</div>
 				);
 			} else if (index < 3) {//layer的dom最多显示四个

src/components/cardListDragPreview.jsx

@@ -66,6 +66,8 @@ export const layoutCheck = (function () {
 						widthOrHeight = item.height;
 					}
 					//判断当前卡片的坐标和目标卡片加上宽度/高度是否有重叠，防止重叠产生
+					//在vertical情况下，是判断类似拖拽(0,1)宽1高1的方块与(0,0)宽1高2的纵向长方形，此时的交叠，纵向长方形保持不动，
+					//在horizontal情况下，是判断类似拖拽(1,0)宽1高1的方块与(0,0)宽2高1的横向长方形，此时的交叠，横向长方形保持不动，
 					if (
 						layoutItem[axis] > item[axis] &&
 						layoutItem[axis] < item[axis] + widthOrHeight

src/utils/collision.js

@@ -16,7 +16,7 @@ class MyContent extends Component {
 	constructor(props) {
 		super(props);
 		this.state = {
-			compactType: 'horizontal',//('vertical' | 'horizontal') = 'vertical'
+			compactType: 'vertical',//('vertical' | 'horizontal') = 'vertical'
 			defaultLayout: {
 				containerWidth: 1200,
 				containerHeight: 300,
@@ -42,7 +42,6 @@ class MyContent extends Component {
 		};
 	}
 	/*
-	 * 工作桌面 用户桌面设置 页面
 	 * 关于卡片在组内的操作
 	 */
 	/**

src/views/content.jsx

@@ -1,3 +1,7 @@
+/**
+ * (0,0) 宽2 高1
+ * (1,0) 宽1 高1
+ */
 const testData1 = {
   test: {
     a: {
@@ -15,6 +19,10 @@ const testData1 = {
   },
   expect: true,
 };
+/**
+ * (0,0) 宽1 高1
+ * (1,0) 宽1 高1
+ */
 const testData2 = {
   test: {
     a: {
@@ -32,8 +40,31 @@ const testData2 = {
   },
   expect: false,
 };
+/**
+ * (0,0) 宽1 高2
+ * (0,1) 宽1 高1
+ * 碰撞 解决issue：when 2x2 or 1x2 collosion bug for horizontal
+ */
+const testData3 = {
+  test: {
+    a: {
+      gridx: 0,
+      gridy: 0,
+      width: 1,
+      height: 2
+    },
+    b: {
+      gridx: 0,
+      gridy: 1,
+      width: 1,
+      height: 1
+    }
+  },
+  expect: true,
+};
 
 export default [
   testData1,
-  testData2
+  testData2,
+  testData3
 ];