Merge pull request #118 from sbrin/develop

release v0.4
sbrin · Feb 25, 2024 · 3e5f940 · 3e5f940
2 parents f67ebbb + c7a2070
commit 3e5f940
Show file tree

Hide file tree

Showing 190 changed files with 1,665,864 additions and 1,345 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -1,5 +1,5 @@
 # First stage: Node image to build the project
-FROM node:14 as build-stage
+FROM node:18 as build-stage
 
 # Set the working directory
 WORKDIR /app

diff --git a/flower.svg b/flower.svg
diff --git a/flower.vectornator b/flower.vectornator
diff --git a/font-preview.html b/font-preview.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Font preview</title>
+ </head>
+
+ <body>
+ <script type="module" src="/src/font-preview/index.ts"></script>
+ </body>
+</html>
diff --git a/img/gaai/arrow_curved_left_down_up_5x7.png → img/gaai/arrow_curved_left_down_up_7x5.png b/img/gaai/arrow_curved_left_down_up_5x7.png → img/gaai/arrow_curved_left_down_up_7x5.png
diff --git a/img/gaai/arrow_diagonal_left_down_5x5.png b/img/gaai/arrow_diagonal_left_down_5x5.png
diff --git a/img/gaai/arrow_diagonal_left_up_5x5.png b/img/gaai/arrow_diagonal_left_up_5x5.png
diff --git a/img/gaai/arrow_diagonal_right_down_5x5.png b/img/gaai/arrow_diagonal_right_down_5x5.png
diff --git a/img/gaai/arrow_diagonal_right_up_5x5.png b/img/gaai/arrow_diagonal_right_up_5x5.png
diff --git a/img/gaai/arrow_down_5x7.png b/img/gaai/arrow_down_5x7.png
diff --git a/img/gaai/arrow_left_7x5.png b/img/gaai/arrow_left_7x5.png
diff --git a/img/gaai/arrow_right_7x5.png b/img/gaai/arrow_right_7x5.png
diff --git a/img/gaai/arrow_up_5x7.png b/img/gaai/arrow_up_5x7.png
diff --git a/img/gaai/calculator_12x16.png b/img/gaai/calculator_12x16.png
diff --git a/img/gaai/car_19x16.png b/img/gaai/car_19x16.png
diff --git a/img/gaai/car_20x16.png b/img/gaai/car_20x16.png
diff --git a/img/gaai/cards_clubs_15x16.png b/img/gaai/cards_clubs_15x16.png
diff --git a/img/gaai/cards_diamonds_15x16.png b/img/gaai/cards_diamonds_15x16.png
diff --git a/img/gaai/cards_hearts_15x16.png b/img/gaai/cards_hearts_15x16.png
diff --git a/img/gaai/cards_spades_15x16.png b/img/gaai/cards_spades_15x16.png
diff --git a/img/gaai/chart_14x16.png b/img/gaai/chart_14x16.png
diff --git a/img/gaai/check_contour_13x16.png b/img/gaai/check_contour_13x16.png
diff --git a/img/gaai/cross_11x16.png b/img/gaai/cross_11x16.png
diff --git a/img/gaai/cross_9x16.png b/img/gaai/cross_9x16.png
diff --git a/img/gaai/cross_contour_11x16.png b/img/gaai/cross_contour_11x16.png
diff --git a/img/gaai/cross_small_10x16.png b/img/gaai/cross_small_10x16.png
diff --git a/img/gaai/crossed_13x16.png b/img/gaai/crossed_13x16.png
diff --git a/img/gaai/crossed_15x16.png b/img/gaai/crossed_15x16.png
diff --git a/img/gaai/crosshairs_11x16.png b/img/gaai/crosshairs_11x16.png
diff --git a/img/gaai/crosshairs_15x16.png b/img/gaai/crosshairs_15x16.png
diff --git a/img/gaai/cursor_10x16.png b/img/gaai/cursor_10x16.png
diff --git a/img/gaai/cursor_black_7x16.png b/img/gaai/cursor_black_7x16.png
diff --git a/img/gaai/cursor_black_white_11x16.png b/img/gaai/cursor_black_white_11x16.png
diff --git a/img/gaai/device_key_retro_15x16.png b/img/gaai/device_key_retro_15x16.png
diff --git a/img/gaai/door_12x16.png → img/gaai/door_open_12x16.png b/img/gaai/door_12x16.png → img/gaai/door_open_12x16.png
diff --git a/img/gaai/file_edit_16x16.png b/img/gaai/file_edit_16x16.png
diff --git a/img/gaai/file_film_dia_15x16.png b/img/gaai/file_film_dia_15x16.png
diff --git a/img/gaai/file_movie_16x16.png b/img/gaai/file_movie_16x16.png
diff --git a/img/gaai/file_print_16x16.png b/img/gaai/file_print_16x16.png
diff --git a/img/gaai/file_search_big.png → img/gaai/file_search_15x16.png b/img/gaai/file_search_big.png → img/gaai/file_search_15x16.png
diff --git a/img/gaai/file_share_14x16.png b/img/gaai/file_share_14x16.png
diff --git a/img/gaai/flower_16x16.png b/img/gaai/flower_16x16.png
diff --git a/img/gaai/folder_file_18x16.png b/img/gaai/folder_file_18x16.png
diff --git a/img/gaai/hand_high_five_17x16.png b/img/gaai/hand_high_five_17x16.png
diff --git a/img/gaai/hand_notice_11x16.png b/img/gaai/hand_notice_11x16.png
diff --git a/img/gaai/hand_peace_sign_11x16.png b/img/gaai/hand_peace_sign_11x16.png
diff --git a/img/gaai/hand_pointer_12x16.png b/img/gaai/hand_pointer_12x16.png
diff --git a/img/gaai/hand_stop_13x16.png b/img/gaai/hand_stop_13x16.png
diff --git a/img/gaai/hand_thumbs_down_16x16.png b/img/gaai/hand_thumbs_down_16x16.png
diff --git a/img/gaai/hand_thumbs_up_16x16.png b/img/gaai/hand_thumbs_up_16x16.png
diff --git a/img/gaai/hart_15x16.png → img/gaai/heart_15x16.png b/img/gaai/hart_15x16.png → img/gaai/heart_15x16.png
diff --git a/img/gaai/hour_glass_75_11x16.png b/img/gaai/hour_glass_75_11x16.png
diff --git a/img/gaai/lamp_off_13x16.png b/img/gaai/lamp_off_13x16.png
diff --git a/img/gaai/lamp_on_13x16.png b/img/gaai/lamp_on_13x16.png
diff --git a/img/gaai/menu_options_14x16.png b/img/gaai/menu_options_14x16.png
diff --git a/img/gaai/message_mail_open_17x16.png b/img/gaai/message_mail_open_17x16.png
diff --git a/img/gaai/message_memo_recorder_12x16.png b/img/gaai/message_memo_recorder_12x16.png
diff --git a/img/gaai/message_voice_recorder_12x16.png b/img/gaai/message_voice_recorder_12x16.png
diff --git a/img/gaai/monitor_16x16.png b/img/gaai/monitor_16x16.png
diff --git a/img/gaai/network_www_16x16.png b/img/gaai/network_www_16x16.png
diff --git a/img/gaai/phone_book_open_tall_17x16.png → img/gaai/phone_book_open_17x16.png b/img/gaai/phone_book_open_tall_17x16.png → img/gaai/phone_book_open_17x16.png
diff --git a/img/gaai/phone_contacts_13x16.png b/img/gaai/phone_contacts_13x16.png
diff --git a/img/gaai/phone_contacts_14x16.png b/img/gaai/phone_contacts_14x16.png
diff --git a/img/gaai/phone_hook_20x16.png b/img/gaai/phone_hook_20x16.png
diff --git a/img/gaai/phone_on_hook_21x16.png b/img/gaai/phone_on_hook_21x16.png
diff --git a/img/gaai/phone_retro_21x16.png b/img/gaai/phone_retro_21x16.png
diff --git a/img/gaai/plane_16x16.png b/img/gaai/plane_16x16.png
diff --git a/img/gaai/plant_16x16.png b/img/gaai/plant_16x16.png
diff --git a/img/gaai/satellite_dish_15x16.png b/img/gaai/satellite_dish_15x16.png
diff --git a/img/gaai/smartphone_9x16.png b/img/gaai/smartphone_9x16.png
diff --git a/img/gaai/stats_14x16.png b/img/gaai/stats_14x16.png
diff --git a/img/gaai/toilets_gentlemen_7x16.png b/img/gaai/toilets_gentlemen_7x16.png
diff --git a/img/gaai/toilets_ladies_9x16.png b/img/gaai/toilets_ladies_9x16.png
diff --git a/img/gaai/tree_16x16.png b/img/gaai/tree_16x16.png
diff --git a/img/gaai/usb_cable_connected_16x16.png b/img/gaai/usb_cable_connected_16x16.png
diff --git a/img/gaai/weather_umbrella_15x16.png b/img/gaai/weather_umbrella_15x16.png
diff --git a/img/gaai/weather_windsock_13x16.png b/img/gaai/weather_windsock_13x16.png
diff --git a/img/gaai/zoom_in_15x16.png b/img/gaai/zoom_in_15x16.png
diff --git a/img/gaai/zoom_out_15x16.png b/img/gaai/zoom_out_15x16.png
diff --git a/package.json b/package.json
@@ -39,14 +39,19 @@
  "@vue/test-utils": "^2.4.1",
  "jsdom": "^22.1.0",
  "prettier": "^3.0.3",
