geoproject-app/src/components/ElementPopup.vue

<template>
  <div
    v-if="visible"
    id="element-popup"
    class="settings-popup"
    :style="{ top: position.y + 'px', left: position.x + 'px' }"
  >
    <div class="popup-header">
      <div class="header-left">
        <span class="element-label">{{ selectorTag }}</span>
        <span class="instance-count">{{ instanceCount }} instances</span>
      </div>
      <button class="close-btn" @click="close">×</button>
    </div>

    <div class="popup-body">
      <!-- Left: Controls -->
      <div class="popup-controls">
        <!-- Font Family -->
        <div class="settings-subsection">
          <div class="field" :class="{ 'field--view-only': inheritanceLocked }">
            <label class="label-with-tooltip" data-css="font-family">Police</label>
            <select v-model="fontFamily.value" :disabled="inheritanceLocked">
              <option value="Alegreya Sans">Alegreya Sans</option>
              <option value="Alegreya">Alegreya</option>
              <option value="Arial">Arial</option>
              <option value="Georgia">Georgia</option>
              <option value="Times New Roman">Times New Roman</option>
            </select>
            <label class="checkbox-inline label-with-tooltip" data-css="font-style">
              <input type="checkbox" v-model="fontStyle.italic" :disabled="inheritanceLocked" />
              <span>Italique</span>
            </label>
          </div>
        </div>

        <!-- Font Weight -->
        <div class="settings-subsection">
          <div class="field" :class="{ 'field--view-only': inheritanceLocked }">
            <label class="label-with-tooltip" data-css="font-weight">Graisse</label>
            <div class="button-group">
              <button
                v-for="weight in [200, 300, 400, 600, 800]"
                :key="weight"
                type="button"
                :class="{ active: fontWeight.value === weight }"
                :disabled="inheritanceLocked"
                @click="fontWeight.value = weight"
              >
                {{ weight }}
              </button>
            </div>
          </div>
        </div>

        <!-- Font Size -->
        <div class="settings-subsection">
          <div class="field" :class="{ 'field--view-only': inheritanceLocked }">
            <label class="label-with-tooltip" data-css="font-size">Taille du texte</label>
            <div class="input-with-unit">
              <NumberInput
                v-model="fontSize.value"
                :min="0"
                :step="1"
                :disabled="inheritanceLocked"
              />
              <div class="unit-toggle">
                <button
                  type="button"
                  :class="{ active: fontSize.unit === 'px' }"
                  :disabled="inheritanceLocked"
                  @click="fontSize.unit = 'px'"
                >
                  px
                </button>
                <button
                  type="button"
                  :class="{ active: fontSize.unit === 'em' }"
                  :disabled="inheritanceLocked"
                  @click="fontSize.unit = 'em'"
                >
                  em
                </button>
                <button
                  type="button"
                  :class="{ active: fontSize.unit === 'rem' }"
                  :disabled="inheritanceLocked"
                  @click="fontSize.unit = 'rem'"
                >
                  rem
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- Text Alignment -->
        <div class="settings-subsection">
          <div class="field" :class="{ 'field--view-only': inheritanceLocked }">
            <label class="label-with-tooltip" data-css="text-align">Alignement</label>
            <select v-model="textAlign.value" :disabled="inheritanceLocked">
              <option value="left">Gauche</option>
              <option value="center">Centre</option>
              <option value="right">Droite</option>
              <option value="justify">Justifié</option>
            </select>
          </div>
        </div>

        <!-- Color -->
        <div class="settings-subsection">
          <div class="field field-simple" :class="{ 'field--view-only': inheritanceLocked }">
            <label class="label-with-tooltip" data-css="color">Couleur</label>
            <div class="input-with-color">
              <input
                ref="colorInput"
                type="text"
                v-model="color.value"
                :disabled="inheritanceLocked"
                data-coloris
              />
            </div>
          </div>
        </div>

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

        <!-- Outer Margins -->
        <div class="settings-subsection">
          <div class="field" :class="{ 'field--view-only': inheritanceLocked }">
            <label class="label-with-tooltip" data-css="margin">Marges extérieures</label>
            <div class="input-with-unit">
              <NumberInput
                v-model="marginOuter.value"
                :min="0"
                :step="1"
                :disabled="inheritanceLocked"
              />
              <div class="unit-toggle">
                <button
                  type="button"
                  :class="{ active: marginOuter.unit === 'mm' }"
                  :disabled="inheritanceLocked"
                  @click="marginOuter.unit = 'mm'"
                >
                  mm
                </button>
                <button
                  type="button"
                  :class="{ active: marginOuter.unit === 'px' }"
                  :disabled="inheritanceLocked"
                  @click="marginOuter.unit = 'px'"
                >
                  px
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- Inner Margins (Padding) -->
        <div class="settings-subsection">
          <div class="field" :class="{ 'field--view-only': inheritanceLocked }">
            <label class="label-with-tooltip" data-css="padding">Marges intérieures</label>
            <div class="input-with-unit">
              <NumberInput
                v-model="paddingInner.value"
                :min="0"
                :step="1"
                :disabled="inheritanceLocked"
              />
              <div class="unit-toggle">
                <button
                  type="button"
                  :class="{ active: paddingInner.unit === 'mm' }"
                  :disabled="inheritanceLocked"
                  @click="paddingInner.unit = 'mm'"
                >
                  mm
                </button>
                <button
                  type="button"
                  :class="{ active: paddingInner.unit === 'px' }"
                  :disabled="inheritanceLocked"
                  @click="paddingInner.unit = 'px'"
                >
                  px
                </button>
              </div>
            </div>
          </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="elementCss"
          @input="handleCssInput"
          :disabled="inheritanceLocked"
          spellcheck="false"
        ></textarea>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { useStylesheetStore } from '../stores/stylesheet';
