') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); })(); Frame group perf by hackal · Pull Request #2 · CallstackAI/excalidraw · GitHub
Skip to content

Frame group perf - #2

Open
hackal wants to merge 10 commits into
masterfrom
frame-group-perf
Open

Frame group perf#2
hackal wants to merge 10 commits into
masterfrom
frame-group-perf

Conversation

@hackal

@hackalhackal commented Aug 16, 2024•
edited by callstackai-action Bot
Loading

Copy link
Copy Markdown
✨

Description by Cal

PR Description

This PR introduces performance improvements and refactoring in the handling of frames and groups within the application. It optimizes the rendering process by reducing redundant operations and improving the logic for determining element containment within frames.

Diagrams of code changes
sequenceDiagram
participant User as User
participant GitHub as GitHub Actions
participant CallstackAI as Callstack.ai Action
participant App as App Component
participant Frame as Frame Module
participant Groups as Groups Module
participant Renderer as Renderer Module
User->>GitHub: Trigger Callstack.ai PR Review
GitHub->>CallstackAI: Dispatch workflow with inputs (config, head, base)
CallstackAI->>GitHub: Review PR using inputs
App->>Frame: Check if element is in frame
Frame->>App: Return elements in frame
App->>Groups: Process group IDs
Groups->>App: Return processed group IDs
Renderer->>Frame: Get elements intersecting frame
Frame->>Renderer: Return intersecting elements
Renderer->>Renderer: Render visible elements
Renderer->>Renderer: Render embeddable elements on top
Renderer->>Renderer: Clip elements not completely in frame
Renderer->>Renderer: Render selection borders
Renderer->>User: Display updated scene
Loading

Key Issues

None

Files Changed

File: /.github/workflows/callstack-reviewer.yml Added a new GitHub Actions workflow for Callstack.ai PR Review with inputs for configuration, head commit SHA, and optional base commit SHA.
File: /src/components/App.tsx Introduced a `processedGroupIds` map to optimize the selection of elements within frames, reducing redundant checks.
File: /src/frame.ts Refactored functions to improve performance by optimizing the logic for checking element containment and intersection with frames. Removed redundant functions and improved the `isElementInFrame` function with additional options for processing group IDs.
File: /src/groups.ts Added a `processedGroupIds` set to avoid redundant processing of group IDs during element selection.
File: /src/renderer/renderScene.ts Refactored the rendering logic to improve performance by optimizing the order of rendering elements and reducing unnecessary clipping operations. Introduced a `processedGroupIds` map to track processed groups.

callstackai-action[bot]
callstackai-actionBot reviewed Aug 16, 2024
View reviewed changes

@callstackai-actioncallstackai-actionBot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No issues found.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer
@callstackai-actioncallstackai-action[bot]callstackai-action[bot] left review comments
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@hackal@ryan-di