@srsergio/taptapp-ar 1.0.28 → 1.0.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/compiler/simple-ar.js +9 -2
  2. package/package.json +1 -1
  3. package/src/compiler/simple-ar.js +10 -2
package/dist/compiler/simple-ar.js CHANGED
@@ -174,13 +174,20 @@ class SimpleAR {
174
174
  console.log('Rotated Angle:', (rotation * 180 / Math.PI).toFixed(1), 'deg');
175
175
  console.log('Final Scale:', finalScale.toFixed(4));
176
176
  }
177
- // Apply
177
+ // Apply styles to prevent CSS interference (like max-width: 100%)
178
+ this.overlay.style.maxWidth = 'none';
179
+ this.overlay.style.maxHeight = 'none';
178
180
  this.overlay.style.width = `${markerW}px`;
179
- this.overlay.style.height = 'auto'; // Maintain aspect ratio of the overlay asset
181
+ this.overlay.style.height = 'auto'; // Maintain aspect ratio if user has a custom overlay
180
182
  this.overlay.style.position = 'absolute';
181
183
  this.overlay.style.transformOrigin = 'center center';
184
+ this.overlay.style.display = 'block';
185
+ this.overlay.style.margin = '0';
182
186
  this.overlay.style.left = '0';
183
187
  this.overlay.style.top = '0';
188
+ // Apply final transform
189
+ // We use translate to move the center of the elements to 0,0
190
+ // Then apply our calculated screen position
184
191
  this.overlay.style.transform = `
185
192
  translate(${screenX}px, ${screenY}px)
186
193
  translate(-50%, -50%)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@srsergio/taptapp-ar",
3
- "version": "1.0.28",
3
+ "version": "1.0.29",
4
4
  "description": "AR Compiler for Node.js and Browser",
5
5
  "repository": {
6
6
  "type": "git",
package/src/compiler/simple-ar.js CHANGED
@@ -207,13 +207,21 @@ class SimpleAR {
207
207
  console.log('Final Scale:', finalScale.toFixed(4));
208
208
  }
209
209
 
210
- // Apply
210
+ // Apply styles to prevent CSS interference (like max-width: 100%)
211
+ this.overlay.style.maxWidth = 'none';
212
+ this.overlay.style.maxHeight = 'none';
211
213
  this.overlay.style.width = `${markerW}px`;
212
- this.overlay.style.height = 'auto'; // Maintain aspect ratio of the overlay asset
214
+ this.overlay.style.height = 'auto'; // Maintain aspect ratio if user has a custom overlay
213
215
  this.overlay.style.position = 'absolute';
214
216
  this.overlay.style.transformOrigin = 'center center';
217
+ this.overlay.style.display = 'block';
218
+ this.overlay.style.margin = '0';
215
219
  this.overlay.style.left = '0';
216
220
  this.overlay.style.top = '0';
221
+
222
+ // Apply final transform
223
+ // We use translate to move the center of the elements to 0,0
224
+ // Then apply our calculated screen position
217
225
  this.overlay.style.transform = `
218
226
  translate(${screenX}px, ${screenY}px)
219
227
  translate(-50%, -50%)