geoproject-app/src/components/PagePopup.vue

<template>
  <div
    v-if="visible"
    id="page-popup"
    :style="{ top: position.y + 'px', left: position.x + 'px' }"
  >
    <div class="popup-header">
      <div class="header-left">
        <span class="page-label">@page</span>
        <span class="page-name">geoformat</span>
        <span class="page-count">6 pages</span>
      </div>
      <button class="close-btn" @click="close">×</button>
    </div>

    <div class="popup-body">
      <!-- Left: Controls -->
      <div class="popup-controls">
        <!-- Margins -->
        <div class="control-section">
          <h4>Marges</h4>
          <div class="margin-grid">
            <div class="margin-field">
              <label>Haut</label>
              <div class="input-with-unit">
                <input
                  type="number"
                  v-model.number="margins.top.value"
                  min="0"
                />
                <div class="unit-toggle">
                  <button
                    type="button"
                    :class="{ active: margins.top.unit === 'mm' }"
                    @click="margins.top.unit = 'mm'"
                  >
                    mm
                  </button>
                  <button
                    type="button"
                    :class="{ active: margins.top.unit === 'px' }"
                    @click="margins.top.unit = 'px'"
                  >
                    px
                  </button>
                  <button
                    type="button"
                    :class="{ active: margins.top.unit === 'rem' }"
                    @click="margins.top.unit = 'rem'"
                  >
                    rem
                  </button>
                </div>
              </div>
            </div>

            <div class="margin-field">
              <label>Bas</label>
              <div class="input-with-unit">
                <input
                  type="number"
                  v-model.number="margins.bottom.value"
                  min="0"
                />
                <div class="unit-toggle">
                  <button
                    type="button"
                    :class="{ active: margins.bottom.unit === 'mm' }"
                    @click="margins.bottom.unit = 'mm'"
                  >
                    mm
                  </button>
                  <button
                    type="button"
                    :class="{ active: margins.bottom.unit === 'px' }"
                    @click="margins.bottom.unit = 'px'"
                  >
                    px
                  </button>
                  <button
                    type="button"
                    :class="{ active: margins.bottom.unit === 'rem' }"
                    @click="margins.bottom.unit = 'rem'"
                  >
                    rem
                  </button>
                </div>
              </div>
            </div>

            <div class="margin-field">
              <label>Gauche</label>
              <div class="input-with-unit">
                <input
                  type="number"
                  v-model.number="margins.left.value"
                  min="0"
                />
                <div class="unit-toggle">
                  <button
                    type="button"
                    :class="{ active: margins.left.unit === 'mm' }"
                    @click="margins.left.unit = 'mm'"
                  >
                    mm
                  </button>
                  <button
                    type="button"
                    :class="{ active: margins.left.unit === 'px' }"
                    @click="margins.left.unit = 'px'"
                  >
                    px
                  </button>
                  <button
                    type="button"
                    :class="{ active: margins.left.unit === 'rem' }"
                    @click="margins.left.unit = 'rem'"
                  >
                    rem
                  </button>
                </div>
              </div>
            </div>

            <div class="margin-field">
              <label>Droite</label>
              <div class="input-with-unit">
                <input
                  type="number"
                  v-model.number="margins.right.value"
                  min="0"
                />
                <div class="unit-toggle">
                  <button
                    type="button"
                    :class="{ active: margins.right.unit === 'mm' }"
                    @click="margins.right.unit = 'mm'"
                  >
                    mm
                  </button>
                  <button
                    type="button"
                    :class="{ active: margins.right.unit === 'px' }"
                    @click="margins.right.unit = 'px'"
                  >
                    px
                  </button>
                  <button
                    type="button"
                    :class="{ active: margins.right.unit === 'rem' }"
                    @click="margins.right.unit = 'rem'"
                  >
                    rem
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Background -->
        <div class="control-section">
          <label>Arrière-plan</label>
          <div class="input-with-color">
            <input
              ref="backgroundColorInput"
              type="text"
              v-model="background.value"
              data-coloris
            />
          </div>
        </div>

        <!-- Patterns -->
        <div class="control-section">
          <label>Motifs</label>
          <select v-model="pattern">
            <option value="">Choisissez</option>
            <option value="dots">Points</option>
            <option value="lines">Lignes</option>
            <option value="grid">Grille</option>
          </select>
        </div>

        <!-- Unlock Inheritance Button -->
        <div class="control-section">
          <button class="unlock-btn" @click="toggleInheritance">
            Déverrouiller l'héritage
          </button>
        </div>
      </div>

      <!-- Right: CSS Editor -->
      <div class="popup-css">
        <div class="css-header">
          <span>CSS</span>
          <label class="toggle">
            <span class="toggle-label">Mode édition</span>
            <input type="checkbox" v-model="isEditable" />
            <span class="toggle-switch"></span>
          </label>
        </div>
        <pre v-if="!isEditable" class="readonly"><code class="hljs language-css" v-html="highlightedCss"></code></pre>
        <textarea
          v-else
          :value="pageCss"
          @input="handleCssInput"
          spellcheck="false"
        ></textarea>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue';
