fl-web-component 1.4.8 → 2.0.0-beta.1

package/patches/camera-controls+2.9.0.patch

@@ -1,63 +1,63 @@
-diff --git a/node_modules/camera-controls/dist/camera-controls.module.js b/node_modules/camera-controls/dist/camera-controls.module.js
-index 08a8fd6..76089cb 100644
---- a/node_modules/camera-controls/dist/camera-controls.module.js
-+++ b/node_modules/camera-controls/dist/camera-controls.module.js
-@@ -1395,7 +1395,7 @@ class CameraControls extends EventDispatcher {
-      * @category Methods
-      */
-     dolly(distance, enableTransition = false) {
--        return this.dollyTo(this._sphericalEnd.radius - distance, enableTransition);
-+        return this.dollyTo(this._sphericalEnd.radius - distance, this.minDistance, enableTransition);
-     }
-     /**
-      * Dolly in/out camera position to given distance.
-@@ -1403,11 +1403,11 @@ class CameraControls extends EventDispatcher {
-      * @param enableTransition Whether to move smoothly or immediately.
-      * @category Methods
-      */
--    dollyTo(distance, enableTransition = false) {
-+    dollyTo(distance, minDistance, enableTransition = false) {
-         this._isUserControllingDolly = false;
-         this._lastDollyDirection = DOLLY_DIRECTION.NONE;
-         this._changedDolly = 0;
--        return this._dollyToNoClamp(clamp(distance, this.minDistance, this.maxDistance), enableTransition);
-+        return this._dollyToNoClamp(clamp(distance, minDistance, this.maxDistance), enableTransition);
-     }
-     _dollyToNoClamp(distance, enableTransition = false) {
-         const lastRadius = this._sphericalEnd.radius;
-@@ -1635,7 +1635,7 @@ class CameraControls extends EventDispatcher {
-         if (isPerspectiveCamera(this._camera)) {
-             const distance = this.getDistanceToFitBox(bbSize.x, bbSize.y, bbSize.z, cover);
-             promises.push(this.moveTo(center.x, center.y, center.z, enableTransition));
--            promises.push(this.dollyTo(distance, enableTransition));
-+            promises.push(this.dollyTo(distance, this.minDistance, enableTransition));
-             promises.push(this.setFocalOffset(0, 0, 0, enableTransition));
-         }
-         else if (isOrthographicCamera(this._camera)) {
-@@ -1664,7 +1664,7 @@ class CameraControls extends EventDispatcher {
-         promises.push(this.moveTo(boundingSphere.center.x, boundingSphere.center.y, boundingSphere.center.z, enableTransition));
-         if (isPerspectiveCamera(this._camera)) {
-             const distanceToFit = this.getDistanceToFitSphere(boundingSphere.radius);
--            promises.push(this.dollyTo(distanceToFit, enableTransition));
-+            promises.push(this.dollyTo(distanceToFit, this.minDistance, enableTransition));
-         }
-         else if (isOrthographicCamera(this._camera)) {
-             const width = this._camera.right - this._camera.left;
-@@ -1831,7 +1831,7 @@ class CameraControls extends EventDispatcher {
-         _zColumn.multiplyScalar(cameraToPoint.z);
-         _v3A.copy(_xColumn).add(_yColumn).add(_zColumn);
-         _v3A.z = _v3A.z + distance;
--        this.dollyTo(distance, false);
-+        this.dollyTo(distance, Number.EPSILON, false);
-         this.setFocalOffset(-_v3A.x, _v3A.y, -_v3A.z, false);
-         this.moveTo(targetX, targetY, targetZ, false);
-     }
-@@ -2283,7 +2283,7 @@ class CameraControls extends EventDispatcher {
-         this.moveTo(obj.target[0], obj.target[1], obj.target[2], enableTransition);
-         _sphericalA.setFromVector3(_v3A.fromArray(obj.position).sub(this._targetEnd).applyQuaternion(this._yAxisUpSpace));
-         this.rotateTo(_sphericalA.theta, _sphericalA.phi, enableTransition);
--        this.dollyTo(_sphericalA.radius, enableTransition);
-+        this.dollyTo(_sphericalA.radius, this.minDistance, enableTransition);
-         this.zoomTo(obj.zoom, enableTransition);
-         this.setFocalOffset(obj.focalOffset[0], obj.focalOffset[1], obj.focalOffset[2], enableTransition);
-         this._needsUpdate = true;
+diff --git a/node_modules/camera-controls/dist/camera-controls.module.js b/node_modules/camera-controls/dist/camera-controls.module.js
+index 08a8fd6..76089cb 100644
+--- a/node_modules/camera-controls/dist/camera-controls.module.js
++++ b/node_modules/camera-controls/dist/camera-controls.module.js
+@@ -1395,7 +1395,7 @@ class CameraControls extends EventDispatcher {
+      * @category Methods
+      */
+     dolly(distance, enableTransition = false) {
+-        return this.dollyTo(this._sphericalEnd.radius - distance, enableTransition);
++        return this.dollyTo(this._sphericalEnd.radius - distance, this.minDistance, enableTransition);
+     }
+     /**
+      * Dolly in/out camera position to given distance.
+@@ -1403,11 +1403,11 @@ class CameraControls extends EventDispatcher {
+      * @param enableTransition Whether to move smoothly or immediately.
+      * @category Methods
+      */
+-    dollyTo(distance, enableTransition = false) {
++    dollyTo(distance, minDistance, enableTransition = false) {
+         this._isUserControllingDolly = false;
+         this._lastDollyDirection = DOLLY_DIRECTION.NONE;
+         this._changedDolly = 0;
+-        return this._dollyToNoClamp(clamp(distance, this.minDistance, this.maxDistance), enableTransition);
++        return this._dollyToNoClamp(clamp(distance, minDistance, this.maxDistance), enableTransition);
+     }
+     _dollyToNoClamp(distance, enableTransition = false) {
+         const lastRadius = this._sphericalEnd.radius;
+@@ -1635,7 +1635,7 @@ class CameraControls extends EventDispatcher {
+         if (isPerspectiveCamera(this._camera)) {
+             const distance = this.getDistanceToFitBox(bbSize.x, bbSize.y, bbSize.z, cover);
+             promises.push(this.moveTo(center.x, center.y, center.z, enableTransition));
+-            promises.push(this.dollyTo(distance, enableTransition));
++            promises.push(this.dollyTo(distance, this.minDistance, enableTransition));
+             promises.push(this.setFocalOffset(0, 0, 0, enableTransition));
+         }
+         else if (isOrthographicCamera(this._camera)) {
+@@ -1664,7 +1664,7 @@ class CameraControls extends EventDispatcher {
+         promises.push(this.moveTo(boundingSphere.center.x, boundingSphere.center.y, boundingSphere.center.z, enableTransition));
+         if (isPerspectiveCamera(this._camera)) {
+             const distanceToFit = this.getDistanceToFitSphere(boundingSphere.radius);
+-            promises.push(this.dollyTo(distanceToFit, enableTransition));
++            promises.push(this.dollyTo(distanceToFit, this.minDistance, enableTransition));
+         }
+         else if (isOrthographicCamera(this._camera)) {
+             const width = this._camera.right - this._camera.left;
+@@ -1831,7 +1831,7 @@ class CameraControls extends EventDispatcher {
+         _zColumn.multiplyScalar(cameraToPoint.z);
+         _v3A.copy(_xColumn).add(_yColumn).add(_zColumn);
+         _v3A.z = _v3A.z + distance;
+-        this.dollyTo(distance, false);
++        this.dollyTo(distance, Number.EPSILON, false);
+         this.setFocalOffset(-_v3A.x, _v3A.y, -_v3A.z, false);
+         this.moveTo(targetX, targetY, targetZ, false);
+     }
+@@ -2283,7 +2283,7 @@ class CameraControls extends EventDispatcher {
+         this.moveTo(obj.target[0], obj.target[1], obj.target[2], enableTransition);
+         _sphericalA.setFromVector3(_v3A.fromArray(obj.position).sub(this._targetEnd).applyQuaternion(this._yAxisUpSpace));
+         this.rotateTo(_sphericalA.theta, _sphericalA.phi, enableTransition);
+-        this.dollyTo(_sphericalA.radius, enableTransition);
++        this.dollyTo(_sphericalA.radius, this.minDistance, enableTransition);
+         this.zoomTo(obj.zoom, enableTransition);
+         this.setFocalOffset(obj.focalOffset[0], obj.focalOffset[1], obj.focalOffset[2], enableTransition);
+         this._needsUpdate = true;

package/src/main.js

@@ -2,10 +2,17 @@ import FlModel from '../packages/components/com-graphics/index.vue';
 import Fl2dcanvas from '../packages/components/com-flcanvas/index.vue';
 import FLPerControl from '../packages/components/com-graphics/per-control.vue';
 import FlSvg from '../packages/components/com-graphics/pid.vue';
+import FlTiles from '../packages/components/com-tiles/index.vue'
 import * as THREE from 'three';
 import pkg from '../package.json';
 
-const components = [FlModel, Fl2dcanvas, FLPerControl, FlSvg];
+const components = [
+    FlModel,
+    Fl2dcanvas,
+    FLPerControl,
+    FlSvg,
+    FlTiles
+];
 
 const install = Vue => {
   Vue.prototype.THREE = THREE;
@@ -24,5 +31,6 @@ export default {
   FlModel,
   FlSvg,
   Fl2dcanvas,
+  FlTiles,
   FLPerControl,
 };

package/src/utils/cloud.js

@@ -0,0 +1,110 @@
+export function drawCloudWave(path, start, end, arcRadius, density) {
+  const dx = end.x - start.x;
+  const dy = end.y - start.y;
+  const length = Math.sqrt(dx * dx + dy * dy);
+  
+  if (length === 0) return;
+  
+  // 计算单位向量
+  const unitX = dx / length;
+  const unitY = dy / length;
+  
+  // 计算垂直向量
+  const perpX = -unitY;
+  const perpY = unitX;
+  
+  // 中点
+  const midX = (start.x + end.x) / 2;
+  const midY = (start.y + end.y) / 2;
+  
+  // 最大弧度点（向外凸）
+  const amplitude = arcRadius * density;
+  const peakX = midX - perpX * amplitude;  // 向外凸
+  const peakY = midY - perpY * amplitude;
+  
+  // 使用三次贝塞尔曲线创建平滑的圆弧效果
+  // 控制点稍微向内收缩，创建更自然的S形曲线
+  const control1X = start.x + dx * 0.25;
+  const control1Y = start.y + dy * 0.25;
+  const control2X = end.x - dx * 0.25;
+  const control2Y = end.y - dy * 0.25;
+  
+  // 添加弧度偏移
+  const arcOffsetX = -perpX * amplitude * 0.3;
+  const arcOffsetY = -perpY * amplitude * 0.3;
+  
+  path.bezierCurveTo(
+    control1X + arcOffsetX,
+    control1Y + arcOffsetY,
+    control2X + arcOffsetX,
+    control2Y + arcOffsetY,
+    end.x,
+    end.y
+  );
+}
+
+
+// // 绘制云线路径
+export function drawCloudPath(path, vertices, config, close) {
+  const { radius, density } = config;
+  
+  if (vertices.length < 3) return;
+  
+  // 从第一个顶点开始
+  path.moveTo(vertices[0].x, vertices[0].y);
+  let n = vertices.length
+  // 如果close为false则不闭合
+  if(!close) n-- 
+  // 为每条边绘制云线效果
+  for (let i = 0; i < n; i++) {
+    const currentVertex = vertices[i];
+    const nextVertex = vertices[(i + 1) % vertices.length];
+    
+    // 在当前边绘制云线效果
+    drawCloudWave(path, currentVertex, nextVertex, radius, density);
+  }
+ 
+  // if(close) path.closePath();
+  path.closePath()
+  path.stroke()
+  // path.restore()
+}
+
+
+// // 基于原始顶点扩充成更多点
+export function expansionHexagonVertices(originalVertices, frequency) {
+  const expansionVertices = [];
+  let n = originalVertices.length 
+  for (let i = 0; i < n; i++) {
+    const current = originalVertices[i];
+    const next = originalVertices[(i + 1) % originalVertices.length];
+    
+    const len = Math.floor(Math.sqrt((next.x - current.x) ** 2 + (next.y - current.y) ** 2) / 1 / 8)
+   
+    for (let j = 0; j < len; j++) {
+      const ratio = len === 1 ? 0 : j / (len - 1); // 0 到 1 之间
+      const expansionPoint = {
+        x: current.x + (next.x - current.x) * ratio,
+        y: current.y + (next.y - current.y) * ratio
+      };
+      
+      expansionVertices.push(expansionPoint);
+    }
+  }
+  
+  return expansionVertices;
+}
+
+// 绘制云线
+export function drawCloudLines(path, vertices) {
+  const frequency = 8;
+  const expansionVertices = expansionHexagonVertices(vertices, frequency);
+  // 云线配置
+  const config = {
+    radius: 15,
+    outward: true,
+    density: 0.8
+  };
+
+  drawCloudPath(path, expansionVertices, config);
+}

package/src/utils/cursor.js

@@ -0,0 +1,10 @@
+
+let cursors={
+  pen:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACd0lEQVRYR+2WT2gTQRTGv7eb9JLkmPoHvHkQLy2i94o0KMiyMxgRbwrmpigeFBUJFPHiRegpgiLiQZbMTFoR/4AX7UVQCD14EfGcQkGFiia7T0Yq1HWTbLeGgnSOszPv9/HNex9L2ORFm8zHloD/1gHyff8cEZ0EEAIIyuXybKPR6MZ7biQOCCEaAM6shRHRrFLq7MgF+L5/nIgexUHMHOXz+XIQBMt/CPuXY+h53m7Xdd8BKPWpO6m1bo9EQLVaHet2uwtEtL8P/HMul9sRBMG3kQjwff8WEV3sA2cAp7TW90fSA0KIwwCeAInBxsx8wRhzO0nchqdACDEeRVHbcZztCQA7gjWt9d1+vbYhAfV63Wm3208BTCcAekR0Win1YFCjb0iAEOIygJsJgB9EdEIppYdNWWYBUsoDzPwawFgMssLMwhjzfBjcfs8sQAjRBCBjkC9RFB1ttVqv0sBTC6hUKoVisSiZeS8RPVZKLQghbNTayP29lpn5iDHmTVp4KgGrVhsAO1cLv9RaH7LuSSlvMPN5AF8BVOIpl0bIwCeoVqvlXq+3CGDbmmI2VI5prZXdm5qaypVKpbH5+fmVNMB1BZGUcoaZr8UvMXPXcZx7RHSn2Wy+BWBFZVp9HajVavmlpaVPa6xPBBDRdaXUTCZ6vynwPK/kuu4lAFeHFWbmK8aYpCwYdvXX978ckFLuY2Zra9plm+9F2sNDe8COXKFQ+AhgPEXRxYmJicl6vR6lOJv8hEm71oUwDB86jrNnQOH3YRh6c3NzH7LCB+aAbcJOp3OQiKaZeRcRWUe+A+gQ0TPXdXX85yKLkMxRnAWWdGdLwJYDPwFn/dQhz4OkVwAAAABJRU5ErkJggg==',
+  line:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAA4klEQVRYR+3WTQrCMBCG4fmy8AYeyo2kBS+goAsPJPhzhTEIHso7SEa6EETsXzJjN+m+vE8nhQlo4gcT96kAygRMJ1BV1RrAg5nvbT+7GaCJi8gJwBPAiplvvxAmAO/9hoiOAJyIRCLahhAufwF8fLkjIhGRfQjh8JcjGBtvUGpHkBJXA6TGVQA58WxAbjwLoBFPBmjFkwCa8dEA7fgogEV8MMAqPghgGe8FWMc7Ad8r1Tm3Y+az9i26dRl57xcArkQ061upOajObVjX9TLGOG+7TOSE3++qreNUTAGUCUw+gRcF0dchsIjssQAAAABJRU5ErkJggg==',
+  round:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACpUlEQVRYR+2WPW8TQRCG39mLqUBQuKQiCeJDSiT4DRCFwtk964KQ6BCWoCUfonMJOD1gRAkCjG/ODUmB+AcgpQECCVW6NBFQYecGbbSHEhPfnZ0ijbezduedx7PvzhzhiBcdcX4MAYYV6KsCQRAc29nZMSIyA+ASEZ22JhaRTQCfRCQqFApRo9H4k9fcuQG01mUiegTgTIb4BoAFZg7zQGQCBEHgtdvth0R0r0twTUQ2iMhqjAI427W/NDk5uVitVuM0kEwArfXSnuQdInpGREvNZvPHXuFSqTQ2MjIyLyK3AHhur8bMCwMDuLK/dQLbAMrM/CFN0BhzBUADwEnnDxNFUdQrpmcFrOE6nc4Xd+cdAFNZyZMkWuurRPTOVoKI1j3Pu9jLmD0BfN+/LiKvrCgRPQ7D8G4eUyVnjDF1ALfd71lmtlX5b/UEMMa8BHDDRiilRrvvPAumXC6Px3H8zZ17wcw3+wVYs86O4/hrq9U6n5XwoH1jjAUYB7DGzOf6BfgF4DiAZWa+NgiA1nqFiKYA/GbmE4MCrDDz9CEBfjLz7qvoXmke2L2CtPJlQRljMjVymVBExqIosi0297KNyfO87wObUGs9S0SvncATZr6TOzsA3/efikjFPeMgDMOkoe2TyWpEn12f7yilppvN5vs8EK4bLieNqFgsXqjX6+2+PGAPG2N8AE0XuK2UCrIgXPI3AE65OM3MrV7gmcPIGFMDMOcEbEt+LiK1bk8cNIzs+A7DcDGtapkA1WpVra6uPgAw3yVkm4w1ZjKObcP5t2zyiYmJ+4cex4mi1lorpWr2RaT+I6J1EZlLK/s+0DymSs5UKpXC1taWBjATx/FlpdTuJ1kcx5tKqY9EFBWLxVYvw/Vtwn7gBj2b6YFBhfPGDQGGFfgLW7AHMIfxtKYAAAAASUVORK5CYII=',
+  trangle:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAl0lEQVRYR+2WsQ2DMBBF/w1BaLIIW/gKGJIU31uwCJUzhFGKVIAEjiUr0nd/95+f5DsbGh9rnA8ByIAMnBoIISQz62o805zzO8b4OOp1CuDuuUb4twfJw6wrACuApRBmAPD81P4C8CI5lQC4+wxgFIAMyIAM/L2B5qO4ZArvam7vgprrGEAi2d9ax1WufaGJvmQyIAPNDWzonXsh3WqxKQAAAABJRU5ErkJggg==',
+  eraser:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA1hJREFUWEfFl09oXUUUxr/vPkzARRFcumhdVGgV8t7MJBFaaC30z0YQMW1AUWyhXVWlYmm7aLWbtiQNFboqoqUFgy1VFBcuuhDRJu2bM0kIRsFkJS7ctC9dNLwQ7pGBtDxe3p9734t04G7uPef7fvfMzJl7iac82I2/c25nzPfe/9ypTscAxphxksOrxlfTNB2ZmpqaywvSEYAx5n2SX9aZVUiOViqV0fn5+WpWkNwAxWLxuUKhcAfAliYmoqojIYRvskDkBrDWngNwop24qkaACCKtYnMBOOcGVDW+faEdwOrzqqqOpmk6Oj09XWmUkxfglqq+mdG8Nuz3CBJCuFqfmxnAGPMOyesdmNem3BSR/bU3MgFYa58BEAC80iUAVPVICOHKY52sAJ8BON2tecxPkmR3uVy+nRmgVCptTZIkvn1vtwAkv/LeH8w1BXUdrxuG+6q6PYTwR2YAa+0bAL7rxrUm96SInM+1C6y1sYmYdQCYXFxc3NmoRTddhM6546p6YR3MQfIt7/2tXI3IGGOTJDmsqoe7hLgmIu8102i5Da21XwN4FsBWAJs7AHkI4DURibuo4WgKYIx5neQPqrqvt7f3l+Xl5XgAnQQQm1LWcUZEzrYKbrUG7qjqX7Xl6+/vfzlN008ANC3pkwZD+mq1umd2dvZBbgBjzEckRwBsF5G79QKxOgA+JrmjaWnJd733bc+ONRUolUobkySZBBAPjg+aGQwNDRUWFhaOkvwQwKa6uBsiciDLPK0BcM5dVtVhVX01hDDfTqRYLG4uFApHAcQrjkcA9orIr+1y4/M1ANbaP1V1PIQQD6BMwzl3XVU3kpxU1VRE2n4xPVkr9Q7WWgWwX0RuZnE3xuwl+ZOqHggh3Ojr63thZmbmnyy5DStgjDlD8tO45ZaWlsbm5uaWW4k5526r6r8i8nZW09q4htvQWvsFgEMAhORF7/14I3Hn3CFV/ZzkLu/9vXUDiELGmH0kjwHYTfJbAGPe+98emwwODm5YWVmZAPC9iJzqxLzhFNQLOeeOqGoEeYnkJZJj5XL579WpGu7p6dk2MTFx/38DiMIDAwPPp2l6bBVkJf4OAoj/hZkXa9OGlYfcOVdK03SY5Iuqei2E8GOe/EaxmT5KuzVplf8fJR1KMBY8k7wAAAAASUVORK5CYII=',
+  text:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAA5klEQVRYR+2VPwrCMBSHfwlFvIizq6u7y0vR2Qt4A0dP4AmcLSUUhI6Ozs5epA5NpKBQ1Ni0tAThZUxe8r735Z9A4CYC5wcDsAGngTiOJ8aYRR+HVEp5StP09m0tJwARLQEc+wAAsNJaJ38NsDXGnOsVSCnnAHbPvqbxTgam1tp1lUAIcdBaX+sAb1v0kYCIfs5/rdX5GjYB+J4dBmADbIANsIHWBpRSs7IspeszyrLsAsAO9hQT0R3AyJWgKIpxnudVjFdrbSA4gFJqY62NXOVFUbRPkqT0Kr/66n0Dh4pjADYQ3MADakKSIQVRq+oAAAAASUVORK5CYII='
+}
+export default cursors;