plop

app/app.js

@@ -3,6 +3,19 @@ import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
 import config from 'text2stl/config/environment';
 
+import '@esri/calcite-components/dist/components/calcite-button';
+import '@esri/calcite-components/dist/components/calcite-shell';
+import '@esri/calcite-components/dist/components/calcite-shell-panel';
+import '@esri/calcite-components/dist/components/calcite-action-bar';
+import '@esri/calcite-components/dist/components/calcite-block';
+import '@esri/calcite-components/dist/components/calcite-panel';
+import '@esri/calcite-components/dist/components/calcite-loader';
+import '@esri/calcite-components/dist/components/calcite-notice';
+import '@esri/calcite-components/dist/components/calcite-modal';
+import '@esri/calcite-components/dist/components/calcite-text-area';
+import '@esri/calcite-components/dist/components/calcite-label';
+import '@esri/calcite-components/dist/components/calcite-switch';
+
 export default class App extends Application {
   modulePrefix = config.modulePrefix;
   podModulePrefix = config.podModulePrefix;

app/components/save-modal.hbs

@@ -1,14 +1,26 @@
-<Ui::Modal @onHide={{@onHide}}>
-  <h2 class="uk-modal-title" for="current-url">
+<calcite-modal
+  aria-labelledby="modal-title"
+  resize="vertical"
+  open
+  {{on "calciteModalClose" @onHide}}
+>
+  <div slot="header" id="modal-title">
     {{t "save_modal.title"}}
-  </h2>
-  <p>
-    {{t "save_modal.info" currentUrl=@currentUrl htmlSafe=true}}
-  </p>
+  </div>
+  <div slot="content">
+    <p>
+      {{t "save_modal.info" currentUrl=@currentUrl htmlSafe=true}}
+    </p>
 
-  <Ui::TextArea {{on "click" this.selectAll}} rows="15" id="current-url" readonly @value={{@currentUrl}} />
-
-  <button class="uk-button uk-button-primary uk-align-center uk-modal-close" type="button">
+    <calcite-text-area
+      label={{t "save_modal.title"}}
+      {{on "click" this.selectAll}}
+      value={{@currentUrl}}
+      rows="10"
+      read-only
+    />
+  </div>
+  <calcite-button {{on "click" @onHide}} slot="primary" width="full">
     {{t "save_modal.close"}}
-  </button>
-</Ui::Modal>
+  </calcite-button>
+</calcite-modal>

app/components/settings-form.hbs

@@ -1,18 +1,16 @@
-<ul uk-tab animation='uk-animation-fade'>
-  {{#each this.tabs as |tab|}}
-    <li class={{if (eq this.activeTab tab) 'uk-active'}} data-tab-item={{tab}}>
-      <a href='#' {{on 'click' (fn (mut this.currentTab) tab)}}>
-        {{t (concat 'settings_form.tabs.' tab)}}
-      </a>
-    </li>
-  {{/each}}
-</ul>
-<div>
-  {{#if (eq this.activeTab 'settings')}}
-    <SettingsForm::Settings @model={{@model}} />
-  {{else if (eq this.activeTab 'font')}}
-    <SettingsForm::Font @model={{@model}} />
-  {{else if (eq this.activeTab 'advanced')}}
+<calcite-block collapsible open heading={{t 'settings_form.tabs.settings.heading'}} description={{t 'settings_form.tabs.settings.description'}}>
+  <calcite-icon scale="s" slot="icon" icon="sliders"></calcite-icon>
+  <SettingsForm::Settings @model={{@model}} />
+</calcite-block>
+
+<calcite-block collapsible heading={{t 'settings_form.tabs.font.heading'}} description={{t 'settings_form.tabs.font.description'}}>
+  <calcite-icon scale="s" slot="icon" icon="description"></calcite-icon>
+  <SettingsForm::Font @model={{@model}} />
+</calcite-block>
+
+{{#if this.showAdvancedSettings}}
+  <calcite-block collapsible heading={{t 'settings_form.tabs.advanced.heading'}} description={{t 'settings_form.tabs.advanced.description'}}>
+    <calcite-icon scale="s" slot="icon" icon="plus"></calcite-icon>
     <SettingsForm::AdvancedSettings @model={{@model}} />
-  {{/if}}
-</div>
+  </calcite-block>
+{{/if}}

app/components/settings-form.ts

@@ -1,29 +1,12 @@
 import Component from '@glimmer/component';
 import TextMakerSettings from 'text2stl/models/text-maker-settings';
 import { ModelType } from 'text2stl/services/text-maker';
-import { tracked } from '@glimmer/tracking';
 
 interface SettingsFormTextSettingsArgs {
   model: TextMakerSettings;
 }
 
-type Tab = 'settings' | 'font' | 'advanced';
-
 export default class SettingsFormSettings extends Component<SettingsFormTextSettingsArgs> {
-  @tracked currentTab: Tab = 'settings';
-
-  get activeTab() {
-    return !this.showAdvancedSettings && this.currentTab === 'advanced'
-      ? 'settings'
-      : this.currentTab;
-  }
-
-  get tabs(): Tab[] {
-    const tabs: Tab[] = ['settings', 'font'];
-
-    return this.showAdvancedSettings ? [...tabs, 'advanced'] : tabs;
-  }
-
   get showAdvancedSettings() {
     return this.args.model.type !== ModelType.TextOnly;
   }

app/components/three-preview.hbs

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

app/components/three-preview/renderer.hbs

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

app/components/three-preview/size.hbs

@@ -1,9 +1,7 @@
 {{#if this.meshSize}}
-  <p ...attributes>
-    {{t "three_preview.size"
-      x=(float-to-fixed this.meshSize.x 1)
-      y=(float-to-fixed this.meshSize.y 1)
-      z=(float-to-fixed this.meshSize.z 1)
-    }}     
-  </p>
+  {{t "three_preview.size"
+    x=(float-to-fixed this.meshSize.x 1)
+    y=(float-to-fixed this.meshSize.y 1)
+    z=(float-to-fixed this.meshSize.z 1)
+  }}
 {{/if}}

app/index.html

@@ -12,7 +12,7 @@
         <link integrity="" rel="stylesheet" href="{{rootURL}}assets/text2stl.css">
         {{content-for "head-footer"}}
     </head>
-    <body>
+    <body class="calcite-mode-auto">
         {{content-for "loader"}}
         {{content-for "body"}}
         <script src="{{rootURL}}assets/vendor.js"></script>

app/initializers/calcite-components.ts

@@ -0,0 +1,16 @@
+import { setAssetPath } from '@esri/calcite-components/dist/components';
+
+import config from 'text2stl/config/environment';
+const { rootURL, environment } = config;
+
+setAssetPath(
+  environment === 'development'
+    ? `${window.location.origin}${rootURL}assets/calcite/`
+    : `${rootURL}assets/calcite/`,
+);
+
+export function initialize(/* application */) {}
+
+export default {
+  initialize,
+};

app/modifiers/three-renderer.ts

@@ -25,9 +25,9 @@ interface ThreeRendererModifierSignature {
 }
 
 export default class ThreeRendererModifier extends Modifier<ThreeRendererModifierSignature> {
-  scene: THREE.Scene;
-  camera: THREE.PerspectiveCamera;
-  renderer: THREE.WebGLRenderer;
+  scene?: THREE.Scene;
+  camera?: THREE.PerspectiveCamera;
+  renderer?: THREE.WebGLRenderer;
   mesh?: THREE.Mesh;
 
   controls?: OrbitControls;
@@ -37,14 +37,19 @@ export default class ThreeRendererModifier extends Modifier<ThreeRendererModifie
 
   rendererSize: { width: number; height: number } = { width: 0, height: 0 };
 
-  container?: HTMLDivElement;
+  canvas?: HTMLCanvasElement;
   namedArgs: namedArgs;
   animationFrameRequestID?: number;
 
   constructor(owner: Owner, args: ArgsFor<ThreeRendererModifierSignature>) {
     super(owner, args);
 
     this.namedArgs = args.named;
+
+    registerDestructor(this, this.cleanup);
+  }
+
+  private initPreview() {
     this.scene = new THREE.Scene();
     this.scene.background = new THREE.Color(threePreviewSettings.backgroundColor);
 
@@ -69,17 +74,17 @@ export default class ThreeRendererModifier extends Modifier<ThreeRendererModifie
 
     // WebGL renderer
     this.renderer = new THREE.WebGLRenderer({
+      canvas: this.canvas,
       antialias: true,
       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,
     );
     this.renderer.setClearColor(0xffffff, 1);
-
-    registerDestructor(this, this.cleanup);
   }
 
   @action
@@ -88,16 +93,24 @@ export default class ThreeRendererModifier extends Modifier<ThreeRendererModifie
       cancelAnimationFrame(this.animationFrameRequestID);
     }
 
-    this.container = undefined;
+    this.canvas = undefined;
   }
 
   private addLight(x: number, y: number, z: number) {
+    if (!this.scene) {
+      return;
+    }
+
     const l = new THREE.PointLight(0xffffff, 0.7, 0);
     l.position.set(x, y, z);
     this.scene.add(l);
   }
 
   private addDecorators() {
+    if (!this.scene) {
+      return;
+    }
+
     const ground = new THREE.Mesh(
       new THREE.PlaneGeometry(2000, 2000),
       new THREE.MeshPhongMaterial({ color: threePreviewSettings.groundColor, depthWrite: false }),
@@ -115,13 +128,11 @@ export default class ThreeRendererModifier extends Modifier<ThreeRendererModifie
     this.scene.add(grid);
   }
 
-  private initContainer() {
-    if (!this.container) {
+  private initControl() {
+    if (!this.camera || !this.renderer) {
       return;
     }
 
-    this.container.appendChild(this.renderer.domElement);
-
     this.controls = new OrbitControls(this.camera, this.renderer.domElement);
 
     this.controls.maxPolarAngle = Math.PI * 1;
@@ -161,15 +172,15 @@ export default class ThreeRendererModifier extends Modifier<ThreeRendererModifie
   }
 
   private renderFrame() {
-    if (!this.container) {
+    if (!this.canvas || !this.camera || !this.renderer || !this.scene) {
       return;
     }
 
     this.animationFrameRequestID = requestAnimationFrame(() => this.renderFrame());
 
     const { offsetWidth: width, offsetHeight: height } = this.namedArgs.parentSize
-      ? this.container?.parentElement ?? this.container
-      : this.container;
+      ? this.canvas?.parentElement ?? this.canvas
+      : this.canvas;
 
     if (this.rendererSize.width !== width || this.rendererSize.height !== height) {
       this.renderer.setSize(width, height);
@@ -187,15 +198,16 @@ export default class ThreeRendererModifier extends Modifier<ThreeRendererModifie
   }
 
   modify(
-    element: HTMLDivElement,
+    element: HTMLCanvasElement,
     [mesh]: [THREE.Mesh | undefined],
     { parentSize, nearCamera }: namedArgs,
   ) {
     this.namedArgs = { parentSize, nearCamera };
 
-    if (!this.container) {
-      this.container = element;
-      this.initContainer();
+    if (!this.canvas) {
+      this.canvas = element;
+      this.initPreview();
+      this.initControl();
       this.renderFrame();
     }
 

app/styles/app.scss

@@ -101,3 +101,35 @@
     }
   }
 }
+
+
+
+// CALCITE
+#header-title {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+#header {
+  display: flex;
+  padding: 0 1rem;
+  background-color: var(--calcite-ui-foreground-1);
+}
+
+#header-controls {
+  display: flex;
+  margin-inline-start: auto;
+  align-self: center;
+}
+
+.label-wrapper {
+  display: flex;
+  margin-inline: 1rem;
+  padding: 0.5rem;
+  border: 1px solid var(--calcite-ui-border-1);
+  cursor: pointer;
+}
+
+calcite-switch {
+  margin: 0 0.5rem;
+}