正在做etani,ejtile的動畫套件

分享和讨论Javascript相关的话题
头像
ejsoon
圈圈精英
圈圈精英
帖子: 3837
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 157 次
被圈友点赞: 188 次
联系:

Re: 正在做etani,ejtile的動畫套件

帖子 ejsoon »

代码: 全选

### 第一項改動

在 `createEtaniInner(etaniouter)` 函數中,找到以下代碼:

```javascript
etani_clone = originalSvg.cloneNode(true);
const etwaitElement = etani_clone.querySelector('.etwait');
if (etwaitElement) {
    etwaitElement.remove();
}
etani_clone.id = 'etmainani';
```

替換為:

```javascript
etani_clone = originalSvg.cloneNode(true);
const etwaitElement = etani_clone.querySelector('.etwait');
if (etwaitElement) {
    etwaitElement.remove();
}
// Remove the original id attribute from etani_clone
etani_clone.removeAttribute('id');
// Add id="etdropani" to .etdrop inside etani_clone
const etdropani = etani_clone.querySelector('.etdrop');
etdropani.id = 'etdropani';
```

在同一函數中,找到以下代碼:

```javascript
const etaniinner = document.createElement('div');
etaniinner.className = 'etaniinner';
etaniinner.id = 'etaniinner';
```

替換為:

```javascript
const etaniinner = document.createElement('div');
etaniinner.className = 'etaniinner';
```

### 第二項改動

在 `createIdsDisplay(existingIds, selectable, selected = [])` 函數中,找到以下代碼:

```javascript
if (selectable) {
    const zeroS = document.createElement('span');
    zeroS.className = 'etaniIdItem zero-s';
    zeroS.textContent = '0s';
    zeroS.classList.toggle('selected', selected.includes('0s'));
    zeroS.addEventListener('click', () => zeroS.classList.toggle('selected'));
    div.appendChild(zeroS);
}

existingIds.forEach(id => {
    const span = document.createElement('span');
    span.className = 'etaniIdItem';
    span.textContent = id;
    if (selectable) {
        span.addEventListener('click', () => {
            div.querySelectorAll('.etaniIdItem:not(.zero-s)').forEach(s => s.classList.remove('selected'));
            span.classList.add('selected');
        });
        if (selected.includes(id)) span.classList.add('selected');
    }
    div.appendChild(span);
});
```

確認已包含高亮邏輯(已選擇的id和0s會高亮)。若無需額外改動,則無需替換;若需強化,替換為:

```javascript
if (selectable) {
    const zeroS = document.createElement('span');
    zeroS.className = 'etaniIdItem zero-s';
    zeroS.textContent = '0s';
    // Highlight if '0s' is selected
    zeroS.classList.toggle('selected', selected.includes('0s'));
    zeroS.addEventListener('click', () => zeroS.classList.toggle('selected'));
    div.appendChild(zeroS);
}

existingIds.forEach(id => {
    const span = document.createElement('span');
    span.className = 'etaniIdItem';
    span.textContent = id;
    if (selectable) {
        span.addEventListener('click', () => {
            div.querySelectorAll('.etaniIdItem:not(.zero-s)').forEach(s => s.classList.remove('selected'));
            span.classList.add('selected');
        });
        // Highlight if id is selected
        if (selected.includes(id)) span.classList.add('selected');
    }
    div.appendChild(span);
});
```

### 第三項改動

在 `showWindow(type, animateType, useId, existingSpan = null, otherAttrName = null)` 函數中,找到以下代碼(historyDiv的部分):

```javascript
historyDiv = document.createElement('div');
historyDiv.className = 'etaniHistory';
historyDiv.textContent = 'History: ';
const historyIds = getHistoryIds();
historyIds.forEach(id => {
    const span = document.createElement('span');
    span.className = 'etaniIdItem';
    span.textContent = id;
    span.addEventListener('click', () => {
        span.remove(); // Remove from history UI on click
    });
    historyDiv.appendChild(span);
});
```

替換為:

```javascript
historyDiv = document.createElement('div');
historyDiv.className = 'etaniHistory';
historyDiv.textContent = 'History: ';
const historyIds = getHistoryIds();
historyIds.forEach(id => {
    const span = document.createElement('span');
    span.className = 'etaniIdItem';
    span.textContent = id;
    span.addEventListener('click', () => {
        // Remove the id reference from all begin attributes in SVG
        const allAnimates = etani_clone.querySelectorAll('animateTransform, animate[attributeName="opacity"]');
        allAnimates.forEach(animate => {
            let begin = animate.getAttribute('begin');
            if (begin) {
                const parts = begin.split(';').filter(part => {
                    const trimmed = part.trim();
                    return !(trimmed === id || trimmed === `${id}.end`);
                });
                if (parts.length > 0) {
                    animate.setAttribute('begin', parts.join(';'));
                } else {
                    animate.removeAttribute('begin');
                }
            }
        });
        span.remove(); // Remove from history UI on click
        updateEtaniResult(); // Update the result after removal
    });
    historyDiv.appendChild(span);
});
```
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
圈圈精英
圈圈精英
帖子: 3837
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 157 次
被圈友点赞: 188 次
联系:

Re: 正在做etani,ejtile的動畫套件

帖子 ejsoon »

begin編輯始終改不好。
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
圈圈精英
圈圈精英
帖子: 3837
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 157 次
被圈友点赞: 188 次
联系:

Re: 正在做etani,ejtile的動畫套件

帖子 ejsoon »

animateTransform,不用加父元素,也不用計算:

代码: 全选

<use href="#tile4" fill="#9c9aff" stroke="#777" transform="translate(86.603,25.903) scale(1,1) rotate(0)" class="tiledropped"><animateTransform attributeName="transform" attributeType="XML" type="translate" values="86.603,25.903;0.001,-113.975;0.001,-113.975;86.603,25.903;86.603,25.903" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform attributeName="transform" attributeType="XML" type="scale" additive="sum" values="1,1;1,1;1,1;1,1;1,1" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform attributeName="transform" attributeType="XML" type="rotate" additive="sum" values="0;-40.55;-40.55;0;0" dur="3.6s" repeatCount="indefinite" begin="0s"/></use>
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
圈圈精英
圈圈精英
帖子: 3837
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 157 次
被圈友点赞: 188 次
联系:

Re: 正在做etani,ejtile的動畫套件

帖子 ejsoon »

改動:

之前在往etani_clone加入animateTransform動畫時,是在<use>外加了兩個父元素,同時它的值是需要計算的。

現在改為不用加父元素,把三個animateTransform都加到use內,順序是translate、scale、rotate。其中translate沒有additive=sum而後二者有。

同時在加值的時候不需要計算,只需要把當前的svg#etmain中對應的<use>的transform屬性中的值搬過來即可。

etani_clone的結果舉例如下
```
<use href="#tile4" fill="#9c9aff" stroke="#777" transform="translate(86.603,25.903) scale(1,1) rotate(0)" class="tiledropped"><animateTransform attributeName="transform" attributeType="XML" type="translate" values="86.603,25.903;0.001,-113.975;0.001,-113.975;86.603,25.903;86.603,25.903" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform attributeName="transform" attributeType="XML" type="scale" additive="sum" values="1,1;1,1;1,1;1,1;1,1" dur="3.6s" repeatCount="indefinite" begin="0s"/><animateTransform id="tile4anitr" attributeName="transform" attributeType="XML" type="rotate" additive="sum" values="0;-40.55;-40.55;0;0" dur="3.6s" repeatCount="indefinite" begin="0s"/></use>
```

用繁體中文回答。只需告知所要更改的代碼和位置,以及要替換的內容。代碼的注釋都要是英文。
上次由 ejsoon 在 2025年 10月 20日 20:44,总共编辑 1 次。
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
圈圈精英
圈圈精英
帖子: 3837
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 157 次
被圈友点赞: 188 次
联系:

Re: 正在做etani,ejtile的動畫套件

帖子 ejsoon »

代码: 全选

### 修改位置 1: 移除或修改與 wrapper 相關的函數和邏輯

- **位置**: 全域變數和輔助函數區塊,包括 `parseTransform()`, `extractTransformPart()`, `calculateAdditiveValue()`。
- **更改原因**: 不再需要計算 additive 值,也無需 wrapper,直接從原 transform 提取值。
- **替換內容**: 移除 `calculateAdditiveValue()` 函數。修改 `parseTransform()` 和 `extractTransformPart()` 為簡化版本,只提取值而不計算。替換為以下代碼:
  ```javascript
  // Extract a specific transform function and its value from a transform string
  function extractTransformPart(transformString, type) {
      const regex = new RegExp(`(${type})\\(([^)]+)\\)`, 'i');
      const match = transformString.match(regex);
      if (match) {
          return { func: match[1], value: match[2].trim() };
      }
      return { func: '', value: '' };
  }

  // Parse transform string to get individual transform values
  function parseTransform(transformString) {
      const defaultTransform = { translate: '0,0', scale: '1', rotate: '0' };
      if (!transformString) return defaultTransform;

      const transform = {};

      const getMatch = (type) => {
          const part = extractTransformPart(transformString, type).value;
          if (!part) return null;
          return part.split(/[,\s]+/).join(',');
      };

      transform.translate = getMatch('translate') || defaultTransform.translate;
      transform.scale = getMatch('scale') || defaultTransform.scale;
      transform.rotate = getMatch('rotate') || defaultTransform.rotate;

      return transform;
  }
  ```

### 修改位置 2: 修改 `handleAllAppendTransformClick()` 函數

- **位置**: `handleAllAppendTransformClick()` 函數整個區塊。
- **更改原因**: 不再添加 wrapper,直接在 <use> 內添加三個 animateTransform (translate 無 additive=sum, scale 和 rotate 有)。初始 values 直接從 originalUseElement 的 transform 提取。
- **替換內容**: 替換整個函數為以下代碼:
  ```javascript
  // Handle click event for the 'Transform' button
  function handleAllAppendTransformClick() {
      if (!etani_clone) return;

      const etdropUses = document.querySelectorAll('#etmain .etdrop use');
      const etaniItemRights = document.querySelectorAll('.etaniItemRight');

      const isRepeat = document.querySelector('.etaniModeRepeat.active');

      etdropUses.forEach((originalUseElement, i) => {
          const useId = originalUseElement.getAttribute('href').substring(1);
          const itemRight = etaniItemRights[i];
          
          if (!itemRight) return;

          if (itemRight.querySelector('.etaniAnimate[data-type="transform"]')) return;

          let cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
          if (!cloneUseElement) return;

          const originalTransformString = originalUseElement.getAttribute('transform') || 'translate(0,0) scale(1) rotate(0)';
          const transforms = parseTransform(originalTransformString);

          const baseAnimate = (type, initialValue, additive = false) => {
              const animate = document.createElementNS('http://www.w3.org/2000/svg', 'animateTransform');
              animate.setAttribute('attributeName', 'transform');
              animate.setAttribute('attributeType', 'XML');
              animate.setAttribute('type', type);
              animate.setAttribute('values', initialValue);
              if (additive) animate.setAttribute('additive', 'sum');
              animate.setAttribute('fill', isRepeat ? 'remove' : 'freeze');
              if (isRepeat) animate.setAttribute('repeatCount', 'indefinite');
              return animate;
          };
          
          cloneUseElement.appendChild(baseAnimate('translate', transforms.translate));
          cloneUseElement.appendChild(baseAnimate('scale', transforms.scale, true));
          cloneUseElement.appendChild(baseAnimate('rotate', transforms.rotate, true));

          const etaniAnimate = document.createElement('div');
          etaniAnimate.className = 'etaniAnimate';
          etaniAnimate.setAttribute('data-type', 'transform');

          const nameSpan = document.createElement('span');
          nameSpan.className = 'etaniAnimateName';
          nameSpan.textContent = 'transform';

          const durSpan = document.createElement('span');
          durSpan.className = 'etaniAnimateDur';
          durSpan.textContent = 'dur: 0s';
          durSpan.addEventListener('click', () => {
              const currentDur = parseFloat(durSpan.textContent.replace('dur: ', '').replace('s', ''));
              const newDur = prompt('Enter duration in seconds:', currentDur);
              if (newDur !== null && !isNaN(newDur) && newDur >= 0) {
                  const animates = etani_clone.querySelectorAll(`.etdrop use[href="#${useId}"] animateTransform`);
                  animates.forEach(animate => {
                      if (newDur > 0) {
                          animate.setAttribute('dur', `${newDur}s`);
                          if (isRepeat) {
                              animate.removeAttribute('fill');
                              animate.setAttribute('repeatCount', 'indefinite');
                          } else {
                              animate.removeAttribute('repeatCount');
                              animate.setAttribute('fill', 'freeze');
                          }
                      } else {
                          animate.removeAttribute('dur');
                          animate.removeAttribute('fill');
                          animate.removeAttribute('repeatCount');
                      }
                  });
                  durSpan.textContent = `dur: ${newDur}s`;
                  updateEtaniResult();
              }
          });

          const etaniAnimateAttr = document.createElement('div');
          etaniAnimateAttr.className = 'etaniAnimateAttr';
          etaniAnimateAttr.appendChild(nameSpan);
          etaniAnimateAttr.appendChild(durSpan);
          etaniAnimate.appendChild(etaniAnimateAttr);

          const frSpan = document.createElement('span');
          frSpan.className = 'etaniAnimateFR';
          frSpan.textContent = document.querySelector('.etaniModeMixed.active') ? 'freeze' : 'repeat';
          frSpan.style.display = document.querySelector('.etaniModeMixed.active') ? 'inline-block' : 'none';
          frSpan.addEventListener('click', () => {
              const currentValue = frSpan.textContent;
              const newValue = currentValue === 'freeze' ? 'repeat' : 'freeze';
              frSpan.textContent = newValue;

              const animates = etani_clone.querySelectorAll(`.etdrop use[href="#${useId}"] animateTransform`);
              animates.forEach(animate => {
                  if (animate.hasAttribute('fill') || animate.hasAttribute('repeatCount')) {
                      if (newValue === 'repeat') {
                          animate.removeAttribute('fill');
                          animate.setAttribute('repeatCount', 'indefinite');
                      } else {
                          animate.removeAttribute('repeatCount');
                          animate.setAttribute('fill', 'freeze');
                      }
                  }
              });
              updateEtaniResult();
          });
          etaniAnimateAttr.appendChild(frSpan);

          // Add the attribute add button
          const animateType = 'transform';
          const attrAddSpan = document.createElement('span');
          attrAddSpan.className = 'etaniAnimateAttrAdd';
          attrAddSpan.textContent = '+';
          attrAddSpan.addEventListener('click', (e) => showDropdown(e, animateType, useId));
          etaniAnimateAttr.appendChild(attrAddSpan);

          // Handle clicks on existing attribute spans
          etaniAnimateAttr.addEventListener('click', (e) => {
              if (e.target.classList.contains('etaniAnimateId')) {
                  editAttribute(e.target, animateType, useId, 'id');
              } else if (e.target.classList.contains('etaniAnimateBegin')) {
                  editAttribute(e.target, animateType, useId, 'begin');
              } else if (e.target.classList.contains('etaniAnimateOther')) {
                  editAttribute(e.target, animateType, useId, 'other', e.target.textContent.split('=')[0]);
              }
          });

          const valueDiv = document.createElement('div');
          valueDiv.className = 'etaniAnimateValue';
          
          const avCtrlDiv = createControlButtons('transform', useId);
          
          const avLabelSpan = document.createElement('span');
          avLabelSpan.className = 'etaniAVLabel';
          avLabelSpan.textContent = 'values : ';

          const avDiv = document.createElement('div');
          avDiv.className = 'etaniAV';
          
          const avItemSpan = document.createElement('span');
          avItemSpan.className = 'etaniAVItem';
          avItemSpan.textContent = 'a';
          avItemSpan.addEventListener('click', (e) => handleAVItemClick(e, 'transform'));
          
          avDiv.appendChild(avItemSpan);
          
          valueDiv.appendChild(avCtrlDiv);
          valueDiv.appendChild(avLabelSpan);
          valueDiv.appendChild(avDiv);

          etaniAnimate.appendChild(valueDiv);
          itemRight.appendChild(etaniAnimate);
      });

      updateEtaniResult();
  }
  ```

### 修改位置 3: 修改 `handleAVAddClick()` 函數

- **位置**: `handleAVAddClick()` 函數整個區塊。
- **更改原因**: 添加新值時,不再計算 additive,直接從原 #etmain 的 <use> transform 提取值並 append 到 values。
- **替換內容**: 替換整個函數為以下代碼(僅 transform 部分修改,opacity 保持):
  ```javascript
  // Handle click event for the '+' button for transform or opacity
  function handleAVAddClick(e, useElementId, animateType = 'transform') {
      e.preventDefault();
      if (!etani_clone) return;

      // Reset all modes before adding a new value
      resetModes(animateType);

      const etaniItemRight = e.currentTarget.closest('.etaniItemRight');
      const etaniAV = etaniItemRight.querySelector(`.etaniAnimate[data-type="${animateType}"] .etaniAV`);
      const etaniAnimate = etaniItemRight.querySelector(`.etaniAnimate[data-type="${animateType}"]`);

      if (animateType === 'transform') {
          const originalUseElement = document.querySelector(`.etdrop use[href="#${useElementId}"]`);
          if (!originalUseElement) return;

          const originalTransformString = originalUseElement.getAttribute('transform') || 'translate(0,0) scale(1) rotate(0)';
          const transforms = parseTransform(originalTransformString);

          const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useElementId}"]`);
          if (!cloneUseElement) return;

          const animatesTranslate = cloneUseElement.querySelector('animateTransform[type="translate"]');
          const animatesScale = cloneUseElement.querySelector('animateTransform[type="scale"]');
          const animatesRotate = cloneUseElement.querySelector('animateTransform[type="rotate"]');
          
          const allAnimates = [animatesTranslate, animatesScale, animatesRotate];
          
          allAnimates.forEach((animate, index) => {
              if (!animate) return;
              let currentValueString = animate.getAttribute('values') || '';
              let newValue = '';
              
              if (index === 0) { // translate
                  newValue = transforms.translate;
              } else if (index === 1) { // scale
                  newValue = transforms.scale;
              } else if (index === 2) { // rotate
                  newValue = transforms.rotate;
              }
              
              const newValueString = (currentValueString ? currentValueString + ';' : '') + newValue;
              animate.setAttribute('values', newValueString);
              updateDuration(animate, etaniAnimate, newValueString.split(';').length);
          });
      } else if (animateType === 'opacity') {
          const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useElementId}"]`);
          if (!cloneUseElement) return;

          const animateOpacity = cloneUseElement.querySelector('animate[attributeName="opacity"]');
          if (!animateOpacity) return;

          const currentValueString = animateOpacity.getAttribute('values') || '';
          const values = currentValueString ? currentValueString.split(';') : [];
          const newValue = values.length > 0 ? values[values.length - 1] : '1';
          const newValueString = (currentValueString ? currentValueString + ';' : '') + newValue;
          animateOpacity.setAttribute('values', newValueString);
          updateDuration(animateOpacity, etaniAnimate, newValueString.split(';').length);
      }

      // Add new etaniAVItem with appropriate label
      if (etaniAV && etaniAnimate) {
          const newAVItem = document.createElement('span');
          newAVItem.className = 'etaniAVItem';
          newAVItem.addEventListener('click', (e) => handleAVItemClick(e, animateType));

          const existingItems = etaniAV.querySelectorAll('.etaniAVItem');
          if (animateType === 'transform') {
              const existingLetters = Array.from(existingItems).map(item => item.textContent);
              newAVItem.textContent = findFirstMissingLetter(existingLetters);
          } else if (animateType === 'opacity') {
              const values = animateType === 'opacity' ? 
                  etaniAnimate.querySelector('animate[attributeName="opacity"]')?.getAttribute('values')?.split(';') || ['1'] :
                  ['1'];
              newAVItem.textContent = values[values.length - 1];
          }

          etaniAV.appendChild(newAVItem);
      }

      updateEtaniResult();
  }
  ```

### 修改位置 4: 修改 `handleAVItemClick()` 函數

- **位置**: `handleAVItemClick()` 函數中的 transform 相關邏輯。
- **更改原因**: 移除 wrapper 相關查詢,改為直接從 <use> 內查詢 animateTransform。刪除時,如果 values 為空,移除所有 animateTransform。
- **替換內容**: 在函數內的 `if (animateType === 'transform') { ... }` 區塊替換為:
  ```javascript
  if (animateType === 'transform') {
      const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
      if (!cloneUseElement) return;

      const animatesTranslate = cloneUseElement.querySelector('animateTransform[type="translate"]');
      const animatesScale = cloneUseElement.querySelector('animateTransform[type="scale"]');
      const animatesRotate = cloneUseElement.querySelector('animateTransform[type="rotate"]');
      
      const allAnimates = [animatesTranslate, animatesScale, animatesRotate];
      
      allAnimates.forEach(animate => {
          const values = animate.getAttribute('values').split(';');
          
          if (itemIndex < values.length) {
              values.splice(itemIndex, 1);
              if (values.length === 0) {
                  // Remove the entire transform animation
                  animate.remove();
                  etaniAnimate.remove();
              } else {
                  animate.setAttribute('values', values.join(';'));
                  updateDuration(animate, etaniItemRight.querySelector(`.etaniAnimate[data-type="${animateType}"]`), values.length);
              }
          }
      });
  }
  ```
  同時,在移動 (moving-mode) 和複製 (copying-mode) 的 transform 區塊中,替換查詢邏輯為:
  ```javascript
  const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
  const animatesTranslate = cloneUseElement.querySelector('animateTransform[type="translate"]');
  const animatesScale = cloneUseElement.querySelector('animateTransform[type="scale"]');
  const animatesRotate = cloneUseElement.querySelector('animateTransform[type="rotate"]');
  const allAnimates = [animatesTranslate, animatesScale, animatesRotate];
  ```

### 修改位置 5: 修改 `getAnimates()` 函數

- **位置**: `getAnimates()` 函數整個區塊。
- **更改原因**: 調整為從 <use> 內直接查詢 animateTransform,id 只應用到 rotate。
- **替換內容**: 替換整個函數為以下代碼:
  ```javascript
  // Get animate elements for the specific useId and type
  function getAnimates(animateType, useId, attrType = null) {
      if (animateType === 'transform') {
          const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
          if (attrType === 'id') {
              // For id, only apply to rotate in <use>
              return cloneUseElement?.querySelectorAll('animateTransform[type="rotate"]') || [];
          } else {
              return cloneUseElement?.querySelectorAll('animateTransform') || [];
          }
      } else {
          const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
          return cloneUseElement?.querySelectorAll('animate[attributeName="opacity"]') || [];
      }
  }
  ```

### 修改位置 6: 修改 `handleValueCtrlUpClick()` 和 `handleModeChange()` 等全局影響函數

- **位置**: `handleValueCtrlUpClick()` 中的 transform 相關邏輯,以及 `handleModeChange()` 中的 animates 查詢。
- **更改原因**: 調整 animates 查詢為不依賴 wrapper。
- **替換內容**: 在 `handleValueCtrlUpClick()` 中,將 `etani_clone.querySelectorAll('animateTransform, animate[attributeName="opacity"]')` 保持,但確保 useId 查詢時用 `etani_clone.querySelectorAll(\`.etdrop use[href="#${useId}"] animateTransform, .etdrop use[href="#${useId}"] animate[attributeName="opacity"]\`)`。類似調整 `handleModeChange()` 中的 `animates` 為 `etani_clone.querySelectorAll('.etdrop use animateTransform, .etdrop use animate[attributeName="opacity"]')`。
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
圈圈精英
圈圈精英
帖子: 3837
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 157 次
被圈友点赞: 188 次
联系:

Re: 正在做etani,ejtile的動畫套件

帖子 ejsoon »

改用gemini:

代码: 全选

好的,這裏是您要求的代碼更改。

根據您的需求,我們將修改 `handleAllAppendTransformClick` 函數來改變 `animateTransform` 元素的插入方式(全部放入 `<use>` 內,並設置正確的 `additive` 屬性),修改 `handleAVAddClick` 函數來從 `svg#etmain` 直接獲取變換值,並更新 `handleAVItemClick` 和 `getAnimates` 函數以適應新的 DOM 結構。

-----

### 1\. 函數 `handleAllAppendTransformClick()`

請在此函數的 `etdropUses.forEach` 循環內部,替換從 `let cloneUseElement = ...` 開始,到 `translateWrapper.appendChild(scaleWrapper);` 結束的代碼塊。

**請替換為以下內容:**

```javascript
        let cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
        if (!cloneUseElement) return;

        // Get the original transform values from the #etmain SVG
        const originalTransformString = originalUseElement.getAttribute('transform') || '';
        const originalTransforms = parseTransform(originalTransformString);

        const baseAnimate = (type, initialValue) => {
            const animate = document.createElementNS('http://www.w3.org/2000/svg', 'animateTransform');
            animate.setAttribute('attributeName', 'transform');
            animate.setAttribute('attributeType', 'XML');
            animate.setAttribute('type', type);
            animate.setAttribute('values', initialValue);
            animate.setAttribute('fill', isRepeat ? 'remove' : 'freeze');
            if (isRepeat) animate.setAttribute('repeatCount', 'indefinite');
            
            // Add additive="sum" for scale and rotate, but not for translate
            if (type === 'scale' || type === 'rotate') {
                animate.setAttribute('additive', 'sum');
            }
            return animate;
        };
        
        // Add all three animations directly to the <use> element
        // Order: translate, scale, rotate
        cloneUseElement.appendChild(baseAnimate('translate', originalTransforms.translate));
        cloneUseElement.appendChild(baseAnimate('scale', originalTransforms.scale));
        cloneUseElement.appendChild(baseAnimate('rotate', originalTransforms.rotate));

        const etaniAnimate = document.createElement('div');
        etaniAnimate.className = 'etaniAnimate';
        etaniAnimate.setAttribute('data-type', 'transform');

        const nameSpan = document.createElement('span');
        nameSpan.className = 'etaniAnimateName';
        nameSpan.textContent = 'transform';

        const durSpan = document.createElement('span');
        durSpan.className = 'etaniAnimateDur';
        durSpan.textContent = 'dur: 0s';
        durSpan.addEventListener('click', () => {
            const currentDur = parseFloat(durSpan.textContent.replace('dur: ', '').replace('s', ''));
            const newDur = prompt('Enter duration in seconds:', currentDur);
            if (newDur !== null && !isNaN(newDur) && newDur >= 0) {
                // Find animates inside the <use> element
                const animates = etani_clone.querySelectorAll(`.etdrop use[href="#${useId}"] animateTransform`);
                animates.forEach(animate => {
                    if (newDur > 0) {
                        animate.setAttribute('dur', `${newDur}s`);
                        if (isRepeat) {
                            animate.removeAttribute('fill');
                            animate.setAttribute('repeatCount', 'indefinite');
                        } else {
                            animate.removeAttribute('repeatCount');
                            animate.setAttribute('fill', 'freeze');
                        }
                    } else {
                        animate.removeAttribute('dur');
                        animate.removeAttribute('fill');
                        animate.removeAttribute('repeatCount');
                    }
                });
                durSpan.textContent = `dur: ${newDur}s`;
                updateEtaniResult();
            }
        });

        const etaniAnimateAttr = document.createElement('div');
        etaniAnimateAttr.className = 'etaniAnimateAttr';
        etaniAnimateAttr.appendChild(nameSpan);
        etaniAnimateAttr.appendChild(durSpan);
        etaniAnimate.appendChild(etaniAnimateAttr);

        const frSpan = document.createElement('span');
        frSpan.className = 'etaniAnimateFR';
        frSpan.textContent = document.querySelector('.etaniModeMixed.active') ? 'freeze' : 'repeat';
        frSpan.style.display = document.querySelector('.etaniModeMixed.active') ? 'inline-block' : 'none';
        frSpan.addEventListener('click', () => {
            const currentValue = frSpan.textContent;
            const newValue = currentValue === 'freeze' ? 'repeat' : 'freeze';
            frSpan.textContent = newValue;

            const useId = itemRight.closest('.etaniItem').querySelector('.tileid').textContent;
            // Find animates inside the <use> element
            const animates = etani_clone.querySelectorAll(`.etdrop use[href="#${useId}"] animateTransform`);
            animates.forEach(animate => {
                if (animate.hasAttribute('fill') || animate.hasAttribute('repeatCount')) {
                    if (newValue === 'repeat') {
                        animate.removeAttribute('fill');
                        animate.setAttribute('repeatCount', 'indefinite');
                    } else {
                        animate.removeAttribute('repeatCount');
                        animate.setAttribute('fill', 'freeze');
                    }
                }
            });
            updateEtaniResult();
        });
        etaniAnimateAttr.appendChild(frSpan);
```

-----

### 2\. 函數 `handleAVAddClick()`

請替換此函數中 `if (animateType === 'transform') { ... }` 的整個 `if` 區塊。

**請替換為以下內容:**

```javascript
    if (animateType === 'transform') {
        // Get the original <use> element from #etmain to read its current transform
        const originalUseElement = document.querySelector(`#etmain .etdrop use[href="#${useElementId}"]`);
        if (!originalUseElement) return;

        const originalTransformString = originalUseElement.getAttribute('transform') || '';
        const originalTransforms = parseTransform(originalTransformString);

        // Get the corresponding <use> element in the clone
        const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useElementId}"]`);
        if (!cloneUseElement) return;

        // Find all animateTransform elements inside the cloned <use>
        const animates = cloneUseElement.querySelectorAll('animateTransform');
        
        animates.forEach(animate => {
            const type = animate.getAttribute('type').toLowerCase();
            let currentValueString = animate.getAttribute('values') || '';
            let newValue = '';
            
            // Get the new value directly from the parsed original transform
            if (type === 'translate') {
                newValue = originalTransforms.translate;
            } else if (type === 'scale') {
                newValue = originalTransforms.scale;
            } else if (type === 'rotate') {
                newValue = originalTransforms.rotate;
            }
            
            const newValueString = (currentValueString ? currentValueString + ';' : '') + newValue;
            animate.setAttribute('values', newValueString);
            updateDuration(animate, etaniAnimate, newValueString.split(';').length);
        });
    }
