chore: remove unsed parentSize on renderer & fix tests

app/components/three-preview.hbs

@@ -1,10 +1,6 @@
-{{yield (hash
-  renderer=(component 'three-preview/renderer'
-    mesh=@mesh
-    parentSize=@parentSize
-    nearCamera=@nearCamera
+{{yield
+  (hash
+    renderer=(component 'three-preview/renderer' mesh=@mesh nearCamera=@nearCamera)
+    size=(component 'three-preview/size' mesh=@mesh)
   )
-  size=(component 'three-preview/size'
-    mesh=@mesh
-  )
-)}}
+}}

app/components/three-preview/renderer.hbs

@@ -1,5 +1,2 @@
-<canvas
-  ...attributes
-  {{three-renderer @mesh parentSize=@parentSize nearCamera=@nearCamera}}
->
+<canvas ...attributes {{three-renderer @mesh nearCamera=@nearCamera}}>
 </canvas>

app/modifiers/three-renderer.ts

@@ -13,7 +13,6 @@ const {
 } = config;
 
 type namedArgs = {
-  parentSize?: boolean;
   nearCamera?: boolean;
 };
 
@@ -79,11 +78,8 @@ export default class ThreeRendererModifier extends Modifier<ThreeRendererModifie
       preserveDrawingBuffer: true, // use this to allow creation of image from canvas
     });
     this.renderer.setPixelRatio(window.devicePixelRatio);
-    this.renderer.setSize(
-      // for parent sizing set size to 1x1 & let the renderFrame adapt the size accordingly later...
-      this.namedArgs.parentSize ? 1 : 1024,
-      this.namedArgs.parentSize ? 1 : 768,
-    );
+    // set size to 1x1 & let the renderFrame adapt the size accordingly later...
+    this.renderer.setSize(1, 1);
     this.renderer.setClearColor(0xffffff, 1);
   }
 
@@ -182,9 +178,7 @@ export default class ThreeRendererModifier extends Modifier<ThreeRendererModifie
 
     this.animationFrameRequestID = requestAnimationFrame(() => this.renderFrame());
 
-    const { offsetWidth: width, offsetHeight: height } = this.namedArgs.parentSize
-      ? this.canvas?.parentElement ?? this.canvas
-      : this.canvas;
+    const { offsetWidth: width, offsetHeight: height } = this.canvas?.parentElement ?? this.canvas;
 
     if (this.rendererSize.width !== width || this.rendererSize.height !== height) {
       this.renderer.setSize(width, height);
@@ -201,12 +195,8 @@ export default class ThreeRendererModifier extends Modifier<ThreeRendererModifie
     this.renderer.render(this.scene, this.camera);
   }
 
-  modify(
-    element: HTMLCanvasElement,
-    [mesh]: [THREE.Mesh | undefined],
-    { parentSize, nearCamera }: namedArgs,
-  ) {
-    this.namedArgs = { parentSize, nearCamera };
+  modify(element: HTMLCanvasElement, [mesh]: [THREE.Mesh | undefined], { nearCamera }: namedArgs) {
+    this.namedArgs = { nearCamera };
 
     if (!this.canvas) {
       this.canvas = element;

app/templates/app/generator.hbs

@@ -75,7 +75,7 @@
 </calcite-shell-panel>
 
 <calcite-panel>
-  <ThreePreview @mesh={{this.mesh.value}} @parentSize={{true}} @nearCamera={{true}} as |preview|>
+  <ThreePreview @mesh={{this.mesh.value}} @nearCamera={{true}} as |preview|>
 
     <div id='three-preview-container'>
       <preview.renderer />

tests/integration/components/three-preview/renderer-test.ts

@@ -1,35 +1,22 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
+import { find, render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { Mesh, BoxGeometry } from 'three';
 
 module('Integration | Component | three-preview/renderer', function (hooks) {
   setupRenderingTest(hooks);
 
-  for (const { parentSize, title } of [
-    { parentSize: true, title: 'with parentSize true' },
-    { parentSize: false, title: 'with parentSize false' },
-  ]) {
-    test(`it handle parentSize attribute [${title}]`, async function (assert) {
-      this.set('parentSize', parentSize);
-      this.set('mesh', new Mesh(new BoxGeometry(12.12, 34.07, 56.42)));
+  test(`it render canvas at parent size`, async function (assert) {
+    this.set('mesh', new Mesh(new BoxGeometry(12.12, 34.07, 56.42)));
 
-      await render(hbs`<div style="width: 200px; height: 100px" data-test-renderer>
-        <ThreePreview::Renderer @mesh={{this.mesh}} @parentSize={{this.parentSize}} />
-      </div>`);
+    await render(hbs`<div style="width: 200px; height: 100px" data-test-renderer>
+      <ThreePreview::Renderer @mesh={{this.mesh}} @parentSize={{this.parentSize}} />
+    </div>`);
 
-      if (parentSize) {
-        assert
-          .dom('[data-test-renderer] canvas')
-          .hasAttribute('width', '200', 'Canvas width is adapted to parent size')
-          .hasAttribute('height', '100', 'Canvas height is adapted to parent size');
-      } else {
-        assert
-          .dom('[data-test-renderer] canvas')
-          .hasAttribute('width', '1024', 'Canvas width is 1024')
-          .hasAttribute('height', '768', 'Canvas height is 768');
-      }
-    });
-  }
+    const canvas = find('[data-test-renderer] canvas') as HTMLCanvasElement;
+
+    assert.strictEqual(canvas.offsetWidth, 200, 'Canvas width is adapted to parent size');
+    assert.strictEqual(canvas.offsetHeight, 100, 'Canvas height is adapted to parent size');
+  });
 });