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">{{ templateName || 'default' }}</span>
        <span class="page-count">{{ pageCount }} page{{ pageCount > 1 ? 's' : '' }}</span>
      </div>
      <button class="close-btn" @click="close">×</button>
    </div>

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

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

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

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

        <!-- Background -->
        <div class="settings-subsection">
          <div class="field" :class="{ 'field--view-only': inheritanceLocked }">
            <label class="label-with-tooltip" data-css="background">Arrière-plan</label>
            <div class="input-with-color">
              <input
                ref="backgroundColorInput"
                type="text"
                v-model="background.value"
                :disabled="inheritanceLocked"
                data-coloris
              />
            </div>
          </div>
        </div>

        <!-- Patterns -->
        <div class="settings-subsection">
          <div class="field" :class="{ 'field--view-only': inheritanceLocked }">
            <label class="label-with-tooltip" data-css="background-image">Motifs</label>
            <select v-model="pattern" :disabled="inheritanceLocked">
              <option value="">Choisissez</option>
              <option value="dots">Points</option>
              <option value="lines">Lignes</option>
              <option value="grid">Grille</option>
            </select>
          </div>
        </div>

        <!-- Lock/Unlock Inheritance Button -->
        <div class="settings-subsection">
          <button class="inheritance-btn" @click="toggleInheritance">
            <svg
              v-if="inheritanceLocked"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
            >
              <path
                d="M19 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C15.866 2 19 5.13401 19 9V10ZM5 12V20H19V12H5ZM11 14H13V18H11V14ZM17 10V9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9V10H17Z"
              ></path>
            </svg>
            <svg
              v-else
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
            >
              <path
                d="M7 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C14.7405 2 17.1131 3.5748 18.2624 5.86882L16.4731 6.76344C15.6522 5.12486 13.9575 4 12 4C9.23858 4 7 6.23858 7 9V10ZM5 12V20H19V12H5ZM10 15H14V17H10V15Z"
              ></path>
            </svg>
            <span>{{
              inheritanceLocked
                ? "Déverrouiller l'héritage"
                : "Verrouiller l'héritage"
            }}</span>
          </button>
        </div>
      </div>

      <!-- Right: CSS Editor -->
      <div class="popup-css">
        <div class="css-header">
          <span>CSS</span>
          <label
            class="toggle"
            :class="{ 'field--view-only': inheritanceLocked }"
          >
            <span class="toggle-label">Mode édition</span>
            <input
              type="checkbox"
              v-model="isEditable"
              :disabled="inheritanceLocked"
            />
            <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"
          :disabled="inheritanceLocked"
          spellcheck="false"
        ></textarea>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue';
import { useStylesheetStore } from '../stores/stylesheet';
import { usePopupPosition } from '../composables/usePopupPosition';
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 emit = defineEmits(['close']);

const visible = ref(false);
const position = ref({ x: 0, y: 0 });
const selectedPageElement = ref(null);
const pageCount = ref(0);
const templateName = ref('');
const isEditable = ref(false);
const inheritanceLocked = ref(true);
const backgroundColorInput = ref(null);

let isUpdatingFromStore = false;
let updateTimer = null;

