☰

WhatsApp Sticker Creator with Custom Maker Enhanced

在WhatsApp Web中创建自定义贴纸。

目前为 2025-02-24 提交的版本。查看 最新版本。

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

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址