import { useStylesheetStore } from '../stores/stylesheet';
import Coloris from '@melloware/coloris';
import '@melloware/coloris/dist/coloris.css';
import hljs from 'highlight.js/lib/core';
import css from 'highlight.js/lib/languages/css';
import 'highlight.js/styles/atom-one-dark.css';

hljs.registerLanguage('css', css);

const stylesheetStore = useStylesheetStore();

const props = defineProps({
  iframeRef: Object,
});

const visible = ref(false);
const position = ref({ x: 0, y: 0 });
const selectedPageElement = ref(null);
const isEditable = ref(false);
const inheritanceUnlocked = ref(false);
const backgroundColorInput = ref(null);

let isUpdatingFromStore = false;
let updateTimer = null;

const margins = ref({
  top: { value: 6, unit: 'mm' },
  bottom: { value: 7, unit: 'mm' },
  left: { value: 6, unit: 'mm' },
  right: { value: 7, unit: 'mm' },
});

const background = ref({
  value: '',
  format: 'hex',
});

const pattern = ref('');

const debouncedUpdate = (callback) => {
  clearTimeout(updateTimer);
  updateTimer = setTimeout(callback, 1000);
};

const immediateUpdate = (callback) => {
  callback();
};

const calculatePosition = (pageElement) => {
  const rect = pageElement.getBoundingClientRect();
  const iframeRect = props.iframeRef.getBoundingClientRect();
  return {
    x: iframeRect.left + rect.left + 20,
    y: iframeRect.top + rect.top + 20,
  };
};

const updateMargins = () => {
  const marginValue = `${margins.value.top.value}${margins.value.top.unit} ${margins.value.right.value}${margins.value.right.unit} ${margins.value.bottom.value}${margins.value.bottom.unit} ${margins.value.left.value}${margins.value.left.unit}`;

  const currentBlock = stylesheetStore.extractBlock('@page');
  if (!currentBlock) return;

  const updatedBlock = currentBlock.replace(
    /(margin:\s*)[^;]+/,
    `$1${marginValue}`
  );

  stylesheetStore.content = stylesheetStore.content.replace(
    currentBlock,
    updatedBlock
  );
};

const updateBackground = () => {
  if (!background.value.value) return;

  const currentBlock = stylesheetStore.extractBlock('@page');
  if (!currentBlock) return;

  if (currentBlock.includes('background:')) {
    const updatedBlock = currentBlock.replace(
      /(background:\s*)[^;]+/,
      `$1${background.value.value}`
    );
    stylesheetStore.content = stylesheetStore.content.replace(
      currentBlock,
      updatedBlock
    );
  } else {
    const updatedBlock = currentBlock.replace(
      /(\s*})$/,
      `  background: ${background.value.value};\n$1`
    );
    stylesheetStore.content = stylesheetStore.content.replace(
      currentBlock,
      updatedBlock
    );
  }
};

// Watch margin values (number inputs) with debounce
watch(
  () => [
    margins.value.top.value,
    margins.value.bottom.value,
    margins.value.left.value,
    margins.value.right.value,
  ],
  () => {
    if (isUpdatingFromStore) return;
    debouncedUpdate(updateMargins);
  }
);

// Watch margin units (button clicks) without debounce
watch(
  () => [
    margins.value.top.unit,
    margins.value.bottom.unit,
    margins.value.left.unit,
    margins.value.right.unit,
  ],
  () => {
    if (isUpdatingFromStore) return;
    immediateUpdate(updateMargins);
  }
);

// Watch background value with debounce
watch(
  () => background.value.value,
  () => {
    if (isUpdatingFromStore) return;
    debouncedUpdate(updateBackground);
  }
);

