From 78f1b87538cd563d42c6c0181522f85b6f1bb61a Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Sun, 12 Nov 2023 23:46:17 -0800
Subject: [PATCH 1/4] fix(canvasShotCutPanel): add click event to quick insert
 component in shortcutpanel

---
 .../src/components/container/CanvasDragItem.vue | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/canvas/src/components/container/CanvasDragItem.vue b/packages/canvas/src/components/container/CanvasDragItem.vue
index d3814351d8..232ec99757 100644
--- a/packages/canvas/src/components/container/CanvasDragItem.vue
+++ b/packages/canvas/src/components/container/CanvasDragItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div draggable="true" class="drag-item" @dragstart="dragstart">
+  <div draggable="true" class="drag-item" @dragstart="dragstart" @click="handleClick">
     <slot></slot>
   </div>
 </template>
@@ -13,9 +13,8 @@ export default {
   emits: ['click'],
   setup(props, { emit }) {
     const dragstart = (e) => {
-      if (props.data && e.button === 0) {
+      if (props.data) {
         const data = JSON.parse(JSON.stringify(props.data))
-        emit('click', data)
         dragStart(data)
 
         // 设置拖拽鼠标样式和设置拖拽预览图
@@ -24,8 +23,18 @@ export default {
         e.dataTransfer.setDragImage(target, 10, 10)
       }
     }
+
+    const handleClick = () => {
+      if (props.data) {
+        const data = JSON.parse(JSON.stringify(props.data))
+
+        emit('click', data)
+      }
+    }
+
     return {
-      dragstart
+      dragstart,
+      handleClick
     }
   }
 }

From c5711bb5f57dea43c455886c1f87c76787efd176 Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Mon, 13 Nov 2023 00:51:22 -0800
Subject: [PATCH 2/4] fix(canvasShortPanel): add deepclone utils

---
 .../components/container/CanvasDragItem.vue   |  8 +++-
 packages/utils/src/utils/index.js             | 40 ++++++++++++++-----
 2 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/packages/canvas/src/components/container/CanvasDragItem.vue b/packages/canvas/src/components/container/CanvasDragItem.vue
index 232ec99757..864670c950 100644
--- a/packages/canvas/src/components/container/CanvasDragItem.vue
+++ b/packages/canvas/src/components/container/CanvasDragItem.vue
@@ -5,7 +5,11 @@
 </template>
 
 <script>
+import { utils } from '@opentiny/tiny-engine-utils'
 import { dragStart } from './container'
+
+const { deepClone } = utils
+
 export default {
   props: {
     data: Object
@@ -14,7 +18,7 @@ export default {
   setup(props, { emit }) {
     const dragstart = (e) => {
       if (props.data) {
-        const data = JSON.parse(JSON.stringify(props.data))
+        const data = deepClone(props.data)
         dragStart(data)
 
         // 设置拖拽鼠标样式和设置拖拽预览图
@@ -26,7 +30,7 @@ export default {
 
     const handleClick = () => {
       if (props.data) {
-        const data = JSON.parse(JSON.stringify(props.data))
+        const data = deepClone(props.data)
 
         emit('click', data)
       }
diff --git a/packages/utils/src/utils/index.js b/packages/utils/src/utils/index.js
index 4dee6dc4c9..92718b51aa 100644
--- a/packages/utils/src/utils/index.js
+++ b/packages/utils/src/utils/index.js
@@ -1,16 +1,17 @@
 /**
-* Copyright (c) 2023 - present TinyEngine Authors.
-* Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
-*
-* Use of this source code is governed by an MIT-style license.
-*
-* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
-* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
-* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
-*
-*/
+ * Copyright (c) 2023 - present TinyEngine Authors.
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
 
 import { isObject, isArray } from '@opentiny/vue-renderless/grid/static'
+import { extend, copyArray } from '@opentiny/vue-renderless/common/object'
 
 export const fun_ctor = Function
 
@@ -177,3 +178,22 @@ export function generateRandomLetters(length = 1) {
   }
   return result
 }
+
+export function deepClone(target) {
+  try {
+    return structuredClone(target)
+  } catch (error) {
+    // target is not serializable
+  }
+
+  // 走到这里说明目标对象，不可以使用原生方法深克隆
+  if (Array.isArray(target)) {
+    return copyArray(target)
+  }
+
+  if (Object.prototype.toString.call(target) === '[object Object]') {
+    return extend(true, {}, target)
+  }
+
+  return target
+}

From cb522474eceab09612da982067b4478b5285bb6f Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Tue, 14 Nov 2023 04:38:43 -0800
Subject: [PATCH 3/4] feat(utils): add deepClone method

---
 packages/utils/src/utils/index.js | 119 +++++++++++++++++++++++++++---
 1 file changed, 110 insertions(+), 9 deletions(-)

diff --git a/packages/utils/src/utils/index.js b/packages/utils/src/utils/index.js
index 92718b51aa..308fb70950 100644
--- a/packages/utils/src/utils/index.js
+++ b/packages/utils/src/utils/index.js
@@ -10,8 +10,8 @@
  *
  */
 
+import { isRef, isProxy, unRef, toRaw } from 'vue'
 import { isObject, isArray } from '@opentiny/vue-renderless/grid/static'
-import { extend, copyArray } from '@opentiny/vue-renderless/common/object'
 
 export const fun_ctor = Function
 
@@ -179,21 +179,122 @@ export function generateRandomLetters(length = 1) {
   return result
 }
 
-export function deepClone(target) {
+export function getRawValue(target) {
+  if (isRef(target)) {
+    return unRef(target)
+  }
+
+  if (isProxy(target)) {
+    return toRaw(target)
+  }
+
+  return target
+}
+
+export function getType(val) {
+  let type = typeof val
+
+  if (type !== 'object') {
+    return type
+  }
+
+  return Object.prototype.toString.call(val).replace(/\[object (.*)\]/, '$1')
+}
+
+function copyArray(target, map, _deepClone) {
+  let res = []
+
+  map.set(target, res)
+
+  target.forEach((item, index) => {
+    res[index] = _deepClone(item, map)
+  })
+
+  return res
+}
+
+function copyMap(target, map, _deepClone) {
+  let res = new Map()
+
+  map.set(target, res)
+
+  target.forEach((value, key) => {
+    res.set(key, _deepClone(value, map))
+  })
+
+  return res
+}
+
+function copySet(target, map, _deepClone) {
+  let res = new Set()
+
+  map.set(target, res)
+
+  target.forEach((value) => {
+    res.add(_deepClone(value, map))
+  })
+
+  return res
+}
+
+function copyObject(target, map, _deepClone) {
+  const res = {}
+
+  map.set(target, res)
+
+  Object.entries(target).forEach(([key, value]) => {
+    res[key] = _deepClone(value, map)
+  })
+
+  return res
+}
+
+export function naiveDeepClone(target) {
   try {
     return structuredClone(target)
   } catch (error) {
-    // target is not serializable
+    // target is no serializable
+  }
+}
+
+const copyMethodMap = {
+  Array: copyArray,
+  Map: copyMap,
+  Set: copySet,
+  Object: copyObject
+}
+
+export function _deepClone(target, map) {
+  if (map.has(target)) {
+    return map.get(target)
   }
 
-  // 走到这里说明目标对象，不可以使用原生方法深克隆
-  if (Array.isArray(target)) {
-    return copyArray(target)
+  const copyTarget = getRawValue(target)
+  const basicType = ['undefined', 'number', 'string', 'boolean', 'function', 'bigint', 'symbol', 'Null']
+
+  let type = getType(copyTarget)
+
+  if (basicType.includes(type)) {
+    return target
   }
 
-  if (Object.prototype.toString.call(target) === '[object Object]') {
-    return extend(true, {}, target)
+  let res = naiveDeepClone(copyTarget)
+
+  if (res) {
+    map.set(target, res)
+
+    return res
   }
 
-  return target
+  if (copyMethodMap[type]) {
+    res = copyMethodMap[type](target, map, _deepClone)
+
+    return res
+  }
+
+  return copyTarget
+}
+
+export function deepClone(target) {
+  return _deepClone(target, new WeakMap())
 }

From 50f6f183b759cb83073a8206c15a63e88196e229 Mon Sep 17 00:00:00 2001
From: chilingling <michaelchiling1024@gmail.com>
Date: Tue, 14 Nov 2023 19:50:19 -0800
Subject: [PATCH 4/4] feat(unit-test): add unit test for deepclone function

---
 packages/utils/package.json           |   9 +-
 packages/utils/src/utils/index.js     |  56 +++++++---
 packages/utils/test/deepClone.test.js | 151 ++++++++++++++++++++++++++
 packages/utils/vite.config.js         |   2 +-
 4 files changed, 199 insertions(+), 19 deletions(-)
 create mode 100644 packages/utils/test/deepClone.test.js

diff --git a/packages/utils/package.json b/packages/utils/package.json
index df4d2e38a2..7a7d5dce39 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -11,7 +11,8 @@
     "dist"
   ],
   "scripts": {
-    "build": "vite build"
+    "build": "vite build",
+    "test": "vitest"
   },
   "keywords": [],
   "repository": {
@@ -26,9 +27,11 @@
   "license": "MIT",
   "homepage": "https://opentiny.design/tiny-engine",
   "devDependencies": {
-    "vite": "^4.3.7"
+    "vite": "^4.3.7",
+    "vitest": "^0.34.6"
   },
   "dependencies": {
-    "@opentiny/vue-renderless": "~3.10.0"
+    "@opentiny/vue-renderless": "~3.10.0",
+    "vue": "^3.3.8"
   }
 }
diff --git a/packages/utils/src/utils/index.js b/packages/utils/src/utils/index.js
index 308fb70950..061d281b42 100644
--- a/packages/utils/src/utils/index.js
+++ b/packages/utils/src/utils/index.js
@@ -10,7 +10,7 @@
  *
  */
 
-import { isRef, isProxy, unRef, toRaw } from 'vue'
+import { isRef, isProxy, unref, toRaw } from 'vue'
 import { isObject, isArray } from '@opentiny/vue-renderless/grid/static'
 
 export const fun_ctor = Function
@@ -180,15 +180,17 @@ export function generateRandomLetters(length = 1) {
 }
 
 export function getRawValue(target) {
-  if (isRef(target)) {
-    return unRef(target)
+  let res = target
+
+  if (isRef(res)) {
+    res = unref(res)
   }
 
-  if (isProxy(target)) {
-    return toRaw(target)
+  if (isProxy(res)) {
+    return toRaw(res)
   }
 
-  return target
+  return res
 }
 
 export function getType(val) {
@@ -201,7 +203,7 @@ export function getType(val) {
   return Object.prototype.toString.call(val).replace(/\[object (.*)\]/, '$1')
 }
 
-function copyArray(target, map, _deepClone) {
+function cloneArray(target, map, _deepClone) {
   let res = []
 
   map.set(target, res)
@@ -213,7 +215,7 @@ function copyArray(target, map, _deepClone) {
   return res
 }
 
-function copyMap(target, map, _deepClone) {
+function cloneMap(target, map, _deepClone) {
   let res = new Map()
 
   map.set(target, res)
@@ -225,7 +227,7 @@ function copyMap(target, map, _deepClone) {
   return res
 }
 
-function copySet(target, map, _deepClone) {
+function cloneSet(target, map, _deepClone) {
   let res = new Set()
 
   map.set(target, res)
@@ -237,7 +239,7 @@ function copySet(target, map, _deepClone) {
   return res
 }
 
-function copyObject(target, map, _deepClone) {
+function cloneObject(target, map, _deepClone) {
   const res = {}
 
   map.set(target, res)
@@ -257,14 +259,31 @@ export function naiveDeepClone(target) {
   }
 }
 
+/**
+ * 使用 JSON.stringify 进行 deep clone
+ * 不支持 Map、Set、Date、RegExp、ArrayBuffer 等变量类型
+ * 不支持循环引用
+ * @param {*} target target to be copy
+ * @param {*} callback target copyed
+ */
+export function jsonDeepClone(target, callback) {
+  try {
+    JSON.parse(JSON.stringify(target))
+  } catch (error) {
+    if (typeof callback === 'function') {
+      callback()
+    }
+  }
+}
+
 const copyMethodMap = {
-  Array: copyArray,
-  Map: copyMap,
-  Set: copySet,
-  Object: copyObject
+  Array: cloneArray,
+  Map: cloneMap,
+  Set: cloneSet,
+  Object: cloneObject
 }
 
-export function _deepClone(target, map) {
+function _deepClone(target, map) {
   if (map.has(target)) {
     return map.get(target)
   }
@@ -295,6 +314,13 @@ export function _deepClone(target, map) {
   return copyTarget
 }
 
+/**
+ * 优先使用 structuredClone 的深拷贝方法
+ * 不支持 拷贝 prototype、function、DOM nodes、proxy(getter、setter)
+ * 如果是 vue 的 ref 或者 reactive，会尝试拿到 raw value 然后进行深拷贝
+ * @param {*} target value to be deep clone
+ * @returns * deepCloned target
+ */
 export function deepClone(target) {
   return _deepClone(target, new WeakMap())
 }
diff --git a/packages/utils/test/deepClone.test.js b/packages/utils/test/deepClone.test.js
new file mode 100644
index 0000000000..6c819f3a2f
--- /dev/null
+++ b/packages/utils/test/deepClone.test.js
@@ -0,0 +1,151 @@
+import { ref, reactive } from 'vue'
+import { expect, test } from 'vitest'
+import { deepClone } from '../src/utils'
+
+test('should be clone primitive value', () => {
+  expect(deepClone(null)).toBe(null)
+  expect(deepClone(undefined)).toBe(undefined)
+  expect(deepClone('a')).toBe('a')
+  expect(deepClone(1)).toBe(1)
+  expect(deepClone(false)).toBe(false)
+  expect(deepClone(1n)).toBe(1n)
+})
+
+test('should be clone simple object', () => {
+  const map = new Map()
+
+  map.set('a', 1)
+  map.set('b', [1, { b: 2 }])
+
+  const set = new Set()
+
+  set.add(1)
+  set.add('2')
+
+  const obj = {
+    a: 1,
+    b: '2',
+    c: true,
+    d: false,
+    e: 0,
+    f: undefined,
+    g: null,
+    arr: ['a', '', 0, false, { c: 'ccc' }],
+    arrLike: { 0: 'a', length: 1 },
+    reg: /word/gim,
+    date: new Date(),
+    map,
+    set
+  }
+
+  const newObj = deepClone(obj)
+
+  expect(newObj).toStrictEqual(obj)
+  expect(newObj !== obj).toBe(true)
+  expect(newObj.arr[4] !== obj.arr[4]).toBe(true)
+})
+
+test('should be clone map', () => {
+  const map = new Map()
+
+  map.set('a', 1)
+  map.set('b', [1, { b: 2 }])
+
+  const newMap = deepClone(map)
+
+  expect(map).toStrictEqual(newMap)
+  expect(newMap.get('a')).toBe(1)
+  expect(newMap.get('b') !== map.get('b')).toBe(true)
+  expect(newMap.get('b')).toStrictEqual(map.get('b'))
+})
+
+test('should be clone set', () => {
+  const set = new Set()
+
+  set.add(1)
+  set.add('2')
+
+  const newSet = deepClone(set)
+
+  expect(newSet.size).toBe(2)
+  expect(newSet.has(1)).toBe(true)
+  expect(newSet.has('2')).toBe(true)
+})
+
+test('should be clone with circular reference', () => {
+  const obj = {
+    foo: { b: { c: { d: {} } } },
+    bar: {}
+  }
+
+  obj.foo.b.c.d = obj
+  obj.bar.b = obj.foo.b
+
+  const newObj = deepClone(obj)
+
+  expect(newObj.bar.b === newObj.foo.b && newObj === newObj.foo.b.c.d && newObj !== obj).toBe(true)
+})
+
+test('should be clone with `index` and `input` array properties', () => {
+  const arr = /c/.exec('abcde')
+  const clonedArr = deepClone(arr)
+
+  expect(clonedArr.index).toBe(2)
+  expect(clonedArr.input).toBe('abcde')
+})
+
+test('should be clone with ref value', () => {
+  const map = new Map()
+
+  map.set('a', 1)
+  map.set('b', [1, { b: 2 }])
+
+  const set = new Set()
+
+  set.add(1)
+  set.add('2')
+
+  const obj = {
+    a: 1,
+    b: '2',
+    c: true,
+    d: false,
+    e: 0,
+    f: undefined,
+    g: null,
+    arr: ['a', '', 0, false, { c: 'ccc' }],
+    arrLike: { 0: 'a', length: 1 },
+    reg: /word/gim,
+    date: new Date(),
+    map,
+    set
+  }
+
+  const objRef = ref(obj)
+
+  const newObj = deepClone(objRef)
+
+  expect(newObj).toStrictEqual(obj)
+  expect(newObj !== obj && newObj !== objRef.value).toBe(true)
+  expect(newObj.arr[4] !== objRef.value.arr[4] && newObj.arr[4].c === objRef.value.arr[4].c).toBe(true)
+})
+
+test('should be clone with reactive with inner refs', () => {
+  const origin = {
+    a: 'a',
+    b: 2,
+    c: 'c',
+    d: ['aaa', 'ad']
+  }
+
+  const obj = reactive({
+    a: 'a',
+    b: 2,
+    c: ref('c'),
+    d: ['aaa', ref('ad')]
+  })
+
+  const newObj = deepClone(obj)
+  expect(newObj).toStrictEqual(newObj)
+  expect(newObj.d !== origin.d).toBe(true)
+})
diff --git a/packages/utils/vite.config.js b/packages/utils/vite.config.js
index 1b48c67c88..60ec86120a 100644
--- a/packages/utils/vite.config.js
+++ b/packages/utils/vite.config.js
@@ -26,7 +26,7 @@ export default defineConfig({
       formats: ['es']
     },
     rollupOptions: {
-      external: [/@opentiny\/tiny-engine.*/, /@opentiny\/vue.*/]
+      external: ['vue', /@opentiny\/tiny-engine.*/, /@opentiny\/vue.*/]
     }
   }
 })