geoproject-app/src/components/ElementPopup.vue

<template>
  <BasePopup
    ref="basePopup"
    id="element-popup"
    :display-css="displayedCss"
    :editable-css="elementCss"
    :popup-width="800"
    :popup-height="600"
    @close="close"
    @css-input="handleCssInput"
    @toggle-inheritance="toggleInheritance"
  >
    <template #header-left>
      <span class="element-label">{{ selectorTag }}</span>
      <span class="instance-count">{{ instanceCount }} instances</span>
    </template>

    <template #controls>
      <!-- Font Family -->
      <div class="settings-subsection">
        <div class="field field-font" :class="{ 'field--view-only': inheritanceLocked }">
          <label class="label-with-tooltip" data-css="font-family">Police</label>
          <div class="field-with-option">
            <select v-model="fontFamily.value" :disabled="inheritanceLocked">
              <option v-for="f in fonts" :key="f" :value="f">{{ f }}</option>
            </select>
            <div class="field-checkbox">
              <input type="checkbox" v-model="fontStyle.italic" :disabled="inheritanceLocked" />
              <label class="label-with-tooltip" data-css="font-style">Italique</label>
            </div>
          </div>
        </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>
          <UnitToggle v-model="fontWeightString" :units="weights" :disabled="inheritanceLocked" />
        </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="updateFontSizeUnit('px')"
              >
                px
              </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="updateMarginOuterUnit('mm')"
              >
                mm
              </button>
              <button
                type="button"
                :class="{ active: marginOuter.unit === 'px' }"
                :disabled="inheritanceLocked"
                @click="updateMarginOuterUnit('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="updatePaddingInnerUnit('mm')"
              >
                mm
              </button>
              <button
                type="button"
                :class="{ active: paddingInner.unit === 'px' }"
                :disabled="inheritanceLocked"
                @click="updatePaddingInnerUnit('px')"
              >
                px
              </button>
            </div>
          </div>
        </div>
      </div>
    </template>
  </BasePopup>
</template>

<script setup>
import { ref, computed, watch, nextTick } from 'vue';
import { useStylesheetStore } from '../stores/stylesheet';
import { useDebounce } from '../composables/useDebounce';
import NumberInput from './ui/NumberInput.vue';
import UnitToggle from './ui/UnitToggle.vue';
import BasePopup from './ui/BasePopup.vue';
import { convertUnit } from '../utils/unit-conversion';

const stylesheetStore = useStylesheetStore();

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

const emit = defineEmits(['close']);

const basePopup = ref(null);

const visible = computed(() => basePopup.value?.visible ?? false);
const inheritanceLocked = computed(() => basePopup.value?.inheritanceLocked ?? true);

const selector = ref('');
const selectedElement = ref(null);
const elementInstanceCount = ref(0);
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' });

// Constants
const fonts = ['Alegreya Sans', 'Alegreya', 'Arial', 'Georgia', 'Times New Roman'];
const weights = ['200', '300', '400', '600', '800'];

// Computed to adapt fontWeight for UnitToggle
const fontWeightString = computed({
  get: () => String(fontWeight.value.value),
  set: (val) => {
    fontWeight.value.value = parseInt(val);
  }
});

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

const updateFontSizeUnit = (newUnit) => {
  fontSize.value.value = convertUnit(fontSize.value.value, fontSize.value.unit, newUnit);
  fontSize.value.unit = newUnit;
};

const updateMarginOuterUnit = (newUnit) => {
  marginOuter.value.value = convertUnit(marginOuter.value.value, marginOuter.value.unit, newUnit);
  marginOuter.value.unit = newUnit;
};

const updatePaddingInnerUnit = (newUnit) => {
  paddingInner.value.value = convertUnit(paddingInner.value.value, paddingInner.value.unit, newUnit);
  paddingInner.value.unit = newUnit;
};

const getSelectorFromElement = (element) => {
  if (element.id) {
    return `#${element.id}`;
  }

  const tagName = element.tagName.toLowerCase();

  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) || '';
});

// Generate a preview CSS block from current field values
const generatePreviewCss = () => {
  if (!selector.value) return '';

  const properties = [];

  if (fontFamily.value.value) {
    properties.push(`  font-family: ${fontFamily.value.value};`);
  }
  if (fontStyle.value.italic) {
    properties.push(`  font-style: italic;`);
  }
  if (fontWeight.value.value) {
    properties.push(`  font-weight: ${fontWeight.value.value};`);
  }
  if (fontSize.value.value) {
    properties.push(`  font-size: ${fontSize.value.value}${fontSize.value.unit};`);
  }
  if (textAlign.value.value) {
    properties.push(`  text-align: ${textAlign.value.value};`);
  }
  if (color.value.value) {
    properties.push(`  color: ${color.value.value};`);
  }
  if (background.value.value) {
    properties.push(`  background: ${background.value.value};`);
  }
  if (marginOuter.value.value !== undefined && marginOuter.value.value !== null) {
    properties.push(`  margin: ${marginOuter.value.value}${marginOuter.value.unit};`);
  }
  if (paddingInner.value.value !== undefined && paddingInner.value.value !== null) {
    properties.push(`  padding: ${paddingInner.value.value}${paddingInner.value.unit};`);
  }

  if (properties.length === 0) return '';

  return `${selector.value} {\n${properties.join('\n')}\n}`;
};