```

-----

### 3\. 函數 `handleAVItemClick()`

此函數中有多個位置需要修改。

**(A) 移動 (Move) 邏輯**
在 `if (etaniCol.classList.contains(moving-mode-${animateType})) { ... }` 區塊中,找到並替換 `if (animateType === 'transform') { ... }` 區塊。

**請替換為以下內容:**

```javascript
            if (animateType === 'transform') {
                const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
                if (!cloneUseElement) return;

                const allAnimates = cloneUseElement.querySelectorAll('animateTransform');
                
                allAnimates.forEach(animate => {
                    const values = animate.getAttribute('values').split(';');
                    const valueToMove = values[sourceIndex];
                    values.splice(sourceIndex, 1);
                    if (sourceIndex < targetIndex) {
                        values.splice(targetIndex, 0, valueToMove);
                    } else {
                        values.splice(targetIndex, 0, valueToMove);
                    }
                    animate.setAttribute('values', values.join(';'));
                });
            }
```

**(B) 複製 (Copy) 邏輯**
在 `if (etaniCol.classList.contains(copying-mode-${animateType})) { ... }` 區塊中,找到並替換 `if (animateType === 'transform') { ... }` 區塊。

**請替換為以下內容:**

```javascript
        if (animateType === 'transform') {
            const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
            if (!cloneUseElement) return;

            const allAnimates = cloneUseElement.querySelectorAll('animateTransform');
            
            allAnimates.forEach(animate => {
                const values = animate.getAttribute('values').split(';');
                if (itemIndex < values.length) {
                    values.splice(itemIndex + 1, 0, values[itemIndex]);
                    animate.setAttribute('values', values.join(';'));
                    updateDuration(animate, etaniItemRight.querySelector(`.etaniAnimate[data-type="${animateType}"]`), values.length);
                }
            });
        }
```

**(C) 刪除 (Delete) 邏輯**
在 `if (etaniCol.classList.contains(deleting-mode-${animateType})) { ... }` 區塊中,找到並替換 `if (animateType === 'transform') { ... }` 區塊。

**請替換為以下內容:**

```javascript
        if (animateType === 'transform') {
            const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
            if (!cloneUseElement) return;

            const allAnimates = cloneUseElement.querySelectorAll('animateTransform');
            let newValuesLength = 0;
            
            allAnimates.forEach((animate, index) => {
                const values = animate.getAttribute('values').split(';');
                
                if (itemIndex < values.length) {
                    values.splice(itemIndex, 1);
                    newValuesLength = values.length; // All animations will have the same new length
                    
                    if (newValuesLength > 0) {
                        animate.setAttribute('values', values.join(';'));
                        // Only update duration on the first animate to avoid multiple calls
                        if (index === 0) { 
                            updateDuration(animate, etaniAnimate, newValuesLength);
                        }
                    }
                }
            });

            // If all values were removed, clean up
            if (newValuesLength === 0 && allAnimates.length > 0) {
                allAnimates.forEach(anim => anim.remove());
                etaniAnimate.remove();
            }
        }
```

-----

### 4\. 函數 `getAnimates()`

請替換整個 `getAnimates` 函數。

**請替換為以下內容:**

```javascript
    // Get animate elements for the specific useId and type
    function getAnimates(animateType, useId, attrType = null) {
        if (animateType === 'transform') {
            const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
            if (!cloneUseElement) return [];

            if (attrType === 'id') {
                // Per original logic and example, 'id' applies only to the rotate animation
                return cloneUseElement.querySelectorAll('animateTransform[type="rotate"]') || [];
            } else {
                // Other attributes (like 'begin') apply to all three
                return cloneUseElement.querySelectorAll('animateTransform') || [];
            }
        } else {
            const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
            return cloneUseElement?.querySelectorAll('animate[attributeName="opacity"]') || [];
        }
    }
```
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
圈圈精英
圈圈精英
帖子: 3837
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 157 次
被圈友点赞: 188 次
联系:

Re: 正在做etani,ejtile的動畫套件

帖子 ejsoon »

gemini承認變量聲明有誤:

代码: 全选

您好,非常抱歉,我上次提供的指示不夠清晰,導致您在 `handleAllAppendTransformClick` 函數中遇到了變量重複聲明的錯誤。

您指出的 `const etaniAnimate` 聲明(原文件約 1148 行)確實與我提供的替換代碼中的聲明重複了。

這是因為我上次應該指示您替換**更**大範圍的代碼塊(包括 SVG 元素創建和 HTML 控件創建的*所有*代碼),但我錯誤地只讓您替換了前半部分。

-----

**這是完整的更正方案:**

### 1\. 修正 `handleAllAppendTransformClick()` 函數

請在 `handleAllAppendTransformClick` 函數中,**完全替換** `etdropUses.forEach` 循環的**全部**內部代碼(在您的原文件中,大致是從第 1114 行的 `const useId = ...` 開始,一直到第 1200 行 `});` 之前的所有內容)。

**請替換為以下完整的代碼塊:**

```javascript
        const useId = originalUseElement.getAttribute('href').substring(1);
        const itemRight = etaniItemRights[i];
        
        if (!itemRight) return;

        // Check if transform animation already exists
        if (itemRight.querySelector('.etaniAnimate[data-type="transform"]')) return;

        let cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
        if (!cloneUseElement) return;

        // Get the original transform values from the #etmain SVG
        const originalTransformString = originalUseElement.getAttribute('transform') || '';
        const originalTransforms = parseTransform(originalTransformString);

        const baseAnimate = (type, initialValue) => {
            const animate = document.createElementNS('http://www.w3.org/2000/svg', 'animateTransform');
            animate.setAttribute('attributeName', 'transform');
            animate.setAttribute('attributeType', 'XML');
            animate.setAttribute('type', type);
            animate.setAttribute('values', initialValue);
            animate.setAttribute('fill', isRepeat ? 'remove' : 'freeze');
            if (isRepeat) animate.setAttribute('repeatCount', 'indefinite');
            
            // Add additive="sum" for scale and rotate, but not for translate
            if (type === 'scale' || type === 'rotate') {
                animate.setAttribute('additive', 'sum');
            }
            return animate;
        };
        
        // Add all three animations directly to the <use> element
        // Order: translate, scale, rotate
        cloneUseElement.appendChild(baseAnimate('translate', originalTransforms.translate));
        cloneUseElement.appendChild(baseAnimate('scale', originalTransforms.scale));
        cloneUseElement.appendChild(baseAnimate('rotate', originalTransforms.rotate));

        // --- Start of HTML control creation ---
        const etaniAnimate = document.createElement('div');
        etaniAnimate.className = 'etaniAnimate';
        etaniAnimate.setAttribute('data-type', 'transform');

        const nameSpan = document.createElement('span');
        nameSpan.className = 'etaniAnimateName';
        nameSpan.textContent = 'transform';

        const durSpan = document.createElement('span');
        durSpan.className = 'etaniAnimateDur';
        durSpan.textContent = 'dur: 0s';
        durSpan.addEventListener('click', () => {
            const currentDur = parseFloat(durSpan.textContent.replace('dur: ', '').replace('s', ''));
            const newDur = prompt('Enter duration in seconds:', currentDur);
            if (newDur !== null && !isNaN(newDur) && newDur >= 0) {
                // Find animates inside the <use> element
                const animates = etani_clone.querySelectorAll(`.etdrop use[href="#${useId}"] animateTransform`);
                animates.forEach(animate => {
                    if (newDur > 0) {
                        animate.setAttribute('dur', `${newDur}s`);
                        if (isRepeat) {
                            animate.removeAttribute('fill');
                            animate.setAttribute('repeatCount', 'indefinite');
                        } else {
                            animate.removeAttribute('repeatCount');
                            animate.setAttribute('fill', 'freeze');
                        }
                    } else {
                        animate.removeAttribute('dur');
                        animate.removeAttribute('fill');
                        animate.removeAttribute('repeatCount');
                    }
                });
                durSpan.textContent = `dur: ${newDur}s`;
                updateEtaniResult();
            }
        });

        const etaniAnimateAttr = document.createElement('div');
        etaniAnimateAttr.className = 'etaniAnimateAttr';
        etaniAnimateAttr.appendChild(nameSpan);
        etaniAnimateAttr.appendChild(durSpan);
        etaniAnimate.appendChild(etaniAnimateAttr);

        const frSpan = document.createElement('span');
        frSpan.className = 'etaniAnimateFR';
        frSpan.textContent = document.querySelector('.etaniModeMixed.active') ? 'freeze' : 'repeat';
        frSpan.style.display = document.querySelector('.etaniModeMixed.active') ? 'inline-block' : 'none';
        frSpan.addEventListener('click', () => {
            const currentValue = frSpan.textContent;
            const newValue = currentValue === 'freeze' ? 'repeat' : 'freeze';
            frSpan.textContent = newValue;

            const useId = itemRight.closest('.etaniItem').querySelector('.tileid').textContent;
            // Find animates inside the <use> element
            const animates = etani_clone.querySelectorAll(`.etdrop use[href="#${useId}"] animateTransform`);
            animates.forEach(animate => {
                if (animate.hasAttribute('fill') || animate.hasAttribute('repeatCount')) {
                    if (newValue === 'repeat') {
                        animate.removeAttribute('fill');
                        animate.setAttribute('repeatCount', 'indefinite');
                    } else {
                        animate.removeAttribute('repeatCount');
                        animate.setAttribute('fill', 'freeze');
                    }
                }
            });
            updateEtaniResult();
        });
        etaniAnimateAttr.appendChild(frSpan);

        // Add the attribute add button
        const animateType = 'transform';
        const attrAddSpan = document.createElement('span');
        attrAddSpan.className = 'etaniAnimateAttrAdd';
        attrAddSpan.textContent = '+';
        attrAddSpan.addEventListener('click', (e) => showDropdown(e, animateType, useId));
        etaniAnimateAttr.appendChild(attrAddSpan);

        // Handle clicks on existing attribute spans
        etaniAnimateAttr.addEventListener('click', (e) => {
            if (e.target.classList.contains('etaniAnimateId')) {
                editAttribute(e.target, animateType, useId, 'id');
            } else if (e.target.classList.contains('etaniAnimateBegin')) {
                editAttribute(e.target, animateType, useId, 'begin');
            } else if (e.target.classList.contains('etaniAnimateOther')) {
                editAttribute(e.target, animateType, useId, 'other', e.target.textContent.split('=')[0]);
            }
        });

        const valueDiv = document.createElement('div');
        valueDiv.className = 'etaniAnimateValue';
        
        const avCtrlDiv = createControlButtons('transform', useId);
        
        const avLabelSpan = document.createElement('span');
        avLabelSpan.className = 'etaniAVLabel';
        avLabelSpan.textContent = 'values : ';

        const avDiv = document.createElement('div');
        avDiv.className = 'etaniAV';
        
        const avItemSpan = document.createElement('span');
        avItemSpan.className = 'etaniAVItem';
        avItemSpan.textContent = 'a';
        avItemSpan.addEventListener('click', (e) => handleAVItemClick(e, 'transform'));
        
        avDiv.appendChild(avItemSpan);
        
        valueDiv.appendChild(avCtrlDiv);
        valueDiv.appendChild(avLabelSpan);
        valueDiv.appendChild(avDiv);

        etaniAnimate.appendChild(valueDiv);
        itemRight.appendChild(etaniAnimate);
```

*(**說明**:您在 1219 行 `handleAllAppendOpacityClick` 函數中看到的 `const etaniAnimate` 聲明是正確的,因為它在一個不同的函數作用域中,不會引起衝突。錯誤僅發生在 `handleAllAppendTransformClick` 內部。)*

-----

### 2\. 函數 `handleAVAddClick()`

在 `handleAVAddClick` 函數中,請替換 `if (animateType === 'transform') { ... }` 的**整個** `if` 區塊(原文件約 512 - 550 行)。

**請替換為以下內容:**

```javascript
    if (animateType === 'transform') {
        // Get the original <use> element from #etmain to read its current transform
        const originalUseElement = document.querySelector(`#etmain .etdrop use[href="#${useElementId}"]`);
        if (!originalUseElement) return;

        const originalTransformString = originalUseElement.getAttribute('transform') || '';
        const originalTransforms = parseTransform(originalTransformString);

        // Get the corresponding <use> element in the clone
        const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useElementId}"]`);
        if (!cloneUseElement) return;

        // Find all animateTransform elements inside the cloned <use>
        const animates = cloneUseElement.querySelectorAll('animateTransform');
        
        animates.forEach(animate => {
            const type = animate.getAttribute('type').toLowerCase();
            let currentValueString = animate.getAttribute('values') || '';
            let newValue = '';
            
            // Get the new value directly from the parsed original transform
            if (type === 'translate') {
                newValue = originalTransforms.translate;
            } else if (type === 'scale') {
                newValue = originalTransforms.scale;
            } else if (type === 'rotate') {
                newValue = originalTransforms.rotate;
            }
            
            const newValueString = (currentValueString ? currentValueString + ';' : '') + newValue;
            animate.setAttribute('values', newValueString);
            updateDuration(animate, etaniAnimate, newValueString.split(';').length);
        });
    }
```

-----

### 3\. 函數 `handleAVItemClick()`

此函數中有多個位置需要修改,以適應新的 `<use>` 結構。

**(A) 移動 (Move) 邏輯**
在 `if (etaniCol.classList.contains(moving-mode-${animateType})) { ... }` 區塊中,找到並**替換** `if (animateType === 'transform') { ... }` 區塊(原文件約 752 - 777 行)。

**請替換為以下內容:**

```javascript
            if (animateType === 'transform') {
                const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
                if (!cloneUseElement) return;

                const allAnimates = cloneUseElement.querySelectorAll('animateTransform');
                
                allAnimates.forEach(animate => {
                    const values = animate.getAttribute('values').split(';');
                    const valueToMove = values[sourceIndex];
                    values.splice(sourceIndex, 1);
                    if (sourceIndex < targetIndex) {
                        values.splice(targetIndex, 0, valueToMove);
                    } else {
                        values.splice(targetIndex, 0, valueToMove);
                    }
                    animate.setAttribute('values', values.join(';'));
                });
            }
```

**(B) 複製 (Copy) 邏輯**
在 `if (etaniCol.classList.contains(copying-mode-${animateType})) { ... }` 區塊中,找到並**替換** `if (animateType === 'transform') { ... }` 區塊(原文件約 802 - 824 行)。

**請替換為以下內容:**

```javascript
        if (animateType === 'transform') {
            const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
            if (!cloneUseElement) return;

            const allAnimates = cloneUseElement.querySelectorAll('animateTransform');
            
            allAnimates.forEach(animate => {
                const values = animate.getAttribute('values').split(';');
                if (itemIndex < values.length) {
                    values.splice(itemIndex + 1, 0, values[itemIndex]);
                    animate.setAttribute('values', values.join(';'));
                    updateDuration(animate, etaniItemRight.querySelector(`.etaniAnimate[data-type="${animateType}"]`), values.length);
                }
            });
        }
```

**(C) 刪除 (Delete) 邏輯**
在 `if (etaniCol.classList.contains(deleting-mode-${animateType})) { ... }` 區塊中,找到並**替換** `if (animateType === 'transform') { ... }` 區塊(原文件約 849 - 880 行)。

**請替換為以下內容:**

```javascript
        if (animateType === 'transform') {
            const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
            if (!cloneUseElement) return;

            const allAnimates = cloneUseElement.querySelectorAll('animateTransform');
            let newValuesLength = 0;
            
            allAnimates.forEach((animate, index) => {
                const values = animate.getAttribute('values').split(';');
                
                if (itemIndex < values.length) {
                    values.splice(itemIndex, 1);
                    newValuesLength = values.length; // All animations will have the same new length
                    
                    if (newValuesLength > 0) {
                        animate.setAttribute('values', values.join(';'));
                        // Only update duration on the first animate to avoid multiple calls
                        if (index === 0) { 
                            updateDuration(animate, etaniAnimate, newValuesLength);
                        }
                    }
                }
            });

            // If all values were removed, clean up
            if (newValuesLength === 0 && allAnimates.length > 0) {
                allAnimates.forEach(anim => anim.remove());
                etaniAnimate.remove();
            }
        }
```

-----

### 4\. 函數 `getAnimates()`

**替換**整個 `getAnimates` 函數(原文件約 1541 - 1558 行)。

**請替換為以下內容:**

```javascript
    // Get animate elements for the specific useId and type
    function getAnimates(animateType, useId, attrType = null) {
        if (animateType === 'transform') {
            const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
            if (!cloneUseElement) return [];

            if (attrType === 'id') {
                // Per original logic and example, 'id' applies only to the rotate animation
                return cloneUseElement.querySelectorAll('animateTransform[type="rotate"]') || [];
            } else {
                // Other attributes (like 'begin') apply to all three
                return cloneUseElement.querySelectorAll('animateTransform') || [];
            }
        } else {
            const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
            return cloneUseElement?.querySelectorAll('animate[attributeName="opacity"]') || [];
        }
    }
