| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>getBoxQuads designer select-all drag benchmark</title> | |
| <style> | |
| :root { | |
| color-scheme: light; | |
| font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
The CSSOM View GeometryUtils APIs are currently available in Chromium behind the Experimental Web Platform features flag.
chrome://flags/#enable-experimental-web-platform-features in Chrome Canary.
| # CSSOM View GeometryUtils – Developer Trial Instructions | |
| The CSSOM View GeometryUtils APIs are currently available in Chromium behind the **Experimental Web Platform features** flag. | |
| ## Enable the feature | |
| 1. Open `chrome://flags/#enable-experimental-web-platform-features` in Chrome Canary. | |
| 2. Set **Experimental Web Platform features** to **Enabled**. | |
| 3. Restart Chrome. |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <title>GeometryUtils optimization stage benchmark</title> | |
| <style> | |
| body { font: 14px sans-serif; margin: 20px; } | |
| #results { white-space: pre-wrap; } | |
| #fixture { contain: layout style paint; } | |
| </style> | |
| <div id="fixture"></div> | |
| <pre id="results">ready</pre> |
| <script style="position:absolute;left:176px;top:-13px;"> | |
| (() => { | |
| const svg = (content) => | |
| `<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">${content}</svg>`; | |
| const text = (value, options = "") => | |
| `<text x="50" y="50" text-anchor="middle" dominant-baseline="middle" ${options}>${value ?? ""}</text>`; | |
| class UiPlace extends HTMLElement { | |
| static get observedAttributes() { |
| <script> | |
| (() => { | |
| const svg = (content) => | |
| `<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">${content}</svg>`; | |
| const text = (value, options = "") => | |
| `<text x="50" y="50" text-anchor="middle" dominant-baseline="middle" ${options}>${value ?? ""}</text>`; | |
| class UiPlace extends HTMLElement { | |
| static get observedAttributes() { |
Web applications that draw overlays, selections, inspection UI, or designer handles need precise element geometry after layout, scrolling, fragmentation, writing modes, and transforms have been applied.
Today they usually approximate this in JavaScript by walking ancestor chains and composing matrices. This is costly for many elements and can diverge from browser layout and painting behavior.
| import { html } from '@polymer/polymer/lib/utils/html-tag'; | |
| import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners'; | |
| import { PolymerElement } from '@polymer/polymer/polymer-element'; | |
| import { dom } from '@fortawesome/fontawesome-svg-core/index.es'; | |
| import { ImageDTO } from '../../../api/typescripttypes/MCC.Common.ServiceInterfaces.DTO'; | |
| import '../../../helper/stylesheetHelper.js'; | |
| import { checkSecurityAnswerCode } from '../../checkAnswerCode'; | |
| import { UUID } from '../../../libs/uuid/uuid'; | |
| import { cropperScriptName } from '../../../externalScripNames'; | |
| import { MccImage } from '../../mcc-image'; |
| you need to add | |
| <base href="app://./" /> to your head section |
| <Query Kind="Program" /> | |
| private string[] projectExtensionExclusions = new[] { ".vdproj", ".ndproj", ".wdproj", ".shfbproj" }; | |
| private string rootFolder = @"F:\csharp\git\mcc5\MCC.V1.0"; | |
| private string outputFolder = @"F:\csharp\git\mcc5\"; | |
| private string nugetFolder = @"C:\Users\jkuehner\.nuget\packages\"; | |
| private int intend = 4; | |
| void Main() |