Merge pull request #150 from sbrin/develop

Hotfix 0.46

src/components/App.vue

@@ -38,16 +38,15 @@ const flipperPreviewBtnText = computed(() => (flipper.value ? 'Disconnect' : 'Li
 const showCopyCode = computed(() => updates.value && session.state.layers.length > 0);
 
 const flipper: ShallowRef<FlipperRPC> = ref(null);
-let isChanged = ref(false);
 
 watch(
     updates,
     debounce(() => {
         if (flipper.value) {
             sendFlipperImage();
         }
-        isChanged.value = true;
-    }, 500)
+        saveLayers();
+    }, 1000)
 );
 
 // methods
@@ -133,12 +132,6 @@ function sendFlipperImage() {
     flipper.value.sendImage(virtualScreen.canvasContext.getImageData(0, 0, 128, 64));
 }
 
-function saveChanges() {
-    saveLayers();
-    isChanged.value = false;
-    logEvent('button_save');
-}
-
 onMounted(() => {
     postParentMessage('mounted', {});
 });
@@ -184,13 +177,6 @@ navigator.serial?.addEventListener('disconnect', flipperDisconnect);
                 >
                     {{ flipperPreviewBtnText }}
                 </FuiButton>
-                <FuiButton
-                    v-if="!session.state.isPublic && isChanged"
-                    @click="saveChanges"
-                    title="Save changes for selected library"
-                >
-                    Save
-                </FuiButton>
             </div>
             <FuiTools v-if="!session.state.isPublic"></FuiTools>
         </div>
@@ -251,13 +237,13 @@ navigator.serial?.addEventListener('disconnect', flipperDisconnect);
 
     display: grid;
     grid-template-columns: 180px 4fr 240px;
-    grid-template-rows: auto auto auto;
+    grid-template-rows: 80px auto 450px;
     grid-column-gap: 16px;
     grid-row-gap: 8px;
 }
 
 .fui-editor__left {
-    grid-area: 1 / 1 / 6 / 2;
+    grid-area: 1 / 1 / 5 / 2;
 }
 .fui-editor__top {
     grid-area: 1 / 2 / 2 / 4;
@@ -283,7 +269,7 @@ navigator.serial?.addEventListener('disconnect', flipperDisconnect);
     flex-shrink: 0;
     overflow: auto;
     display: flex;
-    padding: 0px 20px 20px 0;
+    padding: 10px 20px 20px 20px;
     margin: 0 auto;
 }
 

src/components/fui/FuiCanvas.vue

@@ -11,6 +11,7 @@ const session = useSession();
 const {editor, virtualScreen, state} = session;
 const {display, scale, lock} = toRefs(state);
 const {activeTool} = toRefs(editor.state);
+
 onMounted(() => {
     virtualScreen.setCanvas(screen.value);
     editor.setContainer(container.value as HTMLElement);

src/components/fui/FuiCode.vue

@@ -25,7 +25,7 @@ const hovered = ref(false);
 
 watch(
     [updates, layers],
-    debounce(() => onUpdate(), 250)
+    debounce(() => onUpdate(), 500)
 );
 
 watch(
@@ -47,9 +47,6 @@ function selectRow() {
     }
 }
 function onUpdate() {
-    if (hovered.value) {
-        return;
-    }
     const sourceCode = session.generateCode();
     content.value = sourceCode.code;
     layersMap = sourceCode.map;

src/components/fui/FuiLayers.vue

@@ -67,4 +67,13 @@ function getLayerListItem(layer: UnwrapRef<AbstractLayer>) {
         </VueDraggable>
     </div>
 </template>
-<style lang="css"></style>
+<style lang="css" scoped>
+
+.layers__list {
+    font-size: 24px;
+    overflow: hidden;
+    margin: 0 16px 16px 0;
+    padding: 0 0 8px 0;
+    overflow-y: auto;
+}
+</style>

src/editor/editor.ts

@@ -113,7 +113,7 @@ export class Editor {
             if (this.session.state.isPublic) {
                 return;
             }
-            if (event.target === document.body && Object.values(Keys).indexOf(event.code as Keys) != -1) {
+            if (Object.values(Keys).indexOf(event.code as Keys) != -1) {
                 event.preventDefault();
                 this.onKeyDown(Keys[event.code], event);
             }

styles.css

@@ -34,11 +34,6 @@ body {
 }
 
 
-
-.fui-editor__left {
-    /* width: 178px; */
-}
-
 #lopaka_app {
     display: flex;
 }
@@ -69,15 +64,6 @@ body {
     margin: 0 8px 8px 0;
 }
 
-.layers__list {
-    font-size: 24px;
-    overflow: hidden;
-    margin: 0 16px 16px 0;
-    padding: 0;
-    max-height: 100vh;
-    overflow-y: auto;
-}
-
 .layer {
     display: flex;
     align-items: center;