+ "probe-image-size": "^7.2.3",
  "vite": "^4.4.9",
  "vitest": "^0.34.5"
  },
  "dependencies": {
  "@types/dom-serial": "^1.0.4",
+ "ace-builds": "^1.32.6",
  "base64-arraybuffer": "^1.0.2",
  "pako": "^2.1.0",
+ "pug": "^3.0.2",
  "typescript": "^5.2.2",
- "vue": "^3.3.4"
+ "vue": "^3.3.4",
+ "vue3-ace-editor": "^2.2.4",
+ "vuedraggable": "^4.1.0"
  }
 }
diff --git a/src/components/App.vue b/src/components/App.vue
@@ -18,6 +18,7 @@ import FuiSelectPlatform from './fui/FuiSelectPlatform.vue';
 import FuiSelectScale from './fui/FuiSelectScale.vue';
 import FuiTabs from './fui/FuiTabs.vue';
 import FuiTools from './fui/FuiTools.vue';
+import FuiEditorSettings from './fui/FuiCodeSettings.vue';
 
 let fuiImages = {},
  imageDataCache = {};
@@ -66,7 +67,7 @@ function resetScreen() {
 }
 
 function copyCode() {
- navigator.clipboard.writeText(session.generateCode());
+ navigator.clipboard.writeText(session.generateCode().code);
  logEvent('button_copy');
 }
 
