<div>
  <div class="svgEditorWrapper">
    <iframe
      src="lib/svgedit/editor/svg-editor.html?lang=fr"
      id="iframe"
    ></iframe>
  </div>
  <div class="svgEditorForm">
    <form class="form-inline">
      <div class="form-group">
        <label>Nom</label>
        <input
          type="text"
          class="form-control"
          placeholder="Nom"
          ng-model="svgEditorData.nom"
        />
      </div>
      <!-- <div class="form-group" >
                <label>Identifiant</label>
                <input type="text" class="form-control" placeholder="Identifiant" ng-model="svgEditorData.identifiant">
            </div> -->
      <div class="form-group" style="display: none;">
        <label>SVG</label>
        <textarea
          id="thesvgvalue"
          class="form-control"
          ng-model="svgEditorData.svg"
        />
        <textarea
          id="thesvgvalueToLoad"
          class="form-control"
          ng-model="svgEditorData.svgToload"
        />
      </div>
      <div
        class="btn btn-sm btn-primary"
        ng-click="saveEfVectoriel()"
        ng-disabled="!svgEditorData.nom ||  
            !svgEditorData.svg"
      >
        <span ng-if="!svgEditorData.featureId">Enregistrer</span>
        <span ng-if="svgEditorData.featureId">Mettre à jour</span>
      </div>
    </form>

    <!-- <form>
            <div class="form-group">
              
            </div>
            <div class="form-group">
              
            </div>
          <div class="form-group">
            <label>Scale</label>
            <input type="number" step="0.01" class="form-control"  placeholder="echelle" ng-model="svgEditorData.scale">
        </div> 
            <div class="form-group">
               
            </div>
    </form> -->
  </div>
  <!-- Récupération du svg depuis la frame -->
  <script type="text/javascript">
    // send
    var myInput = $('#thesvgvalue');
    var myInputToLoad = $('#thesvgvalueToLoad');

    // receive
    var eventMethod = window.addEventListener
      ? 'addEventListener'
      : 'attachEvent';
    var eventer = window[eventMethod];
    var messageEvent = eventMethod === 'attachEvent' ? 'onmessage' : 'message';
    eventer(messageEvent, function(e) {
      var toLoadVal = myInputToLoad.val();

      // svgedit indique un changement dans le svg
      if (e.data.action === 'saveSvg') {
        myInput.val(e.data.svg);
        myInput.trigger('input');
      }

      // svgedit veut connaitre la valeur du svg
      if (e.data.action === 'getSvg') {
        if (toLoadVal == '') return;
        iframe.contentWindow.postMessage(toLoadVal, '*');
      }
    });
  </script>
</div>
