Skip to content

Commit

Permalink
Update index.ts
Browse files Browse the repository at this point in the history
  • Loading branch information
@BugBountyzip
BugBountyzip authored Oct 24, 2024
1 parent 6602af5 commit e6999eb
Showing 1 changed file with 12 additions and 120 deletions.
132 changes: 12 additions & 120 deletions packages/frontend/src/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,120 +1,12 @@
import type { Caido } from "@caido/sdk-frontend";
import type { API } from "starterkit-plugin-backend";

import type { PluginStorage } from "./types";

import "./styles/style.css";

type CaidoSDK = Caido<API>;

const Page = "/my-plugin" as const;
const Commands = {
increment: "my-plugin.increment",
decrement: "my-plugin.decrement",
randomize: "my-plugin.randomize",
} as const;

const getCount = (sdk: CaidoSDK) => {
const storage = sdk.storage.get() as PluginStorage | undefined;

if (storage) {
return storage.count;
}

return 0;
}

const increment = (sdk: CaidoSDK) => {
const count = getCount(sdk);
sdk.storage.set({ count: count + 1 });
}

const decrement = async (sdk: CaidoSDK) => {
const count = getCount(sdk);
sdk.storage.set({ count: count - 1 });
}

const randomize = async (sdk: CaidoSDK) => {
const newNumber = await sdk.backend.generateNumber(0, 1000);
sdk.storage.set({ count: newNumber });
}

const addPage = (sdk: CaidoSDK) => {

const count = getCount(sdk);

const body = document.createElement("div");
body.className = "my-plugin";
body.innerHTML = `
<div class="my-plugin__count">
<span>Count:</span>
<span class="my-plugin__value">${count}</span>
</div>
<div>
<button class="c-button" data-command="${Commands.increment}">Increment</button>
<button class="c-button" data-command="${Commands.decrement}">Decrement</button>
<button class="c-button" data-command="${Commands.randomize}">Randomize</button>
</div>
`;

const countElement = body.querySelector(".my-plugin__value") as HTMLElement;
const incrementButton = body.querySelector(`[data-command="${Commands.increment}"]`) as HTMLElement;
const decrementButton = body.querySelector(`[data-command="${Commands.decrement}"]`) as HTMLElement;
const randomizeButton = body.querySelector(`[data-command="${Commands.randomize}"]`) as HTMLElement;

sdk.storage.onChange((newStorage) => {
const storage = newStorage as PluginStorage | undefined;

if (storage) {
countElement.innerHTML = `${storage.count}`;
return;
}
});

incrementButton.addEventListener("click", () => {
increment(sdk);
});

decrementButton.addEventListener("click", () => {
decrement(sdk);
});

randomizeButton.addEventListener("click", () => {
randomize(sdk);
});

sdk.navigation.addPage(Page, {
body,
});
}


export const init = (sdk: CaidoSDK) => {

// Register commands
// Commands are registered with a unique identifier and a handler function
// The run function is called when the command is executed
// These commands can be registered in various places like command palette, context menu, etc.
sdk.commands.register(Commands.increment, {
name: "Increment",
run: () => increment(sdk),
});

sdk.commands.register(Commands.decrement, {
name: "Decrement",
run: () => decrement(sdk),
});

// Register command palette items
sdk.commandPalette.register(Commands.increment);
sdk.commandPalette.register(Commands.decrement);

// Register page
addPage(sdk);

// Register sidebar
sdk.sidebar.registerItem("My plugin", Page, {
icon: "fas fa-rocket",
});
}

