feat: use keyboard to change

packages/design-core/src/DesignChart.vue

@@ -57,10 +57,11 @@ export default {
   methods: {
     init() {
       const canvas = this.$refs.canvas
+      const dialog = document.querySelector('#tiny-engine-chart')
       this.bpmnModeler = new BpmnModeler({
         container: canvas,
         keyboard: {
-          bindTo: window
+          bindTo: dialog
         }
       })
 

packages/toolbars/logo/src/Main.vue

@@ -98,13 +98,15 @@
 
     <tiny-dialog-box
       class="tiny-engine-chart"
+      id="tiny-engine-chart"
       v-model:visible="state.chart"
       append-to-body="true"
       width="100%"
       top="5vh"
       maxHeight="90vh"
+      tabindex="0"
     >
-      <design-chart />
+      <design-chart v-if="state.chart" />
     </tiny-dialog-box>
   </div>
 </template>