update

src/components/right-nav.js

@@ -18,7 +18,7 @@ export const controlPanel = reactive({
             this.currentIndex = -1;
         } else {
             if (horizontalResizer.width < 5) {
-                horizontalResizer.width = 362;
+                horizontalResizer.width = 410;
             }
             this.currentIndex = index;
         }
@@ -29,7 +29,7 @@ export const controlPanel = reactive({
 export const horizontalResizer = reactive({
     active: false,
     hover: false,
-    width: 362,
+    width: 400,
     mousedown() {
         this.active = true;
         document.addEventListener('mousemove', resize);

src/components/setting/index.vue

@@ -131,6 +131,7 @@
                             v-model="colorManager.generals[colorManager.currentGerneralIndex].color"
                             @change="onGeneralColorChange"
                             :predefine="predefinedColors"
+                            :teleported="false"
                         />
                     </div>
                 </div>
@@ -157,10 +158,19 @@
                             v-model="colorManager.cells[colorManager.currentCellIndex].color"
                             @change="onCellColorChange"
                             :predefine="predefinedColors"
+                            :teleported="false"
                         />
                     </div>
                 </div>
+                <br>
 
+                <div class="setting-option" style="width: 380px;">
+                    <span class="option-title" style="width: 200px;">
+                        {{ t('setting.pulsation-speed') }}
+                    </span>
+                    <el-slider v-model="globalSetting.pulsationSpeed" show-stops :min="1" :max="11" :step="2"/>
+                </div>
+                <br>
             </div>
         </el-scrollbar>
     </div>
@@ -256,7 +266,7 @@ onMounted(() => {
     margin: 3px;
     padding: 8px 12px;
     height: 40px;
-    width: 280px !important;
+    width: 320px !important;
     border-radius: .5em;
     background-color: var(--background);
     display: flex;

src/hook/global.js

@@ -33,9 +33,15 @@ export const globalSetting = reactive({
     
     /**
      * @description 当前交叉点的样式
-     * @type {'connect' | 'slice' | 'concat'} currentStyle
+     * @type {'connect' | 'slice' | 'concat'}
      */
-    crossDotStyle: 'connect'
+    crossDotStyle: 'connect',
+
+    /**
+     * @description 脉动动效的速度
+     * @type {number}
+     */
+    pulsationSpeed: 5
 });
 
 export const globalLookup = reactive({

src/hook/render/wire.js

@@ -5,7 +5,7 @@ import { globalSetting } from '../global';
 import { NetlistRender } from '.';
 import { getMarginParamter, LAYOUT_CONSTANT, LINE_WIDTH } from './layout';
 import { svgResource } from '../skin/draw';
-import { PulseLine } from '../skin/plusation';
+import { PulseLine } from '../skin/pulsation';
 
 export class WireRender {
     /**

src/hook/skin/pulsation.js

@@ -1,4 +1,5 @@
 import * as d3 from 'd3';
+import { globalSetting } from '../global';
 
 let PluseIDCount = 0;
 
@@ -15,10 +16,10 @@ export class PulseLine {
     loadToSelection(parentSelection, data) {
         this.pluseId = data.id;
         
-        const gId = 'pluse-g' + data.id;
-        const pId = 'pluse-p' + data.id;
-        const mId = 'pluse-m' + data.id;
-        const uId = 'pluse-u' + data.id;
+        const gId = 'pulse-g' + data.id;
+        const pId = 'pulse-p' + data.id;
+        const mId = 'pulse-m' + data.id;
+        const uId = 'pulse-u' + data.id;
 
         const g = parentSelection.append("g")
             .attr("mask", `url(#${mId})`);
@@ -94,7 +95,7 @@ export class PulseLine {
             const pathLength = pathElement.getTotalLength();
             
             // 600 配合 3000 比较合适
-            const v = 0.5;
+            const v = globalSetting.pulsationSpeed / 10;
             const duration = pathLength / v;
     
             const keyframes = new KeyframeEffect(

src/i18n/ar.json

@@ -40,5 +40,6 @@
     "setting.cell-color-setting": "إعداد لون المكون",
     "cross-dot-style.slice": "فاصل",
     "cross-dot-style.connect": "محول مباشر",
-    "cross-dot-style.concat": "رمز الدمج"
+    "cross-dot-style.concat": "رمز الدمج",
+    "setting.pulsation-speed": "سرعة تأثير النبض"
 }

src/i18n/de.json

@@ -40,5 +40,6 @@
     "setting.cell-color-setting": "Gerätefarbe einstellen",
     "cross-dot-style.slice": "Trennzeichen",
     "cross-dot-style.connect": "Direktverbinder",
-    "cross-dot-style.concat": "Zusammenführungszeichen"
+    "cross-dot-style.concat": "Zusammenführungszeichen",
+    "setting.pulsation-speed": "Pulseffektgeschwindigkeit"
 }

src/i18n/en.json

@@ -40,5 +40,6 @@
     "setting.cell-color-setting": "Device color setting",
     "cross-dot-style.slice": "Separator",
     "cross-dot-style.connect": "Direct connector",
-    "cross-dot-style.concat": "Combining Character"
+    "cross-dot-style.concat": "Combining Character",
+    "setting.pulsation-speed": "Pulse Effect Speed"
 }

src/i18n/fr.json

@@ -40,5 +40,6 @@
     "setting.cell-color-setting": "Réglage de la couleur de l'appareil",
     "cross-dot-style.slice": "Séparateur",
     "cross-dot-style.connect": "Connecteur direct",
-    "cross-dot-style.concat": "Caractère de combinaison"
+    "cross-dot-style.concat": "Caractère de combinaison",
+    "setting.pulsation-speed": "Vitesse de l'effet de pulsation"
 }

src/i18n/ja.json

@@ -40,5 +40,6 @@
     "setting.cell-color-setting": "デバイスの色設定",
     "cross-dot-style.slice": "区切り文字",
     "cross-dot-style.connect": "ダイレクトコネクタ",
-    "cross-dot-style.concat": "結合文字"
+    "cross-dot-style.concat": "結合文字",
+    "setting.pulsation-speed": "パルスエフェクト速度"
 }

src/i18n/ko.json

@@ -40,5 +40,6 @@
     "setting.cell-color-setting": "장치 색상 설정",
     "cross-dot-style.slice": "구분자",
     "cross-dot-style.connect": "직접 연결기",
-    "cross-dot-style.concat": "결합 문자"
+    "cross-dot-style.concat": "결합 문자",
+    "setting.pulsation-speed": "펄스 효과 속도"
 }

src/i18n/ru.json

@@ -40,5 +40,6 @@
     "setting.cell-color-setting": "Настройка цвета устройства",
     "cross-dot-style.slice": "Разделитель",
     "cross-dot-style.connect": "Прямой соединитель",
-    "cross-dot-style.concat": "Комбинирующий символ"
+    "cross-dot-style.concat": "Комбинирующий символ",
+    "setting.pulsation-speed": "Скорость импульсного эффекта"
 }

src/i18n/zh-cn.json

@@ -40,5 +40,6 @@
     "setting.cell-color-setting": "器件颜色设置",
     "cross-dot-style.slice": "拆分符",
     "cross-dot-style.connect": "直连符",
-    "cross-dot-style.concat": "合并符"
+    "cross-dot-style.concat": "合并符",
+    "setting.pulsation-speed": "脉冲特效速度"
 }

src/i18n/zh-tw.json

@@ -40,5 +40,6 @@
     "setting.cell-color-setting": "器件顏色設置",
     "cross-dot-style.slice": "分隔符",
     "cross-dot-style.connect": "直連符",
-    "cross-dot-style.concat": "合併符"
+    "cross-dot-style.concat": "合併符",
+    "setting.pulsation-speed": "脈衝特效速度"
 }

vue.config.js

@@ -17,6 +17,7 @@ module.exports = defineConfig({
     },
     devServer: {
         hot: false,
+        host: 'localhost',
         liveReload: false
     }
 })