@@ -149,6 +150,7 @@ window.addEventListener('message', async (event) => {
  // TODO loading project
  // move to session and provider
  session.unlock();
+ session.setIsPublic(!!event.data.payload.isPublic);
  await session.setPlatform(event.data.payload.library);
  const displayArr = event.data.payload.display.split('×').map((n) => parseInt(n));
  session.setDisplay(new Point(displayArr[0], displayArr[1]));
@@ -164,10 +166,12 @@ navigator.serial?.addEventListener('disconnect', flipperDisconnect);
  <div class="fui-editor">
  <div class="fui-editor__left">
  <FuiLayers v-show="!isEmpty">
- <FuiButton v-if="!session.state.isPublic" @click="resetScreen" small danger v-show="!isEmpty">clear</FuiButton>
+ <FuiButton v-if="!session.state.isPublic" @click="resetScreen" small danger v-show="!isEmpty">
+ clear
+ </FuiButton>
  </FuiLayers>
  </div>
- <div class="fui-editor__center">
+ <div class="fui-editor__top">
  <div class="fui-editor-header">
  <FuiSelectPlatform></FuiSelectPlatform>
  <FuiSelectDisplay></FuiSelectDisplay>
@@ -183,11 +187,22 @@ navigator.serial?.addEventListener('disconnect', flipperDisconnect);
  v-if="!session.state.isPublic && isChanged"
  @click="saveChanges"
  title="Save changes for selected library"
- >Save</FuiButton>
+ >
+ Save
+ </FuiButton>
  </div>
  <FuiTools v-if="!session.state.isPublic"></FuiTools>
- <FuiCanvas ref="fuiCanvas" />
- <div class="fui-editor__tools">
+ </div>
+ <div class="fui-editor__main">
+ <div class="fui-editor__canvas">
+ <FuiCanvas ref="fuiCanvas" />
+ </div>
+ </div> 
+ <div class="fui-editor__main-right">
+ <FuiInspector />
+ </div>
+ <div class="fui-editor__bottom">
+ <div class="fui-editor__tabs">
  <div v-if="!session.state.isPublic" class="fui-editor-header">
  <FuiTabs :active-tab="activeTab" @set-active-tab="setactiveTab"></FuiTabs>
  </div>
@@ -202,17 +217,66 @@ navigator.serial?.addEventListener('disconnect', flipperDisconnect);
  ></FuiIcons>
  <FuiCode v-show="activeTab === 'code'"></FuiCode>
  <div class="buttons-bottom">
- <FuiFile v-if="!session.state.isPublic" type="file" title="import image" @set-active-tab="setactiveTab"></FuiFile>
+ <FuiFile
+ v-if="!session.state.isPublic"
+ type="file"
+ title="import image"
+ @set-active-tab="setactiveTab"
+ ></FuiFile>
  <FuiButton @click="copyCode" v-show="showCopyCode">copy code</FuiButton>
  </div>
  </div>
  </div>
- <div class="fui-editor__right">
- <FuiInspector />
+ <div class="fui-editor__bottom-right">
+ <FuiEditorSettings />
  </div>
  </div>
 </template>
 <style lang="css">
+.fui-editor {
+ background: var(--bg-color);
+ margin: 0 auto;
+ padding: 0 calc((100vw - 1280px) / 4);
+ position: relative;
+ box-sizing: border-box;
+
+ display: grid;
+ grid-template-columns: 180px 4fr 240px;
+ grid-template-rows: auto auto auto; 
+ grid-column-gap: 16px;
+ grid-row-gap: 16px;
+}
+
+.fui-editor__left { grid-area: 1 / 1 / 6 / 2; }
+.fui-editor__top { grid-area: 1 / 2 / 2 / 4; }
+.fui-editor__main { 
+ width: 800px;
+ grid-area: 2 / 2 / 3 / 3;
+ min-height: 400px;
+}
+.fui-editor__main-right { grid-area: 2 / 3 / 3 / 4; }
+.fui-editor__bottom { 
+ grid-area: 3 / 2 / 4 / 3;
+ max-width: 800px;
+}
+.fui-editor__bottom-right { grid-area: 3 / 3 / 4 / 4; }
+
+.fui-editor__canvas {
+ max-height: 50vh;
+ flex-shrink: 0;
+ overflow: auto;
+ display: flex;
+ padding: 0px 20px 20px 0px;
+ margin: 0 auto;
+}
+
+.fui-editor__tabs {
+
+}
+
+.fui-editor__main {
+}
+
 body {
  visibility: visible !important;
 }

diff --git a/src/components/fui/FuiButton.vue b/src/components/fui/FuiButton.vue
@@ -5,23 +5,26 @@ const props = defineProps<{
  active?: boolean;
  small?: boolean;
  danger?: boolean;
+ isIcon?: boolean;
 }>();
 
 const classNames = computed(() => ({
  button_active: props.active,
  button_small: props.small,
  button_danger: props.danger,
+ button_icon: props.isIcon,
 }));
 
 </script>
 <template>
- <span class="button" :class="classNames">
+ <div class="button" :class="classNames">
  <slot></slot>
- </span>
+ </div>
 </template>
 <style lang="css">
 
 .button {
+ display: inline-block;
  background: var(--secondary-color);
  border: 2px solid var(--primary-color);
  border-radius: 6px;
@@ -54,11 +57,19 @@ const classNames = computed(() => ({
 
 a.button {
  text-decoration: none;
+ text-wrap: nowrap;
 }
 
 .button_small {
  font-size: 20px;
  height: 24px;
+ line-height: 14px;
+}
+
+.button_icon {
+ padding: 3px 8px 4px 8px;
  line-height: 24px;
+ font-family: 'haxrcorp4089_tr', monospace;
+ font-size: 32px;
 }
 </style>
diff --git a/src/components/fui/FuiCanvas.vue b/src/components/fui/FuiCanvas.vue
@@ -2,6 +2,7 @@
 import {computed, onBeforeUnmount, onMounted, ref, toRefs} from 'vue';
 import {useSession} from '../../core/session';
 import {Platform} from '../../platforms/platform';
+import platforms from '../../core/platforms';
 
 const emit = defineEmits(['updateFuiImages']);
 const screen = ref(null);
@@ -43,7 +44,7 @@ const canvasClassNames = computed(() => {
 });
 </script>
 <template>
- <div class="canvas-wrapper" :class="{inverted: session.getPlatformFeatures().hasInvertedColors, locked: lock}">
+ <div class="canvas-wrapper" :class="{locked: lock}">
  <div class="fui-grid" :style="{backgroundSize: `${scale.x}px ${scale.y}px`}">
  <div
  ref="container"
@@ -63,20 +64,25 @@ const canvasClassNames = computed(() => {
  class="screen"
  :width="display.x"
  :height="display.y"
- :style="{width: display.x * scale.x + 'px', height: display.y * scale.y + 'px'}"
+ :style="{
+ width: display.x * scale.x + 'px',
+ height: display.y * scale.y + 'px',
+ backgroundColor: session.getPlatformFeatures().screenBgColor
+ }"
  />
  </div>
  </div>
  </div>
 </template>
 <style lang="css">
 .canvas-wrapper {
- border: 1px solid var(--secondary-color);
- margin: 16px 0;
+ border: 10px solid var(--bg-color);
+ margin: 0 auto;
  display: inline-block;
  font-size: 0;
  position: relative;
  background-color: white;
+ height: fit-content;
 }
 .fui-canvas__event-target {
  position: relative;
@@ -106,14 +112,12 @@ const canvasClassNames = computed(() => {
  -webkit-font-smoothing: none;
  opacity: 0.9;
 }
-.inverted .screen {
- background: #000;
-}
 .fui-grid {
  position: relative;
  background-size: 4px 4px;
  background-image: linear-gradient(to right, var(--bg-color) 0.5px, transparent 1px),
  linear-gradient(to bottom, var(--bg-color) 0.5px, transparent 1px);
+ border: 1px solid var(--border-dark-color)
 }
 
 .fui-canvas_select {