```
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
圈圈精英
圈圈精英
帖子: 3837
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 157 次
被圈友点赞: 188 次
联系:

Re: 正在做etani,ejtile的動畫套件

帖子 ejsoon »

gemini改的很好,雖然又有一個小問題,etaniAVDelete刪完最後一個值後報錯。
先記下當前代碼:

代码: 全选

// Global variable to hold the SVG clone and ensure state is maintained
let etani_clone = null;

// Track copy, move, and delete mode states, selected item, and last click time for double-click detection
let isCopyMode = false;
let isMoveMode = false;
let isDeleteMode = false;
let selectedMoveItem = null;
let lastClickTime = 0;
let lastClickedItem = null;

// Add dynamic CSS styles to the document
function addDynamicStyles() {
    if (document.getElementById('dynamic-et-styles')) {
        return;
    }

    const styleSheet = document.createElement('style');
    styleSheet.id = 'dynamic-et-styles'; 
    styleSheet.textContent = `
        /* Styles for etaniouter and button */
        .etaniouter {
            margin-top: 10px;
            padding: 10px;
            border: 1px solid #ddd;
            background-color: #f5f5f5;
        }

        /* Styles for etaniinner, etaniCtrl, etaniCol, etaniResult */
        .etaniinner {
            margin-top: 10px;
        }
        
        .etaniCtrl {
            margin-bottom: 10px; 
            clear: both;
            padding: 5px;
            border: 1px solid #c0c0c0;
            text-align: center;
        }
        
        /* Styles for etaniContent, etaniMode, etaniAllAppend, etaniValueCtrl */
        .etaniContent, .etaniMode, .etaniAllAppend, .etaniValueCtrl {
            display: inline-block;
            vertical-align: top;
            padding: 5px;
            border: 1px solid #ccc;
            margin: 0 5px 5px 5px;
            text-align: left;
        }

        .etaniCol {
            border: 1px solid #aaa;
            padding: 5px;
            margin-bottom: 10px; 
            clear: both;
        }

        /* Styles for etaniResult */
        .etaniResult {
            text-align: center;
            margin-bottom: 10px;
            padding: 10px;
            border: 1px solid #bbb;
            box-sizing: border-box;
        }
        
        /* Control and button styles */
        .etaniContent a, .etaniValueCtrl a {
            display: inline-block;
            margin: 0 5px;
            text-decoration: none;
            padding: 5px 10px;
            font-size: 14px;
        }
        
        .etaniCenter {
            border: 1px solid green;
            color: green;
        }
        
        .etaniContentHTML {
            border: 1px solid #0099ff;
            color: #0099ff;
            margin-right: 15px;
        }

        .etaniValueCtrlUp {
            border: 1px solid purple;
            color: purple;
        }

        /* Styles for etaniAllAppend buttons */
        .etaniAllAppend button {
            padding: 5px 10px;
            font-size: 16px;
            margin: 0 5px;
            cursor: pointer;
            border: 1px solid #333;
            background-color: #fff;
        }
        
        /* Custom radio button styles */
        .etaniMode span {
            display: inline-block;
            cursor: pointer;
            padding: 4px 8px;
            margin: 0 3px;
            font-size: 14px;
            border: 1px solid #888;
            background-color: #eee;
            color: #333;
            user-select: none;
        }

        .etaniMode span.active {
            background-color: #008CBA;
            color: white;
            border-color: #008CBA;
        }

        /* Result and animation item styles */
        .etaniResultDR {
            text-align: center;
            margin-bottom: 10px;
        }

        .etaniResultDownload, .etaniResultRename {
            display: inline-block;
            margin-right: 15px;
            text-decoration: none;
            padding: 5px 10px;
            font-size: 16px; 
        }
        
        .etaniResultDownload {
            border: 1px solid blue;
            color: blue;
        }

        .etaniResultRename {
            border: 1px solid brown;
            color: brown;
        }

        .etaniResultImage {
            display: block;
            max-width: 480px;
            width: 100%;
            height: auto;
            margin: 0 auto 10px auto;
            border: 1px solid #000;
            box-sizing: border-box;
        }
        
        .etaniResultSize {
            display: inline-block;
            margin-left: 10px;
            font-size: 12px; 
            color: #555;
        }
        
        /* etaniItem structure */
        .etaniItem {
            min-height: 48px;
            border: 1px solid #ccc;
            box-sizing: border-box;
            width: 100%;
            margin-bottom: -1px;
            background-color: lightyellow;
        }
        
        .etaniItemLeft {
            float: left; 
            width: 60px;
            min-height: 48px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 2px 0;
        }
        
        .etaniItemRight {
            margin-left: 60px; 
            padding: 7px;
            min-height: 48px; 
            background-color: #fff;
        }

        .tileid {
            text-align: center;
            font-size: 12px; 
            word-break: break-all;
            padding-top: 2px;
        }
        
        /* Animation controls */
        .etaniAnimate {
            border: 1px solid #999;
            padding: 5px;
            margin-bottom: 5px;
        }

        .etaniAnimateAttr {
            margin-bottom: 5px;
        }

        .etaniAnimateName {
            display: inline-block;
            padding: 2px 5px;
            background-color: #555;
            color: white;
            margin-right: 10px;
            font-size: 12px;
        }

        .etaniAnimateAttr > span {
            cursor: pointer;
        }

        .etaniAnimateAttr > span:not(.etaniAnimateName) {
            display: inline-block;
            padding: 2px 5px;
            font-size: 12px;
            margin-right: 7px;
            box-sizing: border-box;
            border-width: 1px;
            border-style: solid;
        }

        .etaniAnimateAttrAdd {
            border-color: #2c8c12;
            color: #2c8c12;
        }

        .etaniAnimateId {
            border-color: #742bcc;
            color: #742bcc;
        }

        .etaniAnimateBegin {
            border-color: #b6533c;
            color: #b6533c;
        }

        .etaniAnimateOther {
            border-color: #1cadca;
            color: #1cadca;
        }

        /* Dropdown menu styles */
        .etaniDropdown {
            position: absolute;
            background-color: #fff;
            border: 1px solid #ccc;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            z-index: 1002;
        }

        .etaniDropdownItem {
            padding: 8px 12px;
            cursor: pointer;
            font-size: 12px;
        }

        .etaniDropdownItem:hover {
            background-color: #f0f0f0;
        }

        /* Window modal styles */
        .etaniWindow {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 15px;
            border: 1px solid #ccc;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            z-index: 1003;
            width: 300px;
        }

        .etaniWindow label, .etaniWindow input {
            display: block;
            margin-bottom: 10px;
        }

        .etaniWindow button {
            margin-right: 10px;
            padding: 5px 10px;
        }

        .etaniExistingIds, .etaniHistory {
            margin-bottom: 10px;
            font-size: 12px;
        }

        .etaniIdItem {
            cursor: pointer;
            padding: 2px 5px;
            margin-right: 5px;
            border: 1px solid #ddd;
            display: inline-block;
        }

        .etaniIdItem.selected {
            background-color: #008CBA;
            color: white;
        }

        .etaniIdItem.zero-s.selected {
            color: white;
        }

        .etaniIdItem.zero-s {
            color: #888;
        }

        .etaniAnimateDur {
            border-color: blue;
            color: blue;
        }

        .etaniAnimateFR {
            border-color: #78229f;
            color: #78229f;
        }

        .etaniAnimateValue {
            margin-top: 5px;
        }

        .etaniAVCtrl {
            display: inline-block;
            vertical-align: top;
            margin-right: 5px;
            margin-bottom: 3px;
        }
        
        .etaniAVCtrl svg {
            margin-left: -1px;
            margin-top: -1px;
        }

        .etaniAVCtrl span {
            display: inline-block;
            width: 24px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            cursor: pointer;
            box-sizing: border-box;
            vertical-align: top;
            margin-right: 3px;
        }

        .etaniAVAdd {
            background-color: #a7fca7;
            border: 1px solid #71c371;
        }
        
        .etaniAVDelete {
            background-color: #ffcccc;
            border: 1px solid #cc3333;
        }

        .etaniAVDelete.deleting {
            background-color: #cc3333;
            color: white;
        }

        .etaniAVCopy {
            background-color: #ccccff;
            border: 1px solid #6666cc;
        }

        .etaniAVCopy.copying {
            background-color: #6666cc;
            color: white;
        }

        .etaniAVMove {
            background-color: #ffcc99;
            border: 1px solid #cc9966;
        }

        .etaniAVMove.moving {
            background-color: #cc9966;
            color: white;
        }
        
        .etaniAVLabel {
            font-size: 14px;
            margin-right: 5px;
        }

        .etaniAV {
            display: inline-block;
            vertical-align: top;
        }

        .etaniAVItem {
            display: inline-block;
            height: 24px;
            background-color: #ff9933;
            border: 1px dashed #00bfff;
            margin: 0 5px 3px;
            padding: 0 5px;
            box-sizing: border-box;
            cursor: pointer;
            position: relative;
            text-align: center;
            line-height: 24px;
            font-size: 12px;
            color: #333;
        }

        .etaniAVItem.deleting-target, .etaniAVItem.copying-target, .etaniAVItem.moving-target {
            background-color: #ff4d4d;
            border: 2px solid red;
        }

        .etaniAVItem.selected-move {
            background-color: #66ccff;
            border: 2px solid #0066cc;
        }
        
        /* Modal/popup styles */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }
        .modal-content {
            position: fixed;
            width: 98%;
            height: 48%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            z-index: 1001;
            box-sizing: border-box;
        }
        .modal-content textarea {
            width: 100%;
            height: calc(100% - 50px);
            resize: none;
            border: 1px solid #ccc;
            font-size: 12px;
            box-sizing: border-box;
        }
        .modal-close {
            position: absolute;
            top: 0;
            right: 10px;
            font-size: 48px;
            line-height: 1; 
            cursor: pointer;
            color: #333;
        }
    `;

    document.head.appendChild(styleSheet);
}

// Find the first missing letter in the sequence starting from 'a'
function findFirstMissingLetter(existingLetters) {
    let letter = 'a';
    while (existingLetters.includes(letter)) {
        const code = letter.charCodeAt(0);
        if (code >= 97 && code < 122) { // lowercase a-y
            letter = String.fromCharCode(code + 1);
        } else if (code === 122) { // z -> A
            letter = 'A';
        } else if (code >= 65 && code < 90) { // uppercase A-Y
            letter = String.fromCharCode(code + 1);
        } else if (code === 90) { // Z -> a (loop back)
            letter = 'a';
        }
    }
    return letter;
}

// Extract a specific transform function and its value from a transform string
function extractTransformPart(transformString, type) {
    const regex = new RegExp(`(${type})\\(([^)]+)\\)`, 'i');
    const match = transformString.match(regex);
    if (match) {
        return { func: match[1], value: match[2].trim() };
    }
    return { func: '', value: '' };
}

// Parse transform string to get individual transform values
function parseTransform(transformString) {
    const defaultTransform = { translate: '0,0', scale: '1,1', rotate: '0' };
    if (!transformString) return defaultTransform;

    const transform = {};

    const getMatch = (type) => {
        const part = extractTransformPart(transformString, type).value;
        if (!part) return null;
        return part.split(/[,\s]+/).join(',');
    };

    transform.translate = getMatch('translate') || defaultTransform.translate;
    transform.scale = getMatch('scale') || defaultTransform.scale;
    if (transform.scale.split(',').length === 1) {
        transform.scale += `,${transform.scale}`;
    }
    transform.rotate = getMatch('rotate') || defaultTransform.rotate;

    return transform;
}

// Convert SVG string to a Base64 data URL
function svgToBase64(svgString) {
    const base64 = btoa(unescape(encodeURIComponent(svgString)));
    return `data:image/svg+xml;base64,${base64}`;
}

// Format byte size into human-readable string
function formatBytes(bytes) {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

// Update the result section with the current state of etani_clone
function updateEtaniResult() {
    if (!etani_clone) return;

    const svgString = new XMLSerializer().serializeToString(etani_clone);
    const sizeInBytes = new Blob([svgString]).size;
    const base64Url = svgToBase64(svgString);
    
    const now = new Date();
    const yyyy = now.getFullYear();
    const mm = String(now.getMonth() + 1).padStart(2, '0');
    const dd = String(now.getDate()).padStart(2, '0');
    const hh = String(now.getHours()).padStart(2, '0');
    const mi = String(now.getMinutes()).padStart(2, '0');
    const ss = String(now.getSeconds()).padStart(2, '0');
    const defaultFilename = `ejtileAnimation_${yyyy}${mm}${dd}_${hh}${mi}${ss}.svg`;

    const imgElement = document.querySelector('.etaniResultImage');
    const downloadElement = document.querySelector('.etaniResultDownload');
    const renameElement = document.querySelector('.etaniResultRename');
    const sizeElement = document.querySelector('.etaniResultSize');

    if (imgElement && downloadElement && renameElement && sizeElement) {
        imgElement.src = base64Url;
        sizeElement.textContent = `Size: ${formatBytes(sizeInBytes)}`;
        downloadElement.href = base64Url;
        downloadElement.download = defaultFilename;
        
        renameElement.onclick = (e) => {
            e.preventDefault();
            let currentDownloadName = downloadElement.download;
            let newFilename = prompt("Enter new filename:", currentDownloadName);
            if (newFilename) {
                if (!newFilename.toLowerCase().endsWith('.svg')) {
                    newFilename += '.svg';
                }
                downloadElement.download = newFilename;
                alert(`Filename changed to: ${newFilename}`);
            }
        };
    }
}

// Handle the 'Center' button click to reset the .etdrop transform
function handleCenterClick(e) {
    e.preventDefault();
    if (etani_clone) {
        const etdrop = etani_clone.querySelector('.etdrop');
        if (etdrop) {
            etdrop.setAttribute('transform', 'translate(240,240) scale(1,1)');
            updateEtaniResult();
        }
    }
}

// Handle the HTML popup window
function handleContentHTMLClick(e) {
    e.preventDefault();
    if (!etani_clone) return;

    const overlay = document.createElement('div');
    overlay.className = 'modal-overlay';
    
    const content = document.createElement('div');
    content.className = 'modal-content';
    
    const close = document.createElement('span');
    close.className = 'modal-close';
    close.innerHTML = '&times;';
    
    const textarea = document.createElement('textarea');
    textarea.value = new XMLSerializer().serializeToString(etani_clone);

    const closeModal = () => {
        if (document.body.contains(overlay)) document.body.removeChild(overlay);
        if (document.body.contains(content)) document.body.removeChild(content);
    };
    close.onclick = closeModal;
    overlay.onclick = closeModal;

    content.appendChild(close);
    content.appendChild(textarea);
    
    document.body.appendChild(overlay);
    document.body.appendChild(content);
}

// Calculate additive transform or opacity value for a given type
function calculateAdditiveValue(type, originalValue, currentBaseValue, scaleValue = '1,1') {
    const roundToThreeDecimals = (value) => {
        return Math.round(value * 1000) / 1000;
    };
    
    if (type === 'rotate') {
        const ovAngle = parseFloat(currentBaseValue.trim());
        const cvAngle = parseFloat(originalValue.trim());
        return roundToThreeDecimals(cvAngle - ovAngle);
    } else if (type === 'scale') {
        const ovScales = currentBaseValue.split(',').map(c => parseFloat(c.trim()));
        const cvScales = originalValue.split(',').map(c => parseFloat(c.trim()));
        const v1 = roundToThreeDecimals(cvScales[0] / ovScales[0]);
        const v2 = roundToThreeDecimals(cvScales.length > 1 ? (cvScales[1] / ovScales[1]) : (cvScales[0] / ovScales[0]));
        return v1 === v2 ? `${v1}` : `${v1},${v2}`;
    } else if (type === 'translate') {
        const ovCoords = currentBaseValue.split(',').map(c => parseFloat(c.trim()));
        const cvCoords = originalValue.split(',').map(c => parseFloat(c.trim()));
        const scaleFactors = scaleValue.split(',').map(c => parseFloat(c.trim()));
        const v1 = roundToThreeDecimals(cvCoords[0] - (ovCoords[0] * scaleFactors[0]));
        const v2 = roundToThreeDecimals(cvCoords[1] - (ovCoords[1] * (scaleFactors.length > 1 ? scaleFactors[1] : scaleFactors[0])));
        return `${v1},${v2}`;
    } else if (type === 'opacity') {
        return originalValue;
    }
    return '';
}

// Update duration based on the number of values
function updateDuration(animate, etaniAnimate, newValuesLength) {
    const currentDur = parseFloat(etaniAnimate.querySelector('.etaniAnimateDur').textContent.replace('dur: ', '').replace('s', ''));
    const isIntegerDur = Number.isInteger(currentDur);
    const newDur = isIntegerDur ? (newValuesLength > 1 ? newValuesLength - 1 : 0) : currentDur;
    if (newDur > 0) {
        animate.setAttribute('dur', `${newDur}s`);
    } else {
        animate.removeAttribute('dur');
    }

    etaniAnimate.querySelector('.etaniAnimateDur').textContent = `dur: ${newDur}s`;
}

// Handle click event for the '+' button for transform or opacity
function handleAVAddClick(e, useElementId, animateType = 'transform') {
    e.preventDefault();
    if (!etani_clone) return;

    // Reset all modes before adding a new value
    resetModes(animateType);

    const etaniItemRight = e.currentTarget.closest('.etaniItemRight');
    const etaniAV = etaniItemRight.querySelector(`.etaniAnimate[data-type="${animateType}"] .etaniAV`);
    const etaniAnimate = etaniItemRight.querySelector(`.etaniAnimate[data-type="${animateType}"]`);

    if (animateType === 'transform') {
        // Get the original <use> element from #etmain to read its current transform
        const originalUseElement = document.querySelector(`#etmain .etdrop use[href="#${useElementId}"]`);
        if (!originalUseElement) return;

        const originalTransformString = originalUseElement.getAttribute('transform') || '';
        const originalTransforms = parseTransform(originalTransformString);

        // Get the corresponding <use> element in the clone
        const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useElementId}"]`);
        if (!cloneUseElement) return;

        // Find all animateTransform elements inside the cloned <use>
        const animates = cloneUseElement.querySelectorAll('animateTransform');
        
        animates.forEach(animate => {
            const type = animate.getAttribute('type').toLowerCase();
            let currentValueString = animate.getAttribute('values') || '';
            let newValue = '';
            
            // Get the new value directly from the parsed original transform
            if (type === 'translate') {
                newValue = originalTransforms.translate;
            } else if (type === 'scale') {
                newValue = originalTransforms.scale;
            } else if (type === 'rotate') {
                newValue = originalTransforms.rotate;
            }
            
            const newValueString = (currentValueString ? currentValueString + ';' : '') + newValue;
            animate.setAttribute('values', newValueString);
            updateDuration(animate, etaniAnimate, newValueString.split(';').length);
        });
    } else if (animateType === 'opacity') {
        const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useElementId}"]`);
        if (!cloneUseElement) return;

        const animateOpacity = cloneUseElement.querySelector('animate[attributeName="opacity"]');
        if (!animateOpacity) return;

        const currentValueString = animateOpacity.getAttribute('values') || '';
        const values = currentValueString ? currentValueString.split(';') : [];
        const newValue = values.length > 0 ? values[values.length - 1] : '1';
        const newValueString = (currentValueString ? currentValueString + ';' : '') + newValue;
        animateOpacity.setAttribute('values', newValueString);
        updateDuration(animateOpacity, etaniAnimate, newValueString.split(';').length);
    }

    // Add new etaniAVItem with appropriate label
    if (etaniAV && etaniAnimate) {
        const newAVItem = document.createElement('span');
        newAVItem.className = 'etaniAVItem';
        newAVItem.addEventListener('click', (e) => handleAVItemClick(e, animateType));

        const existingItems = etaniAV.querySelectorAll('.etaniAVItem');
        if (animateType === 'transform') {
            const existingLetters = Array.from(existingItems).map(item => item.textContent);
            newAVItem.textContent = findFirstMissingLetter(existingLetters);
        } else if (animateType === 'opacity') {
            const values = animateType === 'opacity' ? 
                etaniAnimate.querySelector('animate[attributeName="opacity"]')?.getAttribute('values')?.split(';') || ['1'] :
                ['1'];
            newAVItem.textContent = values[values.length - 1];
        }

        etaniAV.appendChild(newAVItem);
    }

    updateEtaniResult();
}

// Reset all mode states for a specific animateType
function resetModes(animateType, excludeMode = null) {
    const etaniCol = document.querySelector('.etaniCol');
    const avItems = document.querySelectorAll(`.etaniAnimate[data-type="${animateType}"] .etaniAVItem`);

    if (excludeMode !== 'delete') {
        isDeleteMode = false;
        etaniCol.classList.remove(`deleting-mode-${animateType}`);
        document.querySelectorAll(`.etaniAVDelete[data-type="${animateType}"]`).forEach(btn => {
            btn.classList.remove('deleting');
            btn.title = 'Delete Value';
        });
    }

    if (excludeMode !== 'copy') {
        isCopyMode = false;
        etaniCol.classList.remove(`copying-mode-${animateType}`);
        document.querySelectorAll(`.etaniAVCopy[data-type="${animateType}"]`).forEach(btn => {
            btn.classList.remove('copying');
            btn.title = 'Copy Value';
        });
    }

    if (excludeMode !== 'move') {
        isMoveMode = false;
        selectedMoveItem = null;
        etaniCol.classList.remove(`moving-mode-${animateType}`);
        document.querySelectorAll(`.etaniAVMove[data-type="${animateType}"]`).forEach(btn => {
            btn.classList.remove('moving');
            btn.title = 'Move Value';
        });
    }

    avItems.forEach(item => {
        item.classList.remove('deleting-target', 'copying-target', 'moving-target', 'selected-move');
    });
}

// Handle click event for the '-' button to toggle deletion mode
function handleAVDeleteToggle(e, animateType = 'transform') {
    e.preventDefault();
    const deleteButton = e.currentTarget;
    resetModes(animateType, 'delete');
    isDeleteMode = !isDeleteMode;
    deleteButton.classList.toggle('deleting', isDeleteMode);
    
    const etaniItemRight = deleteButton.closest('.etaniItemRight');
    const etaniCol = deleteButton.closest('.etaniCol');
    
    const avItems = etaniItemRight.querySelectorAll(`.etaniAnimate[data-type="${animateType}"] .etaniAVItem`);
    
    avItems.forEach(item => {
        item.classList.toggle('deleting-target', isDeleteMode);
    });

    etaniCol.classList.toggle(`deleting-mode-${animateType}`, isDeleteMode);

    if (isDeleteMode) {
        deleteButton.title = "Click value item to delete (Click again to cancel)";
    } else {
        deleteButton.title = "Delete Value";
        
        avItems.forEach(item => {
            item.classList.remove('deleting-target');
        });
    }
}

// Handle click event for the 'Copy' button to toggle copy mode
function handleAVCopyToggle(e, animateType) {
    e.preventDefault();
    const copyButton = e.currentTarget;
    resetModes(animateType, 'copy');
    isCopyMode = !isCopyMode;
    copyButton.classList.toggle('copying', isCopyMode);
    
    const etaniItemRight = copyButton.closest('.etaniItemRight');
    const etaniCol = copyButton.closest('.etaniCol');
    
    const avItems = etaniItemRight.querySelectorAll(`.etaniAnimate[data-type="${animateType}"] .etaniAVItem`);
    
    avItems.forEach(item => {
        item.classList.toggle('copying-target', isCopyMode);
    });

    etaniCol.classList.toggle(`copying-mode-${animateType}`, isCopyMode);

    if (isCopyMode) {
        copyButton.title = "Click value item to copy (Click again to cancel)";
    } else {
        copyButton.title = "Copy Value";
        
        avItems.forEach(item => {
            item.classList.remove('copying-target');
        });
    }
}

// Handle click event for the 'Move' button to toggle move mode
function handleAVMoveToggle(e, animateType) {
    e.preventDefault();
    const moveButton = e.currentTarget;
    resetModes(animateType, 'move');
    isMoveMode = !isMoveMode;
    moveButton.classList.toggle('moving', isMoveMode);
    
    const etaniItemRight = moveButton.closest('.etaniItemRight');
    const etaniCol = moveButton.closest('.etaniCol');
    
    const avItems = etaniItemRight.querySelectorAll(`.etaniAnimate[data-type="${animateType}"] .etaniAVItem`);
    
    avItems.forEach(item => {
        item.classList.toggle('moving-target', isMoveMode);
    });

    etaniCol.classList.toggle(`moving-mode-${animateType}`, isMoveMode);

    if (isMoveMode) {
        moveButton.title = "Click value item to select, then click another to move (Click again to cancel)";
    } else {
        moveButton.title = "Move Value";
        selectedMoveItem = null;
        
        avItems.forEach(item => {
            item.classList.remove('moving-target');
            item.classList.remove('selected-move');
        });
    }
}