const margins = ref({
  top: { value: 0, unit: 'mm' },
  bottom: { value: 0, unit: 'mm' },
  left: { value: 0, unit: 'mm' },
  right: { value: 0, 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 POPUP_WIDTH = 550;
const POPUP_HEIGHT = 600;

const { calculatePosition } = usePopupPosition(POPUP_WIDTH, POPUP_HEIGHT);

// Get the selector for the current template's @page rule
const getTemplateSelector = () => {
  return templateName.value ? `@page ${templateName.value}` : '@page';
};

// Get or create the template-specific @page block
const getOrCreateTemplateBlock = () => {
  const selector = getTemplateSelector();
  let block = stylesheetStore.extractBlock(selector);

  if (!block && templateName.value) {
    // Create new block with current values from @page
    const baseBlock = stylesheetStore.extractBlock('@page');
    if (baseBlock) {
      // Insert the new template block after @page
      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 newBlock = `\n@page ${templateName.value} {\n  margin: ${marginValue};${background.value.value ? `\n  background: ${background.value.value};` : ''}\n}\n`;

      stylesheetStore.content = stylesheetStore.content.replace(
        baseBlock,
        baseBlock + newBlock
      );
      block = stylesheetStore.extractBlock(selector);
    }
  }

  return block;
};

// Remove the template-specific @page block
const removeTemplateBlock = () => {
  if (!templateName.value) return;

  const selector = `@page ${templateName.value}`;
  const block = stylesheetStore.extractBlock(selector);

  if (block) {
    // Remove the block and any surrounding whitespace
    stylesheetStore.content = stylesheetStore.content.replace(
      new RegExp(`\\n?${selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\s*\\{[^}]*\\}\\n?`),
      '\n'
    );
  }
};

const updateMargins = () => {
  // Only update if inheritance is unlocked
  if (inheritanceLocked.value) return;

  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 = getOrCreateTemplateBlock();
  if (!currentBlock) return;

  const selector = getTemplateSelector();

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

const updateBackground = () => {
  // Only update if inheritance is unlocked
  if (inheritanceLocked.value) return;
  if (!background.value.value) return;

  const currentBlock = getOrCreateTemplateBlock();
  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 loadValuesFromStylesheet = () => {
  try {
    isUpdatingFromStore = true;

    // Extract values from @page block (same logic as PageSettings)
    const pageBlock = stylesheetStore.extractBlock('@page');
    if (!pageBlock) return;

    // Parse margins with regex (top right bottom left)
    const marginMatch = pageBlock.match(
      /margin:\s*([0-9.]+)([a-z]+)\s+([0-9.]+)([a-z]+)\s+([0-9.]+)([a-z]+)\s+([0-9.]+)([a-z]+)/i
    );
    if (marginMatch) {
      margins.value.top = {
        value: parseFloat(marginMatch[1]),
        unit: marginMatch[2],
      };
      margins.value.right = {
        value: parseFloat(marginMatch[3]),
        unit: marginMatch[4],
      };
      margins.value.bottom = {
        value: parseFloat(marginMatch[5]),
        unit: marginMatch[6],
      };
      margins.value.left = {
        value: parseFloat(marginMatch[7]),
        unit: marginMatch[8],
      };
    }

    // Extract background
    const bgMatch = pageBlock.match(/background:\s*([^;]+)/);
    if (bgMatch) {
      background.value.value = bgMatch[1].trim();
    }
  } catch (error) {
    console.error('Error loading values from stylesheet:', error);
  } finally {
    isUpdatingFromStore = false;
  }
};

const open = (pageElement, event, count = 1) => {
  selectedPageElement.value = pageElement;
  pageCount.value = count;
  position.value = calculatePosition(event);

  // Extract template name from data-page-type attribute
  templateName.value = pageElement.getAttribute('data-page-type') || '';

  // Reset inheritance state when opening
  inheritanceLocked.value = true;

  // Load values from stylesheet (@page block)
  loadValuesFromStylesheet();

  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 = () => {
  selectedPageElement.value = null;
  visible.value = false;
  isEditable.value = false;
  emit('close');
};

const toggleInheritance = () => {
  const wasLocked = inheritanceLocked.value;
  inheritanceLocked.value = !inheritanceLocked.value;

  if (inheritanceLocked.value && !wasLocked) {
    // Re-locking: remove the template-specific block
    // Fields keep their values, but preview returns to @page defaults
    removeTemplateBlock();
  }
  // When unlocking: fields already have values, block will be created on first edit
};

const pageCss = computed(() => {
  // Show template-specific block if unlocked and exists, otherwise show @page
  if (!inheritanceLocked.value && templateName.value) {
    const templateBlock = stylesheetStore.extractBlock(`@page ${templateName.value}`);
    if (templateBlock) return templateBlock;
  }
  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();
  }
});

// Watch stylesheet changes to sync values
watch(
  () => stylesheetStore.content,
  () => {
    if (visible.value && !stylesheetStore.isEditing) {
      loadValuesFromStylesheet();
    }
  }
);

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: var(--color-page-highlight);
  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: var(--color-page-highlight);
  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;
}

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

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

/* Label with CSS tooltip */
.label-with-tooltip {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
  position: relative;
}

.label-with-tooltip::after {
  content: attr(data-css);
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 4px;
  padding: 0.25rem 0.5rem;
  background: var(--color-browngray-700, #3d3d3d);
  color: var(--color-browngray-100, #f5f5f5);
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.75rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 10;
}

.label-with-tooltip:hover::after {
  opacity: 1;
  visibility: visible;
}

.inheritance-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  color: #666;
  transition: color 0.2s;
}

.inheritance-btn:hover {
  color: #333;
}

.inheritance-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

.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>