import { usePopupPosition } from '../composables/usePopupPosition';
import { useDebounce } from '../composables/useDebounce';
import NumberInput from './ui/NumberInput.vue';
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 POPUP_WIDTH = 800;
const POPUP_HEIGHT = 600;

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

const visible = ref(false);
const position = ref({ x: 0, y: 0 });
const selector = ref('');
const selectedElement = ref(null);
const elementInstanceCount = ref(0); // Count of similar elements
const isEditable = ref(false);
const inheritanceLocked = ref(true);
const colorInput = ref(null);
const backgroundInput = ref(null);

let isUpdatingFromStore = false;
const { debouncedUpdate } = useDebounce(500);

// Style properties
const fontFamily = ref({ value: 'Alegreya Sans' });
const fontStyle = ref({ italic: false });
const fontWeight = ref({ value: 400 });
const fontSize = ref({ value: 23, unit: 'px' });
const textAlign = ref({ value: 'left' });
const color = ref({ value: 'rgb(0, 0, 0)' });
const background = ref({ value: 'transparent' });
const marginOuter = ref({ value: 0, unit: 'mm' });
const paddingInner = ref({ value: 0, unit: 'mm' });

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

const getSelectorFromElement = (element) => {
  // Try to build a meaningful selector
  if (element.id) {
    return `#${element.id}`;
  }

  // Get tag name
  const tagName = element.tagName.toLowerCase();

  // Get first class if available (filter out state classes)
  const classes = Array.from(element.classList).filter(
    (cls) => !['element-hovered', 'element-selected', 'page-hovered', 'page-selected'].includes(cls)
  );
  if (classes.length > 0) {
    return `${tagName}.${classes[0]}`;
  }

  return tagName;
};

const getInstanceCount = (selector) => {
  if (!props.iframeRef || !props.iframeRef.contentDocument) return 0;

  try {
    const elements = props.iframeRef.contentDocument.querySelectorAll(selector);
    return elements.length;
  } catch (e) {
    return 0;
  }
};