// Handle click event for an .etaniAVItem in deletion, copy, or move mode
function handleAVItemClick(e, animateType = 'transform') {
    const item = e.currentTarget;
    const itemIndex = Array.from(item.parentNode.children).indexOf(item);
    const etaniItemRight = item.closest('.etaniItemRight');
    const etaniCol = item.closest('.etaniCol');
    const useId = etaniItemRight.closest('.etaniItem').querySelector('.tileid').textContent;

    const currentTime = Date.now();
    const isDoubleClick = (item === lastClickedItem && (currentTime - lastClickTime) < 2000);

    lastClickTime = currentTime;
    lastClickedItem = item;

    if (etaniCol.classList.contains(`moving-mode-${animateType}`)) {
        const avItems = etaniItemRight.querySelectorAll(`.etaniAnimate[data-type="${animateType}"] .etaniAVItem`);
        
        if (!selectedMoveItem) {
            selectedMoveItem = item;
            item.classList.add('selected-move');
            return;
        } else if (selectedMoveItem === item) {
            selectedMoveItem.classList.remove('selected-move');
            selectedMoveItem = null;
            return;
        } else {
            const targetIndex = itemIndex;
            const sourceIndex = Array.from(item.parentNode.children).indexOf(selectedMoveItem);
            
            const parent = item.parentNode;
            if (sourceIndex < targetIndex) {
                if (item.nextSibling) {
                    parent.insertBefore(selectedMoveItem, item.nextSibling);
                } else {
                    parent.appendChild(selectedMoveItem);
                }
            } else {
                parent.insertBefore(selectedMoveItem, item);
            }

            if (animateType === 'transform') {
                const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
                if (!cloneUseElement) return;

                const allAnimates = cloneUseElement.querySelectorAll('animateTransform');
                
                allAnimates.forEach(animate => {
                    const values = animate.getAttribute('values').split(';');
                    const valueToMove = values[sourceIndex];
                    values.splice(sourceIndex, 1);
                    if (sourceIndex < targetIndex) {
                        values.splice(targetIndex, 0, valueToMove);
                    } else {
                        values.splice(targetIndex, 0, valueToMove);
                    }
                    animate.setAttribute('values', values.join(';'));
                });
            } else if (animateType === 'opacity') {
                const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
                if (!cloneUseElement) return;

                const animateOpacity = cloneUseElement.querySelector('animate[attributeName="opacity"]');
                if (!animateOpacity) return;

                const values = animateOpacity.getAttribute('values').split(';');
                const valueToMove = values[sourceIndex];
                values.splice(sourceIndex, 1);
                if (sourceIndex < targetIndex) {
                    values.splice(targetIndex, 0, valueToMove);
                } else {
                    values.splice(targetIndex, 0, valueToMove);
                }
                animateOpacity.setAttribute('values', values.join(';'));
            }

            selectedMoveItem.classList.remove('selected-move');
            selectedMoveItem = null;
            updateEtaniResult();
            return;
        }
    }

    if (etaniCol.classList.contains(`copying-mode-${animateType}`)) {
        const etaniAV = item.parentNode;
        const newAVItem = document.createElement('span');
        newAVItem.className = 'etaniAVItem';
        newAVItem.textContent = item.textContent;
        newAVItem.addEventListener('click', (e) => handleAVItemClick(e, animateType));
        etaniAV.insertBefore(newAVItem, item.nextSibling);

        if (animateType === 'transform') {
            const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
            if (!cloneUseElement) return;

            const allAnimates = cloneUseElement.querySelectorAll('animateTransform');
            
            allAnimates.forEach(animate => {
                const values = animate.getAttribute('values').split(';');
                if (itemIndex < values.length) {
                    values.splice(itemIndex + 1, 0, values[itemIndex]);
                    animate.setAttribute('values', values.join(';'));
                    updateDuration(animate, etaniItemRight.querySelector(`.etaniAnimate[data-type="${animateType}"]`), values.length);
                }
            });
        } else if (animateType === 'opacity') {
            const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
            if (!cloneUseElement) return;

            const animateOpacity = cloneUseElement.querySelector('animate[attributeName="opacity"]');
            if (!animateOpacity) return;

            const values = animateOpacity.getAttribute('values').split(';');
            if (itemIndex < values.length) {
                values.splice(itemIndex + 1, 0, values[itemIndex]);
                animateOpacity.setAttribute('values', values.join(';'));
                updateDuration(animateOpacity, etaniItemRight.querySelector(`.etaniAnimate[data-type="${animateType}"]`), values.length);
            }
        }

        updateEtaniResult();
        return;
    }

    if (etaniCol.classList.contains(`deleting-mode-${animateType}`)) {
        const deleteButton = etaniItemRight.querySelector(`.etaniAVDelete[data-type="${animateType}"]`);
        const etaniAnimate = etaniItemRight.querySelector(`.etaniAnimate[data-type="${animateType}"]`);
        
        if (animateType === 'transform') {
            const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
            if (!cloneUseElement) return;

            const allAnimates = cloneUseElement.querySelectorAll('animateTransform');
            let newValuesLength = 0;
            
            allAnimates.forEach((animate, index) => {
                const values = animate.getAttribute('values').split(';');
                
                if (itemIndex < values.length) {
                    values.splice(itemIndex, 1);
                    newValuesLength = values.length; // All animations will have the same new length
                    
                    if (newValuesLength > 0) {
                        animate.setAttribute('values', values.join(';'));
                        // Only update duration on the first animate to avoid multiple calls
                        if (index === 0) { 
                            updateDuration(animate, etaniAnimate, newValuesLength);
                        }
                    }
                }
            });

            // If all values were removed, clean up
            if (newValuesLength === 0 && allAnimates.length > 0) {
                allAnimates.forEach(anim => anim.remove());
                etaniAnimate.remove();
            }
        } else if (animateType === 'opacity') {
            const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
            if (!cloneUseElement) return;

            const animateOpacity = cloneUseElement.querySelector('animate[attributeName="opacity"]');
            if (!animateOpacity) return;

            const values = animateOpacity.getAttribute('values').split(';');
            if (itemIndex < values.length) {
                values.splice(itemIndex, 1);
                if (values.length === 0) {
                    // Remove the opacity animation
                    animateOpacity.remove();
                    etaniAnimate.remove();
                } else {
                    animateOpacity.setAttribute('values', values.join(';'));
                    updateDuration(animateOpacity, etaniItemRight.querySelector(`.etaniAnimate[data-type="${animateType}"]`), values.length);
                }
            }
        }

        item.remove();

        const remainingItems = etaniItemRight.querySelectorAll(`.etaniAnimate[data-type="${animateType}"] .etaniAVItem`);
        
        if (remainingItems.length === 0) {
            deleteButton.click();
        } else {
            remainingItems.forEach(item => {
                item.classList.add('deleting-target'); 
            });
        }

        updateEtaniResult();
        
    } else if (animateType === 'opacity' && !etaniCol.classList.contains(`deleting-mode-${animateType}`) && !etaniCol.classList.contains(`copying-mode-${animateType}`)) {
        const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
        if (!cloneUseElement) return;

        const animateOpacity = cloneUseElement.querySelector('animate[attributeName="opacity"]');
        if (!animateOpacity) return;

        const values = animateOpacity.getAttribute('values').split(';');
        if (itemIndex >= values.length) return;

        if (isDoubleClick) {
            const newValue = prompt("Enter opacity value (0 to 1):", values[itemIndex]);
            if (newValue !== null && !isNaN(newValue) && newValue >= 0 && newValue <= 1) {
                values[itemIndex] = newValue;
                item.textContent = newValue;
                animateOpacity.setAttribute('values', values.join(';'));
                updateEtaniResult();
            }
        } else {
            values[itemIndex] = values[itemIndex] === '0' ? '1' : '0';
            item.textContent = values[itemIndex];
            animateOpacity.setAttribute('values', values.join(';'));
            updateEtaniResult();
        }
    }
}

// Handle click event for the 'Transform' button
function handleAllAppendTransformClick() {
    if (!etani_clone) return;

    const etdropUses = document.querySelectorAll('#etmain .etdrop use');
    const etaniItemRights = document.querySelectorAll('.etaniItemRight');

    const isRepeat = document.querySelector('.etaniModeRepeat.active');

    etdropUses.forEach((originalUseElement, i) => {
        const useId = originalUseElement.getAttribute('href').substring(1);
        const itemRight = etaniItemRights[i];
        
        if (!itemRight) return;

        // Check if transform animation already exists
        if (itemRight.querySelector('.etaniAnimate[data-type="transform"]')) return;

        let cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
        if (!cloneUseElement) return;

        // Get the original transform values from the #etmain SVG
        const originalTransformString = originalUseElement.getAttribute('transform') || '';
        const originalTransforms = parseTransform(originalTransformString);

        const baseAnimate = (type, initialValue) => {
            const animate = document.createElementNS('http://www.w3.org/2000/svg', 'animateTransform');
            animate.setAttribute('attributeName', 'transform');
            animate.setAttribute('attributeType', 'XML');
            animate.setAttribute('type', type);
            animate.setAttribute('values', initialValue);
            animate.setAttribute('fill', isRepeat ? 'remove' : 'freeze');
            if (isRepeat) animate.setAttribute('repeatCount', 'indefinite');
            
            // Add additive="sum" for scale and rotate, but not for translate
            if (type === 'scale' || type === 'rotate') {
                animate.setAttribute('additive', 'sum');
            }
            return animate;
        };
        
        // Add all three animations directly to the <use> element
        // Order: translate, scale, rotate
        cloneUseElement.appendChild(baseAnimate('translate', originalTransforms.translate));
        cloneUseElement.appendChild(baseAnimate('scale', originalTransforms.scale));
        cloneUseElement.appendChild(baseAnimate('rotate', originalTransforms.rotate));

        // --- Start of HTML control creation ---
        const etaniAnimate = document.createElement('div');
        etaniAnimate.className = 'etaniAnimate';
        etaniAnimate.setAttribute('data-type', 'transform');

        const nameSpan = document.createElement('span');
        nameSpan.className = 'etaniAnimateName';
        nameSpan.textContent = 'transform';

        const durSpan = document.createElement('span');
        durSpan.className = 'etaniAnimateDur';
        durSpan.textContent = 'dur: 0s';
        durSpan.addEventListener('click', () => {
            const currentDur = parseFloat(durSpan.textContent.replace('dur: ', '').replace('s', ''));
            const newDur = prompt('Enter duration in seconds:', currentDur);
            if (newDur !== null && !isNaN(newDur) && newDur >= 0) {
                // Find animates inside the <use> element
                const animates = etani_clone.querySelectorAll(`.etdrop use[href="#${useId}"] animateTransform`);
                animates.forEach(animate => {
                    if (newDur > 0) {
                        animate.setAttribute('dur', `${newDur}s`);
                        if (isRepeat) {
                            animate.removeAttribute('fill');
                            animate.setAttribute('repeatCount', 'indefinite');
                        } else {
                            animate.removeAttribute('repeatCount');
                            animate.setAttribute('fill', 'freeze');
                        }
                    } else {
                        animate.removeAttribute('dur');
                        animate.removeAttribute('fill');
                        animate.removeAttribute('repeatCount');
                    }
                });
                durSpan.textContent = `dur: ${newDur}s`;
                updateEtaniResult();
            }
        });

        const etaniAnimateAttr = document.createElement('div');
        etaniAnimateAttr.className = 'etaniAnimateAttr';
        etaniAnimateAttr.appendChild(nameSpan);
        etaniAnimateAttr.appendChild(durSpan);
        etaniAnimate.appendChild(etaniAnimateAttr);

        const frSpan = document.createElement('span');
        frSpan.className = 'etaniAnimateFR';
        frSpan.textContent = document.querySelector('.etaniModeMixed.active') ? 'freeze' : 'repeat';
        frSpan.style.display = document.querySelector('.etaniModeMixed.active') ? 'inline-block' : 'none';
        frSpan.addEventListener('click', () => {
            const currentValue = frSpan.textContent;
            const newValue = currentValue === 'freeze' ? 'repeat' : 'freeze';
            frSpan.textContent = newValue;

            const useId = itemRight.closest('.etaniItem').querySelector('.tileid').textContent;
            // Find animates inside the <use> element
            const animates = etani_clone.querySelectorAll(`.etdrop use[href="#${useId}"] animateTransform`);
            animates.forEach(animate => {
                if (animate.hasAttribute('fill') || animate.hasAttribute('repeatCount')) {
                    if (newValue === 'repeat') {
                        animate.removeAttribute('fill');
                        animate.setAttribute('repeatCount', 'indefinite');
                    } else {
                        animate.removeAttribute('repeatCount');
                        animate.setAttribute('fill', 'freeze');
                    }
                }
            });
            updateEtaniResult();
        });
        etaniAnimateAttr.appendChild(frSpan);

        // Add the attribute add button
        const animateType = 'transform';
        const attrAddSpan = document.createElement('span');
        attrAddSpan.className = 'etaniAnimateAttrAdd';
        attrAddSpan.textContent = '+';
        attrAddSpan.addEventListener('click', (e) => showDropdown(e, animateType, useId));
        etaniAnimateAttr.appendChild(attrAddSpan);

        // Handle clicks on existing attribute spans
        etaniAnimateAttr.addEventListener('click', (e) => {
            if (e.target.classList.contains('etaniAnimateId')) {
                editAttribute(e.target, animateType, useId, 'id');
            } else if (e.target.classList.contains('etaniAnimateBegin')) {
                editAttribute(e.target, animateType, useId, 'begin');
            } else if (e.target.classList.contains('etaniAnimateOther')) {
                editAttribute(e.target, animateType, useId, 'other', e.target.textContent.split('=')[0]);
            }
        });

        const valueDiv = document.createElement('div');
        valueDiv.className = 'etaniAnimateValue';
        
        const avCtrlDiv = createControlButtons('transform', useId);
        
        const avLabelSpan = document.createElement('span');
        avLabelSpan.className = 'etaniAVLabel';
        avLabelSpan.textContent = 'values : ';

        const avDiv = document.createElement('div');
        avDiv.className = 'etaniAV';
        
        const avItemSpan = document.createElement('span');
        avItemSpan.className = 'etaniAVItem';
        avItemSpan.textContent = 'a';
        avItemSpan.addEventListener('click', (e) => handleAVItemClick(e, 'transform'));
        
        avDiv.appendChild(avItemSpan);
        
        valueDiv.appendChild(avCtrlDiv);
        valueDiv.appendChild(avLabelSpan);
        valueDiv.appendChild(avDiv);

        etaniAnimate.appendChild(valueDiv);
        itemRight.appendChild(etaniAnimate);
    });

    updateEtaniResult();
}

// Handle click event for the 'Opacity' button
function handleAllAppendOpacityClick() {
    if (!etani_clone) return;

    const etdropUses = document.querySelectorAll('#etmain .etdrop use');
    const etaniItemRights = document.querySelectorAll('.etaniItemRight');

    const isRepeat = document.querySelector('.etaniModeRepeat.active');

    etdropUses.forEach((originalUseElement, i) => {
        const useId = originalUseElement.getAttribute('href').substring(1);
        const itemRight = etaniItemRights[i];
        
        if (!itemRight) return;

        if (itemRight.querySelector('.etaniAnimate[data-type="opacity"]')) return;

        let cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
        if (!cloneUseElement) return;

        const animateOpacity = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
        animateOpacity.setAttribute('attributeName', 'opacity');
        animateOpacity.setAttribute('values', '1');
        if (isRepeat) {
            animateOpacity.setAttribute('repeatCount', 'indefinite');
        } else {
            animateOpacity.setAttribute('fill', 'freeze');
        }
        cloneUseElement.appendChild(animateOpacity);

        const etaniAnimate = document.createElement('div');
        etaniAnimate.className = 'etaniAnimate';
        etaniAnimate.setAttribute('data-type', 'opacity');

        const nameSpan = document.createElement('span');
        nameSpan.className = 'etaniAnimateName';
        nameSpan.textContent = 'opacity';

        const durSpan = document.createElement('span');
        durSpan.className = 'etaniAnimateDur';
        durSpan.textContent = 'dur: 0s';
        durSpan.addEventListener('click', () => {
            const currentDur = parseFloat(durSpan.textContent.replace('dur: ', '').replace('s', ''));
            const newDur = prompt('Enter duration in seconds:', currentDur);
            if (newDur !== null && !isNaN(newDur) && newDur >= 0) {
                const animateOpacity = etani_clone.querySelector(`.etdrop use[href="#${useId}"] animate[attributeName="opacity"]`);
                if (animateOpacity) {
                    if (newDur > 0) {
                        animateOpacity.setAttribute('dur', `${newDur}s`);
                        if (isRepeat) {
                            animateOpacity.removeAttribute('fill');
                            animateOpacity.setAttribute('repeatCount', 'indefinite');
                        } else {
                            animateOpacity.removeAttribute('repeatCount');
                            animateOpacity.setAttribute('fill', 'freeze');
                        }
                    } else {
                        animateOpacity.removeAttribute('dur');
                        animateOpacity.removeAttribute('fill');
                        animateOpacity.removeAttribute('repeatCount');
                    }
                }
                durSpan.textContent = `dur: ${newDur}s`;
                updateEtaniResult();
            }
        });

        const etaniAnimateAttr = document.createElement('div');
        etaniAnimateAttr.className = 'etaniAnimateAttr';
        etaniAnimateAttr.appendChild(nameSpan);
        etaniAnimateAttr.appendChild(durSpan);
        etaniAnimate.appendChild(etaniAnimateAttr);

        const frSpan = document.createElement('span');
        frSpan.className = 'etaniAnimateFR';
        frSpan.textContent = document.querySelector('.etaniModeMixed.active') ? 'freeze' : 'repeat';
        frSpan.style.display = document.querySelector('.etaniModeMixed.active') ? 'inline-block' : 'none';
        frSpan.addEventListener('click', () => {
            const currentValue = frSpan.textContent;
            const newValue = currentValue === 'freeze' ? 'repeat' : 'freeze';
            frSpan.textContent = newValue;

            const useId = itemRight.closest('.etaniItem').querySelector('.tileid').textContent;
            const animateOpacity = etani_clone.querySelector(`.etdrop use[href="#${useId}"] animate[attributeName="opacity"]`);
            if (animateOpacity &&
                (animateOpacity.hasAttribute('fill') || animateOpacity.hasAttribute('repeatCount'))) {
                if (newValue === 'repeat') {
                    animateOpacity.removeAttribute('fill');
                    animateOpacity.setAttribute('repeatCount', 'indefinite');
                } else {
                    animateOpacity.removeAttribute('repeatCount');
                    animateOpacity.setAttribute('fill', 'freeze');
                }
            }
            updateEtaniResult();
        });
        etaniAnimateAttr.appendChild(frSpan);

        // Add the attribute add button
        const animateType = 'opacity';
        const attrAddSpan = document.createElement('span');
        attrAddSpan.className = 'etaniAnimateAttrAdd';
        attrAddSpan.textContent = '+';
        attrAddSpan.addEventListener('click', (e) => showDropdown(e, animateType, useId));
        etaniAnimateAttr.appendChild(attrAddSpan);

        // Handle clicks on existing attribute spans
        etaniAnimateAttr.addEventListener('click', (e) => {
            if (e.target.classList.contains('etaniAnimateId')) {
                editAttribute(e.target, animateType, useId, 'id');
            } else if (e.target.classList.contains('etaniAnimateBegin')) {
                editAttribute(e.target, animateType, useId, 'begin');
            } else if (e.target.classList.contains('etaniAnimateOther')) {
                editAttribute(e.target, animateType, useId, 'other', e.target.textContent.split('=')[0]);
            }
        });

        const valueDiv = document.createElement('div');
        valueDiv.className = 'etaniAnimateValue';
        
        const avCtrlDiv = createControlButtons('opacity', useId);

        const avLabelSpan = document.createElement('span');
        avLabelSpan.className = 'etaniAVLabel';
        avLabelSpan.textContent = 'values : ';

        const avDiv = document.createElement('div');
        avDiv.className = 'etaniAV';
        
        const avItemSpan = document.createElement('span');
        avItemSpan.className = 'etaniAVItem';
        avItemSpan.textContent = '1';
        avItemSpan.addEventListener('click', (e) => handleAVItemClick(e, 'opacity'));
        
        avDiv.appendChild(avItemSpan);
        
        valueDiv.appendChild(avCtrlDiv);
        valueDiv.appendChild(avLabelSpan);
        valueDiv.appendChild(avDiv);

        etaniAnimate.appendChild(valueDiv);
        itemRight.appendChild(etaniAnimate);
    });

    updateEtaniResult();
}

// Handle click event for the 'Fill up values' button
function handleValueCtrlUpClick() {
    if (!etani_clone) return;

    const allAnimates = etani_clone.querySelectorAll('animateTransform, animate[attributeName="opacity"]');
    let maxValuesLength = 0;

    allAnimates.forEach(animate => {
        const values = animate.getAttribute('values')?.split(';') || [];
        maxValuesLength = Math.max(maxValuesLength, values.length);
    });

    allAnimates.forEach(animate => {
        const values = animate.getAttribute('values')?.split(';') || [];
        if (values.length < maxValuesLength && values.length > 0) {
            const lastValue = values[values.length - 1];
            while (values.length < maxValuesLength) {
                values.push(lastValue);
            }
            animate.setAttribute('values', values.join(';'));
            const useId = animate.closest('use')?.getAttribute('href')?.substring(1) || 
                          animate.closest('g[data-use-href]')?.getAttribute('data-use-href')?.substring(1);
            if (useId) {
                const etaniAnimate = document.querySelector(`.etaniItem:has(.tileid:where(:text("${useId}"))) .etaniAnimate[data-type="${animate.getAttribute('attributeName') === 'opacity' ? 'opacity' : 'transform'}"]`);
                if (etaniAnimate) {
                    updateDuration(animate, etaniAnimate, values.length);
                }
            }
        }
    });

    const etaniItemRights = document.querySelectorAll('.etaniItemRight');
    etaniItemRights.forEach(itemRight => {
        const useId = itemRight.closest('.etaniItem').querySelector('.tileid').textContent;
        ['transform', 'opacity'].forEach(animateType => {
            const etaniAV = itemRight.querySelector(`.etaniAnimate[data-type="${animateType}"] .etaniAV`);
            if (!etaniAV) return;

            const currentItems = etaniAV.querySelectorAll('.etaniAVItem');
            const currentValuesLength = currentItems.length;
            if (currentValuesLength >= maxValuesLength) return;

            const lastItem = currentItems[currentItems.length - 1];
            let lastValue = lastItem.textContent;

            for (let i = currentValuesLength; i < maxValuesLength; i++) {
                const newAVItem = document.createElement('span');
                newAVItem.className = 'etaniAVItem';
                newAVItem.addEventListener('click', (e) => handleAVItemClick(e, animateType));
                if (animateType === 'transform') {
                    newAVItem.textContent = lastValue; // Use the last letter instead of incrementing
                } else if (animateType === 'opacity') {
                    newAVItem.textContent = lastValue;
                }
                etaniAV.appendChild(newAVItem);
            }
        });
    });

    updateEtaniResult();
}

// Handle setting mode switch (Repeat/Freeze)
function handleModeChange(mode) {
    if (!etani_clone) return;

    const animates = etani_clone.querySelectorAll('animateTransform, animate[attributeName="opacity"]');
    const isRepeat = mode === 'repeat';
    const isFreeze = mode === 'freeze';
    const isMixed = mode === 'mixed';

    if (!isMixed) {
        animates.forEach(animate => {
            if (animate.hasAttribute('fill') || animate.hasAttribute('repeatCount')) {
                if (isRepeat) {
                    animate.removeAttribute('fill');
                    animate.setAttribute('repeatCount', 'indefinite');
                } else if (isFreeze) {
                    animate.removeAttribute('repeatCount');
                    animate.setAttribute('fill', 'freeze');
                }
            }
        });
    }

    document.querySelectorAll('.etaniMode span').forEach(span => {
        span.classList.remove('active');
    });
    document.querySelector(`.etaniMode${mode.charAt(0).toUpperCase() + mode.slice(1)}`).classList.add('active');

    const frElements = document.querySelectorAll('.etaniAnimateFR');
    frElements.forEach(fr => {
        fr.style.display = isMixed ? 'inline-block' : 'none';
    });

    updateEtaniResult();
}