let PLUGIN_PATH="/cursor-pen",isPenMode=!1,permanentCanvas=null,tempCanvas=null,permCtx=null,tempCtx=null,currentTool="pen",currentColor="#FF0000",currentSize=2,isDrawing=!1,startX,startY,createCanvas=()=>{let e=document.createElement("canvas");return e.style.position="fixed",e.style.top="0",e.style.left="0",e.style.pointerEvents="none",e.style.zIndex="2147483647",e.width=window.innerWidth,e.height=window.innerHeight,e},initializeDrawing=()=>{permanentCanvas=createCanvas(),tempCanvas=createCanvas(),permCtx=permanentCanvas.getContext("2d"),tempCtx=tempCanvas.getContext("2d"),updateDrawingStyle(permCtx),updateDrawingStyle(tempCtx),document.body.appendChild(permanentCanvas),document.body.appendChild(tempCanvas)},updateDrawingStyle=e=>{e.strokeStyle=currentColor,e.lineWidth=currentSize,e.lineCap="round"},startDrawing=e=>{if(!isPenMode)return;isDrawing=!0;let t=tempCanvas.getBoundingClientRect();startX=e.clientX-t.left,startY=e.clientY-t.top,"pen"===currentTool&&(tempCtx.beginPath(),tempCtx.moveTo(startX,startY))},draw=e=>{if(!isDrawing||!isPenMode)return;let t=tempCanvas.getBoundingClientRect(),n=e.clientX-t.left,a=e.clientY-t.top;switch(tempCtx.clearRect(0,0,tempCanvas.width,tempCanvas.height),currentTool){case"pen":tempCtx.lineTo(n,a),tempCtx.stroke();break;case"circle":drawCircle(tempCtx,startX,startY,n,a);break;case"square":drawSquare(tempCtx,startX,startY,n,a);break;case"blur":permCtx.save(),permCtx.filter="blur(5px)",permCtx.drawImage(permanentCanvas,n-25,a-25,50,50,n-25,a-25,50,50),permCtx.restore()}},stopDrawing=()=>{isDrawing&&(isDrawing=!1,permCtx.drawImage(tempCanvas,0,0),tempCtx.clearRect(0,0,tempCanvas.width,tempCanvas.height))},drawCircle=(e,t,n,a,r)=>{let o=Math.sqrt(Math.pow(a-t,2)+Math.pow(r-n,2));e.beginPath(),e.arc(t,n,o,0,2*Math.PI),e.stroke()},drawSquare=(e,t,n,a,r)=>{let o=a-t,i=r-n;e.strokeRect(t,n,o,i)},clearCanvas=()=>{permCtx.clearRect(0,0,permanentCanvas.width,permanentCanvas.height),tempCtx.clearRect(0,0,tempCanvas.width,tempCanvas.height)},togglePenMode=()=>{isPenMode=!isPenMode,document.body.style.cursor=isPenMode?"crosshair":"default",updateToolbarState(),isPenMode?(tempCanvas.style.pointerEvents="auto",permanentCanvas.style.pointerEvents="auto"):(tempCanvas.style.pointerEvents="none",permanentCanvas.style.pointerEvents="none")},createToolbar=()=>{let e=document.createElement("div");e.className="cursor-pen-toolbar",e.style.position="fixed",e.style.top="10px",e.style.right="10px",e.style.zIndex="2147483647";let t=document.createElement("button");t.textContent="Close",t.onclick=togglePenMode;let n=document.createElement("button");n.textContent="Clear",n.onclick=clearCanvas;let a=document.createElement("input");a.type="color",a.value=currentColor,a.onchange=e=>{currentColor=e.target.value,updateDrawingStyle(permCtx),updateDrawingStyle(tempCtx)};let r=document.createElement("input");r.type="number",r.min="1",r.max="50",r.value=currentSize,r.onchange=e=>{currentSize=parseInt(e.target.value),updateDrawingStyle(permCtx),updateDrawingStyle(tempCtx)};let o=document.createElement("select");return["pen","circle","square","blur"].forEach(e=>{let t=document.createElement("option");t.value=e,t.textContent=e.charAt(0).toUpperCase()+e.slice(1),o.appendChild(t)}),o.onchange=e=>{currentTool=e.target.value},e.appendChild(t),e.appendChild(n),e.appendChild(a),e.appendChild(r),e.appendChild(o),e},updateToolbarState=()=>{let e=document.querySelector(".cursor-pen-toolbar");e&&(e.style.display=isPenMode?"block":"none")},createPage=e=>{initializeDrawing();let t=createToolbar();document.body.appendChild(t);let n=document.createElement("div");n.className="cursor-pen-instructions",n.innerHTML=`
<h1>Screen Drawing Plugin</h1>
<p>This plugin allows you to draw on the screen.</p>
<p><strong>How to Activate:</strong></p>
<ul>
<li>Press <strong>F12</strong> to toggle the drawing mode on and off.</li>
<li>Use the toolbar at the top-right corner to select tools, colors, and sizes.</li>
<li>Press <strong>F12</strong> again or click the <strong>Close</strong> button to deactivate the drawing mode.</li>
</ul>
<p>If you need any help, join our <a href="#" id="discord-link">Discord server</a>.</p>
<p>Follow me on <a href="#" id="X-link">X</a>.</p>
`,n.querySelector("#discord-link").addEventListener("click",e=>{e.preventDefault(),"undefined"!=typeof __CAIDO_DESKTOP__&&__CAIDO_DESKTOP__.openInBrowser?__CAIDO_DESKTOP__.openInBrowser("https://links.caido.io/www-discord"):window.open("https://links.caido.io/www-discord","_blank","noopener,noreferrer")}),n.querySelector("#X-link").addEventListener("click",e=>{e.preventDefault(),"undefined"!=typeof __CAIDO_DESKTOP__&&__CAIDO_DESKTOP__.openInBrowser?__CAIDO_DESKTOP__.openInBrowser("https://x.com/Tur24Tur"):window.open("https://x.com/Tur24Tur","_blank","noopener,noreferrer")}),window.addEventListener("resize",()=>{permanentCanvas.width=window.innerWidth,permanentCanvas.height=window.innerHeight,tempCanvas.width=window.innerWidth,tempCanvas.height=window.innerHeight}),document.addEventListener("keydown",e=>{"F12"===e.key&&(e.preventDefault(),togglePenMode())}),tempCanvas.addEventListener("mousedown",startDrawing),tempCanvas.addEventListener("mousemove",draw),tempCanvas.addEventListener("mouseup",stopDrawing),tempCanvas.addEventListener("mouseout",stopDrawing),e.navigation.addPage(PLUGIN_PATH,{body:n})};export const init=e=>{createPage(e),e.sidebar.registerItem("Screen Drawing",PLUGIN_PATH,{icon:"fas fa-pen"})};

0 comments on commit e6999eb

Please sign in to comment.