const open = (pageElement) => {
  selectedPageElement.value = pageElement;
  position.value = calculatePosition(pageElement);

  // Add border to the selected page
  pageElement.style.outline = '2px solid #61afef';

  visible.value = true;

  // Initialize Coloris after opening
  setTimeout(() => {
    Coloris.init();
    Coloris({
      el: '[data-coloris]',
      theme: 'pill',
      themeMode: 'dark',
      formatToggle: true,
      alpha: true,
      closeButton: true,
      closeLabel: 'Fermer',
      clearButton: true,
      clearLabel: 'Effacer',
      swatchesOnly: false,
      inline: false,
      wrap: true,
      swatches: [
        '#264653',
        '#2a9d8f',
        '#e9c46a',
        '#f4a261',
        '#e76f51',
        '#d62828',
        '#023e8a',
        '#0077b6',
        '#ffffff',
        '#000000',
      ],
    });
  }, 0);
};

const close = () => {
  // Remove border from the selected page
  if (selectedPageElement.value) {
    selectedPageElement.value.style.outline = '';
    selectedPageElement.value = null;
  }
  visible.value = false;
  isEditable.value = false;
};

const toggleInheritance = () => {
  inheritanceUnlocked.value = !inheritanceUnlocked.value;
  // TODO: Implement inheritance unlock logic
};

const pageCss = computed(() => {
  return stylesheetStore.extractBlock('@page') || '';
});

const highlightedCss = computed(() => {
  if (!pageCss.value) return '';
  return hljs.highlight(pageCss.value, { language: 'css' }).value;
});

let cssDebounceTimer = null;

const handleCssInput = (event) => {
  const newCss = event.target.value;

  if (cssDebounceTimer) {
    clearTimeout(cssDebounceTimer);
  }

  cssDebounceTimer = setTimeout(() => {
    const oldBlock = pageCss.value;
    if (oldBlock) {
      stylesheetStore.content = stylesheetStore.content.replace(oldBlock, newCss);
    }
  }, 500);
};

// Watch isEditable to format when exiting edit mode
watch(isEditable, async (newValue, oldValue) => {
  stylesheetStore.isEditing = newValue;

  // Format when exiting editing mode
  if (oldValue && !newValue) {
    await stylesheetStore.formatContent();
  }
});

defineExpose({ open, close, visible });
</script>

<style scoped>
#page-popup {
  position: fixed;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  z-index: 10000;
  width: 800px;
  max-height: 600px;
  display: flex;
  flex-direction: column;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e0e0e0;
  background: #f9f9f9;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.page-label {
  background: #ff8a50;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 600;
}

.page-name {
  font-weight: 600;
  font-size: 0.875rem;
}

.page-count {
  color: #ff8a50;
  font-size: 0.875rem;
}

.close-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0;
  color: #666;
}

.popup-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.popup-controls {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
  background: white;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.control-section h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.875rem;
  font-weight: 600;
}

.control-section label {
  display: block;
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
  color: #666;
}

.control-section select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.875rem;
}

.margin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.margin-field label {
  display: block;
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
  color: #666;
}

.input-with-unit {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.input-with-unit input[type='number'] {
  flex: 1;
  padding: 0.375rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.875rem;
}

.input-with-color {
  width: 100%;
}

.input-with-color input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.875rem;
}

/* Unit toggle styles are inherited from global styles */

.unlock-btn {
  width: 100%;
  padding: 0.5rem;
  background: transparent;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
  transition: background 0.2s;
}

.unlock-btn:hover {
  background: #f5f5f5;
}

.popup-css {
  flex: 1;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  border-left: 1px solid #e0e0e0;
}

.css-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: #e8e8e8;
  border-bottom: 1px solid #d0d0d0;
  font-size: 0.875rem;
  font-weight: 600;
}

.toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: normal;
  color: #666;
}

.toggle input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 18px;
  background: #ccc;
  border-radius: 18px;
  transition: background 0.2s ease;
}

.toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.toggle input[type='checkbox']:checked + .toggle-switch {
  background: #61afef;
}

.toggle input[type='checkbox']:checked + .toggle-switch::after {
  transform: translateX(18px);
}

.readonly {
  flex: 1;
  margin: 0;
  padding: 0.75rem;
  background: #1e1e1e;
  color: #abb2bf;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  overflow-y: auto;
  white-space: pre-wrap;
}

.popup-css textarea {
  flex: 1;
  width: 100%;
  background: #1e1e1e;
  color: #abb2bf;
  border: none;
  padding: 0.75rem;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  resize: none;
  outline: none;
}
</style>