// Create the internal animation control structure
function createEtaniInner(etaniouter) {
    const originalSvg = document.getElementById('etmain');
    if (!originalSvg) {
        console.error('SVG with ID "etmain" not found.');
        return;
    }
    etani_clone = originalSvg.cloneNode(true);
    const etwaitElement = etani_clone.querySelector('.etwait');
    if (etwaitElement) {
        etwaitElement.remove();
    }
    etani_clone.id = 'etmainani';

    const etaniinner = document.createElement('div');
    etaniinner.className = 'etaniinner';
    etaniinner.id = 'etaniinner';

    const etaniCtrl = document.createElement('div');
    etaniCtrl.className = 'etaniCtrl';
    
    const etaniContent = document.createElement('div');
    etaniContent.className = 'etaniContent';
    
    const contentHTMLLink = document.createElement('a');
    contentHTMLLink.className = 'etaniContentHTML';
    contentHTMLLink.textContent = 'Show HTML';
    contentHTMLLink.href = 'javascript:;';
    contentHTMLLink.addEventListener('click', handleContentHTMLClick);
    etaniContent.appendChild(contentHTMLLink);

    const centerLink = document.createElement('a');
    centerLink.className = 'etaniCenter';
    centerLink.textContent = 'Center';
    centerLink.href = 'javascript:;';
    centerLink.addEventListener('click', handleCenterClick);
    etaniContent.appendChild(centerLink);
    
    etaniCtrl.appendChild(etaniContent);

    const etaniMode = document.createElement('div');
    etaniMode.className = 'etaniMode';

    const repeatRadio = document.createElement('span');
    repeatRadio.className = 'etaniModeRepeat active';
    repeatRadio.textContent = 'Repeat';
    repeatRadio.setAttribute('data-mode', 'repeat');
    repeatRadio.addEventListener('click', () => handleModeChange('repeat'));

    const freezeRadio = document.createElement('span');
    freezeRadio.className = 'etaniModeFreeze';
    freezeRadio.textContent = 'Freeze';
    freezeRadio.setAttribute('data-mode', 'freeze');
    freezeRadio.addEventListener('click', () => handleModeChange('freeze'));

    const mixedRadio = document.createElement('span');
    mixedRadio.className = 'etaniModeMixed';
    mixedRadio.textContent = 'Mixed';
    mixedRadio.setAttribute('data-mode', 'mixed');
    mixedRadio.addEventListener('click', () => handleModeChange('mixed'));

    etaniMode.appendChild(repeatRadio);
    etaniMode.appendChild(freezeRadio);
    etaniMode.appendChild(mixedRadio);
    etaniCtrl.appendChild(etaniMode);

    const etaniAllAppend = document.createElement('div');
    etaniAllAppend.className = 'etaniAllAppend';

    const transformButton = document.createElement('button');
    transformButton.className = 'etaniAllAppendTransform';
    transformButton.textContent = 'transform';
    transformButton.addEventListener('click', handleAllAppendTransformClick);
    
    const opacityButton = document.createElement('button');
    opacityButton.className = 'etaniAllAppendOpacity';
    opacityButton.textContent = 'opacity';
    opacityButton.addEventListener('click', handleAllAppendOpacityClick);
    
    etaniAllAppend.appendChild(transformButton);
    etaniAllAppend.appendChild(opacityButton);
    etaniCtrl.appendChild(etaniAllAppend);

    const etaniValueCtrl = document.createElement('div');
    etaniValueCtrl.className = 'etaniValueCtrl';

    const valueCtrlUpLink = document.createElement('a');
    valueCtrlUpLink.className = 'etaniValueCtrlUp';
    valueCtrlUpLink.textContent = 'fill up values';
    valueCtrlUpLink.href = 'javascript:;';
    valueCtrlUpLink.addEventListener('click', handleValueCtrlUpClick);
    etaniValueCtrl.appendChild(valueCtrlUpLink);
    etaniCtrl.appendChild(etaniValueCtrl);

    const etaniCol = document.createElement('div');
    etaniCol.className = 'etaniCol';

    const etaniResult = document.createElement('div');
    etaniResult.className = 'etaniResult';
    
    const resultImg = document.createElement('img');
    resultImg.className = 'etaniResultImage';
    resultImg.alt = 'Rendered Ejtile Animation SVG';

    const resultDRDiv = document.createElement('div');
    resultDRDiv.className = 'etaniResultDR';

    const downloadLink = document.createElement('a');
    downloadLink.className = 'etaniResultDownload';
    downloadLink.textContent = 'Download SVG';
    downloadLink.href = 'javascript:;';

    const renameLink = document.createElement('a');
    renameLink.className = 'etaniResultRename';
    renameLink.textContent = 'Rename File';
    renameLink.href = 'javascript:;';
    
    const sizeSpan = document.createElement('span');
    sizeSpan.className = 'etaniResultSize';

    resultDRDiv.appendChild(downloadLink);
    resultDRDiv.appendChild(renameLink);
    
    etaniResult.appendChild(resultImg);
    etaniResult.appendChild(resultDRDiv);
    etaniResult.appendChild(sizeSpan);
    
    etaniinner.appendChild(etaniCtrl);
    etaniinner.appendChild(etaniCol);
    etaniinner.appendChild(etaniResult);

    etaniouter.appendChild(etaniinner);

    const etdropUses = document.querySelectorAll('.etdrop use');
    const etwaitGroups = document.querySelectorAll('.etwait g');

    etdropUses.forEach((useElement, i) => {
        const tileid = useElement.getAttribute('href').substring(1);
        let targetUse = null;
        for (const group of etwaitGroups) {
            const useInGroup = group.querySelector(`use[href="#${tileid}"]`);
            if (useInGroup) {
                targetUse = useInGroup;
                break;
            }
        }
        
        let etwaittransform = '', etwaitfill = '', etwaitstroke = '', etwaitstrokeWidth = '';
        if (targetUse) {
            etwaittransform = targetUse.getAttribute('transform') || '';
            etwaitfill = targetUse.getAttribute('fill') || '';
            etwaitstroke = targetUse.getAttribute('stroke') || '';
            etwaitstrokeWidth = targetUse.getAttribute('stroke-width') || '';

            const scaleMatch = etwaittransform.match(/scale\(([^)]+)\)/);
            const rotateMatch = etwaittransform.match(/rotate\(([^)]+)\)/);
            const scalePart = scaleMatch ? scaleMatch[0] : '';
            const rotatePart = rotateMatch ? rotateMatch[0] : '';
            etwaittransform = `translate(20,20) ${scalePart} ${rotatePart}`.trim().replace(/\s+/g, ' ');
        }
        
        const originalTile = document.querySelector(`defs g#${tileid}`);
        
        const etaniItem = document.createElement('div');
        etaniItem.className = 'etaniItem';
        etaniItem.setAttribute('data-use-id', tileid);

        const etaniItemLeft = document.createElement('div');
        etaniItemLeft.className = 'etaniItemLeft';

        const etaniItemRight = document.createElement('div');
        etaniItemRight.className = 'etaniItemRight';
        
        if (originalTile) {
            const tileclone = originalTile.cloneNode(true);
            tileclone.removeAttribute('id');
            if (etwaittransform) tileclone.setAttribute('transform', etwaittransform);
            if (etwaitfill) tileclone.setAttribute('fill', etwaitfill);
            if (etwaitstroke) tileclone.setAttribute('stroke', etwaitstroke);
            if (etwaitstrokeWidth) tileclone.setAttribute('stroke-width', etwaitstrokeWidth);
            
            const svgWrapper = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            svgWrapper.setAttribute('width', '40');
            svgWrapper.setAttribute('height', '40');
            svgWrapper.setAttribute('version', '1.1');
            svgWrapper.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
            svgWrapper.setAttribute('xmlns:svg', 'http://www.w3.org/2000/svg');
            svgWrapper.className = 'etanitileimg';
            
            svgWrapper.appendChild(tileclone);
            etaniItemLeft.appendChild(svgWrapper);
        }

        const tileidDiv = document.createElement('div');
        tileidDiv.className = 'tileid';
        tileidDiv.textContent = tileid;
        etaniItemLeft.appendChild(tileidDiv);

        etaniItem.appendChild(etaniItemLeft);
        etaniItem.appendChild(etaniItemRight);
        etaniCol.appendChild(etaniItem);
    });
    
    updateEtaniResult();
}

// Toggle the visibility and content of the animation control panel
function toggleAnimation(event) {
    const etanibutton = event.currentTarget;
    const etaniouter = etanibutton.parentNode;
    const etaniinner = document.getElementById('etaniinner');

    if (etanibutton.textContent === 'Animate it') {
        etanibutton.textContent = 'Close Ejtile Ani';
        createEtaniInner(etaniouter);
    } else if (etanibutton.textContent === 'Close Ejtile Ani') {
        etanibutton.textContent = 'Animate it';
        if (etaniinner) {
            etaniinner.remove();
        }
        etani_clone = null;
        isCopyMode = false;
        isMoveMode = false;
        isDeleteMode = false;
        selectedMoveItem = null;
        lastClickTime = 0;
        lastClickedItem = null;
    }
}

// Create control buttons when animate is appending
function createControlButtons(animateType, useId) {
    const avCtrlDiv = document.createElement('div');
    avCtrlDiv.className = 'etaniAVCtrl';

    const buttons = [
        {
            className: 'etaniAVAdd',
            title: `Add ${animateType.charAt(0).toUpperCase() + animateType.slice(1)} Value`,
            svg: {
                lines: [
                    { x1: '12', y1: '5', x2: '12', y2: '19' },
                    { x1: '5', y1: '12', x2: '19', y2: '12' }
                ]
            },
            handler: (e) => handleAVAddClick(e, useId, animateType)
        },
        {
            className: 'etaniAVDelete',
            title: 'Delete Value',
            svg: {
                lines: [
                    { x1: '5', y1: '12', x2: '19', y2: '12' }
                ]
            },
            handler: (e) => handleAVDeleteToggle(e, animateType)
        },
        {
            className: 'etaniAVCopy',
            title: 'Copy Value',
            svg: {
                rect: { x: '9', y: '9', width: '13', height: '13', rx: '2', ry: '2' },
                path: { d: 'M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1' }
            },
            handler: (e) => handleAVCopyToggle(e, animateType)
        },
        {
            className: 'etaniAVMove',
            title: 'Move Value',
            svg: {
                path: { d: 'M 7,4 L 3,8 L 7,12 M 3,8 L 18,8 M 17,12 L 21,16 L 17,20 M 21,16 L 6,16' }
            },
            handler: (e) => handleAVMoveToggle(e, animateType)
        }
    ];

    buttons.forEach(button => {
        const span = document.createElement('span');
        span.className = button.className;
        span.title = button.title;
        span.setAttribute('data-type', animateType);
        span.addEventListener('click', button.handler);

        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('width', '24');
        svg.setAttribute('height', '24');
        svg.setAttribute('viewBox', '0 0 24 24');
        svg.setAttribute('fill', 'none');
        svg.setAttribute('stroke', 'currentColor');
        svg.setAttribute('stroke-width', '1');
        svg.setAttribute('stroke-linecap', 'round');
        svg.setAttribute('stroke-linejoin', 'round');

        if (button.svg.lines) {
            button.svg.lines.forEach(line => {
                const lineElement = document.createElementNS('http://www.w3.org/2000/svg', 'line');
                Object.entries(line).forEach(([key, value]) => lineElement.setAttribute(key, value));
                svg.appendChild(lineElement);
            });
        }
        if (button.svg.rect) {
            const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
            Object.entries(button.svg.rect).forEach(([key, value]) => rect.setAttribute(key, value));
            svg.appendChild(rect);
        }
        if (button.svg.path) {
            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            Object.entries(button.svg.path).forEach(([key, value]) => path.setAttribute(key, value));
            svg.appendChild(path);
        }

        span.appendChild(svg);
        avCtrlDiv.appendChild(span);
    });

    return avCtrlDiv;
}

// Show dropdown menu for adding attributes
function showDropdown(e, animateType, useId) {
    const attrAddSpan = e.target;
    const existingDropdown = attrAddSpan.parentNode.querySelector('.etaniDropdown');
    if (existingDropdown) {
        // Toggle: if already open, remove it
        existingDropdown.remove();
        return;
    }

    const dropdown = document.createElement('div');
    dropdown.className = 'etaniDropdown';
    // Dynamically determine items based on existing attributes
    const attrParent = attrAddSpan.parentNode;
    const hasId = attrParent.querySelector('.etaniAnimateId');
    const hasBegin = attrParent.querySelector('.etaniAnimateBegin');
    const items = [];
    if (!hasId) items.push('id');
    if (!hasBegin) items.push('begin');
    items.push('other');
    items.forEach(item => {
        const div = document.createElement('div');
        div.className = 'etaniDropdownItem';
        div.textContent = item;
        div.addEventListener('click', () => {
            showWindow(item, animateType, useId);
            dropdown.remove(); // Remove after selecting item
        });
        dropdown.appendChild(div);
    });

    attrAddSpan.parentNode.style.position = 'relative'; // Ensure parent is relative for absolute positioning
    attrAddSpan.parentNode.appendChild(dropdown);
    dropdown.style.left = `${attrAddSpan.offsetLeft}px`;
    dropdown.style.top = `${attrAddSpan.offsetTop + attrAddSpan.offsetHeight}px`;
}

    // Show window for adding/editing attributes
    function showWindow(type, animateType, useId, existingSpan = null, otherAttrName = null) {
        const windowDiv = document.createElement('div');
        windowDiv.className = 'etaniWindow';

        const existingIds = getExistingIds();
        const isEdit = !!existingSpan;
        let input1, input2, existingIdsDiv, historyDiv, confirmBtn, deleteBtn, cancelBtn;

        if (type === 'id') {
            const label = document.createElement('label');
            label.textContent = 'Enter ID:';
            input1 = document.createElement('input');
            input1.type = 'text';
            if (isEdit) input1.value = existingSpan.textContent.replace('id=', '');
            windowDiv.appendChild(label);
            windowDiv.appendChild(input1);

            existingIdsDiv = createIdsDisplay(existingIds, false);
            windowDiv.appendChild(existingIdsDiv);
        } else if (type === 'begin') {
            existingIdsDiv = createIdsDisplay(existingIds, true, isEdit ? parseBeginValue(existingSpan.textContent) : []);
            windowDiv.appendChild(existingIdsDiv);

            historyDiv = document.createElement('div');
            historyDiv.className = 'etaniHistory';
           historyDiv = document.createElement('div');
           historyDiv.className = 'etaniHistory';
           historyDiv.textContent = 'History: ';
           const historyIds = getHistoryIds();
           historyIds.forEach(id => {
               const span = document.createElement('span');
               span.className = 'etaniIdItem';
               span.textContent = id;
               span.addEventListener('click', () => {
                   span.remove(); // Remove from history UI on click
               });
               historyDiv.appendChild(span);
           });
            windowDiv.appendChild(historyDiv);
        } else if (type === 'other') {
            const label1 = document.createElement('label');
            label1.textContent = 'Attribute Name:';
            input1 = document.createElement('input');
            input1.type = 'text';
            if (isEdit) input1.value = otherAttrName;

            const label2 = document.createElement('label');
            label2.textContent = 'Attribute Value:';
            input2 = document.createElement('input');
            input2.type = 'text';
            if (isEdit) input2.value = existingSpan.textContent.split('=')[1];

            windowDiv.appendChild(label1);
            windowDiv.appendChild(input1);
            windowDiv.appendChild(label2);
            windowDiv.appendChild(input2);
        }

        const buttonsDiv = document.createElement('div');
        confirmBtn = document.createElement('button');
        confirmBtn.textContent = 'Confirm';
        confirmBtn.addEventListener('click', () => handleConfirm(type, animateType, useId, input1, input2, existingIdsDiv, existingSpan));
        buttonsDiv.appendChild(confirmBtn);

        if (isEdit) {
            deleteBtn = document.createElement('button');
            deleteBtn.textContent = 'Delete';
            deleteBtn.addEventListener('click', () => handleDelete(animateType, useId, type, otherAttrName, existingSpan));
            buttonsDiv.appendChild(deleteBtn);
        }

        cancelBtn = document.createElement('button');
        cancelBtn.textContent = 'Cancel';
        cancelBtn.addEventListener('click', () => document.body.removeChild(windowDiv));
        buttonsDiv.appendChild(cancelBtn);

        windowDiv.appendChild(buttonsDiv);
        document.body.appendChild(windowDiv);
    }

    // Create display for existing IDs with selection option
    function createIdsDisplay(existingIds, selectable, selected = []) {
        const div = document.createElement('div');
        div.className = 'etaniExistingIds';
        div.textContent = 'Existing IDs: ';

        if (selectable) {
            const zeroS = document.createElement('span');
            zeroS.className = 'etaniIdItem zero-s';
            zeroS.textContent = '0s';
            zeroS.classList.toggle('selected', selected.includes('0s'));
            zeroS.addEventListener('click', () => zeroS.classList.toggle('selected'));
            div.appendChild(zeroS);
        }

        existingIds.forEach(id => {
            const span = document.createElement('span');
            span.className = 'etaniIdItem';
            span.textContent = id;
            if (selectable) {
                span.addEventListener('click', () => {
                    div.querySelectorAll('.etaniIdItem:not(.zero-s)').forEach(s => s.classList.remove('selected'));
                    span.classList.add('selected');
                });
                if (selected.includes(id)) span.classList.add('selected');
            }
            div.appendChild(span);
        });
        return div;
    }

    // Get all existing animation IDs globally, shared across types
    function getExistingIds() {
        const animates = etani_clone.querySelectorAll('animateTransform, animate[attributeName="opacity"]');
        return Array.from(animates)
            .map(animate => animate.getAttribute('id'))
            .filter(id => id);
    }

    // Parse begin value to selected items
    function parseBeginValue(beginStr) {
        return beginStr.split(';').map(v => v.endsWith('.end') ? v.replace('.end', '') : v);
    }

    // Handle confirm button for adding/editing
    function handleConfirm(type, animateType, useId, input1, input2, existingIdsDiv, existingSpan) {
        let value, attrName;
        if (type === 'id') {
            value = input1.value.trim();
            if (!value || getExistingIds(animateType).includes(value)) return; // Invalid or duplicate
            attrName = 'id';
        } else if (type === 'begin') {
            const selectedZero = existingIdsDiv.querySelector('.zero-s.selected');
            const selectedId = existingIdsDiv.querySelector('.etaniIdItem:not(.zero-s).selected');
            const parts = [];
            if (selectedZero) parts.push('0s');
            if (selectedId) parts.push(`${selectedId.textContent}.end`);
            value = parts.join(';');
            if (!value) return; // No selection
            attrName = 'begin';
        } else if (type === 'other') {
            attrName = input1.value.trim();
            value = input2.value.trim();
            if (!attrName || !value) return; // Empty
            // Check duplicate attributes (simplified, assume no duplicates for same attrName)
        }

        const animates = getAnimates(animateType, useId, attrName);
        animates.forEach(animate => animate.setAttribute(attrName, value));

        const attrAddSpan = existingSpan ? existingSpan.parentNode.querySelector('.etaniAnimateAttrAdd') : document.querySelector(`.etaniItem[data-use-id="${useId}"] .etaniAnimate[data-type="${animateType}"] .etaniAnimateAttrAdd`);
        const className = `etaniAnimate${type.charAt(0).toUpperCase() + type.slice(1)}`;
        const newSpan = existingSpan || document.createElement('span');
        newSpan.className = className;
        newSpan.textContent = type === 'other' ? `${attrName}=${value}` : `${attrName}=${value}`;
        if (!existingSpan) attrAddSpan.parentNode.insertBefore(newSpan, attrAddSpan);

        updateEtaniResult();
        document.body.removeChild(existingIdsDiv.closest('.etaniWindow'));
    }

    // Handle delete button
    function handleDelete(animateType, useId, type, otherAttrName, existingSpan) {
        const attrName = type === 'other' ? otherAttrName : type;
        const animates = getAnimates(animateType, useId);
        animates.forEach(animate => animate.removeAttribute(attrName));
        existingSpan.remove();
        updateEtaniResult();
        document.body.removeChild(existingSpan.closest('.etaniWindow'));
    }

    // Get animate elements for the specific useId and type
    function getAnimates(animateType, useId, attrType = null) {
        if (animateType === 'transform') {
            const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
            if (!cloneUseElement) return [];

            if (attrType === 'id') {
                // Per original logic and example, 'id' applies only to the rotate animation
                return cloneUseElement.querySelectorAll('animateTransform[type="rotate"]') || [];
            } else {
                // Other attributes (like 'begin') apply to all three
                return cloneUseElement.querySelectorAll('animateTransform') || [];
            }
        } else {
            const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
            return cloneUseElement?.querySelectorAll('animate[attributeName="opacity"]') || [];
        }
    }

    // Edit existing attribute
    function editAttribute(span, animateType, useId, type, otherAttrName) {
        showWindow(type, animateType, useId, span, otherAttrName);
    }

    // Get unique history IDs from all begin attributes
    function getHistoryIds() {
        const allAnimates = etani_clone.querySelectorAll('animateTransform, animate[attributeName="opacity"]');
        const historySet = new Set();
        allAnimates.forEach(animate => {
            const begin = animate.getAttribute('begin');
            if (begin) {
                begin.split(';').forEach(part => {
                    const trimmed = part.trim();
                    if (trimmed.endsWith('.end')) {
                        historySet.add(trimmed.replace('.end', ''));
                    } else if (trimmed !== '0s') {
                        historySet.add(trimmed);
                    }
                });
            }
        });
        return Array.from(historySet);
    }

// Initialize the animation control panel on window load
window.addEventListener('load', () => {
    addDynamicStyles();

    const etmainouter = document.getElementById('etmainouter');
    if (etmainouter) {
        const etaniouter = document.createElement('div');
        etaniouter.className = 'etaniouter';

        const etanibutton = document.createElement('button');
        etanibutton.id = 'etanibutton';
        etanibutton.textContent = 'Animate it';
        etanibutton.addEventListener('click', toggleAnimation);

        etaniouter.appendChild(etanibutton);
        etmainouter.parentNode.insertBefore(etaniouter, etmainouter.nextSibling);
    } else {
        console.error('Div with ID "etmainouter" not found.');
    }
});
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
圈圈精英
圈圈精英
帖子: 3837
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 157 次
被圈友点赞: 188 次
联系:

Re: 正在做etani,ejtile的動畫套件

帖子 ejsoon »

當點擊etaniAVDelete刪除最後一個值之後報錯,etaniItemRight is null,第803行,在handleAVDeleteToggle函數中。

請解決這個問題。

用繁體中文回答。只需告知所要更改的代碼和位置,以及要替換的內容。代碼的注釋都要是英文。
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
圈圈精英
圈圈精英
帖子: 3837
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 157 次
被圈友点赞: 188 次
联系:

Re: 正在做etani,ejtile的動畫套件

帖子 ejsoon »

gemini2.5pro

代码: 全选

您好,我理解這個問題了。

問題的原因是:當您在 `handleAVItemClick` 函數中刪除最後一個 `etaniAVItem` 時,您的代碼會將整個 `.etaniAnimate` 元素(包含刪除按鈕本身)從 DOM 中移除(`etaniAnimate.remove()`)。但在這之後,代碼會檢查到 `remainingItems.length === 0`,並執行 `deleteButton.click()`。

這就導致了 `handleAVDeleteToggle` 函數被一個已經從 DOM 中移除的按鈕觸發。因此,在 `handleAVDeleteToggle` 函數內部(您指的第 803 行附近),`deleteButton.closest('.etaniItemRight')` 會返回 `null`,從而引發錯誤。

為了解決這個問題,我們需要修改 `handleAVItemClick` 函數。

-----

### 1\. 函數 `handleAVItemClick()`

請在此函數中,找到位於 `if (etaniCol.classList.contains(deleting-mode-${animateType})) { ... }` 區塊*末尾*的 `if (remainingItems.length === 0) { ... }` 邏輯。

(在您上次修改後的代碼中,這應該緊跟在 `item.remove();` 和 `const remainingItems = ...` 之後。)

**請將以下代碼:**

```javascript
        const remainingItems = etaniItemRight.querySelectorAll(`.etaniAnimate[data-type="${animateType}"] .etaniAVItem`);
        
        if (remainingItems.length === 0) {
            deleteButton.click();
        } else {
            remainingItems.forEach(item => {
                item.classList.add('deleting-target'); 
            });
        }
```

**替換為:**

