feat: Add native pan and zoom demo #1994
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Adds a new demo under `__tests__/demos/camera/` that showcases how to implement panning and zooming on the canvas using native DOM events. This is in response to the user request to add such a demo. An issue in the execution environment prevented the test suite from being run. A `commitlint` hook blocked all commands, including `pnpm test`. The changes are submitted without test verification due to this environmental constraint.
|
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
Comment on lines
21
to
23
| document.write( | ||
| '<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>', | ||
| ); |
Check notice
Code scanning / CodeQL
Call to eval-like DOM function Note test
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 5 months ago
To fix the problem, replace the usage of document.write with modern DOM manipulation by dynamically creating <script> elements and appending them to the <head> or <body>. This allows on-demand injection of polyfill scripts without using string-evaluating functions.
Specifically, in benchmark/index.html, replace the two document.write(...) calls (lines 21–23 and 28–30) with code that creates a <script> element, sets its src and async or defer attributes as needed, and then appends it to the document (typically to the <head> or <body>). No additional libraries are needed; all DOM methods required are built-in.
Edits are restricted to the <script> block in benchmark/index.html.
Suggested changeset
1
benchmark/index.html
| @@ -18,16 +18,18 @@ | ||
| <script> | ||
| // Add any necessary polyfills here | ||
| if (!window.Promise) { | ||
| document.write( | ||
| '<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>', | ||
| ); | ||
| var script = document.createElement('script'); | ||
| script.src = "https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"; | ||
| script.defer = true; | ||
| document.head.appendChild(script); | ||
| } | ||
|
|
||
| // Check for requestAnimationFrame support | ||
| if (!window.requestAnimationFrame) { | ||
| document.write( | ||
| '<script src="https://cdnjs.cloudflare.com/ajax/libs/raf/3.4.1/raf.min.js"><\/script>', | ||
| ); | ||
| var script = document.createElement('script'); | ||
| script.src = "https://cdnjs.cloudflare.com/ajax/libs/raf/3.4.1/raf.min.js"; | ||
| script.defer = true; | ||
| document.head.appendChild(script); | ||
| } | ||
| </script> | ||
| </body> |
Copilot is powered by AI and may make mistakes. Always verify output.
Comment on lines
28
to
30
| document.write( | ||
| '<script src="https://cdnjs.cloudflare.com/ajax/libs/raf/3.4.1/raf.min.js"><\/script>', | ||
| ); |
Check notice
Code scanning / CodeQL
Call to eval-like DOM function Note test
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 5 months ago
To fix this issue, we should replace the use of document.write for injecting <script> tags with safer, non-eval code that dynamically creates and inserts script elements only when required. The best approach is to use document.createElement('script'), set its src and type attributes, and append it to the <head> or <body>. This maintains the functional equivalence (loading the polyfill exactly when needed) without the drawbacks of document.write. The change should be made in the inline <script> block (lines 18–32 of benchmark/index.html). No new dependencies are needed; this is all standard DOM API.
Suggested changeset
1
benchmark/index.html
| @@ -18,16 +18,18 @@ | ||
| <script> | ||
| // Add any necessary polyfills here | ||
| if (!window.Promise) { | ||
| document.write( | ||
| '<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>', | ||
| ); | ||
| var script = document.createElement('script'); | ||
| script.src = "https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"; | ||
| script.type = "text/javascript"; | ||
| document.head.appendChild(script); | ||
| } | ||
|
|
||
| // Check for requestAnimationFrame support | ||
| if (!window.requestAnimationFrame) { | ||
| document.write( | ||
| '<script src="https://cdnjs.cloudflare.com/ajax/libs/raf/3.4.1/raf.min.js"><\/script>', | ||
| ); | ||
| var script = document.createElement('script'); | ||
| script.src = "https://cdnjs.cloudflare.com/ajax/libs/raf/3.4.1/raf.min.js"; | ||
| script.type = "text/javascript"; | ||
| document.head.appendChild(script); | ||
| } | ||
| </script> | ||
| </body> |
Copilot is powered by AI and may make mistakes. Always verify output.
wang1212
added a commit
that referenced
this pull request
Oct 13, 2025
* feat(benchmark): Add performance test suite and analysis panel (#1987) * fix: docs dead links (#1984) * fix: docs dead links * fix: add /en prefix to english docs * feat: upgrade chrome extension to manifest v3 and react to v18 - Upgrade manifest version from v2 to v3 with updated permissions format - Migrate background scripts to service worker - Update content_security_policy and web_accessible_resources format - Replace browser_action with action - Upgrade react and react-dom from v16 to v18 in g-devtool - Update devtool UI to support React 18 createRoot API - Maintain backward compatibility with legacy versions - Update minimum chrome version requirement to 88 * feat: add GitHub workflow for bug report reproduction check - Add new GitHub Actions workflow 'bug-report-reproduction-check' - Automatically analyze new bug reports for reproduction steps - Use Mistral AI to check for complete reproduction information - Add friendly comment when reproduction details are missing - Only trigger for issues labeled as 'bug' - Add necessary permissions for issues and models access * feat: add benchmark suite for rendering performance comparison - Add benchmark infrastructure with TestCase and TestRunner base classes - Implement test cases for basic shapes (circle, rect, path, etc.) across multiple renderers - Support g-canvas, g-canvas-v4 and zrender rendering engines - Add UI components for test execution and result visualization - Include i18n support with Chinese and English translations - Set up build configuration with Vite and TypeScript * feat(benchmark): add collapsible insight panel in PerformanceChart - Add state to track insight panel expansion - Implement collapsible UI with smooth animations - Improve styling and layout of insight panel - Add expand/collapse toggle functionality - Enhance user experience with better visual feedback * chore(benchmark): add performance test results for basic shapes Add benchmark results for basic shapes rendering comparison between different engines including g-canvas and zrender. The results include execution duration and memory usage metrics. * feat(benchmark): enhance i18n support for failure rate display - Add new translation key 'highestFailureRate' for displaying failure rate in both English and Chinese - Refactor failure rate display to use i18n template - Improve code formatting in PerformanceChart component - Fix whitespace and indentation issues in TestRunner * chore: remove other file * feat: Add native pan and zoom demo (#1994) * feat: add native pan and zoom demo Adds a new demo under `__tests__/demos/camera/` that showcases how to implement panning and zooming on the canvas using native DOM events. This is in response to the user request to add such a demo. An issue in the execution environment prevented the test suite from being run. A `commitlint` hook blocked all commands, including `pnpm test`. The changes are submitted without test verification due to this environmental constraint. * fix: use getContextService for container access in nativePanZoom demo --------- Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com> Co-authored-by: wang1212 <mrwang1212@126.com> * feat: add script to fetch and display npm download stats for monorepo packages * chore: update test config and TypeScript settings - Add JSDoc link to jest.unit.config.js - Fix module name mapper path in jest.unit.config.js - Expand coverage collection to more packages - Update coverage reporters - Move isolatedModules to tsconfig.json * fix: fix loop index in tapable (#2003) * fix: fix loop index in SyncWaterfallHook and AsyncSeriesWaterfallHook - Fix loop index in SyncWaterfallHook to start from 1 instead of 0 since the first callback is already called - Apply the same fix to AsyncSeriesWaterfallHook for consistency - Add comprehensive unit tests for all tapable hook types * chore: fix code style * chore: fix code lint issue * chore: add changeset * Add basic shape benchmark cases for g-canvas-local engine (#2030) * test: Add basic shape benchmark cases for g-canvas-local engine * test: Add basic shape benchmark cases for g-canvas-local engine * Update benchmark/src/benchmarks/g-canvas-local/engine.ts Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> --------- Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> * feat(text): add text-decoration support for text elements (#2035) * feat(text): add text-decoration support for text elements * docs: update text decoration info * docs: fix typos * perf: element event batch triggering (#2005) * perf: element event batch triggering * chore: update test snapshot * chore: use Array.from to convert iterator for compatibility * chore: add changeset * Update __tests__/demos/perf/custom-event.ts Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> --------- Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> * perf: remove rBush logic from element picking mechanism (#2031) * perf: remove rBush logic from element picking mechanism * chore: fix lint error * chore: add changeset * chore: update test case * fix: the element picking range includes the element border * chore(release): bump version (#2004) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * perf(g-plugin-canvas-renderer): improve wavy text decoration with quadratic curves * Update __tests__/demos/event/hit-test.ts Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> --------- Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com> Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This change adds a new demo for g-canvas that demonstrates how to implement pan and zoom functionality using native DOM events. The new demo is located at
__tests__/demos/camera/native-pan-zoom.ts.