humanmap-vas 1.0.2 → 1.0.22

package/humanmap-vas-standalone.js

@@ -117,19 +117,113 @@
       this._view=this.getAttribute('view') || 'head_right';
       this._zones=ZONES;
       this._selected=new Set();
-      this._bg={
-        head_right:'src/img/head_right.svg',
-        head_left:'src/img/head_left.svg',
-        neck_right:'src/img/neck_right.svg',
-        neck_left:'src/img/neck_left.svg',
-        thorax_front:'src/img/torax_front.svg',
-        thorax_back:'src/img/torax_back.svg'
+
+      this._upgradeProperty('selectedIds');
+      this._upgradeProperty('selectedZones');
+
+
+      // Detectar automáticamente la ruta base del script (compatible con todos los entornos)
+      let scriptBase = '';
+      try {
+        if (document.currentScript && document.currentScript.src) {
+          scriptBase = document.currentScript.src.split('/').slice(0, -1).join('/') + '/';
+        } else {
+          const scripts = document.getElementsByTagName('script');
+          if (scripts.length > 0) {
+            const last = scripts[scripts.length - 1];
+            scriptBase = last.src.split('/').slice(0, -1).join('/') + '/';
+          }
+        }
+      } catch (err) {
+        console.warn('⚠️ No se pudo detectar ruta base del script:', err);
+      }
+
+      // Definir la raíz de imágenes (desde atributo o autodetectada)
+      this._imgRoot = this.getAttribute('img-root') || (scriptBase + 'src/img/');
+
+      // Configurar rutas base
+      this._bg = {
+        head_right: this._imgRoot + 'head_right.svg',
+        head_left: this._imgRoot + 'head_left.svg',
+        neck_right: this._imgRoot + 'neck_right.svg',
+        neck_left: this._imgRoot + 'neck_left.svg',
+        thorax_front: this._imgRoot + 'torax_front.svg',
+        thorax_back: this._imgRoot + 'torax_back.svg'
       };
     }
 
-    connectedCallback(){this._renderShell();this._renderCanvas();}
-    static get observedAttributes() { return ['view']; }
-    attributeChangedCallback(n,o,v){if(o!==v&&n==='view'){this._view=v;if(this._root)this._renderCanvas();}}
+    // Captura valores asignados *antes* de que el custom element se registre
+    _upgradeProperty(prop) {
+      if (this.hasOwnProperty(prop)) {
+        const value = this[prop];
+        delete this[prop];     // elimina la propiedad “propia” del elemento “no mejorado”
+        this[prop] = value;    // re-ejecuta el setter ya del elemento mejorado
+      }
+    }
+
+    connectedCallback(){this._renderShell();this._renderCanvas();this.dispatchEvent(new CustomEvent('human-map-vas:ready'));}
+
+    static get observedAttributes() { return ['view', 'img-root']; }
+
+    attributeChangedCallback (name, oldValue, newValue) {
+      if (oldValue === newValue) return;
+
+      if (name === 'view') {
+        this._view = newValue;
+        if (this._root) this._renderCanvas();
+        return;
+      }
+
+      if (name === 'img-root' && newValue) {
+        this._imgRoot = newValue.endsWith('/') ? newValue : newValue + '/';
+        this._bg = {
+          head_right: this._imgRoot + 'head_right.svg',
+          head_left: this._imgRoot + 'head_left.svg',
+          neck_right: this._imgRoot + 'neck_right.svg',
+          neck_left: this._imgRoot + 'neck_left.svg',
+          thorax_front: this._imgRoot + 'torax_front.svg',
+          thorax_back: this._imgRoot + 'torax_back.svg'
+        };
+        if (this._root) this._renderCanvas();
+        return;
+      }
+    }
+
+    // Devuelve solo IDs seleccionados
+    get selectedIds() {
+      return Array.from(this._selected);
+    }
+
+    // Asigna selección por IDs (array de strings)
+    set selectedIds(ids) {
+      if (!Array.isArray(ids)) return;
+      this._selected = new Set(ids);
+      if (this._root) { this._renderZones(); this._emit(); }
+    }
+
+    // Devuelve objetos completos (id, code, label, view)
+    get selectedZones() {
+      const map = new Map(this._zones.map(z => [z.id, z]));
+      return this.selectedIds.map(id => {
+        const z = map.get(id);
+        return z ? { id: z.id, code: z.code, label: z.label, view: z.view } : { id };
+      });
+    }
+
+    // Asigna selección pasando objetos (tomamos los IDs)
+    set selectedZones(zones) {
+      if (!Array.isArray(zones)) return;
+      const ids = zones.map(z => z && z.id).filter(Boolean);
+      this.selectedIds = ids;  // reutiliza el setter de IDs para redibujar y emitir
+    }
+
+    get selectedCodes() {
+      const map = new Map(this._zones.map(z => [z.id, z]));
+      return this.selectedIds.map(id => {
+        const z = map.get(id);
+        return z ? z.code : { id };
+      });
+    }
 
     getSelected(){
       const map=new Map(this._zones.map(z=>[z.id,z]));
@@ -142,8 +236,12 @@
     clear(){this._selected.clear();this._renderZones();this._emit();}
 
     _renderShell(){
-      const style=document.createElement('style');style.textContent=STYLE;
-      this._root=document.createElement('div');this._root.className='hm';
+      const style=document.createElement('style');
+      style.textContent=STYLE;
+
+      this._root=document.createElement('div');
+      this._root.className='hm';
+
       const opts=VIEWS.map(v=>`<option value="${v.id}">${v.label}</option>`).join('');
       this._root.innerHTML=`
         <div class="hm-toolbar">
@@ -163,6 +261,7 @@
           </svg>
         </div>`;
       this.shadowRoot.append(style,this._root);
+
       this._els={
         cur:this.shadowRoot.getElementById('cur'),
         picker:this.shadowRoot.getElementById('picker'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "humanmap-vas",
-  "version": "1.0.2",
+  "version": "1.0.22",
   "description": "**HumanMap VAS** es una librería web que permite graficar el cuerpo humano con vistas anatómicas interactivas para identificar zonas según el sistema VAS. Desarrollada como *Web Component standalone*, puede integrarse fácilmente en proyectos **HTML**, **Django**, o **Vue.js**.",
   "main": "humanmap-vas-standalone.js",
   "files": [