```javascript
        const remainingItems = etaniItemRight.querySelectorAll(`.etaniAnimate[data-type="${animateType}"] .etaniAVItem`);
        
        if (remainingItems.length === 0) {
            // The .etaniAnimate element (containing the deleteButton) was just removed
            // because it was the last item.
            // We cannot .click() the button, as it's no longer in the DOM.
            // Instead, we must manually reset the delete mode globally.
            resetModes(animateType);
        } else {
            // If items remain, just re-apply the 'deleting-target' class to them.
            remainingItems.forEach(item => {
                item.classList.add('deleting-target'); 
            });
        }
```
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
圈圈精英
圈圈精英
帖子: 3837
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 157 次
被圈友点赞: 188 次
联系:

Re: 正在做etani,ejtile的動畫套件

帖子 ejsoon »

然後gemini2.5pro把這個問題解決了,當前代碼:

代码: 全选

// Global variable to hold the SVG clone and ensure state is maintained
let etani_clone = null;

// Track copy, move, and delete mode states, selected item, and last click time for double-click detection
let isCopyMode = false;
let isMoveMode = false;
let isDeleteMode = false;
let selectedMoveItem = null;
let lastClickTime = 0;
let lastClickedItem = null;

// Add dynamic CSS styles to the document
function addDynamicStyles() {
    if (document.getElementById('dynamic-et-styles')) {
        return;
    }

    const styleSheet = document.createElement('style');
    styleSheet.id = 'dynamic-et-styles'; 
    styleSheet.textContent = `
        /* Styles for etaniouter and button */
        .etaniouter {
            margin-top: 10px;
            padding: 10px;
            border: 1px solid #ddd;
            background-color: #f5f5f5;
        }

        /* Styles for etaniinner, etaniCtrl, etaniCol, etaniResult */
        .etaniinner {
            margin-top: 10px;
        }
        
        .etaniCtrl {
            margin-bottom: 10px; 
            clear: both;
            padding: 5px;
            border: 1px solid #c0c0c0;
            text-align: center;
        }
        
        /* Styles for etaniContent, etaniMode, etaniAllAppend, etaniValueCtrl */
        .etaniContent, .etaniMode, .etaniAllAppend, .etaniValueCtrl {
            display: inline-block;
            vertical-align: top;
            padding: 5px;
            border: 1px solid #ccc;
            margin: 0 5px 5px 5px;
            text-align: left;
        }

        .etaniCol {
            border: 1px solid #aaa;
            padding: 5px;
            margin-bottom: 10px; 
            clear: both;
        }

        /* Styles for etaniResult */
        .etaniResult {
            text-align: center;
            margin-bottom: 10px;
            padding: 10px;
            border: 1px solid #bbb;
            box-sizing: border-box;
        }
        
        /* Control and button styles */
        .etaniContent a, .etaniValueCtrl a {
            display: inline-block;
            margin: 0 5px;
            text-decoration: none;
            padding: 5px 10px;
            font-size: 14px;
        }
        
        .etaniCenter {
            border: 1px solid green;
            color: green;
        }
        
        .etaniContentHTML {
            border: 1px solid #0099ff;
            color: #0099ff;
            margin-right: 15px;
        }

        .etaniValueCtrlUp {
            border: 1px solid purple;
            color: purple;
        }

        /* Styles for etaniAllAppend buttons */
        .etaniAllAppend button {
            padding: 5px 10px;
            font-size: 16px;
            margin: 0 5px;
            cursor: pointer;
            border: 1px solid #333;
            background-color: #fff;
        }
        
        /* Custom radio button styles */
        .etaniMode span {
            display: inline-block;
            cursor: pointer;
            padding: 4px 8px;
            margin: 0 3px;
            font-size: 14px;
            border: 1px solid #888;
            background-color: #eee;
            color: #333;
            user-select: none;
        }

        .etaniMode span.active {
            background-color: #008CBA;
            color: white;
            border-color: #008CBA;
        }

        /* Result and animation item styles */
        .etaniResultDR {
            text-align: center;
            margin-bottom: 10px;
        }

        .etaniResultDownload, .etaniResultRename {
            display: inline-block;
            margin-right: 15px;
            text-decoration: none;
            padding: 5px 10px;
            font-size: 16px; 
        }
        
        .etaniResultDownload {
            border: 1px solid blue;
            color: blue;
        }

        .etaniResultRename {
            border: 1px solid brown;
            color: brown;
        }

        .etaniResultImage {
            display: block;
            max-width: 480px;
            width: 100%;
            height: auto;
            margin: 0 auto 10px auto;
            border: 1px solid #000;
            box-sizing: border-box;
        }
        
        .etaniResultSize {
            display: inline-block;
            margin-left: 10px;
            font-size: 12px; 
            color: #555;
        }
        
        /* etaniItem structure */
        .etaniItem {
            min-height: 48px;
            border: 1px solid #ccc;
            box-sizing: border-box;
            width: 100%;
            margin-bottom: -1px;
            background-color: lightyellow;
        }
        
        .etaniItemLeft {
            float: left; 
            width: 60px;
            min-height: 48px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 2px 0;
        }
        
        .etaniItemRight {
            margin-left: 60px; 
            padding: 7px;
            min-height: 48px; 
            background-color: #fff;
        }

        .tileid {
            text-align: center;
            font-size: 12px; 
            word-break: break-all;
            padding-top: 2px;
        }
        
        /* Animation controls */
        .etaniAnimate {
            border: 1px solid #999;
            padding: 5px;
            margin-bottom: 5px;
        }

        .etaniAnimateAttr {
            margin-bottom: 5px;
        }

        .etaniAnimateName {
            display: inline-block;
            padding: 2px 5px;
            background-color: #555;
            color: white;
            margin-right: 10px;
            font-size: 12px;
        }

        .etaniAnimateAttr > span {
            cursor: pointer;
        }

        .etaniAnimateAttr > span:not(.etaniAnimateName) {
            display: inline-block;
            padding: 2px 5px;
            font-size: 12px;
            margin-right: 7px;
            box-sizing: border-box;
            border-width: 1px;
            border-style: solid;
        }

        .etaniAnimateAttrAdd {
            border-color: #2c8c12;
            color: #2c8c12;
        }

        .etaniAnimateId {
            border-color: #742bcc;
            color: #742bcc;
        }

        .etaniAnimateBegin {
            border-color: #b6533c;
            color: #b6533c;
        }

        .etaniAnimateOther {
            border-color: #1cadca;
            color: #1cadca;
        }

        /* Dropdown menu styles */
        .etaniDropdown {
            position: absolute;
            background-color: #fff;
            border: 1px solid #ccc;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            z-index: 1002;
        }

        .etaniDropdownItem {
            padding: 8px 12px;
            cursor: pointer;
            font-size: 12px;
        }

        .etaniDropdownItem:hover {
            background-color: #f0f0f0;
        }

        /* Window modal styles */
        .etaniWindow {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 15px;
            border: 1px solid #ccc;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            z-index: 1003;
            width: 300px;
        }

        .etaniWindow label, .etaniWindow input {
            display: block;
            margin-bottom: 10px;
        }

        .etaniWindow button {
            margin-right: 10px;
            padding: 5px 10px;
        }

        .etaniExistingIds, .etaniHistory {
            margin-bottom: 10px;
            font-size: 12px;
        }

        .etaniIdItem {
            cursor: pointer;
            padding: 2px 5px;
            margin-right: 5px;
            border: 1px solid #ddd;
            display: inline-block;
        }

        .etaniIdItem.selected {
            background-color: #008CBA;
            color: white;
        }

        .etaniIdItem.zero-s.selected {
            color: white;
        }

        .etaniIdItem.zero-s {
            color: #888;
        }

        .etaniAnimateDur {
            border-color: blue;
            color: blue;
        }

        .etaniAnimateFR {
            border-color: #78229f;
            color: #78229f;
        }

        .etaniAnimateValue {
            margin-top: 5px;
        }

        .etaniAVCtrl {
            display: inline-block;
            vertical-align: top;
            margin-right: 5px;
            margin-bottom: 3px;
        }
        
        .etaniAVCtrl svg {
            margin-left: -1px;
            margin-top: -1px;
        }

        .etaniAVCtrl span {
            display: inline-block;
            width: 24px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            cursor: pointer;
            box-sizing: border-box;
            vertical-align: top;
            margin-right: 3px;
        }

        .etaniAVAdd {
            background-color: #a7fca7;
            border: 1px solid #71c371;
        }
        
        .etaniAVDelete {
            background-color: #ffcccc;
            border: 1px solid #cc3333;
        }

        .etaniAVDelete.deleting {
            background-color: #cc3333;
            color: white;
        }

        .etaniAVCopy {
            background-color: #ccccff;
            border: 1px solid #6666cc;
        }

        .etaniAVCopy.copying {
            background-color: #6666cc;
            color: white;
        }

        .etaniAVMove {
            background-color: #ffcc99;
            border: 1px solid #cc9966;
        }

        .etaniAVMove.moving {
            background-color: #cc9966;
            color: white;
        }
        
        .etaniAVLabel {
            font-size: 14px;
            margin-right: 5px;
        }

        .etaniAV {
            display: inline-block;
            vertical-align: top;
        }

        .etaniAVItem {
            display: inline-block;
            height: 24px;
            background-color: #ff9933;
            border: 1px dashed #00bfff;
            margin: 0 5px 3px;
            padding: 0 5px;
            box-sizing: border-box;
            cursor: pointer;
            position: relative;
            text-align: center;
            line-height: 24px;
            font-size: 12px;
            color: #333;
        }

        .etaniAVItem.deleting-target, .etaniAVItem.copying-target, .etaniAVItem.moving-target {
            background-color: #ff4d4d;
            border: 2px solid red;
        }

        .etaniAVItem.selected-move {
            background-color: #66ccff;
            border: 2px solid #0066cc;
        }
        
        /* Modal/popup styles */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }
        .modal-content {
            position: fixed;
            width: 98%;
            height: 48%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            z-index: 1001;
            box-sizing: border-box;
        }
        .modal-content textarea {
            width: 100%;
            height: calc(100% - 50px);
            resize: none;
            border: 1px solid #ccc;
            font-size: 12px;
            box-sizing: border-box;
        }
        .modal-close {
            position: absolute;
            top: 0;
            right: 10px;
            font-size: 48px;
            line-height: 1; 
            cursor: pointer;
            color: #333;
        }
    `;

    document.head.appendChild(styleSheet);
}

// Find the first missing letter in the sequence starting from 'a'
function findFirstMissingLetter(existingLetters) {
    let letter = 'a';
    while (existingLetters.includes(letter)) {
        const code = letter.charCodeAt(0);
        if (code >= 97 && code < 122) { // lowercase a-y
            letter = String.fromCharCode(code + 1);
        } else if (code === 122) { // z -> A
            letter = 'A';
        } else if (code >= 65 && code < 90) { // uppercase A-Y
            letter = String.fromCharCode(code + 1);
        } else if (code === 90) { // Z -> a (loop back)
            letter = 'a';
        }
    }
    return letter;
}

// Extract a specific transform function and its value from a transform string
function extractTransformPart(transformString, type) {
    const regex = new RegExp(`(${type})\\(([^)]+)\\)`, 'i');
    const match = transformString.match(regex);
    if (match) {
        return { func: match[1], value: match[2].trim() };
    }
    return { func: '', value: '' };
}

// Parse transform string to get individual transform values
function parseTransform(transformString) {
    const defaultTransform = { translate: '0,0', scale: '1,1', rotate: '0' };
    if (!transformString) return defaultTransform;

    const transform = {};

    const getMatch = (type) => {
        const part = extractTransformPart(transformString, type).value;
        if (!part) return null;
        return part.split(/[,\s]+/).join(',');
    };

    transform.translate = getMatch('translate') || defaultTransform.translate;
    transform.scale = getMatch('scale') || defaultTransform.scale;
    if (transform.scale.split(',').length === 1) {
        transform.scale += `,${transform.scale}`;
    }
    transform.rotate = getMatch('rotate') || defaultTransform.rotate;

    return transform;
}

// Convert SVG string to a Base64 data URL
function svgToBase64(svgString) {
    const base64 = btoa(unescape(encodeURIComponent(svgString)));
    return `data:image/svg+xml;base64,${base64}`;
}

// Format byte size into human-readable string
function formatBytes(bytes) {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

// Update the result section with the current state of etani_clone
function updateEtaniResult() {
    if (!etani_clone) return;

    const svgString = new XMLSerializer().serializeToString(etani_clone);
    const sizeInBytes = new Blob([svgString]).size;
    const base64Url = svgToBase64(svgString);
    
    const now = new Date();
    const yyyy = now.getFullYear();
    const mm = String(now.getMonth() + 1).padStart(2, '0');
    const dd = String(now.getDate()).padStart(2, '0');
    const hh = String(now.getHours()).padStart(2, '0');
    const mi = String(now.getMinutes()).padStart(2, '0');
    const ss = String(now.getSeconds()).padStart(2, '0');
    const defaultFilename = `ejtileAnimation_${yyyy}${mm}${dd}_${hh}${mi}${ss}.svg`;

    const imgElement = document.querySelector('.etaniResultImage');
    const downloadElement = document.querySelector('.etaniResultDownload');
    const renameElement = document.querySelector('.etaniResultRename');
    const sizeElement = document.querySelector('.etaniResultSize');

    if (imgElement && downloadElement && renameElement && sizeElement) {
        imgElement.src = base64Url;
        sizeElement.textContent = `Size: ${formatBytes(sizeInBytes)}`;
        downloadElement.href = base64Url;
        downloadElement.download = defaultFilename;
        
        renameElement.onclick = (e) => {
            e.preventDefault();
            let currentDownloadName = downloadElement.download;
            let newFilename = prompt("Enter new filename:", currentDownloadName);
            if (newFilename) {
                if (!newFilename.toLowerCase().endsWith('.svg')) {
                    newFilename += '.svg';
                }
                downloadElement.download = newFilename;
                alert(`Filename changed to: ${newFilename}`);
            }
        };
    }
}

// Handle the 'Center' button click to reset the .etdrop transform
function handleCenterClick(e) {
    e.preventDefault();
    if (etani_clone) {
        const etdrop = etani_clone.querySelector('.etdrop');
        if (etdrop) {
            etdrop.setAttribute('transform', 'translate(240,240) scale(1,1)');
            updateEtaniResult();
        }
    }
}

// Handle the HTML popup window
function handleContentHTMLClick(e) {
    e.preventDefault();
    if (!etani_clone) return;

    const overlay = document.createElement('div');
    overlay.className = 'modal-overlay';
    
    const content = document.createElement('div');
    content.className = 'modal-content';
    
    const close = document.createElement('span');
    close.className = 'modal-close';
    close.innerHTML = '&times;';
    
    const textarea = document.createElement('textarea');
    textarea.value = new XMLSerializer().serializeToString(etani_clone);

    const closeModal = () => {
        if (document.body.contains(overlay)) document.body.removeChild(overlay);
        if (document.body.contains(content)) document.body.removeChild(content);
    };
    close.onclick = closeModal;
    overlay.onclick = closeModal;

    content.appendChild(close);
    content.appendChild(textarea);
    
    document.body.appendChild(overlay);
    document.body.appendChild(content);
}

// Calculate additive transform or opacity value for a given type
function calculateAdditiveValue(type, originalValue, currentBaseValue, scaleValue = '1,1') {
    const roundToThreeDecimals = (value) => {
        return Math.round(value * 1000) / 1000;
    };
    
    if (type === 'rotate') {
        const ovAngle = parseFloat(currentBaseValue.trim());
        const cvAngle = parseFloat(originalValue.trim());
        return roundToThreeDecimals(cvAngle - ovAngle);
    } else if (type === 'scale') {
        const ovScales = currentBaseValue.split(',').map(c => parseFloat(c.trim()));
        const cvScales = originalValue.split(',').map(c => parseFloat(c.trim()));
        const v1 = roundToThreeDecimals(cvScales[0] / ovScales[0]);
        const v2 = roundToThreeDecimals(cvScales.length > 1 ? (cvScales[1] / ovScales[1]) : (cvScales[0] / ovScales[0]));
        return v1 === v2 ? `${v1}` : `${v1},${v2}`;
    } else if (type === 'translate') {
        const ovCoords = currentBaseValue.split(',').map(c => parseFloat(c.trim()));
        const cvCoords = originalValue.split(',').map(c => parseFloat(c.trim()));
        const scaleFactors = scaleValue.split(',').map(c => parseFloat(c.trim()));
        const v1 = roundToThreeDecimals(cvCoords[0] - (ovCoords[0] * scaleFactors[0]));
        const v2 = roundToThreeDecimals(cvCoords[1] - (ovCoords[1] * (scaleFactors.length > 1 ? scaleFactors[1] : scaleFactors[0])));
        return `${v1},${v2}`;
    } else if (type === 'opacity') {
        return originalValue;
    }
    return '';
}

// Update duration based on the number of values
function updateDuration(animate, etaniAnimate, newValuesLength) {
    const currentDur = parseFloat(etaniAnimate.querySelector('.etaniAnimateDur').textContent.replace('dur: ', '').replace('s', ''));
    const isIntegerDur = Number.isInteger(currentDur);
    const newDur = isIntegerDur ? (newValuesLength > 1 ? newValuesLength - 1 : 0) : currentDur;
    if (newDur > 0) {
        animate.setAttribute('dur', `${newDur}s`);
    } else {
        animate.removeAttribute('dur');
    }

    etaniAnimate.querySelector('.etaniAnimateDur').textContent = `dur: ${newDur}s`;
}

// Handle click event for the '+' button for transform or opacity
function handleAVAddClick(e, useElementId, animateType = 'transform') {
    e.preventDefault();
    if (!etani_clone) return;

    // Reset all modes before adding a new value
    resetModes(animateType);

    const etaniItemRight = e.currentTarget.closest('.etaniItemRight');
    const etaniAV = etaniItemRight.querySelector(`.etaniAnimate[data-type="${animateType}"] .etaniAV`);
    const etaniAnimate = etaniItemRight.querySelector(`.etaniAnimate[data-type="${animateType}"]`);

    if (animateType === 'transform') {
        // Get the original <use> element from #etmain to read its current transform
        const originalUseElement = document.querySelector(`#etmain .etdrop use[href="#${useElementId}"]`);
        if (!originalUseElement) return;

        const originalTransformString = originalUseElement.getAttribute('transform') || '';
        const originalTransforms = parseTransform(originalTransformString);

        // Get the corresponding <use> element in the clone
        const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useElementId}"]`);
        if (!cloneUseElement) return;

        // Find all animateTransform elements inside the cloned <use>
        const animates = cloneUseElement.querySelectorAll('animateTransform');
        
        animates.forEach(animate => {
            const type = animate.getAttribute('type').toLowerCase();
            let currentValueString = animate.getAttribute('values') || '';
            let newValue = '';
            
            // Get the new value directly from the parsed original transform
            if (type === 'translate') {
                newValue = originalTransforms.translate;
            } else if (type === 'scale') {
                newValue = originalTransforms.scale;
            } else if (type === 'rotate') {
                newValue = originalTransforms.rotate;
            }
            
            const newValueString = (currentValueString ? currentValueString + ';' : '') + newValue;
            animate.setAttribute('values', newValueString);
            updateDuration(animate, etaniAnimate, newValueString.split(';').length);
        });
    } else if (animateType === 'opacity') {
        const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useElementId}"]`);
        if (!cloneUseElement) return;

        const animateOpacity = cloneUseElement.querySelector('animate[attributeName="opacity"]');
        if (!animateOpacity) return;

        const currentValueString = animateOpacity.getAttribute('values') || '';
        const values = currentValueString ? currentValueString.split(';') : [];
        const newValue = values.length > 0 ? values[values.length - 1] : '1';
        const newValueString = (currentValueString ? currentValueString + ';' : '') + newValue;
        animateOpacity.setAttribute('values', newValueString);
        updateDuration(animateOpacity, etaniAnimate, newValueString.split(';').length);
    }

    // Add new etaniAVItem with appropriate label
    if (etaniAV && etaniAnimate) {
        const newAVItem = document.createElement('span');
        newAVItem.className = 'etaniAVItem';
        newAVItem.addEventListener('click', (e) => handleAVItemClick(e, animateType));

        const existingItems = etaniAV.querySelectorAll('.etaniAVItem');
        if (animateType === 'transform') {
            const existingLetters = Array.from(existingItems).map(item => item.textContent);
            newAVItem.textContent = findFirstMissingLetter(existingLetters);
        } else if (animateType === 'opacity') {
            const values = animateType === 'opacity' ? 
                etaniAnimate.querySelector('animate[attributeName="opacity"]')?.getAttribute('values')?.split(';') || ['1'] :
                ['1'];
            newAVItem.textContent = values[values.length - 1];
        }

        etaniAV.appendChild(newAVItem);
    }

    updateEtaniResult();
}

// Reset all mode states for a specific animateType
function resetModes(animateType, excludeMode = null) {
    const etaniCol = document.querySelector('.etaniCol');
    const avItems = document.querySelectorAll(`.etaniAnimate[data-type="${animateType}"] .etaniAVItem`);

    if (excludeMode !== 'delete') {
        isDeleteMode = false;
        etaniCol.classList.remove(`deleting-mode-${animateType}`);
        document.querySelectorAll(`.etaniAVDelete[data-type="${animateType}"]`).forEach(btn => {
            btn.classList.remove('deleting');
            btn.title = 'Delete Value';
        });
    }

    if (excludeMode !== 'copy') {
        isCopyMode = false;
        etaniCol.classList.remove(`copying-mode-${animateType}`);
        document.querySelectorAll(`.etaniAVCopy[data-type="${animateType}"]`).forEach(btn => {
            btn.classList.remove('copying');
            btn.title = 'Copy Value';
        });
    }

    if (excludeMode !== 'move') {
        isMoveMode = false;
        selectedMoveItem = null;
        etaniCol.classList.remove(`moving-mode-${animateType}`);
        document.querySelectorAll(`.etaniAVMove[data-type="${animateType}"]`).forEach(btn => {
            btn.classList.remove('moving');
            btn.title = 'Move Value';
        });
    }

    avItems.forEach(item => {
        item.classList.remove('deleting-target', 'copying-target', 'moving-target', 'selected-move');
    });
}

// Handle click event for the '-' button to toggle deletion mode
function handleAVDeleteToggle(e, animateType = 'transform') {
    e.preventDefault();
    const deleteButton = e.currentTarget;
    resetModes(animateType, 'delete');
    isDeleteMode = !isDeleteMode;
    deleteButton.classList.toggle('deleting', isDeleteMode);
    
    const etaniItemRight = deleteButton.closest('.etaniItemRight');
    const etaniCol = deleteButton.closest('.etaniCol');
    
    const avItems = etaniItemRight.querySelectorAll(`.etaniAnimate[data-type="${animateType}"] .etaniAVItem`);
    
    avItems.forEach(item => {
        item.classList.toggle('deleting-target', isDeleteMode);
    });

    etaniCol.classList.toggle(`deleting-mode-${animateType}`, isDeleteMode);

    if (isDeleteMode) {
        deleteButton.title = "Click value item to delete (Click again to cancel)";
    } else {
        deleteButton.title = "Delete Value";
        
        avItems.forEach(item => {
            item.classList.remove('deleting-target');
        });
    }
}

// Handle click event for the 'Copy' button to toggle copy mode
function handleAVCopyToggle(e, animateType) {
    e.preventDefault();
    const copyButton = e.currentTarget;
    resetModes(animateType, 'copy');
    isCopyMode = !isCopyMode;
    copyButton.classList.toggle('copying', isCopyMode);
    
    const etaniItemRight = copyButton.closest('.etaniItemRight');
    const etaniCol = copyButton.closest('.etaniCol');
    
    const avItems = etaniItemRight.querySelectorAll(`.etaniAnimate[data-type="${animateType}"] .etaniAVItem`);
    
    avItems.forEach(item => {
        item.classList.toggle('copying-target', isCopyMode);
    });

    etaniCol.classList.toggle(`copying-mode-${animateType}`, isCopyMode);

    if (isCopyMode) {
        copyButton.title = "Click value item to copy (Click again to cancel)";
    } else {
        copyButton.title = "Copy Value";
        
        avItems.forEach(item => {
            item.classList.remove('copying-target');
        });
    }
}

