display default value in popup

public/assets/css/style.css

@@ -535,9 +535,15 @@ input[type=number] {
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
   z-index: 10;
   width: 860px;
-  max-height: 600px;
+  height: 600px;
+  min-width: 480px;
+  max-width: 75vw;
+  min-height: 250px;
+  max-height: 70vh;
   display: flex;
   flex-direction: column;
+  resize: both;
+  overflow: hidden;
 }
 
 .popup-header {
@@ -547,6 +553,12 @@ input[type=number] {
   padding: 0.75rem 1rem;
   border-bottom: 1px solid #e0e0e0;
   background: #f9f9f9;
+  cursor: grab;
+  user-select: none;
+}
+
+.popup-header:active {
+  cursor: grabbing;
 }
 
 .header-left {

src/components/ElementPopup.vue

@@ -21,6 +21,7 @@
         <input type="checkbox" class="toggle-setting" :checked="settingEnabled.font" @change="onToggleSetting('font', $event.target.checked)" />
         <div class="field field-font">
           <label class="label-with-tooltip" data-css="font-family">Police</label>
+          <p class="info-default">Valeur par défaut : {{ textDefaults.fontFamily === 'sans-serif' ? 'Police système (sans-serif)' : textDefaults.fontFamily }}</p>
           <div class="field-font__options">
             <select v-model="fontFamily">
               <option value="sans-serif">Police système (sans-serif)</option>
@@ -43,6 +44,7 @@
         <input type="checkbox" class="toggle-setting" :checked="settingEnabled.fontSize" @change="onToggleSetting('fontSize', $event.target.checked)" />
         <div class="field field-text-size">
           <label class="label-with-tooltip" data-css="font-size">Taille du texte</label>
+          <p class="info-default">Valeur par défaut : {{ textDefaults.fontSize.value }}{{ textDefaults.fontSize.unit }}</p>
           <InputWithUnit
             v-model="fontSizeModel"
             :units="['px']"
@@ -58,6 +60,7 @@
         <input type="checkbox" class="toggle-setting" :checked="settingEnabled.lineHeight" @change="onToggleSetting('lineHeight', $event.target.checked)" />
         <div class="field field-text-size">
           <label class="label-with-tooltip" data-css="line-height">Interlignage</label>
+          <p class="info-default">Valeur par défaut : {{ textDefaults.lineHeight.value }}{{ textDefaults.lineHeight.unit }}</p>
           <InputWithUnit
             v-model="lineHeightModel"
             :units="['px']"
@@ -87,6 +90,7 @@
         <input type="checkbox" class="toggle-setting" :checked="settingEnabled.color" @change="onToggleSetting('color', $event.target.checked)" />
         <div class="field field-simple">
           <label class="label-with-tooltip" data-css="color">Couleur du texte</label>
+          <p class="info-default">Valeur par défaut : {{ textDefaults.color }}</p>
           <div class="input-with-color">
             <input
               ref="colorInput"

src/components/ui/BasePopup.vue

@@ -4,7 +4,7 @@
     class="settings-popup"
     :style="{ top: position.y + 'px', left: position.x + 'px' }"
   >
-    <div class="popup-header">
+    <div class="popup-header" @mousedown="startDrag">
       <div class="header-left">
         <slot name="header-left" />
       </div>
@@ -82,7 +82,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, onBeforeUnmount } from 'vue';
 import { useStylesheetStore } from '../../stores/stylesheet';
 import { usePopupPosition } from '../../composables/usePopupPosition';
 import { initColoris } from '../../composables/useColoris';
@@ -111,6 +111,37 @@ const inheritanceLocked = ref(true);
 
 const { calculatePosition } = usePopupPosition(props.popupWidth, props.popupHeight);
 
+// Drag handling
+let dragOffset = { x: 0, y: 0 };
+
+const startDrag = (e) => {
+  // Don't drag when clicking the close button
+  if (e.target.closest('.close-btn')) return;
+  dragOffset = {
+    x: e.clientX - position.value.x,
+    y: e.clientY - position.value.y,
+  };
+  document.addEventListener('mousemove', onDrag);
+  document.addEventListener('mouseup', stopDrag);
+};
+
+const onDrag = (e) => {
+  position.value = {
+    x: e.clientX - dragOffset.x,
+    y: e.clientY - dragOffset.y,
+  };
+};
+
+const stopDrag = () => {
+  document.removeEventListener('mousemove', onDrag);
+  document.removeEventListener('mouseup', stopDrag);
+};
+
+onBeforeUnmount(() => {
+  document.removeEventListener('mousemove', onDrag);
+  document.removeEventListener('mouseup', stopDrag);
+});
+
 const highlightedCss = computed(() => {
   if (!props.displayCss) return '';
   return hljs.highlight(props.displayCss, { language: 'css' }).value;