incr: add display scale shortcuts

- focus and clear name if doc is new

src/components/ShortcutsHelper.vue

@@ -165,6 +165,14 @@ export default defineComponent({
             shortcut: [this.ctrl, 'E'],
             description: t`Toggle Edit Mode`,
           },
+          {
+            shortcut: [this.ctrl, '+'],
+            description: t`Increase print template display scale`,
+          },
+          {
+            shortcut: [this.ctrl, '-'],
+            description: t`Decrease print template display scale`,
+          },
         ],
       },
     ];

src/pages/CommonForm/CommonFormSection.vue

@@ -44,6 +44,7 @@ import { DocValue } from 'fyo/core/types';
 import { Doc } from 'fyo/model/doc';
 import { Field } from 'schemas/types';
 import FormControl from 'src/components/Controls/FormControl.vue';
+import { clearAndFocusFormControl } from 'src/utils/ui';
 import { defineComponent, PropType } from 'vue';
 
 export default defineComponent({
@@ -61,26 +62,7 @@ export default defineComponent({
     };
   },
   mounted() {
-    this.focusOnNameField();
-  },
-  methods: {
-    focusOnNameField() {
-      const naming = this.fyo.schemaMap[this.doc.schemaName]?.naming;
-      if (naming !== 'manual' || this.doc.inserted) {
-        return;
-      }
-
-      const nameField = (
-        this.$refs.nameField as { focus: Function; clear: Function }[]
-      )?.[0];
-
-      if (!nameField) {
-        return;
-      }
-
-      nameField.clear();
-      nameField.focus();
-    },
+    clearAndFocusFormControl(this.doc, this.$refs.nameField);
   },
   components: { FormControl },
 });

src/pages/TemplateBuilder/TemplateBuilder.vue

@@ -103,7 +103,7 @@
               @input="setScale"
               min="0.1"
               max="10"
-              step="0.05"
+              step="0.1"
             />
           </div>
         </div>
@@ -125,13 +125,14 @@
       >
         <!-- Template Name -->
         <FormControl
+          ref="nameField"
           class="w-full border-b flex-shrink-0"
           size="small"
           :input-class="['font-semibold text-xl text-center']"
           :container-styles="{ 'border-radius': '0px', padding: '0.5rem' }"
           :df="fields.name"
           :border="false"
-          :value="doc.get('name')"
+          :value="doc.name"
           :read-only="doc.inserted"
           @change="async (value) => await doc?.set('name', value)"
         />
@@ -206,6 +207,7 @@ import {
 import { docsPathRef, focusedDocsRef, showSidebar } from 'src/utils/refs';
 import { PrintValues } from 'src/utils/types';
 import {
+  clearAndFocusFormControl,
   getActionsForDoc,
   getDocFromNameIfExistsElseNew,
   openSettings,
@@ -243,7 +245,7 @@ export default defineComponent({
       hints: undefined,
       values: null,
       displayDoc: null,
-      scale: 0.65,
+      scale: 0.6,
       panelWidth: 22 /** rem */ * 16 /** px */,
     } as {
       editMode: boolean;
@@ -259,6 +261,7 @@ export default defineComponent({
   },
   async mounted() {
     await this.setDoc();
+    clearAndFocusFormControl(this.doc as Doc, this.$refs.nameField);
     focusedDocsRef.add(this.doc);
 
     if (this.doc?.template == null) {
@@ -278,6 +281,8 @@ export default defineComponent({
     docsPathRef.value = docsPathMap.PrintTemplate ?? '';
     this.shortcuts.ctrl.set(['Enter'], this.setTemplate);
     this.shortcuts.ctrl.set(['KeyE'], this.toggleEditMode);
+    this.shortcuts.ctrl.set(['Equal'], () => this.setScale(this.scale + 0.1));
+    this.shortcuts.ctrl.set(['Minus'], () => this.setScale(this.scale - 0.1));
   },
   deactivated(): void {
     docsPathRef.value = '';
@@ -286,6 +291,8 @@ export default defineComponent({
     }
     this.shortcuts.ctrl.delete(['Enter']);
     this.shortcuts.ctrl.delete(['KeyE']);
+    this.shortcuts.ctrl.delete(['Equal']);
+    this.shortcuts.ctrl.delete(['Minus']);
   },
   methods: {
     getTemplateEditorState() {
@@ -307,13 +314,15 @@ export default defineComponent({
       value ??= this.getTemplateEditorState();
       await this.doc?.set('template', value);
     },
-    setScale({ target }: Event) {
-      if (!(target instanceof HTMLInputElement)) {
-        return;
+    setScale(e: Event | number) {
+      let value = this.scale;
+      if (typeof e === 'number') {
+        value = Number(e.toFixed(2));
+      } else if (e instanceof Event && e.target instanceof HTMLInputElement) {
+        value = Number(e.target.value);
       }
 
-      const scale = Number(target.value);
-      this.scale = Math.max(Math.min(scale, 10), 0.15);
+      this.scale = Math.max(Math.min(value, 10), 0.15);
     },
     async toggleEditMode() {
       if (!this.doc?.isCustom) {

src/utils/ui.ts

@@ -476,3 +476,23 @@ export function toggleSidebar(value?: boolean) {
 
   showSidebar.value = value;
 }
+
+export function clearAndFocusFormControl(doc: Doc, ref: any) {
+  const naming = doc.fyo.schemaMap[doc.schemaName]?.naming;
+  if (naming !== 'manual' || doc.inserted) {
+    return;
+  }
+
+  if (Array.isArray(ref) && ref.length > 0) {
+    ref = ref[0];
+  }
+
+  doc.name = '';
+  if (typeof ref?.clear === 'function') {
+    ref.clear();
+  }
+
+  if (typeof ref?.focus === 'function') {
+    ref.focus();
+  }
+}