// Handle click event for the 'Move' button to toggle move mode
function handleAVMoveToggle(e, animateType) {
    e.preventDefault();
    const moveButton = e.currentTarget;
    resetModes(animateType, 'move');
    isMoveMode = !isMoveMode;
    moveButton.classList.toggle('moving', isMoveMode);
    
    const etaniItemRight = moveButton.closest('.etaniItemRight');
    const etaniCol = moveButton.closest('.etaniCol');
    
    const avItems = etaniItemRight.querySelectorAll(`.etaniAnimate[data-type="${animateType}"] .etaniAVItem`);
    
    avItems.forEach(item => {
        item.classList.toggle('moving-target', isMoveMode);
    });

    etaniCol.classList.toggle(`moving-mode-${animateType}`, isMoveMode);

    if (isMoveMode) {
        moveButton.title = "Click value item to select, then click another to move (Click again to cancel)";
    } else {
        moveButton.title = "Move Value";
        selectedMoveItem = null;
        
        avItems.forEach(item => {
            item.classList.remove('moving-target');
            item.classList.remove('selected-move');
        });
    }
}

// Handle click event for an .etaniAVItem in deletion, copy, or move mode
function handleAVItemClick(e, animateType = 'transform') {
    const item = e.currentTarget;
    const itemIndex = Array.from(item.parentNode.children).indexOf(item);
    const etaniItemRight = item.closest('.etaniItemRight');
    const etaniCol = item.closest('.etaniCol');
    const useId = etaniItemRight.closest('.etaniItem').querySelector('.tileid').textContent;

    const currentTime = Date.now();
    const isDoubleClick = (item === lastClickedItem && (currentTime - lastClickTime) < 2000);

    lastClickTime = currentTime;
    lastClickedItem = item;

    if (etaniCol.classList.contains(`moving-mode-${animateType}`)) {
        const avItems = etaniItemRight.querySelectorAll(`.etaniAnimate[data-type="${animateType}"] .etaniAVItem`);
        
        if (!selectedMoveItem) {
            selectedMoveItem = item;
            item.classList.add('selected-move');
            return;
        } else if (selectedMoveItem === item) {
            selectedMoveItem.classList.remove('selected-move');
            selectedMoveItem = null;
            return;
        } else {
            const targetIndex = itemIndex;
            const sourceIndex = Array.from(item.parentNode.children).indexOf(selectedMoveItem);
            
            const parent = item.parentNode;
            if (sourceIndex < targetIndex) {
                if (item.nextSibling) {
                    parent.insertBefore(selectedMoveItem, item.nextSibling);
                } else {
                    parent.appendChild(selectedMoveItem);
                }
            } else {
                parent.insertBefore(selectedMoveItem, item);
            }

            if (animateType === 'transform') {
                const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
                if (!cloneUseElement) return;

                const allAnimates = cloneUseElement.querySelectorAll('animateTransform');
                
                allAnimates.forEach(animate => {
                    const values = animate.getAttribute('values').split(';');
                    const valueToMove = values[sourceIndex];
                    values.splice(sourceIndex, 1);
                    if (sourceIndex < targetIndex) {
                        values.splice(targetIndex, 0, valueToMove);
                    } else {
                        values.splice(targetIndex, 0, valueToMove);
                    }
                    animate.setAttribute('values', values.join(';'));
                });
            } else if (animateType === 'opacity') {
                const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
                if (!cloneUseElement) return;

                const animateOpacity = cloneUseElement.querySelector('animate[attributeName="opacity"]');
                if (!animateOpacity) return;

                const values = animateOpacity.getAttribute('values').split(';');
                const valueToMove = values[sourceIndex];
                values.splice(sourceIndex, 1);
                if (sourceIndex < targetIndex) {
                    values.splice(targetIndex, 0, valueToMove);
                } else {
                    values.splice(targetIndex, 0, valueToMove);
                }
                animateOpacity.setAttribute('values', values.join(';'));
            }

            selectedMoveItem.classList.remove('selected-move');
            selectedMoveItem = null;
            updateEtaniResult();
            return;
        }
    }

    if (etaniCol.classList.contains(`copying-mode-${animateType}`)) {
        const etaniAV = item.parentNode;
        const newAVItem = document.createElement('span');
        newAVItem.className = 'etaniAVItem';
        newAVItem.textContent = item.textContent;
        newAVItem.addEventListener('click', (e) => handleAVItemClick(e, animateType));
        etaniAV.insertBefore(newAVItem, item.nextSibling);

        if (animateType === 'transform') {
            const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
            if (!cloneUseElement) return;

            const allAnimates = cloneUseElement.querySelectorAll('animateTransform');
            
            allAnimates.forEach(animate => {
                const values = animate.getAttribute('values').split(';');
                if (itemIndex < values.length) {
                    values.splice(itemIndex + 1, 0, values[itemIndex]);
                    animate.setAttribute('values', values.join(';'));
                    updateDuration(animate, etaniItemRight.querySelector(`.etaniAnimate[data-type="${animateType}"]`), values.length);
                }
            });
        } else if (animateType === 'opacity') {
            const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
            if (!cloneUseElement) return;

            const animateOpacity = cloneUseElement.querySelector('animate[attributeName="opacity"]');
            if (!animateOpacity) return;

            const values = animateOpacity.getAttribute('values').split(';');
            if (itemIndex < values.length) {
                values.splice(itemIndex + 1, 0, values[itemIndex]);
                animateOpacity.setAttribute('values', values.join(';'));
                updateDuration(animateOpacity, etaniItemRight.querySelector(`.etaniAnimate[data-type="${animateType}"]`), values.length);
            }
        }

        updateEtaniResult();
        return;
    }

    if (etaniCol.classList.contains(`deleting-mode-${animateType}`)) {
        const deleteButton = etaniItemRight.querySelector(`.etaniAVDelete[data-type="${animateType}"]`);
        const etaniAnimate = etaniItemRight.querySelector(`.etaniAnimate[data-type="${animateType}"]`);
        
        if (animateType === 'transform') {
            const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
            if (!cloneUseElement) return;

            const allAnimates = cloneUseElement.querySelectorAll('animateTransform');
            let newValuesLength = 0;
            
            allAnimates.forEach((animate, index) => {
                const values = animate.getAttribute('values').split(';');
                
                if (itemIndex < values.length) {
                    values.splice(itemIndex, 1);
                    newValuesLength = values.length; // All animations will have the same new length
                    
                    if (newValuesLength > 0) {
                        animate.setAttribute('values', values.join(';'));
                        // Only update duration on the first animate to avoid multiple calls
                        if (index === 0) { 
                            updateDuration(animate, etaniAnimate, newValuesLength);
                        }
                    }
                }
            });

            // If all values were removed, clean up
            if (newValuesLength === 0 && allAnimates.length > 0) {
                allAnimates.forEach(anim => anim.remove());
                etaniAnimate.remove();
            }
        } else if (animateType === 'opacity') {
            const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
            if (!cloneUseElement) return;

            const animateOpacity = cloneUseElement.querySelector('animate[attributeName="opacity"]');
            if (!animateOpacity) return;

            const values = animateOpacity.getAttribute('values').split(';');
            if (itemIndex < values.length) {
                values.splice(itemIndex, 1);
                if (values.length === 0) {
                    // Remove the opacity animation
                    animateOpacity.remove();
                    etaniAnimate.remove();
                } else {
                    animateOpacity.setAttribute('values', values.join(';'));
                    updateDuration(animateOpacity, etaniItemRight.querySelector(`.etaniAnimate[data-type="${animateType}"]`), values.length);
                }
            }
        }

        item.remove();

        const remainingItems = etaniItemRight.querySelectorAll(`.etaniAnimate[data-type="${animateType}"] .etaniAVItem`);
        
        if (remainingItems.length === 0) {
            // The .etaniAnimate element (containing the deleteButton) was just removed
            // because it was the last item.
            // We cannot .click() the button, as it's no longer in the DOM.
            // Instead, we must manually reset the delete mode globally.
            resetModes(animateType);
        } else {
            // If items remain, just re-apply the 'deleting-target' class to them.
            remainingItems.forEach(item => {
                item.classList.add('deleting-target'); 
            });
        }

        updateEtaniResult();
        
    } else if (animateType === 'opacity' && !etaniCol.classList.contains(`deleting-mode-${animateType}`) && !etaniCol.classList.contains(`copying-mode-${animateType}`)) {
        const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
        if (!cloneUseElement) return;

        const animateOpacity = cloneUseElement.querySelector('animate[attributeName="opacity"]');
        if (!animateOpacity) return;

        const values = animateOpacity.getAttribute('values').split(';');
        if (itemIndex >= values.length) return;

        if (isDoubleClick) {
            const newValue = prompt("Enter opacity value (0 to 1):", values[itemIndex]);
            if (newValue !== null && !isNaN(newValue) && newValue >= 0 && newValue <= 1) {
                values[itemIndex] = newValue;
                item.textContent = newValue;
                animateOpacity.setAttribute('values', values.join(';'));
                updateEtaniResult();
            }
        } else {
            values[itemIndex] = values[itemIndex] === '0' ? '1' : '0';
            item.textContent = values[itemIndex];
            animateOpacity.setAttribute('values', values.join(';'));
            updateEtaniResult();
        }
    }
}

// Handle click event for the 'Transform' button
function handleAllAppendTransformClick() {
    if (!etani_clone) return;

    const etdropUses = document.querySelectorAll('#etmain .etdrop use');
    const etaniItemRights = document.querySelectorAll('.etaniItemRight');

    const isRepeat = document.querySelector('.etaniModeRepeat.active');

    etdropUses.forEach((originalUseElement, i) => {
        const useId = originalUseElement.getAttribute('href').substring(1);
        const itemRight = etaniItemRights[i];
        
        if (!itemRight) return;

        // Check if transform animation already exists
        if (itemRight.querySelector('.etaniAnimate[data-type="transform"]')) return;

        let cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
        if (!cloneUseElement) return;

        // Get the original transform values from the #etmain SVG
        const originalTransformString = originalUseElement.getAttribute('transform') || '';
        const originalTransforms = parseTransform(originalTransformString);

        const baseAnimate = (type, initialValue) => {
            const animate = document.createElementNS('http://www.w3.org/2000/svg', 'animateTransform');
            animate.setAttribute('attributeName', 'transform');
            animate.setAttribute('attributeType', 'XML');
            animate.setAttribute('type', type);
            animate.setAttribute('values', initialValue);
            animate.setAttribute('fill', isRepeat ? 'remove' : 'freeze');
            if (isRepeat) animate.setAttribute('repeatCount', 'indefinite');
            
            // Add additive="sum" for scale and rotate, but not for translate
            if (type === 'scale' || type === 'rotate') {
                animate.setAttribute('additive', 'sum');
            }
            return animate;
        };
        
        // Add all three animations directly to the <use> element
        // Order: translate, scale, rotate
        cloneUseElement.appendChild(baseAnimate('translate', originalTransforms.translate));
        cloneUseElement.appendChild(baseAnimate('scale', originalTransforms.scale));
        cloneUseElement.appendChild(baseAnimate('rotate', originalTransforms.rotate));

        // --- Start of HTML control creation ---
        const etaniAnimate = document.createElement('div');
        etaniAnimate.className = 'etaniAnimate';
        etaniAnimate.setAttribute('data-type', 'transform');

        const nameSpan = document.createElement('span');
        nameSpan.className = 'etaniAnimateName';
        nameSpan.textContent = 'transform';

        const durSpan = document.createElement('span');
        durSpan.className = 'etaniAnimateDur';
        durSpan.textContent = 'dur: 0s';
        durSpan.addEventListener('click', () => {
            const currentDur = parseFloat(durSpan.textContent.replace('dur: ', '').replace('s', ''));
            const newDur = prompt('Enter duration in seconds:', currentDur);
            if (newDur !== null && !isNaN(newDur) && newDur >= 0) {
                // Find animates inside the <use> element
                const animates = etani_clone.querySelectorAll(`.etdrop use[href="#${useId}"] animateTransform`);
                animates.forEach(animate => {
                    if (newDur > 0) {
                        animate.setAttribute('dur', `${newDur}s`);
                        if (isRepeat) {
                            animate.removeAttribute('fill');
                            animate.setAttribute('repeatCount', 'indefinite');
                        } else {
                            animate.removeAttribute('repeatCount');
                            animate.setAttribute('fill', 'freeze');
                        }
                    } else {
                        animate.removeAttribute('dur');
                        animate.removeAttribute('fill');
                        animate.removeAttribute('repeatCount');
                    }
                });
                durSpan.textContent = `dur: ${newDur}s`;
                updateEtaniResult();
            }
        });

        const etaniAnimateAttr = document.createElement('div');
        etaniAnimateAttr.className = 'etaniAnimateAttr';
        etaniAnimateAttr.appendChild(nameSpan);
        etaniAnimateAttr.appendChild(durSpan);
        etaniAnimate.appendChild(etaniAnimateAttr);

        const frSpan = document.createElement('span');
        frSpan.className = 'etaniAnimateFR';
        frSpan.textContent = document.querySelector('.etaniModeMixed.active') ? 'freeze' : 'repeat';
        frSpan.style.display = document.querySelector('.etaniModeMixed.active') ? 'inline-block' : 'none';
        frSpan.addEventListener('click', () => {
            const currentValue = frSpan.textContent;
            const newValue = currentValue === 'freeze' ? 'repeat' : 'freeze';
            frSpan.textContent = newValue;

            const useId = itemRight.closest('.etaniItem').querySelector('.tileid').textContent;
            // Find animates inside the <use> element
            const animates = etani_clone.querySelectorAll(`.etdrop use[href="#${useId}"] animateTransform`);
            animates.forEach(animate => {
                if (animate.hasAttribute('fill') || animate.hasAttribute('repeatCount')) {
                    if (newValue === 'repeat') {
                        animate.removeAttribute('fill');
                        animate.setAttribute('repeatCount', 'indefinite');
                    } else {
                        animate.removeAttribute('repeatCount');
                        animate.setAttribute('fill', 'freeze');
                    }
                }
            });
            updateEtaniResult();
        });
        etaniAnimateAttr.appendChild(frSpan);

        // Add the attribute add button
        const animateType = 'transform';
        const attrAddSpan = document.createElement('span');
        attrAddSpan.className = 'etaniAnimateAttrAdd';
        attrAddSpan.textContent = '+';
        attrAddSpan.addEventListener('click', (e) => showDropdown(e, animateType, useId));
        etaniAnimateAttr.appendChild(attrAddSpan);

        // Handle clicks on existing attribute spans
        etaniAnimateAttr.addEventListener('click', (e) => {
            if (e.target.classList.contains('etaniAnimateId')) {
                editAttribute(e.target, animateType, useId, 'id');
            } else if (e.target.classList.contains('etaniAnimateBegin')) {
                editAttribute(e.target, animateType, useId, 'begin');
            } else if (e.target.classList.contains('etaniAnimateOther')) {
                editAttribute(e.target, animateType, useId, 'other', e.target.textContent.split('=')[0]);
            }
        });

        const valueDiv = document.createElement('div');
        valueDiv.className = 'etaniAnimateValue';
        
        const avCtrlDiv = createControlButtons('transform', useId);
        
        const avLabelSpan = document.createElement('span');
        avLabelSpan.className = 'etaniAVLabel';
        avLabelSpan.textContent = 'values : ';

        const avDiv = document.createElement('div');
        avDiv.className = 'etaniAV';
        
        const avItemSpan = document.createElement('span');
        avItemSpan.className = 'etaniAVItem';
        avItemSpan.textContent = 'a';
        avItemSpan.addEventListener('click', (e) => handleAVItemClick(e, 'transform'));
        
        avDiv.appendChild(avItemSpan);
        
        valueDiv.appendChild(avCtrlDiv);
        valueDiv.appendChild(avLabelSpan);
        valueDiv.appendChild(avDiv);

        etaniAnimate.appendChild(valueDiv);
        itemRight.appendChild(etaniAnimate);
    });

    updateEtaniResult();
}

// Handle click event for the 'Opacity' button
function handleAllAppendOpacityClick() {
    if (!etani_clone) return;

    const etdropUses = document.querySelectorAll('#etmain .etdrop use');
    const etaniItemRights = document.querySelectorAll('.etaniItemRight');

    const isRepeat = document.querySelector('.etaniModeRepeat.active');

    etdropUses.forEach((originalUseElement, i) => {
        const useId = originalUseElement.getAttribute('href').substring(1);
        const itemRight = etaniItemRights[i];
        
        if (!itemRight) return;

        if (itemRight.querySelector('.etaniAnimate[data-type="opacity"]')) return;

        let cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
        if (!cloneUseElement) return;

        const animateOpacity = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
        animateOpacity.setAttribute('attributeName', 'opacity');
        animateOpacity.setAttribute('values', '1');
        if (isRepeat) {
            animateOpacity.setAttribute('repeatCount', 'indefinite');
        } else {
            animateOpacity.setAttribute('fill', 'freeze');
        }
        cloneUseElement.appendChild(animateOpacity);

        const etaniAnimate = document.createElement('div');
        etaniAnimate.className = 'etaniAnimate';
        etaniAnimate.setAttribute('data-type', 'opacity');

        const nameSpan = document.createElement('span');
        nameSpan.className = 'etaniAnimateName';
        nameSpan.textContent = 'opacity';

        const durSpan = document.createElement('span');
        durSpan.className = 'etaniAnimateDur';
        durSpan.textContent = 'dur: 0s';
        durSpan.addEventListener('click', () => {
            const currentDur = parseFloat(durSpan.textContent.replace('dur: ', '').replace('s', ''));
            const newDur = prompt('Enter duration in seconds:', currentDur);
            if (newDur !== null && !isNaN(newDur) && newDur >= 0) {
                const animateOpacity = etani_clone.querySelector(`.etdrop use[href="#${useId}"] animate[attributeName="opacity"]`);
                if (animateOpacity) {
                    if (newDur > 0) {
                        animateOpacity.setAttribute('dur', `${newDur}s`);
                        if (isRepeat) {
                            animateOpacity.removeAttribute('fill');
                            animateOpacity.setAttribute('repeatCount', 'indefinite');
                        } else {
                            animateOpacity.removeAttribute('repeatCount');
                            animateOpacity.setAttribute('fill', 'freeze');
                        }
                    } else {
                        animateOpacity.removeAttribute('dur');
                        animateOpacity.removeAttribute('fill');
                        animateOpacity.removeAttribute('repeatCount');
                    }
                }
                durSpan.textContent = `dur: ${newDur}s`;
                updateEtaniResult();
            }
        });

        const etaniAnimateAttr = document.createElement('div');
        etaniAnimateAttr.className = 'etaniAnimateAttr';
        etaniAnimateAttr.appendChild(nameSpan);
        etaniAnimateAttr.appendChild(durSpan);
        etaniAnimate.appendChild(etaniAnimateAttr);

        const frSpan = document.createElement('span');
        frSpan.className = 'etaniAnimateFR';
        frSpan.textContent = document.querySelector('.etaniModeMixed.active') ? 'freeze' : 'repeat';
        frSpan.style.display = document.querySelector('.etaniModeMixed.active') ? 'inline-block' : 'none';
        frSpan.addEventListener('click', () => {
            const currentValue = frSpan.textContent;
            const newValue = currentValue === 'freeze' ? 'repeat' : 'freeze';
            frSpan.textContent = newValue;

            const useId = itemRight.closest('.etaniItem').querySelector('.tileid').textContent;
            const animateOpacity = etani_clone.querySelector(`.etdrop use[href="#${useId}"] animate[attributeName="opacity"]`);
            if (animateOpacity &&
                (animateOpacity.hasAttribute('fill') || animateOpacity.hasAttribute('repeatCount'))) {
                if (newValue === 'repeat') {
                    animateOpacity.removeAttribute('fill');
                    animateOpacity.setAttribute('repeatCount', 'indefinite');
                } else {
                    animateOpacity.removeAttribute('repeatCount');
                    animateOpacity.setAttribute('fill', 'freeze');
                }
            }
            updateEtaniResult();
        });
        etaniAnimateAttr.appendChild(frSpan);

        // Add the attribute add button
        const animateType = 'opacity';
        const attrAddSpan = document.createElement('span');
        attrAddSpan.className = 'etaniAnimateAttrAdd';
        attrAddSpan.textContent = '+';
        attrAddSpan.addEventListener('click', (e) => showDropdown(e, animateType, useId));
        etaniAnimateAttr.appendChild(attrAddSpan);

        // Handle clicks on existing attribute spans
        etaniAnimateAttr.addEventListener('click', (e) => {
            if (e.target.classList.contains('etaniAnimateId')) {
                editAttribute(e.target, animateType, useId, 'id');
            } else if (e.target.classList.contains('etaniAnimateBegin')) {
                editAttribute(e.target, animateType, useId, 'begin');
            } else if (e.target.classList.contains('etaniAnimateOther')) {
                editAttribute(e.target, animateType, useId, 'other', e.target.textContent.split('=')[0]);
            }
        });

        const valueDiv = document.createElement('div');
        valueDiv.className = 'etaniAnimateValue';
        
        const avCtrlDiv = createControlButtons('opacity', useId);

        const avLabelSpan = document.createElement('span');
        avLabelSpan.className = 'etaniAVLabel';
        avLabelSpan.textContent = 'values : ';

        const avDiv = document.createElement('div');
        avDiv.className = 'etaniAV';
        
        const avItemSpan = document.createElement('span');
        avItemSpan.className = 'etaniAVItem';
        avItemSpan.textContent = '1';
        avItemSpan.addEventListener('click', (e) => handleAVItemClick(e, 'opacity'));
        
        avDiv.appendChild(avItemSpan);
        
        valueDiv.appendChild(avCtrlDiv);
        valueDiv.appendChild(avLabelSpan);
        valueDiv.appendChild(avDiv);

        etaniAnimate.appendChild(valueDiv);
        itemRight.appendChild(etaniAnimate);
    });

    updateEtaniResult();
}

// Handle click event for the 'Fill up values' button
function handleValueCtrlUpClick() {
    if (!etani_clone) return;

    const allAnimates = etani_clone.querySelectorAll('animateTransform, animate[attributeName="opacity"]');
    let maxValuesLength = 0;

    allAnimates.forEach(animate => {
        const values = animate.getAttribute('values')?.split(';') || [];
        maxValuesLength = Math.max(maxValuesLength, values.length);
    });

    allAnimates.forEach(animate => {
        const values = animate.getAttribute('values')?.split(';') || [];
        if (values.length < maxValuesLength && values.length > 0) {
            const lastValue = values[values.length - 1];
            while (values.length < maxValuesLength) {
                values.push(lastValue);
            }
            animate.setAttribute('values', values.join(';'));
            const useId = animate.closest('use')?.getAttribute('href')?.substring(1) || 
                          animate.closest('g[data-use-href]')?.getAttribute('data-use-href')?.substring(1);
            if (useId) {
                const etaniAnimate = document.querySelector(`.etaniItem:has(.tileid:where(:text("${useId}"))) .etaniAnimate[data-type="${animate.getAttribute('attributeName') === 'opacity' ? 'opacity' : 'transform'}"]`);
                if (etaniAnimate) {
                    updateDuration(animate, etaniAnimate, values.length);
                }
            }
        }
    });

    const etaniItemRights = document.querySelectorAll('.etaniItemRight');
    etaniItemRights.forEach(itemRight => {
        const useId = itemRight.closest('.etaniItem').querySelector('.tileid').textContent;
        ['transform', 'opacity'].forEach(animateType => {
            const etaniAV = itemRight.querySelector(`.etaniAnimate[data-type="${animateType}"] .etaniAV`);
            if (!etaniAV) return;

            const currentItems = etaniAV.querySelectorAll('.etaniAVItem');
            const currentValuesLength = currentItems.length;
            if (currentValuesLength >= maxValuesLength) return;

            const lastItem = currentItems[currentItems.length - 1];
            let lastValue = lastItem.textContent;

            for (let i = currentValuesLength; i < maxValuesLength; i++) {
                const newAVItem = document.createElement('span');
                newAVItem.className = 'etaniAVItem';
                newAVItem.addEventListener('click', (e) => handleAVItemClick(e, animateType));
                if (animateType === 'transform') {
                    newAVItem.textContent = lastValue; // Use the last letter instead of incrementing
                } else if (animateType === 'opacity') {
                    newAVItem.textContent = lastValue;
                }
                etaniAV.appendChild(newAVItem);
            }
        });
    });

    updateEtaniResult();
}