const selectorTag = computed(() => {
  return selector.value || '';
});

const instanceCount = computed(() => {
  return elementInstanceCount.value;
});

const elementCss = computed(() => {
  if (!selector.value) return '';
  return stylesheetStore.extractBlock(selector.value) || '';
});

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

// Update functions for each property
const updateFontFamily = () => {
  if (!selector.value || !fontFamily.value.value) return;
  stylesheetStore.updateProperty(selector.value, 'font-family', fontFamily.value.value);
};

const updateFontStyle = () => {
  if (!selector.value) return;
  stylesheetStore.updateProperty(selector.value, 'font-style', fontStyle.value.italic ? 'italic' : 'normal');
};

const updateFontWeight = () => {
  if (!selector.value) return;
  stylesheetStore.updateProperty(selector.value, 'font-weight', fontWeight.value.value);
};

const updateFontSize = () => {
  if (!selector.value) return;
  stylesheetStore.updateProperty(selector.value, 'font-size', fontSize.value.value, fontSize.value.unit);
};

const updateTextAlign = () => {
  if (!selector.value) return;
  stylesheetStore.updateProperty(selector.value, 'text-align', textAlign.value.value);
};

const updateColor = () => {
  if (!selector.value || !color.value.value) return;
  stylesheetStore.updateProperty(selector.value, 'color', color.value.value);
};

const updateBackground = () => {
  if (!selector.value || !background.value.value) return;
  stylesheetStore.updateProperty(selector.value, 'background', background.value.value);
};

const updateMarginOuter = () => {
  if (!selector.value) return;
  stylesheetStore.updateProperty(selector.value, 'margin', marginOuter.value.value, marginOuter.value.unit);
};

const updatePaddingInner = () => {
  if (!selector.value) return;
  stylesheetStore.updateProperty(selector.value, 'padding', paddingInner.value.value, paddingInner.value.unit);
};

// Watch for changes
watch(() => fontFamily.value.value, () => {
  if (isUpdatingFromStore) return;
  immediateUpdate(updateFontFamily);
});

watch(() => fontStyle.value.italic, () => {
  if (isUpdatingFromStore) return;
  immediateUpdate(updateFontStyle);
});

watch(() => fontWeight.value.value, () => {
  if (isUpdatingFromStore) return;
  immediateUpdate(updateFontWeight);
});

watch(() => fontSize.value.value, () => {
  if (isUpdatingFromStore) return;
  debouncedUpdate(updateFontSize);
});

watch(() => fontSize.value.unit, () => {
  if (isUpdatingFromStore) return;
  immediateUpdate(updateFontSize);
});

watch(() => textAlign.value.value, () => {
  if (isUpdatingFromStore) return;
  immediateUpdate(updateTextAlign);
});

watch(() => color.value.value, () => {
  if (isUpdatingFromStore) return;
  debouncedUpdate(updateColor);
});

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

watch(() => marginOuter.value.value, () => {
  if (isUpdatingFromStore) return;
  debouncedUpdate(updateMarginOuter);
});

watch(() => marginOuter.value.unit, () => {
  if (isUpdatingFromStore) return;
  immediateUpdate(updateMarginOuter);
});

watch(() => paddingInner.value.value, () => {
  if (isUpdatingFromStore) return;
  debouncedUpdate(updatePaddingInner);
});

watch(() => paddingInner.value.unit, () => {
  if (isUpdatingFromStore) return;
  immediateUpdate(updatePaddingInner);
});

let cssDebounceTimer = null;

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

  if (cssDebounceTimer) {
    clearTimeout(cssDebounceTimer);
  }

  cssDebounceTimer = setTimeout(() => {
    const oldBlock = elementCss.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();
    }
  }
);

