☰

WhatsApp Sticker Creator with Custom Maker Enhanced

Create custom stickers in WhatsApp Web.

  1. // ==UserScript==
  2. // @name         WhatsApp Sticker Creator with Custom Maker Enhanced
  3. // @version      1.2
  4. // @name:af Persoonlike Stickertjies
  5. // @description:af Skep persoonlike stickertjies in WhatsApp Web.
  6. // @name:ar ملصقات مخصصة
  7. // @description:ar إنشاء ملصقات مخصصة في WhatsApp Web.
  8. // @name:az Fərdi stikerlər
  9. // @description:az WhatsApp Web-də fərdi stikerlər yaradın.
  10. // @name:bg Персонализирани стикери
  11. // @description:bg Създаване на персонализирани стикери в WhatsApp Web.
  12. // @name:bn কাস্টম স্টিকার
  13. // @description:bn WhatsApp Web-এ কাস্টম স্টিকার তৈরি করুন।
  14. // @name:bs Prilagođene naljepnice
  15. // @description:bs Kreirajte prilagođene naljepnice u WhatsApp Webu.
  16. // @name:ca Gomets personalitzats
  17. // @description:ca Crea gomets personalitzats a WhatsApp Web.
  18. // @name:cs Vlastní nálepky
  19. // @description:cs Vytvářejte vlastní nálepky ve WhatsApp Webu.
  20. // @name:cy Stickeriaid addasedig
  21. // @description:cy Creu stickeriaid addasedig yn WhatsApp Web.
  22. // @name:da Brugerdefinerede stickers
  23. // @description:da Opret brugerdefinerede stickers i WhatsApp Web.
  24. // @name:de Benutzerdefinierte Aufkleber
  25. // @description:de Erstellen Sie benutzerdefinierte Aufkleber in WhatsApp Web.
  26. // @name:el Προσαρμοσμένα αυτοκόλλητα
  27. // @description:el Δημιουργήστε προσαρμοσμένα αυτοκόλλητα στο WhatsApp Web.
  28. // @name:en Custom Stickers
  29. // @description:en Create custom stickers in WhatsApp Web.
  30. // @name:eo Propraj glumarkoj
  31. // @description:eo Kreu proprajn glumarkojn en WhatsApp Web.
  32. // @name:es Stickers personalizados
  33. // @description:es Crear stickers personalizados en WhatsApp Web.
  34. // @name:et Kohandatud kleepsud
  35. // @description:et Looge WhatsApp Web-is kohandatud kleepsud.
  36. // @name:eu Pertsonalizatutako itsaskiak
  37. // @description:eu Sortu pertsonalizatutako itsaskiak WhatsApp Web-en.
  38. // @name:fa برچسب‌های سفارشی
  39. // @description:fa ایجاد برچسب‌های سفارشی در WhatsApp Web.
  40. // @name:fi Mukautetut tarrat
  41. // @description:fi Luo mukautettuja tarranauhoja WhatsApp Webiin.
  42. // @name:fr Autocollants personnalisés
  43. // @description:fr Créer des autocollants personnalisés dans WhatsApp Web.
  44. // @name:gl Adhesivos personalizados
  45. // @description:gl Crea adhesivos personalizados en WhatsApp Web.
  46. // @name:gu કસ્ટમ સ્ટિકર્સ
  47. // @description:gu WhatsApp Web માં કસ્ટમ સ્ટિકર્સ બનાવો.
  48. // @name:he מדבקות מותאמות אישית
  49. // @description:he צור מדבקות מותאמות אישית ב-WhatsApp Web.
  50. // @name:hi कस्टम स्टिकर
  51. // @description:hi WhatsApp Web में कस्टम स्टिकर बनाएं।
  52. // @name:hr Prilagođene naljepnice
  53. // @description:hr Stvorite prilagođene naljepnice u WhatsApp Webu.
  54. // @name:hu Egyéni matricák
  55. // @description:hu Hozzon létre egyéni matricákat a WhatsApp Webben.
  56. // @name:id Stiker kustom
  57. // @description:id Buat stiker kustom di WhatsApp Web.
  58. // @name:it Sticker personalizzati
  59. // @description:it Crea sticker personalizzati su WhatsApp Web.
  60. // @name:ja カスタムステッカー
  61. // @description:ja WhatsApp Webでカスタムステッカーを作成します。
  62. // @name:ka მორგებული სტიკერები
  63. // @description:ka შექმენით მორგებული სტიკერები WhatsApp Web-ში.
  64. // @name:kk Таңбалар
  65. // @description:kk WhatsApp Web-де тұтынушыға сәйкес таңбалар жасаңыз.
  66. // @name:km ស្លាកតាមតម្រូវការ
  67. // @description:km បង្កើតស្លាកតាមតម្រូវការនៅលើ WhatsApp Web។
  68. // @name:kn ಅನುಗುಣವಾದ ಸ್ಟಿಕರ್‌ಗಳು
  69. // @description:kn WhatsApp Web ನಲ್ಲಿ ಅನುಗುಣವಾದ ಸ್ಟಿಕರ್‌ಗಳನ್ನು ರಚಿಸಿ.
  70. // @name:ko 사용자 정의 스티커
  71. // @description:ko WhatsApp 웹에서 사용자 정의 스티커를 만듭니다.
  72. // @name:ku Stikerên xwerû
  73. // @description:ku Di WhatsApp Web de stikerên xwerû biafirîne.
  74. // @name:ky Көнүлгө ылайыктуу стикерлер
  75. // @description:ky WhatsApp Web'de кардардын көңүлүнө ылайыктуу стикерлерди түзгүлө.
  76. // @name:lt Pasirinktini lipdukai
  77. // @description:lt Sukurkite pasirinktinius lipdukus „WhatsApp Web“.
  78. // @name:lv Pielāgotas uzlīmes
  79. // @description:lv Izveidojiet pielāgotas uzlīmes WhatsApp tīmeklī.
  80. // @name:mk Прилагодени стикери
  81. // @description:mk Креирајте прилагодени стикери во WhatsApp Web.
  82. // @name:ml ആവശ്യമനുസരിച്ച് സ്റ്റിക്കർ
  83. // @description:ml WhatsApp വെബിൽ ആവശ്യമനുസരിച്ച് സ്റ്റിക്കർ സൃഷ്ടിക്കുക.
  84. // @name:mn Өөрийн хүссэн шошго
  85. // @description:mn WhatsApp Web дээр өөрийн хүссэн шошго үүсгэх.
  86. // @name:mr कस्टम स्टिकर
  87. // @description:mr WhatsApp Web मध्ये कस्टम स्टिकर तयार करा.
  88. // @name:ms Pelekat tersuai
  89. // @description:ms Cipta pelekat tersuai di WhatsApp Web.
  90. // @name:my စိတ်ကြိုက်နှိပ်ပုံများ
  91. // @description:my WhatsApp Web တွင်စိတ်ကြိုက်သတ်မှတ်ထားသော နှိပ်ပုံများဖန်တီးပါ။
  92. // @name:nb Egne klistremerker
  93. // @description:nb Lag egne klistremerker i WhatsApp Web.
  94. // @name:ne अनुकूलित स्टिकरहरू
  95. // @description:ne WhatsApp वेबमा अनुकूलित स्टिकरहरू सिर्जना गर्नुहोस्।
  96. // @name:nl Aangepaste stickers
  97. // @description:nl Maak aangepaste stickers in WhatsApp Web.
  98. // @name:nn Tilpassa klistremerke
  99. // @description:nn Lag tilpassa klistremerke i WhatsApp Web.
  100. // @name:no Egne klistremerker
  101. // @description:no Lag egne klistremerker i WhatsApp Web.
  102. // @name:pa ਕਸਟਮ ਸਟਿੱਕਰ
  103. // @description:pa WhatsApp ਵੈਬ ਵਿੱਚ ਕਸਟਮ ਸਟਿੱਕਰ ਬਣਾਓ।
  104. // @name:pl Niestandardowe naklejki
  105. // @description:pl Twórz niestandardowe naklejki w WhatsApp Web.
  106. // @name:pt Adesivos personalizados
  107. // @description:pt Criar adesivos personalizados no WhatsApp Web.
  108. // @name:ro Autocolante personalizate
  109. // @description:ro Creați autocolante personalizate în WhatsApp Web.
  110. // @name:ru Стикеры
  111. // @description:ru Создавайте собственные стикеры в WhatsApp Web.
  112. // @name:si විශේෂිත සටිකර
  113. // @description:si WhatsApp Web හි විශේෂිත සටිකර සාදන්න.
  114. // @name:sk Vlastné nálepky
  115. // @description:sk Vytvorte vlastné nálepky v službe WhatsApp Web.
  116. // @name:sl Prilagojene nalepke
  117. // @description:sl Ustvarite prilagojene nalepke v WhatsApp Spletu.
  118. // @name:sq Ngjitës të personalizuar
  119. // @description:sq Krijoni ngjitës të personalizuar në WhatsApp Web.
  120. // @name:sr Прилагодљиве налепнице
  121. // @description:sr Направите прилагодљиве налепнице у ВхатсАпп Вебу.
  122. // @name:sv Anpassade klistermärken
  123. // @description:sv Skapa anpassade klistermärken i WhatsApp Web.
  124. // @name:sw Lebo maalum
  125. // @description:sw Tengeneza lebo maalum katika WhatsApp Web.
  126. // @name:ta தனிப்பயனாக அட்டைகள்
  127. // @description:ta WhatsApp வலைதளத்தில் தனிப்பயனாக அட்டைகள் உருவாக்கவும்.
  128. // @name:te అనుకూలిత స్టికర్లు
  129. // @description:te WhatsApp వెబ్‌లో అనుకూలిత స్టికర్లు సృష్టించండి.
  130. // @name:th สติกเกอร์แบบกำหนดเอง
  131. // @description:th สร้างสติกเกอร์แบบกำหนดเองใน WhatsApp Web
  132. // @name:tr Özel etiketler
  133. // @description:tr WhatsApp Web'de özel etiketler oluşturun.
  134. // @name:uk Власні наклейки
  135. // @description:uk Створюйте власні наклейки в WhatsApp Web.
  136. // @name:ur کسٹم اسٹکر
  137. // @description:ur WhatsApp ویب میں کسٹم اسٹکر بنائیں۔
  138. // @name:uz Maxsus stikerlar
  139. // @description:uz WhatsApp Web-da maxsus stikerlar yarating.
  140. // @name:vi Nhãn dán tùy chỉnh
  141. // @description:vi Tạo nhãn dán tùy chỉnh trong WhatsApp Web.
  142. // @name:zh 自定义贴纸
  143. // @description:zh 在WhatsApp Web中创建自定义贴纸。
  144. // @name:zh-CN 自定义贴纸
  145. // @description:zh-CN 在WhatsApp Web中创建自定义贴纸。
  146. // @name:zh-TW 自訂貼紙
  147. // @description:zh-TW 在WhatsApp Web中建立自訂貼紙。
  148. // @author       DeveloperMDCM
  149. // @match        https://web.whatsapp.com/
  150. // @icon         https://static-00.iconduck.com/assets.00/whatsapp-icon-1020x1024-iykox85t.png
  151. // @grant        GM_addStyle
  152. // @run-at       document-end
  153. // @compatible chrome
  154. // @compatible firefox
  155. // @compatible opera
  156. // @compatible safari
  157. // @compatible edge
  158. // @license MIT
  159. // @namespace https://github.com/DeveloperMDCM/
  160. // @homepage     https://github.com/DeveloperMDCM/
  161. // @description Create custom stickers in WhatsApp Web.
  162. // ==/UserScript==
  163.  
  164. (function () {
  165.     'use strict';
  166.     console.log('Script en ejecución by: DeveloperMDCM');
  167.     const HEADER_STYLE = 'color: #F00; font-size: 24px; font-family: sans-serif;';
  168.     const MESSAGE_STYLE = 'color: #00aaff; font-size: 16px; font-family: sans-serif;';
  169.     const CODE_STYLE = 'font-size: 14px; font-family: monospace;';
  170.   
  171.     console.log(
  172.       '%cStiker Maker for Whatsapp Web\n' +
  173.         '%cRun %c(v1.0)\n' +
  174.         'By: DeveloperMDCM.',
  175.       HEADER_STYLE,
  176.       CODE_STYLE,
  177.       MESSAGE_STYLE
  178.     );
  179.   
  180.     // Variables globales para rotación y hover
  181.     let isRotating = false;
  182.     let initialRotateAngle = 0;
  183.     let initialElementRotation = 0;
  184.     let hoveredElement = null;
  185.     let currentMousePos = { x: 0, y: 0 };
  186.     const colorsText = ["#000000", "#ff0000", "#00ff00", "#0000ff", "#ffff00", "#00ffff", "#ff00ff", "#ffffff", "#ff000000"];
  187.  
  188.     GM_addStyle(`
  189.         /* Panel principal */
  190.         #stickerPanel {
  191.             position: fixed;
  192.             top: 0;
  193.             right: 0;
  194.             width: 580px;
  195.             height: auto;
  196.             max-height: 90vh;
  197.             overflow-y: auto;
  198.             background-color: #111b21;
  199.             border: 1px solid #202c33;
  200.             padding: 10px;
  201.             z-index: 10000;
  202.             box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  203.             font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  204.         }
  205.         /* Pestañas */
  206.         .tabsContainer {
  207.             display: flex;
  208.             justify-content: space-around;
  209.             margin-bottom: 10px;
  210.         }
  211.         .tabsContainer button {
  212.             flex: 1;
  213.             padding: 8px;
  214.             border: none;
  215.             cursor: pointer;
  216.             background-color: #005c4b;
  217.             color: #fff;
  218.             font-weight: bold;
  219.         }
  220.         .tabsContainer button:first-child { margin-right: 5px; }
  221.         .tabsContainer button:last-child { margin-left: 5px; }
  222.         /* Sección Clásica */
  223.         .dropZone {
  224.             border: 2px dashed #ccc;
  225.             padding: 20px;
  226.             text-align: center;
  227.             margin-bottom: 10px;
  228.             cursor: pointer;
  229.             background-color: #111b21;
  230.         }
  231.         input[type="file"] { display: none; }
  232.         #createSticker, #createCustomSticker {
  233.             width: 100%;
  234.             padding: 8px;
  235.             margin-top: 5px;
  236.             background-color: #005c4b;
  237.             border: none;
  238.             color: #fff;
  239.             font-weight: bold;
  240.             border-radius: 3px;
  241.         }
  242.         #status, #customStatus {
  243.             font-size: 12px;
  244.             color: #555;
  245.             text-align: center;
  246.             margin-top: 5px;
  247.         }
  248.         #previewCanvas { display: none; }
  249.         /* Sección Personalizada */
  250.         #customSection { display: none; }
  251.         /* Toolbar y menús emergentes */
  252.         #customToolbar {
  253.             display: flex;
  254.             flex-wrap: wrap;
  255.             gap: 5px;
  256.             margin-bottom: 5px;
  257.             align-items: center;
  258.         }
  259.         #customToolbar button {
  260.             padding: 5px 8px;
  261.             cursor: pointer;
  262.             border: none;
  263.             background-color: #005c4b;
  264.             color: #fff;
  265.             border-radius: 3px;
  266.         }
  267.         #customToolbar select { padding: 4px; }
  268.         /* Panel de opciones del lápiz y de formas */
  269.         #pencilOptionsPanel, #shapeOptionsPanel {
  270.             display: none;
  271.             margin: 5px 0;
  272.             padding: 5px;
  273.             border: 1px solid #ddd;
  274.             background-color: #005c4b;
  275.             font-size: 12px;
  276.             border-radius: 3px;
  277.         }
  278.         /* Botones de color y tamaño */
  279.         .colorButton, .sizeButton {
  280.             width: 15px;
  281.             height: 15px;
  282.             border-radius: 50%;
  283.             border: 2px solid #ccc;
  284.             display: inline-block;
  285.             margin: 2px;
  286.             cursor: pointer;
  287.         }
  288.         .sizeButton[data-size="2"] { width: 8px; height: 8px; }
  289.         .sizeButton[data-size="4"] { width: 12px; height: 12px; }
  290.         .sizeButton[data-size="6"] { width: 16px; height: 16px; }
  291.         .sizeButton[data-size="8"] { width: 20px; height: 20px; }
  292.         #pencilColorContainer, #pencilSizeContainer { display: inline-block; vertical-align: middle; }
  293.         /* Panel para formas */
  294.         #shapeOptionsPanel button {
  295.             margin-right: 5px;
  296.             padding: 3px 6px;
  297.             border: none;      
  298.             color: #fff;
  299.             border-radius: 3px;
  300.             cursor: pointer;
  301.         }
  302.         /* Área de canvas con fondo ajedrezado */
  303.         .canvasContainer {
  304.             border: 2px dashed #ccc;
  305.             width: 100%;
  306.             height: 60vh;
  307.             max-height: 60vh;
  308.             margin: auto;
  309.             position: relative;
  310.         }
  311.         #customCanvas {
  312.             width: 100%;
  313.             height: 100%;
  314.             background-size: 20px 20px;
  315.             background-image:
  316.               linear-gradient(45deg, #ccc 25%, transparent 25%),
  317.               linear-gradient(-45deg, #ccc 25%, transparent 25%),
  318.               linear-gradient(45deg, transparent 75%, #ccc 75%),
  319.               linear-gradient(-45deg, #fff 75%, #ccc 75%);
  320.             background-size: 20px 20px;
  321.             background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  322.             display: block;
  323.         }
  324.         /* Botón flotante */
  325.         #openStickerPanel {
  326.             position: fixed;
  327.             bottom: 20px;
  328.             right: 20px;
  329.             padding: 10px 15px;
  330.             background-color: #005c4b;
  331.             color: #fff;
  332.             border: none;
  333.             border-radius: 5px;
  334.             cursor: pointer;
  335.             z-index: 10000;
  336.             box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  337.         }
  338.         /* Panel de edición de texto */
  339.         #textEditorPanel {
  340.             margin-top: 10px;
  341.             padding: 5px;
  342.          
  343.             display: none;
  344.             border-radius: 3px;
  345.         }
  346.         #textEditorPanel label { margin: 3px 5px; }
  347.         /* Panel de emojis */
  348.         #emojiContainer {
  349.             position: fixed;
  350.             top: 0;
  351.             right: 600px;
  352.             width: auto;
  353.             height: 400px;
  354.             background-color: #111b21;
  355.             border: 1px solid #ddd;
  356.             box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  357.             z-index: 10000;
  358.             display: none;
  359.             flex-direction: column;
  360.             border-radius: 3px;
  361.         }
  362.         #emojiCategoryContainer {
  363.             display: flex;
  364.             justify-content: space-around;
  365.             padding: 5px;
  366.         }
  367.         #emojiCategoryContainer button {
  368.             background-color: #005c4b;
  369.             color: #fff;
  370.             border: none;
  371.             padding: 5px;
  372.             cursor: pointer;
  373.             flex: 1;
  374.             margin: 0 2px;
  375.             border-radius: 3px;
  376.         }
  377.         #emojiContent {
  378.             overflow-y: auto;
  379.             height: 350px;
  380.             padding: 10px 0 30px 10px;
  381.             display: grid;
  382.             background-color: black;
  383.             grid-template-columns: repeat(6, 1fr);
  384.             gap: 5px;
  385.         }
  386.         #textFontSelect {
  387.         width: auto;
  388.             appearance: auto;
  389.         }
  390.          #textFontSelect:not(:invalid) {
  391.         color: #fff;
  392.         }
  393.         .textEditorContent {
  394.           display: flex;
  395.           flex-direction: column;
  396.           gap: 6px;
  397.         }
  398.     `);
  399.  
  400.     // =========================
  401.     // Espera a que la página se cargue
  402.     // =========================
  403.     window.addEventListener("load", () => { setTimeout(initStickerTool, 3000); });
  404.  
  405.  
  406.     const emojis = {
  407.         faces_emotion: [
  408.             { "emoji": "😀" }, { "emoji": "😁" }, { "emoji": "😂" }, { "emoji": "🤣" },
  409.             { "emoji": "😃" }, { "emoji": "😄" }, { "emoji": "😅" }, { "emoji": "😆" },
  410.             { "emoji": "😉" }, { "emoji": "😊" }, { "emoji": "😋" }, { "emoji": "😎" },
  411.             { "emoji": "😍" }, { "emoji": "😘" }, { "emoji": "🥰" }, { "emoji": "😗" },
  412.             { "emoji": "😙" }, { "emoji": "🥲" }, { "emoji": "😚" }, { "emoji": "☺️" },
  413.             { "emoji": "🙂" }, { "emoji": "🤗" }, { "emoji": "🤩" }, { "emoji": "🤔" },
  414.             { "emoji": "🫡" }, { "emoji": "🤨" }, { "emoji": "😐" }, { "emoji": "😑" },
  415.             { "emoji": "😶" }, { "emoji": "🫥" }, { "emoji": "😶‍🌫️" }, { "emoji": "🙄" },
  416.             { "emoji": "😏" }, { "emoji": "😣" }, { "emoji": "😥" }, { "emoji": "😮" },
  417.             { "emoji": "🤐" }, { "emoji": "😯" }, { "emoji": "😪" }, { "emoji": "😫" },
  418.             { "emoji": "🥱" }, { "emoji": "😴" }, { "emoji": "😌" }, { "emoji": "😛" },
  419.             { "emoji": "😜" }, { "emoji": "😝" }, { "emoji": "🤤" }, { "emoji": "😒" },
  420.             { "emoji": "😓" }, { "emoji": "😔" }, { "emoji": "😕" }, { "emoji": "🫤" },
  421.             { "emoji": "🙃" }, { "emoji": "🫠" }, { "emoji": "🤑" }, { "emoji": "😲" },
  422.             { "emoji": "☹️" }, { "emoji": "🙁" }, { "emoji": "😖" }, { "emoji": "😞" },
  423.             { "emoji": "😟" }, { "emoji": "😤" }, { "emoji": "😢" }, { "emoji": "😭" },
  424.             { "emoji": "😦" }, { "emoji": "😧" }, { "emoji": "😨" }, { "emoji": "😩" },
  425.             { "emoji": "🤯" }, { "emoji": "😬" }, { "emoji": "😮‍💨" }, { "emoji": "😰" },
  426.             { "emoji": "😱" }, { "emoji": "🥵" }, { "emoji": "🥶" }, { "emoji": "😳" },
  427.             { "emoji": "🤪" }, { "emoji": "😵" }, { "emoji": "😵‍💫" }, { "emoji": "🥴" },
  428.             { "emoji": "😠" }, { "emoji": "😡" }, { "emoji": "🤬" }, { "emoji": "😷" },
  429.             { "emoji": "🤒" }, { "emoji": "🤕" }, { "emoji": "🤢" }, { "emoji": "🤮" },
  430.             { "emoji": "🤧" }, { "emoji": "😇" }, { "emoji": "🥳" }, { "emoji": "🥸" },
  431.             { "emoji": "🥺" }, { "emoji": "🥹" }, { "emoji": "🤠" }, { "emoji": "🤡" },
  432.             { "emoji": "🤥" }, { "emoji": "🫨" }, { "emoji": "🤫" }, { "emoji": "🤭" },
  433.             { "emoji": "🫢" }, { "emoji": "🫣" }, { "emoji": "🧐" }, { "emoji": "🤓" },
  434.             { "emoji": "😈" }, { "emoji": "👿" }, { "emoji": "👹" }, { "emoji": "👺" },
  435.             { "emoji": "💀" }, { "emoji": "☠️" }, { "emoji": "👻" }, { "emoji": "👽" },
  436.             { "emoji": "👾" }, { "emoji": "💩" }, { "emoji": "🤖" }
  437.         ],
  438.         animals: [
  439.             { "emoji": "😺" }, { "emoji": "😸" }, { "emoji": "😹" }, { "emoji": "😻" },
  440.             { "emoji": "😼" }, { "emoji": "😽" }, { "emoji": "🙀" }, { "emoji": "😿" },
  441.             { "emoji": "😾" }, { "emoji": "🙈" }, { "emoji": "🙉" }, { "emoji": "🙊" },
  442.             { "emoji": "🐵" }, { "emoji": "🐶" }, { "emoji": "🐺" }, { "emoji": "🐱" },
  443.             { "emoji": "🦁" }, { "emoji": "🐯" }, { "emoji": "🦒" }, { "emoji": "🦊" },
  444.             { "emoji": "🦝" }, { "emoji": "🐮" }, { "emoji": "🐷" }, { "emoji": "🐗" },
  445.             { "emoji": "🐭" }, { "emoji": "🐹" }, { "emoji": "🐰" }, { "emoji": "🐻" },
  446.             { "emoji": "🐨" }, { "emoji": "🐼" }, { "emoji": "🐸" }, { "emoji": "🦓" },
  447.             { "emoji": "🐴" }, { "emoji": "🫎" }, { "emoji": "🫏" }, { "emoji": "🦄" },
  448.             { "emoji": "🐔" }, { "emoji": "🐲" }, { "emoji": "🐽" }, { "emoji": "🐾" },
  449.             { "emoji": "🐒" }, { "emoji": "🦍" }, { "emoji": "🦧" }, { "emoji": "🦮" },
  450.             { "emoji": "🐩" }, { "emoji": "🐕" }, { "emoji": "🐈" }, { "emoji": "🐅" },
  451.             { "emoji": "🐆" }, { "emoji": "🦌" }, { "emoji": "🦬" }, { "emoji": "🦏" },
  452.             { "emoji": "🐘" }, { "emoji": "🐁" }, { "emoji": "🐀" }, { "emoji": "🦔" },
  453.             { "emoji": "🐇" }, { "emoji": "🦎" }, { "emoji": "🐊" }, { "emoji": "🐢" },
  454.             { "emoji": "🐍" }, { "emoji": "🐉" }, { "emoji": "🦕" }, { "emoji": "🦖" },
  455.             { "emoji": "🐬" }, { "emoji": "🐳" }, { "emoji": "🐋" }, { "emoji": "🐟" },
  456.             { "emoji": "🐠" }, { "emoji": "🐡" }, { "emoji": "🦀" }, { "emoji": "🐚" }
  457.         ]
  458.     };
  459.  
  460.     function initStickerTool() {
  461.         if (document.getElementById("stickerPanel")) return;
  462.  
  463.         // Crear panel principal
  464.         const panel = document.createElement("div");
  465.         panel.id = "stickerPanel";
  466.         panel.style.display = "none";
  467.         // Pestañas
  468.         const tabsContainer = document.createElement("div");
  469.         tabsContainer.className = "tabsContainer";
  470.         const btnClassic = document.createElement("button");
  471.         btnClassic.textContent = "Classic Sticker";
  472.         const btnCustom = document.createElement("button");
  473.         btnCustom.textContent = "Custom Sticker";
  474.         tabsContainer.appendChild(btnClassic);
  475.         tabsContainer.appendChild(btnCustom);
  476.         panel.appendChild(tabsContainer);
  477.  
  478.         // Sección Clásica
  479.         const classicSection = document.createElement("div");
  480.         classicSection.id = "classicSection";
  481.         classicSection.innerHTML = `
  482.             <div id="dropZone" class="dropZone">Drag or click to select image</div>
  483.             <input type="file" id="fileInput" accept="image/*" />
  484.             <button id="createSticker" disabled>Create Sticker</button>
  485.             <p id="status"></p>
  486.             <canvas id="previewCanvas"></canvas>
  487.         `;
  488.         panel.appendChild(classicSection);
  489.  
  490.         // Sección Personalizada
  491.         const customSection = document.createElement("div");
  492.         customSection.id = "customSection";
  493.         customSection.innerHTML = `
  494.  
  495.             <!-- Toolbar con íconos -->
  496.             <div id="customToolbar">
  497.              <button id="addCustomImage"><svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-photo-plus"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 8h.01" /><path d="M12.5 21h-6.5a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v6.5" /><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l4 4" /><path d="M14 14l1 -1c.67 -.644 1.45 -.824 2.182 -.54" /><path d="M16 19h6" /><path d="M19 16v6" /></svg></button>
  498.                 <button id="openEmojiPanel"><svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-mood-smile"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M9 10l.01 0" /><path d="M15 10l.01 0" /><path d="M9.5 15a3.5 3.5 0 0 0 5 0" /></svg></button>
  499.                 <input type="file" id="customFileInput" accept="image/*" />
  500.                 <button id="toggleDrawing"><svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-pencil"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4" /><path d="M13.5 6.5l4 4" /></svg></button>
  501.                 <button id="toggleShapes"><svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-square"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /></svg></button>
  502.                 <button id="bringForward"><svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-layers-selected"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 10.5l6.492 -6.492" /><path d="M13.496 16l6.504 -6.504z" /><path d="M8.586 15.414l10.827 -10.827" /><path d="M8 6a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z" /><path d="M16 16v2a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-8a2 2 0 0 1 2 -2h2" /></svg></button>
  503.                 <button id="sendBackward"><svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-layers-selected-bottom"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 14.5l4 -4" /><path d="M9.496 20l4.004 -4z" /><path d="M4.586 19.414l3.914 -3.914" /><path d="M8 6a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z" /><path d="M16 16v2a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-8a2 2 0 0 1 2 -2h2" /></svg></button>
  504.                 <button id="deleteElement"><svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-trash"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7l16 0" /><path d="M10 11l0 6" /><path d="M14 11l0 6" /><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" /><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" /></svg></button>
  505.                 <button id="clearCanvas"><svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-restore"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3.06 13a9 9 0 1 0 .49 -4.087" /><path d="M3 4.001v5h5" /><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /></svg></button>
  506.                 <button id="toggleMultiSelect"><svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-select-all"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 8m0 1a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-6a1 1 0 0 1 -1 -1z" /><path d="M12 20v.01" /><path d="M16 20v.01" /><path d="M8 20v.01" /><path d="M4 20v.01" /><path d="M4 16v.01" /><path d="M4 12v.01" /><path d="M4 8v.01" /><path d="M4 4v.01" /><path d="M8 4v.01" /><path d="M12 4v.01" /><path d="M16 4v.01" /><path d="M20 4v.01" /><path d="M20 8v.01" /><path d="M20 12v.01" /><path d="M20 16v.01" /><path d="M20 20v.01" /></svg></btton>
  507.                 <button id="addText"><svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-letter-t"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 4l12 0" /><path d="M12 4l0 16" /></svg></button>
  508.                 <button id="downloadImage"><svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-photo-down"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 8h.01" /><path d="M12.5 21h-6.5a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v6.5" /><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l4 4" /><path d="M14 14l1 -1c.653 -.629 1.413 -.815 2.13 -.559" /><path d="M19 16v6" /><path d="M22 19l-3 3l-3 -3" /></svg></button>
  509.                 <button id="undo"><svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-back-up"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 14l-4 -4l4 -4" /><path d="M5 10h11a4 4 0 1 1 0 8h-1" /></svg></button>
  510.                 <button id="redo"><svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-forward-up"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 14l4 -4l-4 -4" /><path d="M19 10h-11a4 4 0 1 0 0 8h1" /></svg></button>
  511.             </div>
  512.             <!-- Panel emergente para opciones del lápiz -->
  513.             <div id="pencilOptionsPanel">
  514.                 <div>Pincel - Colores:</div>
  515.                 <div id="pencilColorContainer"></div>
  516.                 <div>Pincel - Grosor:</div>
  517.                 <div id="pencilSizeContainer"></div>
  518.             </div>
  519.             <!-- Panel emergente para opciones de formas -->
  520.             <div id="shapeOptionsPanel">
  521.                 <button id="shapeSquare"><svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-square"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /></svg></button>
  522.                 <button id="shapeCircle"><svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-circle"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /></svg></button>
  523.             </div>
  524.             <div class="canvasContainer">
  525.                 <canvas id="customCanvas" width="512" height="512"></canvas>
  526.             </div>
  527.             <button id="createCustomSticker">Create Custom Sticker</button>
  528.             <p id="customStatus"></p>
  529.             <!-- Panel de edición de texto -->
  530.             <div id="textEditorPanel">
  531.               <div class="textEditorContent">
  532.                 <label>Text: <input type="text" id="textContentInput"></label>
  533.                <div>
  534.                 <label>Color: <span id="textColorButtons"></span></label>
  535.                 <label>Bg: <span id="textBgButtons"></span></label>
  536.                </div>
  537.                 <div>
  538.                 <label>Font:
  539.                     <select id="textFontSelect">
  540.                         <option value="" disabled selected>Select font</option>
  541.                         <option value="Arial">Arial</option>
  542.                         <option value="Courier New">Courier New</option>
  543.                         <option value="Times New Roman">Times New Roman</option>
  544.                         <option value="Verdana">Verdana</option>
  545.                         <option value="Georgia">Georgia</option>
  546.                     </select>
  547.                 </label>
  548.                   <label>Size: <input type="range" id="textFontSizeInput" min="10" max="100" value="30"></label>
  549.                 </div>
  550.               </dib>
  551.               
  552.             </div>
  553.         `;
  554.         panel.appendChild(customSection);
  555.  
  556.         document.body.appendChild(panel);
  557.  
  558.         // Botón flotante para abrir/cerrar el panel
  559.         addFloatingButton(panel);
  560.  
  561.         // Configurar secciones
  562.         setupClassicSection();
  563.         setupCustomSection();
  564.  
  565.         // Cambio de pestañas
  566.         btnClassic.addEventListener("click", () => {
  567.             document.getElementById("classicSection").style.display = "block";
  568.             document.getElementById("customSection").style.display = "none";
  569.         });
  570.         btnCustom.addEventListener("click", () => {
  571.             document.getElementById("classicSection").style.display = "none";
  572.             document.getElementById("customSection").style.display = "block";
  573.         });
  574.     }
  575.  
  576.  
  577.  
  578.     // Botón flotante
  579.     function addFloatingButton(panel) {
  580.         const btn = document.createElement("button");
  581.         btn.id = "openStickerPanel";
  582.         btn.textContent = "Sticker";
  583.         btn.innerHTML = `<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-sticker-2"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 4h12a2 2 0 0 1 2 2v7h-5a2 2 0 0 0 -2 2v5h-7a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2z" /><path d="M20 13v.172a2 2 0 0 1 -.586 1.414l-4.828 4.828a2 2 0 0 1 -1.414 .586h-.172" /></svg>`
  584.         document.body.appendChild(btn);
  585.         btn.addEventListener("click", () => {
  586.             panel.style.display = panel.style.display === "none" ? "block" : "none";
  587.             const emojiContainer = document.getElementById("emojiContainer");
  588.  
  589.             if (emojiContainer.style.display === "flex") {
  590.                 emojiContainer.style.display = "none";
  591.             }
  592.             else {
  593.                 emojiContainer.style.display = "none";
  594.             }
  595.  
  596.         });
  597.     }
  598.  
  599.     // =========================
  600.     // MODO CLÁSICO
  601.     // =========================
  602.     function setupClassicSection() {
  603.         const dropZone = document.getElementById("dropZone");
  604.         const fileInput = document.getElementById("fileInput");
  605.         const createStickerButton = document.getElementById("createSticker");
  606.         const statusText = document.getElementById("status");
  607.         const previewCanvas = document.getElementById("previewCanvas");
  608.         let selectedImageCanvas = null;
  609.         let createClicked = false;
  610.  
  611.         dropZone.addEventListener("click", () => fileInput.click());
  612.         dropZone.addEventListener("dragover", (e) => { e.preventDefault(); dropZone.style.borderColor = "#000"; });
  613.         dropZone.addEventListener("dragleave", (e) => { e.preventDefault(); dropZone.style.borderColor = "#ccc"; });
  614.         dropZone.addEventListener("drop", (e) => {
  615.             e.preventDefault();
  616.             dropZone.style.borderColor = "#ccc";
  617.             if (e.dataTransfer.files && e.dataTransfer.files[0]) { handleFile(e.dataTransfer.files[0]); }
  618.         });
  619.         fileInput.addEventListener("change", () => { if (fileInput.files && fileInput.files[0]) { handleFile(fileInput.files[0]); } });
  620.  
  621.         function handleFile(file) {
  622.  
  623.             const reader = new FileReader();
  624.             reader.onload = function (event) {
  625.                 const img = new Image();
  626.                 img.onload = function () {
  627.                     previewCanvas.width = previewCanvas.parentElement.clientWidth;
  628.                     previewCanvas.height = previewCanvas.parentElement.clientHeight;
  629.                     const ctx = previewCanvas.getContext("2d");
  630.                     ctx.clearRect(0, 0, previewCanvas.width, previewCanvas.height);
  631.                     const ratio = Math.min(previewCanvas.width / img.width, previewCanvas.height / img.height);
  632.                     const newWidth = img.width * ratio;
  633.                     const newHeight = img.height * ratio;
  634.                     const dx = (previewCanvas.width - newWidth) / 2;
  635.                     const dy = (previewCanvas.height - newHeight) / 2;
  636.                     ctx.drawImage(img, dx, dy, newWidth, newHeight);
  637.                     selectedImageCanvas = previewCanvas;
  638.                     createStickerButton.disabled = false;
  639.                     statusText.textContent = "Image uploaded successfully";
  640.                     createClicked = false;
  641.                 };
  642.                 img.src = event.target.result;
  643.             };
  644.             reader.readAsDataURL(file);
  645.         }
  646.  
  647.         createStickerButton.addEventListener("click", () => {
  648.             if (!selectedImageCanvas || createClicked) return;
  649.             createClicked = true;
  650.             createStickerButton.disabled = true;
  651.             statusText.textContent = "Generating sticker...";
  652.             selectedImageCanvas.toBlob(function (blob) {
  653.                 if (!blob) { statusText.textContent = "Error al convertir la imagen."; return; }
  654.                 const stickerFile = new File([blob], "sticker.webp", { type: "image/webp" });
  655.                 simulateWhatsAppFileUpload(stickerFile, statusText);
  656.             }, "image/webp");
  657.         });
  658.     }
  659.  
  660.     // =========================
  661.     // MODO PERSONALIZADO (STICKER MAKER)
  662.     // =========================
  663.     function setupCustomSection() {
  664.         const customCanvas = document.getElementById("customCanvas");
  665.         const ctx = customCanvas.getContext("2d");
  666.         customCanvas.width = customCanvas.offsetWidth;
  667.         customCanvas.height = customCanvas.offsetHeight;
  668.         const addCustomImageButton = document.getElementById("addCustomImage");
  669.         const customFileInput = document.getElementById("customFileInput");
  670.         const createCustomStickerButton = document.getElementById("createCustomSticker");
  671.         const customStatus = document.getElementById("customStatus");
  672.         const toggleDrawingButton = document.getElementById("toggleDrawing");
  673.         const toggleShapesButton = document.getElementById("toggleShapes");
  674.         const bringForwardButton = document.getElementById("bringForward");
  675.         const sendBackwardButton = document.getElementById("sendBackward");
  676.         const deleteElementButton = document.getElementById("deleteElement");
  677.         const clearCanvasButton = document.getElementById("clearCanvas");
  678.         const toggleMultiSelectButton = document.getElementById("toggleMultiSelect");
  679.         const addTextButton = document.getElementById("addText");
  680.         const fontSelect = document.getElementById("fontSelect");
  681.         const downloadButton = document.getElementById("downloadImage");
  682.         const undoButton = document.getElementById("undo");
  683.         const redoButton = document.getElementById("redo");
  684.  
  685.         // Paneles emergentes
  686.         const pencilOptionsPanel = document.getElementById("pencilOptionsPanel");
  687.         const pencilColorContainer = document.getElementById("pencilColorContainer");
  688.         const pencilSizeContainer = document.getElementById("pencilSizeContainer");
  689.         const shapeOptionsPanel = document.getElementById("shapeOptionsPanel");
  690.         const shapeSquareButton = document.getElementById("shapeSquare");
  691.         const shapeCircleButton = document.getElementById("shapeCircle");
  692.  
  693.         // Panel de edición de texto
  694.         const textEditorPanel = document.getElementById("textEditorPanel");
  695.         const textContentInput = document.getElementById("textContentInput");
  696.         const textColorButtons = document.getElementById("textColorButtons");
  697.         const textBgButtons = document.getElementById("textBgButtons");
  698.         const textFontSelect = document.getElementById("textFontSelect");
  699.         const textFontSizeInput = document.getElementById("textFontSizeInput");
  700.  
  701.         // Variables internas para el lápiz
  702.         let drawingColor = "#000000";
  703.         const brushSizeInput = { value: 2 };
  704.  
  705.         // Variables para elementos en el canvas
  706.         let customElements = [];
  707.         let selectedElement = null;
  708.         let isDrawingMode = false;
  709.         let drawingInProgress = false;
  710.         let currentDrawing = null;
  711.         let customCreateClicked = false;
  712.         let offsetX = 0, offsetY = 0;
  713.         let isDragging = false;
  714.         let isResizing = false, resizeStartX = 0, resizeStartY = 0;
  715.         let originalFontSize = 0;
  716.         let originalWidth = 0, originalHeight = 0;
  717.  
  718.         // Variables para multi-select
  719.         let isMultiSelectMode = false;
  720.         let multiSelectedElements = [];
  721.         let multiSelectRect = null;
  722.         let isGroupDragging = false;
  723.         let groupDragStart = null;
  724.  
  725.         // Variables para undo/redo
  726.         let history = [];
  727.         let historyIndex = -1;
  728.  
  729.         function resizeCanvas() {
  730.             const container = customCanvas.parentElement;
  731.             customCanvas.width = container.clientWidth;
  732.             customCanvas.height = container.clientHeight;
  733.             drawCustomCanvas();
  734.         }
  735.         resizeCanvas();
  736.         window.addEventListener('resize', resizeCanvas);
  737.  
  738.         function cloneCustomElements(elements) {
  739.             return elements.map(el => {
  740.                 let newEl = Object.assign({}, el);
  741.                 if (el.points) newEl.points = el.points.map(p => ({ x: p.x, y: p.y }));
  742.                 if (el.type === "image" && el.img && el.img.src) {
  743.                     const newImg = new Image();
  744.                     newImg.src = el.img.src;
  745.                     newEl.img = newImg;
  746.                 }
  747.                 return newEl;
  748.             });
  749.         }
  750.         function saveHistory() {
  751.             history = history.slice(0, historyIndex + 1);
  752.             history.push(cloneCustomElements(customElements));
  753.             historyIndex++;
  754.         }
  755.  
  756.         // Helper: tamaño por defecto para imágenes
  757.         function getDefaultImageSize(img) {
  758.             let width = img.width, height = img.height;
  759.             if (width > 300) {
  760.                 const ratio = 300 / width;
  761.                 width = img.width * ratio;
  762.                 height = img.height * ratio;
  763.             }
  764.             return { width, height };
  765.         }
  766.  
  767.         // Función para detectar si un punto está en un elemento (considerando rotación)
  768.         function isPointInElement(el, x, y) {
  769.             if (el.rotation && el.rotation !== 0) {
  770.                 const cx = el.x + el.width / 2;
  771.                 const cy = el.y + el.height / 2;
  772.                 // Convertir (x,y) al sistema de coordenadas del elemento
  773.                 const dx = x - cx;
  774.                 const dy = y - cy;
  775.                 const angle = -el.rotation;
  776.                 const rx = dx * Math.cos(angle) - dy * Math.sin(angle);
  777.                 const ry = dx * Math.sin(angle) + dy * Math.cos(angle);
  778.                 return rx >= -el.width / 2 && rx <= el.width / 2 && ry >= -el.height / 2 && ry <= el.height / 2;
  779.             } else {
  780.                 return x >= el.x && x <= el.x + el.width && y >= el.y && y <= el.y + el.height;
  781.             }
  782.         }
  783.  
  784.         // Variable para almacenar la posición actual del mouse
  785.         let currentMousePos = { x: 0, y: 0 };
  786.  
  787.         // Función para dibujar un elemento (aplica rotación si tiene)
  788.         function drawElement(el) {
  789.             if (el.rotation && el.rotation !== 0) {
  790.                 const cx = el.x + el.width / 2, cy = el.y + el.height / 2;
  791.                 ctx.save();
  792.                 ctx.translate(cx, cy);
  793.                 ctx.rotate(el.rotation);
  794.                 if (el.type === "image") {
  795.                     ctx.drawImage(el.img, -el.width / 2, -el.height / 2, el.width, el.height);
  796.                 } else if (el.type === "emoji") {
  797.                     ctx.font = el.fontSize + "px sans-serif";
  798.                     ctx.textBaseline = "top";
  799.                     ctx.fillText(el.emoji, -el.width / 2, -el.height / 2);
  800.                 } else if (el.type === "drawing") {
  801.                     ctx.beginPath();
  802.                     el.points.forEach((p, index) => { index === 0 ? ctx.moveTo(p.x - cx, p.y - cy) : ctx.lineTo(p.x - cx, p.y - cy); });
  803.                     ctx.strokeStyle = el.color; ctx.lineWidth = el.brushSize;
  804.                     ctx.lineJoin = "round"; ctx.lineCap = "round"; ctx.stroke();
  805.                 } else if (el.type === "text") {
  806.                     ctx.font = el.fontSize + "px " + el.fontFamily;
  807.                     ctx.textBaseline = "top";
  808.                     if (el.bgColor) {
  809.                         const metrics = ctx.measureText(el.text);
  810.                         const padding = 2;
  811.                         ctx.fillStyle = el.bgColor;
  812.                         ctx.fillRect(-el.width / 2 - padding, -el.height / 2 - padding, metrics.width + 2 * padding, el.fontSize + 2 * padding);
  813.                     }
  814.                     ctx.fillStyle = el.color;
  815.                     ctx.fillText(el.text, -el.width / 2, -el.height / 2);
  816.                 } else if (el.type === "shape") {
  817.                     ctx.strokeStyle = el.color; ctx.lineWidth = 2;
  818.                     if (el.shape === "square") {
  819.                         ctx.strokeRect(-el.width / 2, -el.height / 2, el.width, el.height);
  820.                     } else if (el.shape === "circle") {
  821.                         ctx.beginPath();
  822.                         ctx.arc(0, 0, el.width / 2, 0, Math.PI * 2);
  823.                         ctx.stroke();
  824.                     }
  825.                 }
  826.                 ctx.restore();
  827.             } else {
  828.                 if (el.type === "image") {
  829.                     ctx.drawImage(el.img, el.x, el.y, el.width, el.height);
  830.                 } else if (el.type === "emoji") {
  831.                     ctx.font = el.fontSize + "px sans-serif";
  832.                     ctx.textBaseline = "top";
  833.                     ctx.fillText(el.emoji, el.x, el.y);
  834.                     const metrics = ctx.measureText(el.emoji);
  835.                     el.width = metrics.width; el.height = el.fontSize;
  836.                 } else if (el.type === "drawing") {
  837.                     ctx.beginPath();
  838.                     el.points.forEach((p, index) => { index === 0 ? ctx.moveTo(p.x, p.y) : ctx.lineTo(p.x, p.y); });
  839.                     ctx.strokeStyle = el.color; ctx.lineWidth = el.brushSize;
  840.                     ctx.lineJoin = "round"; ctx.lineCap = "round"; ctx.stroke();
  841.                 } else if (el.type === "text") {
  842.                     ctx.font = el.fontSize + "px " + el.fontFamily;
  843.                     ctx.textBaseline = "top";
  844.                     if (el.bgColor) {
  845.                         const metrics = ctx.measureText(el.text);
  846.                         const padding = 2;
  847.                         ctx.fillStyle = el.bgColor;
  848.                         ctx.fillRect(el.x - padding, el.y - padding, metrics.width + 2 * padding, el.fontSize + 2 * padding);
  849.                     }
  850.                     ctx.fillStyle = el.color;
  851.                     ctx.fillText(el.text, el.x, el.y);
  852.                     const metrics = ctx.measureText(el.text);
  853.                     el.width = metrics.width; el.height = el.fontSize;
  854.                 } else if (el.type === "shape") {
  855.                     ctx.strokeStyle = el.color; ctx.lineWidth = 2;
  856.                     if (el.shape === "square") ctx.strokeRect(el.x, el.y, el.width, el.height);
  857.                     else if (el.shape === "circle") {
  858.                         ctx.beginPath();
  859.                         ctx.arc(el.x + el.width / 2, el.y + el.height / 2, el.width / 2, 0, Math.PI * 2);
  860.                         ctx.stroke();
  861.                     }
  862.                 }
  863.             }
  864.         }
  865.         // Función para dibujar el canvas completo, incluyendo handles y resaltado por hover/selección
  866.         function drawCustomCanvas(forceRedraw = false) {
  867.             const rect = customCanvas.getBoundingClientRect();
  868.  
  869.             // Verificar si hay cambio de tamaño
  870.             if (customCanvas.width !== rect.width || customCanvas.height !== rect.height || forceRedraw) {
  871.                 customCanvas.width = rect.width;
  872.                 customCanvas.height = rect.height;
  873.             }
  874.  
  875.             ctx.clearRect(0, 0, customCanvas.width, customCanvas.height);
  876.             customElements.forEach(el => { drawElement(el); });
  877.  
  878.             // Si hay un elemento hover (y no está seleccionado) se dibuja su borde en verde
  879.             if (hoveredElement && hoveredElement !== selectedElement) {
  880.                 ctx.save();
  881.                 ctx.strokeStyle = "green";
  882.                 ctx.lineWidth = 2;
  883.                 if (hoveredElement.rotation && hoveredElement.rotation !== 0) {
  884.                     const cx = hoveredElement.x + hoveredElement.width / 2;
  885.                     const cy = hoveredElement.y + hoveredElement.height / 2;
  886.                     ctx.translate(cx, cy);
  887.                     ctx.rotate(hoveredElement.rotation);
  888.                     ctx.strokeRect(-hoveredElement.width / 2, -hoveredElement.height / 2, hoveredElement.width, hoveredElement.height);
  889.                 } else {
  890.                     ctx.strokeRect(hoveredElement.x, hoveredElement.y, hoveredElement.width, hoveredElement.height);
  891.                 }
  892.                 ctx.restore();
  893.             }
  894.  
  895.             // Si hay un elemento seleccionado, dibujar borde verde, fondo semitransparente e indicadores
  896.             if (selectedElement) {
  897.                 ctx.save();
  898.                 if (selectedElement.rotation && selectedElement.rotation !== 0) {
  899.                     const cx = selectedElement.x + selectedElement.width / 2;
  900.                     const cy = selectedElement.y + selectedElement.height / 2;
  901.                     ctx.translate(cx, cy);
  902.                     ctx.rotate(selectedElement.rotation);
  903.  
  904.                     // Fondo verde semitransparente y borde
  905.                     ctx.fillStyle = "rgba(0,255,0,0.2)";
  906.                     ctx.fillRect(-selectedElement.width / 2, -selectedElement.height / 2, selectedElement.width, selectedElement.height);
  907.                     ctx.strokeStyle = "green";
  908.                     ctx.lineWidth = 2;
  909.                     ctx.strokeRect(-selectedElement.width / 2, -selectedElement.height / 2, selectedElement.width, selectedElement.height);
  910.  
  911.                     // Indicador de rotación (círculo verde con flecha)
  912.                     ctx.beginPath();
  913.                     ctx.arc(0, -selectedElement.height / 2 - 20, 8, 0, Math.PI * 2);
  914.                     ctx.fillStyle = "green";
  915.                     ctx.fill();
  916.                     ctx.strokeStyle = "white";
  917.                     ctx.lineWidth = 2;
  918.                     // Dibujar flecha circular
  919.                     ctx.beginPath();
  920.                     ctx.arc(0, -selectedElement.height / 2 - 20, 12, -Math.PI / 2, Math.PI / 2, false);
  921.                     ctx.stroke();
  922.                     // Punta de la flecha
  923.                     ctx.beginPath();
  924.                     ctx.moveTo(4, -selectedElement.height / 2 - 20);
  925.                     ctx.lineTo(8, -selectedElement.height / 2 - 24);
  926.                     ctx.lineTo(12, -selectedElement.height / 2 - 20);
  927.                     ctx.stroke();
  928.  
  929.                     // Indicador de redimensión (cuadrado verde)
  930.                     ctx.fillStyle = "green";
  931.                     ctx.fillRect(selectedElement.width / 2 - 8, selectedElement.height / 2 - 8, 16, 16);
  932.                     ctx.strokeStyle = "white";
  933.                     ctx.strokeRect(selectedElement.width / 2 - 8, selectedElement.height / 2 - 8, 16, 16);
  934.  
  935.                 } else {
  936.                     // Fondo verde semitransparente y borde
  937.                     ctx.fillStyle = "rgba(0,255,0,0.2)";
  938.                     ctx.fillRect(selectedElement.x, selectedElement.y, selectedElement.width, selectedElement.height);
  939.                     ctx.strokeStyle = "green";
  940.                     ctx.lineWidth = 2;
  941.                     ctx.strokeRect(selectedElement.x, selectedElement.y, selectedElement.width, selectedElement.height);
  942.  
  943.                     // Indicador de rotación
  944.                     ctx.beginPath();
  945.                     ctx.arc(selectedElement.x + selectedElement.width / 2, selectedElement.y - 20, 8, 0, Math.PI * 2);
  946.                     ctx.fillStyle = "green";
  947.                     ctx.fill();
  948.                     ctx.strokeStyle = "white";
  949.                     ctx.lineWidth = 2;
  950.                     // Dibujar flecha circular
  951.                     ctx.beginPath();
  952.                     ctx.arc(selectedElement.x + selectedElement.width / 2, selectedElement.y - 20, 12, -Math.PI / 2, Math.PI / 2, false);
  953.                     ctx.stroke();
  954.                     // Punta de la flecha
  955.                     ctx.beginPath();
  956.                     ctx.moveTo(selectedElement.x + selectedElement.width / 2 + 4, selectedElement.y - 20);
  957.                     ctx.lineTo(selectedElement.x + selectedElement.width / 2 + 8, selectedElement.y - 24);
  958.                     ctx.lineTo(selectedElement.x + selectedElement.width / 2 + 12, selectedElement.y - 20);
  959.                     ctx.stroke();
  960.  
  961.                     // Indicador de redimensión
  962.                     ctx.fillStyle = "green";
  963.                     ctx.fillRect(selectedElement.x + selectedElement.width - 8, selectedElement.y + selectedElement.height - 8, 16, 16);
  964.                     ctx.strokeStyle = "white";
  965.                     ctx.strokeRect(selectedElement.x + selectedElement.width - 8, selectedElement.y + selectedElement.height - 8, 16, 16);
  966.                 }
  967.                 ctx.restore();
  968.             }
  969.  
  970.             // Dibujar bordes azul dashed para multi-selección
  971.             multiSelectedElements.forEach(el => {
  972.                 ctx.save();
  973.                 ctx.strokeStyle = "blue";
  974.                 ctx.lineWidth = 1;
  975.                 ctx.setLineDash([5, 5]);
  976.                 ctx.strokeRect(el.x, el.y, el.width, el.height);
  977.                 ctx.restore();
  978.             });
  979.  
  980.             // Dibujar rectángulo de selección múltiple si está activo
  981.             if (multiSelectRect) {
  982.                 ctx.save();
  983.                 ctx.strokeStyle = "blue";
  984.                 ctx.lineWidth = 1;
  985.                 ctx.setLineDash([5, 5]);
  986.                 const rx = Math.min(multiSelectRect.startX, multiSelectRect.currentX);
  987.                 const ry = Math.min(multiSelectRect.startY, multiSelectRect.currentY);
  988.                 const rw = Math.abs(multiSelectRect.currentX - multiSelectRect.startX);
  989.                 const rh = Math.abs(multiSelectRect.currentY - multiSelectRect.startY);
  990.                 ctx.strokeRect(rx, ry, rw, rh);
  991.                 ctx.restore();
  992.             }
  993.         }
  994.  
  995.  
  996.         // Actualizar variable hoveredElement según la posición del mouse
  997.         customCanvas.addEventListener("mousemove", (e) => {
  998.             const rect = customCanvas.getBoundingClientRect();
  999.             currentMousePos = { x: e.clientX - rect.left, y: e.clientY - rect.top };
  1000.             // Si no se está arrastrando, redimensionando, rotando o dibujando, detectar hover
  1001.             if (!isDragging && !isResizing && !isRotating && !drawingInProgress) {
  1002.                 hoveredElement = null;
  1003.                 for (let i = customElements.length - 1; i >= 0; i--) {
  1004.                     const el = customElements[i];
  1005.                     if (isPointInElement(el, currentMousePos.x, currentMousePos.y)) {
  1006.                         hoveredElement = el;
  1007.                         break;
  1008.                     }
  1009.                 }
  1010.                 drawCustomCanvas();
  1011.             }
  1012.         });
  1013.  
  1014.         // =============================
  1015.         // Eventos del canvas
  1016.         // =============================
  1017.         customCanvas.addEventListener("mousedown", (e) => {
  1018.             const rect = customCanvas.getBoundingClientRect();
  1019.             const x = e.clientX - rect.left, y = e.clientY - rect.top;
  1020.             // Si hay un elemento seleccionado, comprobar handle de rotación
  1021.             if (selectedElement) {
  1022.                 const cx = selectedElement.x + selectedElement.width / 2;
  1023.                 const cy = selectedElement.y + selectedElement.height / 2;
  1024.                 const rot = selectedElement.rotation || 0;
  1025.                 const handleOffset = { x: 0, y: -(selectedElement.height / 2 + 20) };
  1026.                 const rx = cx + handleOffset.x * Math.cos(rot) - handleOffset.y * Math.sin(rot);
  1027.                 const ry = cy + handleOffset.x * Math.sin(rot) + handleOffset.y * Math.cos(rot);
  1028.                 if (distance({ x, y }, { x: rx, y: ry }) < 15) {
  1029.                     isRotating = true;
  1030.                     initialRotateAngle = Math.atan2(y - cy, x - cx);
  1031.                     initialElementRotation = selectedElement.rotation || 0;
  1032.                     return;
  1033.                 }
  1034.                 // Comprobar handle de resize
  1035.                 const vectorBR = { x: selectedElement.width / 2, y: selectedElement.height / 2 };
  1036.                 const brx = cx + vectorBR.x * Math.cos(rot) - vectorBR.y * Math.sin(rot);
  1037.                 const bry = cy + vectorBR.x * Math.sin(rot) + vectorBR.y * Math.cos(rot);
  1038.                 if (distance({ x, y }, { x: brx, y: bry }) < 15) {
  1039.                     isResizing = true;
  1040.                     resizeStartX = x; resizeStartY = y;
  1041.                     if (selectedElement.type === "text" || selectedElement.type === "emoji") {
  1042.                         originalWidth = selectedElement.width;
  1043.                         originalFontSize = selectedElement.fontSize;
  1044.                     } else {
  1045.                         originalWidth = selectedElement.width;
  1046.                         originalHeight = selectedElement.height;
  1047.                     }
  1048.                     return;
  1049.                 }
  1050.             }
  1051.             if (isDrawingMode) {
  1052.                 drawingInProgress = true;
  1053.                 currentDrawing = { type: "drawing", points: [{ x, y }], color: drawingColor, brushSize: brushSizeInput.value, rotation: 0 };
  1054.                 selectedElement = null;
  1055.             } else if (isMultiSelectMode) {
  1056.                 let inSelected = multiSelectedElements.some(el => x >= el.x && x <= el.x + el.width && y >= el.y && y <= el.y + el.height);
  1057.                 if (inSelected && multiSelectedElements.length > 0) {
  1058.                     isGroupDragging = true;
  1059.                     groupDragStart = { startX: x, startY: y, positions: multiSelectedElements.map(el => ({ x: el.x, y: el.y })) };
  1060.                 } else {
  1061.                     multiSelectRect = { startX: x, startY: y, currentX: x, currentY: y };
  1062.                     multiSelectedElements = [];
  1063.                 }
  1064.                 selectedElement = null;
  1065.             } else {
  1066.                 let found = false;
  1067.                 for (let i = customElements.length - 1; i >= 0; i--) {
  1068.                     const el = customElements[i];
  1069.                     if (el.type === "drawing") {
  1070.                         const xs = el.points.map(p => p.x), ys = el.points.map(p => p.y);
  1071.                         const minX = Math.min(...xs), maxX = Math.max(...xs);
  1072.                         const minY = Math.min(...ys), maxY = Math.max(...ys);
  1073.                         if (x >= minX && x <= maxX && y >= minY && y <= maxY) { selectedElement = el; offsetX = x - minX; offsetY = y - minY; found = true; break; }
  1074.                     } else {
  1075.                         if (isPointInElement(el, x, y)) {
  1076.                             selectedElement = el;
  1077.                             if (x >= el.x + el.width - 15 && x <= el.x + el.width + 15 && y >= el.y + el.height - 15 && y <= el.y + el.height + 15) {
  1078.                                 isResizing = true;
  1079.                                 resizeStartX = x; resizeStartY = y;
  1080.                                 if (el.type === "text" || el.type === "emoji") {
  1081.                                     originalWidth = el.width; originalFontSize = el.fontSize;
  1082.                                 } else {
  1083.                                     originalWidth = el.width; originalHeight = el.height;
  1084.                                 }
  1085.                             } else {
  1086.                                 isDragging = true;
  1087.                                 offsetX = x - el.x; offsetY = y - el.y;
  1088.                             }
  1089.                             found = true; break;
  1090.                         }
  1091.                     }
  1092.                 }
  1093.                 if (!found) { selectedElement = null; }
  1094.                 drawCustomCanvas();
  1095.                 updateTextEditorPanel();
  1096.             }
  1097.         });
  1098.  
  1099.         customCanvas.addEventListener("mousemove", (e) => {
  1100.             const rect = customCanvas.getBoundingClientRect();
  1101.             const x = e.clientX - rect.left, y = e.clientY - rect.top;
  1102.             currentMousePos = { x, y };
  1103.             // Si se está en modo rotación
  1104.             if (isRotating && selectedElement) {
  1105.                 const cx = selectedElement.x + selectedElement.width / 2;
  1106.                 const cy = selectedElement.y + selectedElement.height / 2;
  1107.                 const currentAngle = Math.atan2(y - cy, x - cx);
  1108.                 selectedElement.rotation = initialElementRotation + (currentAngle - initialRotateAngle);
  1109.                 drawCustomCanvas();
  1110.                 return;
  1111.             }
  1112.             if (isDrawingMode && drawingInProgress && currentDrawing) {
  1113.                 currentDrawing.points.push({ x, y });
  1114.                 drawCustomCanvas();
  1115.                 ctx.strokeStyle = currentDrawing.color;
  1116.                 ctx.lineWidth = currentDrawing.brushSize;
  1117.                 ctx.lineJoin = "round"; ctx.lineCap = "round";
  1118.                 ctx.beginPath();
  1119.                 currentDrawing.points.forEach((point, index) => { index === 0 ? ctx.moveTo(point.x, point.y) : ctx.lineTo(point.x, point.y); });
  1120.                 ctx.stroke();
  1121.             } else if (isMultiSelectMode) {
  1122.                 if (isGroupDragging && groupDragStart) {
  1123.                     const deltaX = x - groupDragStart.startX, deltaY = y - groupDragStart.startY;
  1124.                     multiSelectedElements.forEach((el, idx) => {
  1125.                         const initPos = groupDragStart.positions[idx];
  1126.                         el.x = initPos.x + deltaX; el.y = initPos.y + deltaY;
  1127.                     });
  1128.                     drawCustomCanvas();
  1129.                 } else if (multiSelectRect) {
  1130.                     multiSelectRect.currentX = x; multiSelectRect.currentY = y;
  1131.                     drawCustomCanvas();
  1132.                 } else if (isDragging && selectedElement && !isDrawingMode && !isResizing && !isRotating) {
  1133.                     selectedElement.x = x - offsetX; selectedElement.y = y - offsetY;
  1134.                     drawCustomCanvas();
  1135.                 }
  1136.             } else {
  1137.                 if (isResizing && selectedElement) {
  1138.                     let newWidth = originalWidth + (x - resizeStartX);
  1139.                     if (newWidth < 20) newWidth = 20;
  1140.                     if (selectedElement.type === "text" || selectedElement.type === "emoji") {
  1141.                         let scale = newWidth / originalWidth;
  1142.                         selectedElement.fontSize = originalFontSize * scale;
  1143.                         selectedElement.width = newWidth;
  1144.                         selectedElement.height = originalFontSize * scale;
  1145.                     } else {
  1146.                         let newHeight = originalHeight + (y - resizeStartY);
  1147.                         if (newHeight < 20) newHeight = 20;
  1148.                         selectedElement.width = newWidth; selectedElement.height = newHeight;
  1149.                     }
  1150.                     drawCustomCanvas();
  1151.                 } else if (isDragging && selectedElement && !isDrawingMode && !isResizing && !isRotating) {
  1152.                     selectedElement.x = x - offsetX; selectedElement.y = y - offsetY;
  1153.                     drawCustomCanvas();
  1154.                 }
  1155.             }
  1156.             // Actualizar cursor sobre handles (para rotación y resize)
  1157.             if (!isDragging && !isResizing && !isRotating && selectedElement) {
  1158.                 const cx = selectedElement.x + selectedElement.width / 2;
  1159.                 const cy = selectedElement.y + selectedElement.height / 2;
  1160.                 const rot = selectedElement.rotation || 0;
  1161.                 const handleOffset = { x: 0, y: -(selectedElement.height / 2 + 20) };
  1162.                 const rx = cx + handleOffset.x * Math.cos(rot) - handleOffset.y * Math.sin(rot);
  1163.                 const ry = cy + handleOffset.x * Math.sin(rot) + handleOffset.y * Math.cos(rot);
  1164.                 const vectorBR = { x: selectedElement.width / 2, y: selectedElement.height / 2 };
  1165.                 const brx = cx + vectorBR.x * Math.cos(rot) - vectorBR.y * Math.sin(rot);
  1166.                 const bry = cy + vectorBR.x * Math.sin(rot) + vectorBR.y * Math.cos(rot);
  1167.                 if (distance({ x, y }, { x: rx, y: ry }) < 15) customCanvas.style.cursor = "grab";
  1168.                 else if (distance({ x, y }, { x: brx, y: bry }) < 15) customCanvas.style.cursor = "nwse-resize";
  1169.                 else customCanvas.style.cursor = "default";
  1170.             }
  1171.         });
  1172.  
  1173.         customCanvas.addEventListener("mouseup", () => {
  1174.             if (isDrawingMode && drawingInProgress && currentDrawing) {
  1175.                 customElements.push(currentDrawing);
  1176.                 saveHistory();
  1177.                 currentDrawing = null; drawingInProgress = false;
  1178.             }
  1179.             if (isMultiSelectMode) {
  1180.                 if (isGroupDragging) { isGroupDragging = false; groupDragStart = null; saveHistory(); }
  1181.                 else if (multiSelectRect) {
  1182.                     const rx = Math.min(multiSelectRect.startX, multiSelectRect.currentX);
  1183.                     const ry = Math.min(multiSelectRect.startY, multiSelectRect.currentY);
  1184.                     const rw = Math.abs(multiSelectRect.currentX - multiSelectRect.startX);
  1185.                     const rh = Math.abs(multiSelectRect.currentY - multiSelectRect.startY);
  1186.                     multiSelectedElements = customElements.filter(el => (el.x >= rx && el.y >= ry && (el.x + el.width) <= (rx + rw) && (el.y + el.height) <= (ry + rh)));
  1187.                     multiSelectRect = null; drawCustomCanvas();
  1188.                 }
  1189.             } else { if (isDragging || isResizing || isRotating) saveHistory(); }
  1190.             isResizing = false; isDragging = false; isRotating = false;
  1191.             drawCustomCanvas();
  1192.         });
  1193.         customCanvas.addEventListener("mouseleave", () => {
  1194.             if (isDrawingMode && drawingInProgress && currentDrawing) {
  1195.                 customElements.push(currentDrawing); saveHistory();
  1196.                 currentDrawing = null; drawingInProgress = false;
  1197.             }
  1198.             isResizing = false; isDragging = false; isGroupDragging = false; multiSelectRect = null; isRotating = false;
  1199.             drawCustomCanvas();
  1200.         });
  1201.  
  1202.         // =============================
  1203.         // Agregar imagen personalizada
  1204.         // =============================
  1205.         addCustomImageButton.addEventListener("click", () => customFileInput.click());
  1206.         customFileInput.addEventListener("change", () => {
  1207.             if (customFileInput.files && customFileInput.files[0]) {
  1208.                 const file = customFileInput.files[0];
  1209.                 const reader = new FileReader();
  1210.                 reader.onload = function (event) {
  1211.                     const img = new Image();
  1212.                     img.onload = function () {
  1213.                         const size = getDefaultImageSize(img);
  1214.                         if (file.type === "image/gif") {
  1215.                             const element = { type: "image", isGif: true, originalBlob: file, img: new Image(), x: 50, y: 50, width: size.width, height: size.height, rotation: 0 };
  1216.                             element.img.src = URL.createObjectURL(file);
  1217.                             customElements.push(element);
  1218.                         } else {
  1219.                             const element = { type: "image", img: img, x: 50, y: 50, width: size.width, height: size.height, rotation: 0 };
  1220.                             customElements.push(element);
  1221.                         }
  1222.                         saveHistory(); drawCustomCanvas();
  1223.                     };
  1224.                     img.src = event.target.result;
  1225.                 };
  1226.                 reader.readAsDataURL(file);
  1227.             }
  1228.         });
  1229.  
  1230.         // =============================
  1231.         // Panel de emojis
  1232.         // =============================
  1233.         let currentCategory = 'faces_emotion';
  1234.         const emojiContainer = document.createElement("div");
  1235.         emojiContainer.id = "emojiContainer";
  1236.         const emojiCategoryContainer = document.createElement("div");
  1237.         emojiCategoryContainer.id = "emojiCategoryContainer";
  1238.         const btnEmotions = document.createElement("button");
  1239.         btnEmotions.textContent = "Emociones";
  1240.         const btnAnimals = document.createElement("button");
  1241.         btnAnimals.textContent = "Animales";
  1242.         btnEmotions.addEventListener("click", () => { currentCategory = 'faces_emotion'; loadEmojis(currentCategory); });
  1243.         btnAnimals.addEventListener("click", () => { currentCategory = 'animals'; loadEmojis(currentCategory); });
  1244.         emojiCategoryContainer.appendChild(btnEmotions);
  1245.         emojiCategoryContainer.appendChild(btnAnimals);
  1246.         const emojiContent = document.createElement("div");
  1247.         emojiContent.id = "emojiContent";
  1248.         emojiContainer.appendChild(emojiCategoryContainer);
  1249.         emojiContainer.appendChild(emojiContent);
  1250.         document.body.appendChild(emojiContainer);
  1251.         const emojiToggleButton = document.getElementById("openEmojiPanel");
  1252.         emojiToggleButton.addEventListener("click", () => {
  1253.             if (emojiContainer.style.display === "none" || emojiContainer.style.display === "") { emojiContainer.style.display = "flex"; loadEmojis(currentCategory); }
  1254.             else { emojiContainer.style.display = "none"; }
  1255.         });
  1256.         function loadEmojis(category) {
  1257.             emojiContent.innerHTML = "";
  1258.             const data = emojis[category];
  1259.             data.forEach(emojiData => {
  1260.                 const btn = document.createElement("button");
  1261.                 btn.textContent = emojiData.emoji;
  1262.                 btn.style.fontSize = "24px"; btn.style.padding = "5px";
  1263.                 btn.classList.add("addEmoji");
  1264.                 btn.style.border = "1px solid #ccc"; btn.style.borderRadius = "5px";
  1265.                 btn.style.cursor = "pointer"; btn.style.backgroundColor = "#f9f9f9";
  1266.                 btn.addEventListener("click", () => {
  1267.                     const element = { type: "emoji", emoji: emojiData.emoji, x: 50, y: 50, fontSize: 70, width: 0, height: 0, rotation: 0 };
  1268.                     customElements.push(element); saveHistory(); drawCustomCanvas();
  1269.                 });
  1270.                 emojiContent.appendChild(btn);
  1271.             });
  1272.         }
  1273.         loadEmojis(currentCategory);
  1274.  
  1275.         // =============================
  1276.         // Configurar menú emergente del lápiz
  1277.         // =============================
  1278.         pencilColorContainer.innerHTML = "";
  1279.         const pencilColors = colorsText;
  1280.         pencilColors.forEach(color => {
  1281.             const btn = document.createElement("div");
  1282.             btn.className = "colorButton";
  1283.             btn.style.backgroundColor = color;
  1284.             btn.addEventListener("click", () => {
  1285.                 drawingColor = color;
  1286.                 Array.from(pencilColorContainer.children).forEach(b => b.style.borderColor = "#ccc");
  1287.                 btn.style.borderColor = "#000";
  1288.             });
  1289.             pencilColorContainer.appendChild(btn);
  1290.         });
  1291.         pencilSizeContainer.innerHTML = "";
  1292.         const pencilSizes = [2, 4, 6, 8];
  1293.         pencilSizes.forEach(size => {
  1294.             const btn = document.createElement("div");
  1295.             btn.className = "sizeButton";
  1296.             btn.setAttribute("data-size", size);
  1297.             btn.style.backgroundColor = "#777";
  1298.             btn.addEventListener("click", () => {
  1299.                 brushSizeInput.value = size;
  1300.                 if (selectedElement && selectedElement.type === "drawing") {
  1301.                     selectedElement.brushSize = size; drawCustomCanvas();
  1302.                 }
  1303.                 Array.from(pencilSizeContainer.children).forEach(b => b.style.borderColor = "#ccc");
  1304.                 btn.style.borderColor = "#000";
  1305.             });
  1306.             pencilSizeContainer.appendChild(btn);
  1307.         });
  1308.         // Toggle lápiz: ahora alterna entre activar y desactivar el modo dibujo
  1309.         toggleDrawingButton.addEventListener("click", () => {
  1310.             if (isDrawingMode) {
  1311.                 isDrawingMode = false;
  1312.                 pencilOptionsPanel.style.display = "none";
  1313.                 toggleDrawingButton.style.backgroundColor = "#005c4b";
  1314.             } else {
  1315.                 isDrawingMode = true;
  1316.                 pencilOptionsPanel.style.display = "block";
  1317.                 toggleDrawingButton.style.backgroundColor = "#ddd";
  1318.                 // Si se activa el lápiz, desactivar modo formas
  1319.                 shapeOptionsPanel.style.display = "none";
  1320.                 selectedElement = null;
  1321.             }
  1322.         });
  1323.  
  1324.         // =============================
  1325.         // Configurar menú emergente para formas
  1326.         // =============================
  1327.         toggleShapesButton.addEventListener("click", () => {
  1328.             pencilOptionsPanel.style.display = "none";
  1329.             shapeOptionsPanel.style.display = (shapeOptionsPanel.style.display === "none" || shapeOptionsPanel.style.display === "") ? "block" : "none";
  1330.             toggleShapesButton.style.backgroundColor = shapeOptionsPanel.style.display === "block" ? "#ddd" : "#005c4b";
  1331.         });
  1332.         shapeSquareButton.addEventListener("click", () => {
  1333.             const element = { type: "shape", shape: "square", x: 50, y: 50, width: 100, height: 100, color: "#000000", rotation: 0 };
  1334.             customElements.push(element); saveHistory(); drawCustomCanvas();
  1335.         });
  1336.         shapeCircleButton.addEventListener("click", () => {
  1337.             const element = { type: "shape", shape: "circle", x: 50, y: 50, width: 100, height: 100, color: "#000000", rotation: 0 };
  1338.             customElements.push(element); saveHistory(); drawCustomCanvas();
  1339.         });
  1340.  
  1341.         // =============================
  1342.         // Configurar botón multi-select
  1343.         // =============================
  1344.         toggleMultiSelectButton.addEventListener("click", () => {
  1345.             isMultiSelectMode = !isMultiSelectMode;
  1346.             toggleMultiSelectButton.style.backgroundColor = isMultiSelectMode ? "#ddd" : "#005c4b";
  1347.             if (!isMultiSelectMode) { multiSelectedElements = []; drawCustomCanvas(); }
  1348.         });
  1349.  
  1350.         // =============================
  1351.         // Configurar edición de texto (botones de color)
  1352.         // =============================
  1353.         const textColors = colorsText;
  1354.         function populateColorButtons(container, callback) {
  1355.             container.innerHTML = "";
  1356.             textColors.forEach(color => {
  1357.                 const btn = document.createElement("div");
  1358.                 btn.className = "colorButton";
  1359.                 btn.style.backgroundColor = color;
  1360.                 btn.addEventListener("click", () => { callback(color); });
  1361.                 container.appendChild(btn);
  1362.             });
  1363.         }
  1364.         populateColorButtons(textColorButtons, (color) => { if (selectedElement && selectedElement.type === "text") { selectedElement.color = color; drawCustomCanvas(); } });
  1365.         populateColorButtons(textBgButtons, (color) => { if (selectedElement && selectedElement.type === "text") { selectedElement.bgColor = color; drawCustomCanvas(); } });
  1366.         addTextButton.addEventListener("click", () => {
  1367.             const text = prompt("Enter the text:");
  1368.             if (text) {
  1369.                 const element = { type: "text", text: text, x: 50, y: 50, fontSize: 30, width: 0, height: 0, color: "#000000", bgColor: "", rotation: 0 };
  1370.                 customElements.push(element); saveHistory(); drawCustomCanvas();
  1371.             }
  1372.         });
  1373.  
  1374.         // =============================
  1375.         // Resto de controles: bringForward, sendBackward, etc.
  1376.         // =============================
  1377.         bringForwardButton.addEventListener("click", () => {
  1378.             if (selectedElement) {
  1379.                 const idx = customElements.indexOf(selectedElement);
  1380.                 if (idx !== -1 && idx < customElements.length - 1) { customElements.splice(idx, 1); customElements.push(selectedElement); saveHistory(); drawCustomCanvas(); }
  1381.             }
  1382.         });
  1383.         sendBackwardButton.addEventListener("click", () => {
  1384.             if (selectedElement) {
  1385.                 const idx = customElements.indexOf(selectedElement);
  1386.                 if (idx > 0) { customElements.splice(idx, 1); customElements.unshift(selectedElement); saveHistory(); drawCustomCanvas(); }
  1387.             }
  1388.         });
  1389.         deleteElementButton.addEventListener("click", () => {
  1390.             if (selectedElement) {
  1391.                 const idx = customElements.indexOf(selectedElement);
  1392.                 if (idx !== -1) { customElements.splice(idx, 1); selectedElement = null; saveHistory(); drawCustomCanvas(); }
  1393.             }
  1394.         });
  1395.         clearCanvasButton.addEventListener("click", () => { customElements = []; selectedElement = null; saveHistory(); drawCustomCanvas(); });
  1396.         downloadButton.addEventListener("click", () => {
  1397.             const dataURL = customCanvas.toDataURL("image/png");
  1398.             const a = document.createElement("a");
  1399.             a.href = dataURL; a.download = "sticker.png"; a.click();
  1400.         });
  1401.         undoButton.addEventListener("click", () => {
  1402.             if (historyIndex > 0) { historyIndex--; customElements = cloneCustomElements(history[historyIndex]); drawCustomCanvas(); }
  1403.         });
  1404.         redoButton.addEventListener("click", () => {
  1405.             if (historyIndex < history.length - 1) { historyIndex++; customElements = cloneCustomElements(history[historyIndex]); drawCustomCanvas(); }
  1406.         });
  1407.  
  1408.         // =============================
  1409.         // Panel de edición de texto: actualización en tiempo real
  1410.         // =============================
  1411.         function updateTextEditorPanel() {
  1412.             if (selectedElement && selectedElement.type === "text") {
  1413.                 textEditorPanel.style.display = "block";
  1414.                 textContentInput.value = selectedElement.text;
  1415.                 textFontSelect.value = selectedElement.fontFamily || "";
  1416.                 textFontSizeInput.value = selectedElement.fontSize;
  1417.             } else { textEditorPanel.style.display = "none"; }
  1418.         }
  1419.         textContentInput.addEventListener("input", () => { if (selectedElement && selectedElement.type === "text") { selectedElement.text = textContentInput.value; drawCustomCanvas(); } });
  1420.         textFontSelect.addEventListener("change", () => { if (selectedElement && selectedElement.type === "text") { selectedElement.fontFamily = textFontSelect.value; drawCustomCanvas(); } });
  1421.         textFontSizeInput.addEventListener("input", () => { if (selectedElement && selectedElement.type === "text") { selectedElement.fontSize = parseInt(textFontSizeInput.value); drawCustomCanvas(); } });
  1422.  
  1423.         // =============================
  1424.         // Animación: Si hay algún GIF, redibujar continuamente
  1425.         // =============================
  1426.         function animateCanvas() {
  1427.             if (customElements.some(el => el.type === "image" && el.isGif)) { drawCustomCanvas(); }
  1428.             requestAnimationFrame(animateCanvas);
  1429.         }
  1430.         animateCanvas();
  1431.  
  1432.         // =============================
  1433.         // Crear sticker personalizado
  1434.         // =============================
  1435.         createCustomStickerButton.addEventListener("click", () => {
  1436.  
  1437.             if (customCreateClicked) return;
  1438.             customCreateClicked = true;
  1439.             createCustomStickerButton.disabled = true;
  1440.             customStatus.textContent = "Generating custom sticker...";
  1441.             selectedElement = null;
  1442.             hoveredElement = null;
  1443.             multiSelectedElements = [];
  1444.             drawCustomCanvas();
  1445.             const gifElements = customElements.filter(el => el.type === "image" && el.isGif);
  1446.             if (gifElements.length === 1 && customElements.length === 1) {
  1447.                 simulateWhatsAppFileUpload(gifElements[0].originalBlob, customStatus);
  1448.                 customElements = []; selectedElement = null; drawCustomCanvas();
  1449.                 createCustomStickerButton.disabled = false; customCreateClicked = false;
  1450.             } else {
  1451.                 customCanvas.toBlob(function (blob) {
  1452.                     if (!blob) { customStatus.textContent = "Error generating sticker."; return; }
  1453.                     const stickerFile = new File([blob], "sticker_personalizado.webp", { type: "image/webp" });
  1454.                     simulateWhatsAppFileUpload(stickerFile, customStatus);
  1455.                     customElements = []; selectedElement = null; drawCustomCanvas();
  1456.                     createCustomStickerButton.disabled = false; customCreateClicked = false;
  1457.                 }, "image/webp");
  1458.             }
  1459.         });
  1460.     }
  1461.  
  1462.     // =============================
  1463.     // Simulación de subida a WhatsApp
  1464.     // =============================
  1465.     function simulateWhatsAppFileUpload(file, statusElement) {
  1466.         openAttachmentMenu();
  1467.         setTimeout(() => {
  1468.             const waFileInput = document.querySelector("input[type='file'][accept*='image']");
  1469.             if (!waFileInput) { statusElement.textContent = "WhatsApp file input not found"; return; }
  1470.             const dt = new DataTransfer();
  1471.             dt.items.add(file);
  1472.             waFileInput.files = dt.files;
  1473.             const event = new Event("change", { bubbles: true });
  1474.             waFileInput.dispatchEvent(event);
  1475.             statusElement.textContent = "Sticker loaded. Sending...";
  1476.             setTimeout(() => {
  1477.                 const sendButton = document.querySelector("span[data-icon='send']");
  1478.                 if (sendButton) { sendButton.click(); statusElement.textContent = "Sticker send"; }
  1479.                 else { statusElement.textContent = "Submit button not found"; }
  1480.             }, 1000);
  1481.         }, 500);
  1482.     }
  1483.  
  1484.     // =============================
  1485.     // Abrir menú de adjuntos de WhatsApp
  1486.     // =============================
  1487.     function openAttachmentMenu() {
  1488.         const attachmentButton = document.querySelector("div[title='Adjuntar']") || document.querySelector("span[data-icon='clip']");
  1489.         if (attachmentButton) { attachmentButton.click(); }
  1490.     }
  1491.  
  1492.     // Función auxiliar: distancia entre dos puntos
  1493.     function distance(p1, p2) {
  1494.         return Math.sqrt((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2);
  1495.     }
  1496. })();