// Handle setting mode switch (Repeat/Freeze)
function handleModeChange(mode) {
    if (!etani_clone) return;

    const animates = etani_clone.querySelectorAll('animateTransform, animate[attributeName="opacity"]');
    const isRepeat = mode === 'repeat';
    const isFreeze = mode === 'freeze';
    const isMixed = mode === 'mixed';

    if (!isMixed) {
        animates.forEach(animate => {
            if (animate.hasAttribute('fill') || animate.hasAttribute('repeatCount')) {
                if (isRepeat) {
                    animate.removeAttribute('fill');
                    animate.setAttribute('repeatCount', 'indefinite');
                } else if (isFreeze) {
                    animate.removeAttribute('repeatCount');
                    animate.setAttribute('fill', 'freeze');
                }
            }
        });
    }

    document.querySelectorAll('.etaniMode span').forEach(span => {
        span.classList.remove('active');
    });
    document.querySelector(`.etaniMode${mode.charAt(0).toUpperCase() + mode.slice(1)}`).classList.add('active');

    const frElements = document.querySelectorAll('.etaniAnimateFR');
    frElements.forEach(fr => {
        fr.style.display = isMixed ? 'inline-block' : 'none';
    });

    updateEtaniResult();
}

// Create the internal animation control structure
function createEtaniInner(etaniouter) {
    const originalSvg = document.getElementById('etmain');
    if (!originalSvg) {
        console.error('SVG with ID "etmain" not found.');
        return;
    }
    etani_clone = originalSvg.cloneNode(true);
    const etwaitElement = etani_clone.querySelector('.etwait');
    if (etwaitElement) {
        etwaitElement.remove();
    }
    etani_clone.id = 'etmainani';

    const etaniinner = document.createElement('div');
    etaniinner.className = 'etaniinner';
    etaniinner.id = 'etaniinner';

    const etaniCtrl = document.createElement('div');
    etaniCtrl.className = 'etaniCtrl';
    
    const etaniContent = document.createElement('div');
    etaniContent.className = 'etaniContent';
    
    const contentHTMLLink = document.createElement('a');
    contentHTMLLink.className = 'etaniContentHTML';
    contentHTMLLink.textContent = 'Show HTML';
    contentHTMLLink.href = 'javascript:;';
    contentHTMLLink.addEventListener('click', handleContentHTMLClick);
    etaniContent.appendChild(contentHTMLLink);

    const centerLink = document.createElement('a');
    centerLink.className = 'etaniCenter';
    centerLink.textContent = 'Center';
    centerLink.href = 'javascript:;';
    centerLink.addEventListener('click', handleCenterClick);
    etaniContent.appendChild(centerLink);
    
    etaniCtrl.appendChild(etaniContent);

    const etaniMode = document.createElement('div');
    etaniMode.className = 'etaniMode';

    const repeatRadio = document.createElement('span');
    repeatRadio.className = 'etaniModeRepeat active';
    repeatRadio.textContent = 'Repeat';
    repeatRadio.setAttribute('data-mode', 'repeat');
    repeatRadio.addEventListener('click', () => handleModeChange('repeat'));

    const freezeRadio = document.createElement('span');
    freezeRadio.className = 'etaniModeFreeze';
    freezeRadio.textContent = 'Freeze';
    freezeRadio.setAttribute('data-mode', 'freeze');
    freezeRadio.addEventListener('click', () => handleModeChange('freeze'));

    const mixedRadio = document.createElement('span');
    mixedRadio.className = 'etaniModeMixed';
    mixedRadio.textContent = 'Mixed';
    mixedRadio.setAttribute('data-mode', 'mixed');
    mixedRadio.addEventListener('click', () => handleModeChange('mixed'));

    etaniMode.appendChild(repeatRadio);
    etaniMode.appendChild(freezeRadio);
    etaniMode.appendChild(mixedRadio);
    etaniCtrl.appendChild(etaniMode);

    const etaniAllAppend = document.createElement('div');
    etaniAllAppend.className = 'etaniAllAppend';

    const transformButton = document.createElement('button');
    transformButton.className = 'etaniAllAppendTransform';
    transformButton.textContent = 'transform';
    transformButton.addEventListener('click', handleAllAppendTransformClick);
    
    const opacityButton = document.createElement('button');
    opacityButton.className = 'etaniAllAppendOpacity';
    opacityButton.textContent = 'opacity';
    opacityButton.addEventListener('click', handleAllAppendOpacityClick);
    
    etaniAllAppend.appendChild(transformButton);
    etaniAllAppend.appendChild(opacityButton);
    etaniCtrl.appendChild(etaniAllAppend);

    const etaniValueCtrl = document.createElement('div');
    etaniValueCtrl.className = 'etaniValueCtrl';

    const valueCtrlUpLink = document.createElement('a');
    valueCtrlUpLink.className = 'etaniValueCtrlUp';
    valueCtrlUpLink.textContent = 'fill up values';
    valueCtrlUpLink.href = 'javascript:;';
    valueCtrlUpLink.addEventListener('click', handleValueCtrlUpClick);
    etaniValueCtrl.appendChild(valueCtrlUpLink);
    etaniCtrl.appendChild(etaniValueCtrl);

    const etaniCol = document.createElement('div');
    etaniCol.className = 'etaniCol';

    const etaniResult = document.createElement('div');
    etaniResult.className = 'etaniResult';
    
    const resultImg = document.createElement('img');
    resultImg.className = 'etaniResultImage';
    resultImg.alt = 'Rendered Ejtile Animation SVG';

    const resultDRDiv = document.createElement('div');
    resultDRDiv.className = 'etaniResultDR';

    const downloadLink = document.createElement('a');
    downloadLink.className = 'etaniResultDownload';
    downloadLink.textContent = 'Download SVG';
    downloadLink.href = 'javascript:;';

    const renameLink = document.createElement('a');
    renameLink.className = 'etaniResultRename';
    renameLink.textContent = 'Rename File';
    renameLink.href = 'javascript:;';
    
    const sizeSpan = document.createElement('span');
    sizeSpan.className = 'etaniResultSize';

    resultDRDiv.appendChild(downloadLink);
    resultDRDiv.appendChild(renameLink);
    
    etaniResult.appendChild(resultImg);
    etaniResult.appendChild(resultDRDiv);
    etaniResult.appendChild(sizeSpan);
    
    etaniinner.appendChild(etaniCtrl);
    etaniinner.appendChild(etaniCol);
    etaniinner.appendChild(etaniResult);

    etaniouter.appendChild(etaniinner);

    const etdropUses = document.querySelectorAll('.etdrop use');
    const etwaitGroups = document.querySelectorAll('.etwait g');

    etdropUses.forEach((useElement, i) => {
        const tileid = useElement.getAttribute('href').substring(1);
        let targetUse = null;
        for (const group of etwaitGroups) {
            const useInGroup = group.querySelector(`use[href="#${tileid}"]`);
            if (useInGroup) {
                targetUse = useInGroup;
                break;
            }
        }
        
        let etwaittransform = '', etwaitfill = '', etwaitstroke = '', etwaitstrokeWidth = '';
        if (targetUse) {
            etwaittransform = targetUse.getAttribute('transform') || '';
            etwaitfill = targetUse.getAttribute('fill') || '';
            etwaitstroke = targetUse.getAttribute('stroke') || '';
            etwaitstrokeWidth = targetUse.getAttribute('stroke-width') || '';

            const scaleMatch = etwaittransform.match(/scale\(([^)]+)\)/);
            const rotateMatch = etwaittransform.match(/rotate\(([^)]+)\)/);
            const scalePart = scaleMatch ? scaleMatch[0] : '';
            const rotatePart = rotateMatch ? rotateMatch[0] : '';
            etwaittransform = `translate(20,20) ${scalePart} ${rotatePart}`.trim().replace(/\s+/g, ' ');
        }
        
        const originalTile = document.querySelector(`defs g#${tileid}`);
        
        const etaniItem = document.createElement('div');
        etaniItem.className = 'etaniItem';
        etaniItem.setAttribute('data-use-id', tileid);

        const etaniItemLeft = document.createElement('div');
        etaniItemLeft.className = 'etaniItemLeft';

        const etaniItemRight = document.createElement('div');
        etaniItemRight.className = 'etaniItemRight';
        
        if (originalTile) {
            const tileclone = originalTile.cloneNode(true);
            tileclone.removeAttribute('id');
            if (etwaittransform) tileclone.setAttribute('transform', etwaittransform);
            if (etwaitfill) tileclone.setAttribute('fill', etwaitfill);
            if (etwaitstroke) tileclone.setAttribute('stroke', etwaitstroke);
            if (etwaitstrokeWidth) tileclone.setAttribute('stroke-width', etwaitstrokeWidth);
            
            const svgWrapper = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            svgWrapper.setAttribute('width', '40');
            svgWrapper.setAttribute('height', '40');
            svgWrapper.setAttribute('version', '1.1');
            svgWrapper.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
            svgWrapper.setAttribute('xmlns:svg', 'http://www.w3.org/2000/svg');
            svgWrapper.className = 'etanitileimg';
            
            svgWrapper.appendChild(tileclone);
            etaniItemLeft.appendChild(svgWrapper);
        }

        const tileidDiv = document.createElement('div');
        tileidDiv.className = 'tileid';
        tileidDiv.textContent = tileid;
        etaniItemLeft.appendChild(tileidDiv);

        etaniItem.appendChild(etaniItemLeft);
        etaniItem.appendChild(etaniItemRight);
        etaniCol.appendChild(etaniItem);
    });
    
    updateEtaniResult();
}

// Toggle the visibility and content of the animation control panel
function toggleAnimation(event) {
    const etanibutton = event.currentTarget;
    const etaniouter = etanibutton.parentNode;
    const etaniinner = document.getElementById('etaniinner');

    if (etanibutton.textContent === 'Animate it') {
        etanibutton.textContent = 'Close Ejtile Ani';
        createEtaniInner(etaniouter);
    } else if (etanibutton.textContent === 'Close Ejtile Ani') {
        etanibutton.textContent = 'Animate it';
        if (etaniinner) {
            etaniinner.remove();
        }
        etani_clone = null;
        isCopyMode = false;
        isMoveMode = false;
        isDeleteMode = false;
        selectedMoveItem = null;
        lastClickTime = 0;
        lastClickedItem = null;
    }
}

// Create control buttons when animate is appending
function createControlButtons(animateType, useId) {
    const avCtrlDiv = document.createElement('div');
    avCtrlDiv.className = 'etaniAVCtrl';

    const buttons = [
        {
            className: 'etaniAVAdd',
            title: `Add ${animateType.charAt(0).toUpperCase() + animateType.slice(1)} Value`,
            svg: {
                lines: [
                    { x1: '12', y1: '5', x2: '12', y2: '19' },
                    { x1: '5', y1: '12', x2: '19', y2: '12' }
                ]
            },
            handler: (e) => handleAVAddClick(e, useId, animateType)
        },
        {
            className: 'etaniAVDelete',
            title: 'Delete Value',
            svg: {
                lines: [
                    { x1: '5', y1: '12', x2: '19', y2: '12' }
                ]
            },
            handler: (e) => handleAVDeleteToggle(e, animateType)
        },
        {
            className: 'etaniAVCopy',
            title: 'Copy Value',
            svg: {
                rect: { x: '9', y: '9', width: '13', height: '13', rx: '2', ry: '2' },
                path: { d: 'M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1' }
            },
            handler: (e) => handleAVCopyToggle(e, animateType)
        },
        {
            className: 'etaniAVMove',
            title: 'Move Value',
            svg: {
                path: { d: 'M 7,4 L 3,8 L 7,12 M 3,8 L 18,8 M 17,12 L 21,16 L 17,20 M 21,16 L 6,16' }
            },
            handler: (e) => handleAVMoveToggle(e, animateType)
        }
    ];

    buttons.forEach(button => {
        const span = document.createElement('span');
        span.className = button.className;
        span.title = button.title;
        span.setAttribute('data-type', animateType);
        span.addEventListener('click', button.handler);

        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('width', '24');
        svg.setAttribute('height', '24');
        svg.setAttribute('viewBox', '0 0 24 24');
        svg.setAttribute('fill', 'none');
        svg.setAttribute('stroke', 'currentColor');
        svg.setAttribute('stroke-width', '1');
        svg.setAttribute('stroke-linecap', 'round');
        svg.setAttribute('stroke-linejoin', 'round');

        if (button.svg.lines) {
            button.svg.lines.forEach(line => {
                const lineElement = document.createElementNS('http://www.w3.org/2000/svg', 'line');
                Object.entries(line).forEach(([key, value]) => lineElement.setAttribute(key, value));
                svg.appendChild(lineElement);
            });
        }
        if (button.svg.rect) {
            const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
            Object.entries(button.svg.rect).forEach(([key, value]) => rect.setAttribute(key, value));
            svg.appendChild(rect);
        }
        if (button.svg.path) {
            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            Object.entries(button.svg.path).forEach(([key, value]) => path.setAttribute(key, value));
            svg.appendChild(path);
        }

        span.appendChild(svg);
        avCtrlDiv.appendChild(span);
    });

    return avCtrlDiv;
}

// Show dropdown menu for adding attributes
function showDropdown(e, animateType, useId) {
    const attrAddSpan = e.target;
    const existingDropdown = attrAddSpan.parentNode.querySelector('.etaniDropdown');
    if (existingDropdown) {
        // Toggle: if already open, remove it
        existingDropdown.remove();
        return;
    }

    const dropdown = document.createElement('div');
    dropdown.className = 'etaniDropdown';
    // Dynamically determine items based on existing attributes
    const attrParent = attrAddSpan.parentNode;
    const hasId = attrParent.querySelector('.etaniAnimateId');
    const hasBegin = attrParent.querySelector('.etaniAnimateBegin');
    const items = [];
    if (!hasId) items.push('id');
    if (!hasBegin) items.push('begin');
    items.push('other');
    items.forEach(item => {
        const div = document.createElement('div');
        div.className = 'etaniDropdownItem';
        div.textContent = item;
        div.addEventListener('click', () => {
            showWindow(item, animateType, useId);
            dropdown.remove(); // Remove after selecting item
        });
        dropdown.appendChild(div);
    });

    attrAddSpan.parentNode.style.position = 'relative'; // Ensure parent is relative for absolute positioning
    attrAddSpan.parentNode.appendChild(dropdown);
    dropdown.style.left = `${attrAddSpan.offsetLeft}px`;
    dropdown.style.top = `${attrAddSpan.offsetTop + attrAddSpan.offsetHeight}px`;
}

    // Show window for adding/editing attributes
    function showWindow(type, animateType, useId, existingSpan = null, otherAttrName = null) {
        const windowDiv = document.createElement('div');
        windowDiv.className = 'etaniWindow';

        const existingIds = getExistingIds();
        const isEdit = !!existingSpan;
        let input1, input2, existingIdsDiv, historyDiv, confirmBtn, deleteBtn, cancelBtn;

        if (type === 'id') {
            const label = document.createElement('label');
            label.textContent = 'Enter ID:';
            input1 = document.createElement('input');
            input1.type = 'text';
            if (isEdit) input1.value = existingSpan.textContent.replace('id=', '');
            windowDiv.appendChild(label);
            windowDiv.appendChild(input1);

            existingIdsDiv = createIdsDisplay(existingIds, false);
            windowDiv.appendChild(existingIdsDiv);
        } else if (type === 'begin') {
            existingIdsDiv = createIdsDisplay(existingIds, true, isEdit ? parseBeginValue(existingSpan.textContent) : []);
            windowDiv.appendChild(existingIdsDiv);

            historyDiv = document.createElement('div');
            historyDiv.className = 'etaniHistory';
           historyDiv = document.createElement('div');
           historyDiv.className = 'etaniHistory';
           historyDiv.textContent = 'History: ';
           const historyIds = getHistoryIds();
           historyIds.forEach(id => {
               const span = document.createElement('span');
               span.className = 'etaniIdItem';
               span.textContent = id;
               span.addEventListener('click', () => {
                   span.remove(); // Remove from history UI on click
               });
               historyDiv.appendChild(span);
           });
            windowDiv.appendChild(historyDiv);
        } else if (type === 'other') {
            const label1 = document.createElement('label');
            label1.textContent = 'Attribute Name:';
            input1 = document.createElement('input');
            input1.type = 'text';
            if (isEdit) input1.value = otherAttrName;

            const label2 = document.createElement('label');
            label2.textContent = 'Attribute Value:';
            input2 = document.createElement('input');
            input2.type = 'text';
            if (isEdit) input2.value = existingSpan.textContent.split('=')[1];

            windowDiv.appendChild(label1);
            windowDiv.appendChild(input1);
            windowDiv.appendChild(label2);
            windowDiv.appendChild(input2);
        }

        const buttonsDiv = document.createElement('div');
        confirmBtn = document.createElement('button');
        confirmBtn.textContent = 'Confirm';
        confirmBtn.addEventListener('click', () => handleConfirm(type, animateType, useId, input1, input2, existingIdsDiv, existingSpan));
        buttonsDiv.appendChild(confirmBtn);

        if (isEdit) {
            deleteBtn = document.createElement('button');
            deleteBtn.textContent = 'Delete';
            deleteBtn.addEventListener('click', () => handleDelete(animateType, useId, type, otherAttrName, existingSpan));
            buttonsDiv.appendChild(deleteBtn);
        }

        cancelBtn = document.createElement('button');
        cancelBtn.textContent = 'Cancel';
        cancelBtn.addEventListener('click', () => document.body.removeChild(windowDiv));
        buttonsDiv.appendChild(cancelBtn);

        windowDiv.appendChild(buttonsDiv);
        document.body.appendChild(windowDiv);
    }

    // Create display for existing IDs with selection option
    function createIdsDisplay(existingIds, selectable, selected = []) {
        const div = document.createElement('div');
        div.className = 'etaniExistingIds';
        div.textContent = 'Existing IDs: ';

        if (selectable) {
            const zeroS = document.createElement('span');
            zeroS.className = 'etaniIdItem zero-s';
            zeroS.textContent = '0s';
            zeroS.classList.toggle('selected', selected.includes('0s'));
            zeroS.addEventListener('click', () => zeroS.classList.toggle('selected'));
            div.appendChild(zeroS);
        }

        existingIds.forEach(id => {
            const span = document.createElement('span');
            span.className = 'etaniIdItem';
            span.textContent = id;
            if (selectable) {
                span.addEventListener('click', () => {
                    div.querySelectorAll('.etaniIdItem:not(.zero-s)').forEach(s => s.classList.remove('selected'));
                    span.classList.add('selected');
                });
                if (selected.includes(id)) span.classList.add('selected');
            }
            div.appendChild(span);
        });
        return div;
    }

    // Get all existing animation IDs globally, shared across types
    function getExistingIds() {
        const animates = etani_clone.querySelectorAll('animateTransform, animate[attributeName="opacity"]');
        return Array.from(animates)
            .map(animate => animate.getAttribute('id'))
            .filter(id => id);
    }

    // Parse begin value to selected items
    function parseBeginValue(beginStr) {
        return beginStr.split(';').map(v => v.endsWith('.end') ? v.replace('.end', '') : v);
    }

    // Handle confirm button for adding/editing
    function handleConfirm(type, animateType, useId, input1, input2, existingIdsDiv, existingSpan) {
        let value, attrName;
        if (type === 'id') {
            value = input1.value.trim();
            if (!value || getExistingIds(animateType).includes(value)) return; // Invalid or duplicate
            attrName = 'id';
        } else if (type === 'begin') {
            const selectedZero = existingIdsDiv.querySelector('.zero-s.selected');
            const selectedId = existingIdsDiv.querySelector('.etaniIdItem:not(.zero-s).selected');
            const parts = [];
            if (selectedZero) parts.push('0s');
            if (selectedId) parts.push(`${selectedId.textContent}.end`);
            value = parts.join(';');
            if (!value) return; // No selection
            attrName = 'begin';
        } else if (type === 'other') {
            attrName = input1.value.trim();
            value = input2.value.trim();
            if (!attrName || !value) return; // Empty
            // Check duplicate attributes (simplified, assume no duplicates for same attrName)
        }

        const animates = getAnimates(animateType, useId, attrName);
        animates.forEach(animate => animate.setAttribute(attrName, value));

        const attrAddSpan = existingSpan ? existingSpan.parentNode.querySelector('.etaniAnimateAttrAdd') : document.querySelector(`.etaniItem[data-use-id="${useId}"] .etaniAnimate[data-type="${animateType}"] .etaniAnimateAttrAdd`);
        const className = `etaniAnimate${type.charAt(0).toUpperCase() + type.slice(1)}`;
        const newSpan = existingSpan || document.createElement('span');
        newSpan.className = className;
        newSpan.textContent = type === 'other' ? `${attrName}=${value}` : `${attrName}=${value}`;
        if (!existingSpan) attrAddSpan.parentNode.insertBefore(newSpan, attrAddSpan);

        updateEtaniResult();
        document.body.removeChild(existingIdsDiv.closest('.etaniWindow'));
    }

    // Handle delete button
    function handleDelete(animateType, useId, type, otherAttrName, existingSpan) {
        const attrName = type === 'other' ? otherAttrName : type;
        const animates = getAnimates(animateType, useId);
        animates.forEach(animate => animate.removeAttribute(attrName));
        existingSpan.remove();
        updateEtaniResult();
        document.body.removeChild(existingSpan.closest('.etaniWindow'));
    }

    // Get animate elements for the specific useId and type
    function getAnimates(animateType, useId, attrType = null) {
        if (animateType === 'transform') {
            const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
            if (!cloneUseElement) return [];

            if (attrType === 'id') {
                // Per original logic and example, 'id' applies only to the rotate animation
                return cloneUseElement.querySelectorAll('animateTransform[type="rotate"]') || [];
            } else {
                // Other attributes (like 'begin') apply to all three
                return cloneUseElement.querySelectorAll('animateTransform') || [];
            }
        } else {
            const cloneUseElement = etani_clone.querySelector(`.etdrop use[href="#${useId}"]`);
            return cloneUseElement?.querySelectorAll('animate[attributeName="opacity"]') || [];
        }
    }

    // Edit existing attribute
    function editAttribute(span, animateType, useId, type, otherAttrName) {
        showWindow(type, animateType, useId, span, otherAttrName);
    }

    // Get unique history IDs from all begin attributes
    function getHistoryIds() {
        const allAnimates = etani_clone.querySelectorAll('animateTransform, animate[attributeName="opacity"]');
        const historySet = new Set();
        allAnimates.forEach(animate => {
            const begin = animate.getAttribute('begin');
            if (begin) {
                begin.split(';').forEach(part => {
                    const trimmed = part.trim();
                    if (trimmed.endsWith('.end')) {
                        historySet.add(trimmed.replace('.end', ''));
                    } else if (trimmed !== '0s') {
                        historySet.add(trimmed);
                    }
                });
            }
        });
        return Array.from(historySet);
    }

// Initialize the animation control panel on window load
window.addEventListener('load', () => {
    addDynamicStyles();

    const etmainouter = document.getElementById('etmainouter');
    if (etmainouter) {
        const etaniouter = document.createElement('div');
        etaniouter.className = 'etaniouter';

        const etanibutton = document.createElement('button');
        etanibutton.id = 'etanibutton';
        etanibutton.textContent = 'Animate it';
        etanibutton.addEventListener('click', toggleAnimation);

        etaniouter.appendChild(etanibutton);
        etmainouter.parentNode.insertBefore(etaniouter, etmainouter.nextSibling);
    } else {
        console.error('Div with ID "etmainouter" not found.');
    }
});
https://ejsoon.vip/
弈趣極光:享受思維樂趣
回复

在线用户

正浏览此版面之用户: 没有注册用户 和 2 访客