Skip to content

Commit b581dbe

Browse files
Titanium2099Titanium2099
committed
Added Torchy popup resizing
1 parent 383f434 commit b581dbe

File tree

1 file changed

+134
-22
lines changed
  • src/addons/addons/ai-integration

1 file changed

+134
-22
lines changed

‎src/addons/addons/ai-integration/main.js‎

Lines changed: 134 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export default class main {
3939

4040
textareaa.value = inputValue;
4141

42-
if (textareaa.value.length > 64 || textareaa.value.includes('\n')) {
42+
if (textareaa.value.length > (textareaa.offsetWidth / 5.84375) || textareaa.value.includes('\n')) {
4343
textareaa.style.height = 'auto';
4444
textareaa.style.height = `${textareaa.scrollHeight}px`;
4545
textareaa.style.top = '0px';
@@ -58,11 +58,23 @@ export default class main {
5858
return;
5959
}
6060

61-
6261
const div = document.createElement('div');
63-
div.className = 'container';
6462
div.style.zIndex = 509;
6563
div.style.position = 'fixed';
64+
div.style.display = 'flex';
65+
66+
//intial popup dimensions
67+
div.style.width = '452px';
68+
div.style.height = '302px';
69+
div.style.minWidth = '452px';
70+
div.style.minHeight = '302px';
71+
72+
const verticalDiv = document.createElement('div');
73+
verticalDiv.style.width = '100%';
74+
75+
76+
const div2 = document.createElement('div');
77+
div2.className = 'container';
6678
const divWidth = 452;
6779
const divHeight = 302;
6880
const viewportWidth = window.innerWidth;
@@ -76,7 +88,7 @@ export default class main {
7688
if (newTop + divHeight > viewportHeight - tolerance) newTop = viewportHeight - divHeight - tolerance;
7789
div.style.left = `${newLeft}px`;
7890
div.style.top = `${newTop}px`;
79-
div.innerHTML = `
91+
div2.innerHTML = `
8092
<div class="headerT">
8193
<svg id="clearChat" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
8294
<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
@@ -206,16 +218,116 @@ export default class main {
206218
isDragging = false;
207219
div.style.cursor = "default";
208220
});
221+
// Add resize functionality
222+
let isResizing = false;
223+
let resizeDirection = null;
224+
let startWidth, startHeight, startLeft, startTop;
225+
226+
const handleResizeMouseDown = (direction, e) => {
227+
e.preventDefault();
228+
e.stopPropagation();
229+
isResizing = true;
230+
resizeDirection = direction;
231+
startX = e.clientX;
232+
startY = e.clientY;
233+
startWidth = parseInt(div.style.width, 10);
234+
startHeight = parseInt(div.style.height, 10);
235+
startLeft = parseInt(div.style.left, 10);
236+
startTop = parseInt(div.style.top, 10);
237+
document.body.style.userSelect = 'none';
238+
};
239+
240+
const handleResizeMouseMove = (e) => {
241+
if (!isResizing) return;
242+
243+
const viewportWidth = window.innerWidth;
244+
const viewportHeight = window.innerHeight;
245+
const tolerance = 10;
246+
const minWidth = 452;
247+
const minHeight = 302;
248+
249+
if (resizeDirection === 'right') {
250+
let newWidth = startWidth + (e.clientX - startX);
251+
if (newWidth < minWidth) newWidth = minWidth;
252+
if (startLeft + newWidth > viewportWidth - tolerance) {
253+
newWidth = viewportWidth - startLeft - tolerance;
254+
}
255+
div.style.width = `${newWidth}px`;
256+
}
257+
else if (resizeDirection === 'left') {
258+
let newWidth = startWidth - (e.clientX - startX);
259+
if (newWidth < minWidth) return;
260+
let newLeft = startLeft + (e.clientX - startX);
261+
if (newLeft < tolerance) {
262+
newLeft = tolerance;
263+
newWidth = startWidth + (startLeft - tolerance);
264+
}
265+
div.style.width = `${newWidth}px`;
266+
div.style.left = `${newLeft}px`;
267+
}
268+
else if (resizeDirection === 'bottom') {
269+
let newHeight = startHeight + (e.clientY - startY);
270+
if (newHeight < minHeight) newHeight = minHeight;
271+
if (startTop + newHeight > viewportHeight - tolerance) {
272+
newHeight = viewportHeight - startTop - tolerance;
273+
}
274+
div.style.height = `${newHeight}px`;
275+
}
276+
else if (resizeDirection === 'top') {
277+
let newHeight = startHeight - (e.clientY - startY);
278+
if (newHeight < minHeight) return;
279+
let newTop = startTop + (e.clientY - startY);
280+
if (newTop < tolerance) {
281+
newTop = tolerance;
282+
newHeight = startHeight + (startTop - tolerance);
283+
}
284+
div.style.height = `${newHeight}px`;
285+
div.style.top = `${newTop}px`;
286+
}
287+
};
288+
289+
const handleResizeMouseUp = () => {
290+
isResizing = false;
291+
resizeDirection = null;
292+
document.body.style.userSelect = '';
293+
};
294+
295+
const leftResize = document.createElement('div');
296+
leftResize.className = 'left-resize';
297+
const rightResize = document.createElement('div');
298+
rightResize.className = 'right-resize';
299+
const topResize = document.createElement('div');
300+
topResize.className = 'top-resize';
301+
const bottomResize = document.createElement('div');
302+
bottomResize.className = 'bottom-resize';
303+
304+
// Add event listeners for resize handles
305+
leftResize.addEventListener('mousedown', (e) => handleResizeMouseDown('left', e));
306+
rightResize.addEventListener('mousedown', (e) => handleResizeMouseDown('right', e));
307+
topResize.addEventListener('mousedown', (e) => handleResizeMouseDown('top', e));
308+
bottomResize.addEventListener('mousedown', (e) => handleResizeMouseDown('bottom', e));
309+
310+
document.addEventListener('mousemove', handleResizeMouseMove);
311+
document.addEventListener('mouseup', handleResizeMouseUp);
312+
209313

210314
//add to body
315+
//document.body.appendChild(div);
316+
//add to resizeDiv
317+
div.appendChild(leftResize);
318+
verticalDiv.appendChild(topResize);
319+
verticalDiv.appendChild(div2);
320+
verticalDiv.appendChild(bottomResize);
321+
div.appendChild(verticalDiv);
322+
div.appendChild(rightResize);
211323
document.body.appendChild(div);
212324

213325
var textareaa = document.getElementById('auto-resizing-textarea');
214326
//focus on textarea
215327
textareaa.focus();
216328

217329
textareaa.value = inputValue;
218-
if (textareaa.value.length > 64 || textareaa.value.includes('\n')) { //must be done once in the beginning due to the fact that `inputValue` might be a long string
330+
if (textareaa.value.length > (textareaa.offsetWidth / 5.84375) || textareaa.value.includes('\n')) { //must be done once in the beginning due to the fact that `inputValue` might be a long string
219331
textareaa.style.height = 'auto';
220332
textareaa.style.height = `${textareaa.scrollHeight}px`;
221333
textareaa.style.top = '0px';
@@ -224,7 +336,7 @@ export default class main {
224336
textareaa.style.top = '2px';
225337
}
226338
textareaa.addEventListener('input', () => {
227-
if (textareaa.value.length > 64 || textareaa.value.includes('\n')) { //make sure there is more than one line
339+
if (textareaa.value.length > (textareaa.offsetWidth / 5.84375) || textareaa.value.includes('\n')) { //make sure there is more than one line
228340
textareaa.style.height = 'auto';
229341
textareaa.style.height = `${textareaa.scrollHeight}px`;
230342
textareaa.style.top = '0px';
@@ -461,23 +573,23 @@ export default class main {
461573
var randomId = Math.random().toString(36).substr(2, 5).toUpperCase();
462574
document.AI_INTEGRATION.CodeChunks = streamResult.match(/```(.*?)```/gs) || [];
463575
document.AI_INTEGRATION.processedCodeChunks = [];
464-
576+
465577
const processedChunks = await Promise.all(
466578
document.AI_INTEGRATION.CodeChunks.map((chunk, index) =>
467579
handleRawCodeChunk(chunk, `${randomId}_${index}`, main.mainWorkspace)
468580
)
469581
);
470-
582+
471583
document.AI_INTEGRATION.processedCodeChunks = processedChunks;
472-
584+
473585
let instanceCount = -1;
474586
var editedStreamResult = streamResult.replaceAll(/```(.*?)```/gs, "CODECHUNK23407283947");
475587
editedStreamResult = converter.makeHtml(editedStreamResult)
476588
editedStreamResult = editedStreamResult.replaceAll("CODECHUNK23407283947", () => {
477589
instanceCount++;
478590
if (document.AI_INTEGRATION.processedCodeChunks[instanceCount].status == "error") {
479591
return "<h1 class=\"errorMessage\">failed to parse Code Chunk</h1><br>"
480-
}else if (document.AI_INTEGRATION.processedCodeChunks[instanceCount].status == "error_fixable"){
592+
} else if (document.AI_INTEGRATION.processedCodeChunks[instanceCount].status == "error_fixable") {
481593
return "<div class=\"codeChunkOverlay\" id=\"errorFixable_" + randomId + "_" + instanceCount + "\"></div>";
482594
}
483595
document.AI_INTEGRATION.AllCodeChunksEverAdded.push(document.AI_INTEGRATION.processedCodeChunks[instanceCount]);
@@ -498,7 +610,7 @@ export default class main {
498610
codeBlockHeight.push(theDiv.children[xx].children[1].getBoundingClientRect().height);
499611
}
500612
document.getElementById(`TEMPCODEBLOCK${instanceCount}`).remove();
501-
613+
502614
let svg = domParser.parseFromString(document.AI_INTEGRATION.processedCodeChunks[instanceCount].blocksAsSVG, "text/html");
503615
svg = svg.body.children[0];
504616
for (var i = 0; i < svg.children.length; i++) {
@@ -507,15 +619,15 @@ export default class main {
507619
}
508620
return `<div class="codeChunkOverlay"><div class="insert_button_parent"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 insert_button" uniqueid="${document.AI_INTEGRATION.AllCodeChunksEverAdded.length}"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"></path></svg></div><div class="codeChunkOverlay_child"><div id="CODEBLOCK_${randomId}_${instanceCount}">${svg.outerHTML}</div></div></div>`;
509621
});
510-
622+
511623
document.getElementById('currentlyBlabberingOnThis').innerHTML = editedStreamResult;
512624
for (let i = 0; i <= instanceCount; i++) { // each code block
513625
try {
514626
if (document.AI_INTEGRATION.processedCodeChunks[instanceCount].status == "error") {
515627
document.getElementById('currentlyBlabberingOnThis').id = '';
516628
console.warn("DEBUG: skipping codeblock #" + instanceCount + " due to status failure", document.AI_INTEGRATION.processedCodeChunks[instanceCount])
517629
return;
518-
}else if (document.AI_INTEGRATION.processedCodeChunks[instanceCount].status == "error_fixable") {
630+
} else if (document.AI_INTEGRATION.processedCodeChunks[instanceCount].status == "error_fixable") {
519631
var div = document.createElement('div');
520632
div.innerHTML = `<p style="text-align: center;">A fatal issue was detected with this code</p><div style="display: flex;margin: 10px;"></div>`;
521633
var button = document.createElement('button');
@@ -554,15 +666,15 @@ export default class main {
554666
document.querySelector('.container').style.display = '';
555667
document.querySelector('.container').style.zIndex = 509;
556668
}
557-
669+
558670
const currentElement = document.getElementById(`CODEBLOCK_${randomId}_${i}`).children[0].children[xx];
559671
currentElement.style.width = (currentElement.getBoundingClientRect().width * (currentWidth / currentElement.children[1].children[0].getBoundingClientRect().width)) + "px";
560-
672+
561673
//THE SMARTED/MOST INSANE CODE THAT WORKS IN THE HISTORY OF JS
562674
const currentText = currentElement.querySelector("text");
563675
const oldText = currentText.innerHTML;
564676
currentText.innerHTML = "a";
565-
677+
566678
var currentHeight = currentText.getBoundingClientRect().height;
567679
//console.log(currentText);
568680
while (currentHeight > 16 && currentWidth > 5) {
@@ -616,7 +728,7 @@ export default class main {
616728
}
617729
});
618730
}
619-
731+
620732
var totalWidth = 0;
621733
//Blockly.Xml.domToWorkspace(xml, workspace);
622734
Array.from(xml.children).forEach(block => {
@@ -637,7 +749,7 @@ export default class main {
637749
newBlock.moveBy(x, y);*/
638750
}
639751
var message = `<p style="font-weight: 900;margin-bottom: 10px;">Adding this code will:</p><ul>`;
640-
752+
641753
var [listNames, variableNames] = helpers.workspaceVariables(false, main.mainWorkspace);
642754
var newVariables = [];
643755
var newLists = [];
@@ -675,7 +787,7 @@ export default class main {
675787
var replacingBlocks = [];
676788
var replacingBlocksInternal = [];
677789
var trulyNewBlocks = [];
678-
790+
679791
for (var block of newBlocks) {
680792
var matchingBlock = currentWorkspaceBlocks.find(currentBlock => currentBlock.customBlockName === block.customBlockName);
681793
if (matchingBlock) {
@@ -689,7 +801,7 @@ export default class main {
689801
if (trulyNewBlocks.length > 0) {
690802
message += `<li>Create ${trulyNewBlocks.length} new block${trulyNewBlocks.length == 1 ? "" : "s"}: ${trulyNewBlocks.join(", ")}</li>`;
691803
}
692-
804+
693805
// List blocks that are being replaced
694806
if (replacingBlocks.length > 0) {
695807
message += `<li>Replace ${replacingBlocks.length} existing block${replacingBlocks.length == 1 ? "" : "s"}: ${replacingBlocks.join(", ")} <span><p class="errorMessage">(THIS WILL REPLACE YOUR CURRENT BLOCK DEFINITION)</p></span></li>`;
@@ -702,14 +814,14 @@ export default class main {
702814
const title = "Add Code to Workspace?";
703815
ScratchBlocks.prompt(message, null, callback, title, ScratchBlocks.BROADCAST_MESSAGE_VARIABLE_TYPE, true);
704816
});
705-
817+
706818
var errorForChunk = [];
707819
for (var xx = 0; xx < document.AI_INTEGRATION.errorsDetected.length; xx++) {
708820
if (document.AI_INTEGRATION.errorsDetected[xx].uniqueCommentID == currentElement.parentElement.id.replace("CODEBLOCK_", "")) {
709821
errorForChunk.push(document.AI_INTEGRATION.errorsDetected[xx]);
710822
}
711823
}
712-
824+
713825
if (errorForChunk.length == 0) {
714826
currentElement.parentElement.style = "width: fit-content;height: fit-content;margin: auto;";
715827
} else {

0 commit comments

Comments
 (0)