const displayedCss = computed(() => {
  if (!selector.value) return '';

  if (!inheritanceLocked.value) {
    return elementCss.value || generatePreviewCss();
  }

  const preview = generatePreviewCss();
  if (!preview) return '';

  return '/* Héritage verrouillé - déverrouiller pour appliquer */\n/* ' +
         preview.split('\n').join('\n   ') +
         ' */';
});

// 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);
};

// Apply all current field values to create/update the CSS block
const applyAllStyles = () => {
  if (!selector.value) return;

  updateFontFamily();
  updateFontStyle();
  updateFontWeight();
  updateFontSize();
  updateTextAlign();
  updateColor();
  updateBackground();
  updateMarginOuter();
  updatePaddingInner();
};

// Helper to reduce watcher boilerplate
const watchProp = (getter, updateFn, debounce = false) => {
  watch(getter, () => {
    if (isUpdatingFromStore) return;
    debounce ? debouncedUpdate(updateFn) : immediateUpdate(updateFn);
  });
};

watchProp(() => fontFamily.value.value, updateFontFamily);
watchProp(() => fontStyle.value.italic, updateFontStyle);
watchProp(() => fontWeight.value.value, updateFontWeight);
watchProp(() => fontSize.value.value, updateFontSize, true);
watchProp(() => fontSize.value.unit, updateFontSize);
watchProp(() => textAlign.value.value, updateTextAlign);
watchProp(() => color.value.value, updateColor, true);
watchProp(() => background.value.value, updateBackground, true);
watchProp(() => marginOuter.value.value, updateMarginOuter, true);
watchProp(() => marginOuter.value.unit, updateMarginOuter);
watchProp(() => paddingInner.value.value, updatePaddingInner, true);
watchProp(() => paddingInner.value.unit, updatePaddingInner);

const handleCssInput = (newCss) => {
  const oldBlock = elementCss.value;
  if (oldBlock) {
    stylesheetStore.replaceInCustomCss(oldBlock, newCss);
  }
};

// Watch stylesheet changes to sync values
watch(
  () => stylesheetStore.customCss,
  () => {
    if (basePopup.value?.visible && !isUpdatingFromStore) {
      isUpdatingFromStore = true;
      loadValuesFromStylesheet();
      nextTick(() => {
        isUpdatingFromStore = false;
      });
    }
  }
);

// Also watch when exiting edit mode
watch(
  () => stylesheetStore.isEditing,
  (isEditing, wasEditing) => {
    if (basePopup.value?.visible && wasEditing && !isEditing && !isUpdatingFromStore) {
      isUpdatingFromStore = true;
      loadValuesFromStylesheet();
      nextTick(() => {
        isUpdatingFromStore = false;
      });
    }
  }
);

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

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

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

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

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

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

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

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

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

    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);
  }
};

const open = (element, event, count = null) => {
  isUpdatingFromStore = true;

  selectedElement.value = element;
  selector.value = getSelectorFromElement(element);

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

  // Detect inheritance state from CSS block state
  const blockState = stylesheetStore.getBlockState(selector.value);

  if (blockState === 'active') {
    basePopup.value.inheritanceLocked = false;
  } else {
    basePopup.value.inheritanceLocked = true;
  }

  // Load values from stylesheet (includes commented blocks)
  loadValuesFromStylesheet();

  // Open popup (sets visible, position, inits Coloris)
  basePopup.value.open(event);

  nextTick(() => {
    isUpdatingFromStore = false;
  });
};

const close = () => {
  basePopup.value?.close();
  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 (basePopup.value?.visible) {
    close();
    return;
  }

  open(element, event, elementCount);
};

const toggleInheritance = () => {
  const blockState = stylesheetStore.getBlockState(selector.value);

  if (basePopup.value.inheritanceLocked && blockState === 'commented') {
    stylesheetStore.uncommentCssBlock(selector.value);
    basePopup.value.inheritanceLocked = false;
  } else if (basePopup.value.inheritanceLocked && blockState === 'none') {
    if (selectedElement.value && props.iframeRef && props.iframeRef.contentWindow) {
      const computed = props.iframeRef.contentWindow.getComputedStyle(selectedElement.value);

      isUpdatingFromStore = true;

      fontFamily.value.value = computed.fontFamily.replace(/['"]/g, '').split(',')[0].trim();
      fontStyle.value.italic = computed.fontStyle === 'italic';
      fontWeight.value.value = parseInt(computed.fontWeight);

      const fontSizeMatch = computed.fontSize.match(/([\d.]+)(px|rem|em|pt)/);
      if (fontSizeMatch) {
        fontSize.value.value = parseFloat(fontSizeMatch[1]);
        fontSize.value.unit = fontSizeMatch[2];
      }

      textAlign.value.value = computed.textAlign;
      color.value.value = computed.color;
      background.value.value = computed.backgroundColor;

      const marginMatch = computed.marginTop.match(/([\d.]+)(px|mm|pt)/);
      if (marginMatch) {
        marginOuter.value.value = parseFloat(marginMatch[1]);
        marginOuter.value.unit = marginMatch[2];
      }

      const paddingMatch = computed.paddingTop.match(/([\d.]+)(px|mm|pt)/);
      if (paddingMatch) {
        paddingInner.value.value = parseFloat(paddingMatch[1]);
        paddingInner.value.unit = paddingMatch[2];
      }

      isUpdatingFromStore = false;
    }

    applyAllStyles();
    basePopup.value.inheritanceLocked = false;
  } else if (!basePopup.value.inheritanceLocked && blockState === 'active') {
    stylesheetStore.commentCssBlock(selector.value);
    basePopup.value.inheritanceLocked = true;
  }
};

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;
}
</style>