Merge pull request #1616 from mkszepp/drop-ember-text-measurer-depend…

…ency Drop `ember-text-measurer` from dependencies
cibernox · Dec 7, 2023 · 84bb72d · 84bb72d
2 parents f920d36 + 6a2c2f0
commit 84bb72d
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 567 deletions.
diff --git a/addon/components/power-select-multiple/input.ts b/addon/components/power-select-multiple/input.ts
@@ -1,7 +1,6 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { get } from '@ember/object';
-import { inject as service } from '@ember/service';
 import { scheduleOnce } from '@ember/runloop';
 import { assert } from '@ember/debug';
 import { isBlank } from '@ember/utils';
@@ -24,7 +23,6 @@ const isIE = ua.indexOf('MSIE ') > -1 || ua.indexOf('Trident/') > -1;
 
 export default class PowerSelectMultipleInput extends Component<Args> {
   private inputFont?: string;
-  @service textMeasurer: any;
 
   // Properties
   get triggerMultipleInputStyle() {
@@ -37,7 +35,7 @@ export default class PowerSelectMultipleInput extends Component<Args> {
     } else {
       let textWidth = 0;
       if (this.inputFont) {
-        textWidth = this.textMeasurer.width(
+        textWidth = this.measureWidth(
           this.args.select.searchText,
           this.inputFont
         );
@@ -115,4 +113,16 @@ export default class PowerSelectMultipleInput extends Component<Args> {
       e.stopPropagation();
     }
   }
+
+  measureWidth(string: string, font?: string) {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+
+    if (!ctx) {
+      return 0;
+    }
+
+    if (font) { ctx.font = font; }
+    return ctx.measureText(string).width;
+  }
 }
diff --git a/components/power-select-multiple/trigger.d.ts b/components/power-select-multiple/trigger.d.ts
@@ -14,7 +14,6 @@ interface IndexAccesible<T> {
 export default class Trigger extends Component<Args> {
     private inputFont?;
     private _lastIsOpen;
-    textMeasurer: any;
     get triggerMultipleInputStyle(): import("@ember/template/-private/handlebars").SafeString;
     get maybePlaceholder(): string | undefined;
     openChanged(_el: Element, [isOpen]: [boolean]): void;