diff --git a/src/components/App.vue b/src/components/App.vue index 6a716a8..633af6b 100644 --- a/src/components/App.vue +++ b/src/components/App.vue @@ -38,7 +38,6 @@ const flipperPreviewBtnText = computed(() => (flipper.value ? 'Disconnect' : 'Li const showCopyCode = computed(() => updates.value && session.state.layers.length > 0); const flipper: ShallowRef = ref(null); -let isChanged = ref(false); watch( updates, @@ -46,8 +45,8 @@ watch( 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 }} - - Save - @@ -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; } diff --git a/src/components/fui/FuiCanvas.vue b/src/components/fui/FuiCanvas.vue index 1973ffc..d845ea2 100644 --- a/src/components/fui/FuiCanvas.vue +++ b/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); diff --git a/src/components/fui/FuiCode.vue b/src/components/fui/FuiCode.vue index 2339620..8cd23d6 100644 --- a/src/components/fui/FuiCode.vue +++ b/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; diff --git a/src/components/fui/FuiLayers.vue b/src/components/fui/FuiLayers.vue index 57ff96a..39b478a 100644 --- a/src/components/fui/FuiLayers.vue +++ b/src/components/fui/FuiLayers.vue @@ -67,4 +67,13 @@ function getLayerListItem(layer: UnwrapRef) { - + diff --git a/src/editor/editor.ts b/src/editor/editor.ts index bfe2f49..11e8f8a 100644 --- a/src/editor/editor.ts +++ b/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); } diff --git a/styles.css b/styles.css index f98414f..394b170 100644 --- a/styles.css +++ b/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;