const loadValuesFromStylesheet = () => {
  if (!selector.value) return;

  try {
    isUpdatingFromStore = true;

    // Extract font-family
    const fontFamilyData = stylesheetStore.extractValue(selector.value, 'font-family');
    if (fontFamilyData) {
      const value = typeof fontFamilyData === 'string' ? fontFamilyData : fontFamilyData.value;
      fontFamily.value.value = value.replace(/['"]/g, '');
    }

    // Extract font-style
    const fontStyleData = stylesheetStore.extractValue(selector.value, 'font-style');
    if (fontStyleData) {
      const value = typeof fontStyleData === 'string' ? fontStyleData : fontStyleData.value;
      fontStyle.value.italic = value === 'italic';
    }

    // Extract font-weight
    const fontWeightData = stylesheetStore.extractValue(selector.value, 'font-weight');
    if (fontWeightData) {
      const value = typeof fontWeightData === 'string' ? fontWeightData : fontWeightData.value;
      fontWeight.value.value = parseInt(value);
    }

    // Extract font-size
    const fontSizeData = stylesheetStore.extractValue(selector.value, 'font-size');
    if (fontSizeData && fontSizeData.value !== undefined) {
      fontSize.value.value = fontSizeData.value;
      fontSize.value.unit = fontSizeData.unit;
    }

    // Extract text-align
    const textAlignData = stylesheetStore.extractValue(selector.value, 'text-align');
    if (textAlignData) {
      const value = typeof textAlignData === 'string' ? textAlignData : textAlignData.value;
      textAlign.value.value = value;
    }

    // Extract color
    const colorData = stylesheetStore.extractValue(selector.value, 'color');
    if (colorData) {
      const value = typeof colorData === 'string' ? colorData : colorData.value;
      color.value.value = value;
    }

    // Extract background
    const backgroundData = stylesheetStore.extractValue(selector.value, 'background');
    if (backgroundData) {
      const value = typeof backgroundData === 'string' ? backgroundData : backgroundData.value;
      background.value.value = value;
    }

    // Extract margin
    const marginData = stylesheetStore.extractValue(selector.value, 'margin');
    if (marginData && marginData.value !== undefined) {
      marginOuter.value.value = marginData.value;
      marginOuter.value.unit = marginData.unit;
    }

    // Extract padding
    const paddingData = stylesheetStore.extractValue(selector.value, 'padding');
    if (paddingData && paddingData.value !== undefined) {
      paddingInner.value.value = paddingData.value;
      paddingInner.value.unit = paddingData.unit;
    }
  } catch (error) {
    console.error('Error loading values from stylesheet:', error);
  } finally {
    isUpdatingFromStore = false;
  }
};

const open = (element, event, count = null) => {
  selectedElement.value = element;
  selector.value = getSelectorFromElement(element);
  position.value = calculatePosition(event);

  // Store instance count if provided, otherwise calculate it
  elementInstanceCount.value = count !== null ? count : getInstanceCount(selector.value);

  // Load values from stylesheet
  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 = () => {
  visible.value = false;
  isEditable.value = false;
  selector.value = '';
  selectedElement.value = null;
  emit('close');
};

const handleIframeClick = (event, targetElement = null, elementCount = null) => {
  const element = targetElement || event.target;

  if (element.tagName === 'BODY' || element.tagName === 'HTML') {
    close();
    return;
  }

  // If popup is already open, just close it instead of opening a new one
  if (visible.value) {
    close();
    return;
  }

  open(element, event, elementCount);
};

const toggleInheritance = () => {
  inheritanceLocked.value = !inheritanceLocked.value;
  // TODO: Implement CSS priority logic when unlocked
};

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

<style scoped>
/* ElementPopup-specific styles (purple theme) */
.element-label {
  background: var(--color-purple);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 600;
}

.instance-count {
  color: var(--color-purple);
  font-size: 0.875rem;
}

.button-group {
  display: flex;
  gap: 0.25rem;
}

.button-group button {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
}

.button-group button.active {
  background: #61afef;
  color: white;
  border-color: #61afef;
}

.button-group button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 1rem;
  font-size: 0.875rem;
  cursor: pointer;
}

.checkbox-inline input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}
</style>