@mulsense/xnew 0.6.7 → 0.6.8

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 (6) hide show
  1. package/dist/addons/xpixi.js +1 -1
  2. package/dist/addons/xpixi.mjs +1 -1
  3. package/dist/xnew.d.ts +6 -3
  4. package/dist/xnew.js +9 -4
  5. package/dist/xnew.mjs +9 -4
  6. package/package.json +1 -1
package/dist/addons/xpixi.js CHANGED
@@ -52,7 +52,7 @@
52
52
  })).then((value) => {
53
53
  renderer = value;
54
54
  });
55
- let scene = new PIXI__namespace.Container();
55
+ const scene = new PIXI__namespace.Container();
56
56
  return {
57
57
  get renderer() { return renderer; },
58
58
  get scene() { return scene; },
package/dist/addons/xpixi.mjs CHANGED
@@ -30,7 +30,7 @@ function Root(unit, { canvas }) {
30
30
  })).then((value) => {
31
31
  renderer = value;
32
32
  });
33
- let scene = new PIXI.Container();
33
+ const scene = new PIXI.Container();
34
34
  return {
35
35
  get renderer() { return renderer; },
36
36
  get scene() { return scene; },
package/dist/xnew.d.ts CHANGED
@@ -179,10 +179,13 @@ declare function Accordion(unit: Unit): void;
179
179
  declare function Popup(unit: Unit): void;
180
180
 
181
181
  type ScreenFit = 'contain' | 'cover';
182
- declare function Screen(unit: Unit, { aspect, fit }?: {
183
- aspect?: number;
182
+ declare function Screen(unit: Unit, { width, height, fit }?: {
183
+ width?: number;
184
+ height?: number;
184
185
  fit?: ScreenFit;
185
- }): void;
186
+ }): {
187
+ readonly canvas: UnitElement;
188
+ };
186
189
 
187
190
  declare function AnalogStick(unit: Unit, { stroke, strokeOpacity, strokeWidth, strokeLinejoin, fill, fillOpacity }?: {
188
191
  stroke?: string;
package/dist/xnew.js CHANGED
@@ -1262,7 +1262,8 @@
1262
1262
  });
1263
1263
  }
1264
1264
 
1265
- function Screen(unit, { aspect, fit = 'contain' } = {}) {
1265
+ function Screen(unit, { width = 800, height = 600, fit = 'contain' } = {}) {
1266
+ const aspect = width / height;
1266
1267
  xnew$1.nest('<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; container-type: size; overflow: hidden;">');
1267
1268
  xnew$1.nest(`<div style="position: relative; aspect-ratio: ${aspect}; container-type: size; overflow: hidden;">`);
1268
1269
  if (fit === 'contain') {
@@ -1272,6 +1273,10 @@
1272
1273
  unit.element.style.flexShrink = '0';
1273
1274
  unit.element.style.width = `max(100cqw, calc(100cqh * ${aspect}))`;
1274
1275
  }
1276
+ const canvas = xnew$1(`<canvas width="${width}" height="${height}" style="width: 100%; height: 100%; vertical-align: bottom;">`);
1277
+ return {
1278
+ get canvas() { return canvas.element; }
1279
+ };
1275
1280
  }
1276
1281
 
1277
1282
  //----------------------------------------------------------------------------------------------------
@@ -1280,14 +1285,14 @@
1280
1285
  function SVGTemplate(self, { stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 1, strokeLinejoin = 'round', fill = null, fillOpacity = 0.8 }) {
1281
1286
  xnew$1.nest(`<svg
1282
1287
  viewBox="0 0 64 64"
1283
- style="position: absolute; width: 100%; height: 100%; user-select: none;
1288
+ style="position: absolute; width: 100%; height: 100%; user-select: none; -webkit-user-select: none;
1284
1289
  stroke: ${stroke}; stroke-opacity: ${strokeOpacity}; stroke-width: ${strokeWidth}; stroke-linejoin: ${strokeLinejoin};
1285
1290
  ${fill ? `fill: ${fill}; fill-opacity: ${fillOpacity};` : ''}
1286
1291
  ">`);
1287
1292
  }
1288
1293
  function AnalogStick(unit, { stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 1, strokeLinejoin = 'round', fill = '#FFF', fillOpacity = 0.8 } = {}) {
1289
1294
  xnew$1.nest(`<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; container-type: size;">`);
1290
- xnew$1.nest(`<div style="width: min(100cqw, 100cqh); aspect-ratio: 1; cursor: pointer; user-select: none; pointer-events: auto; overflow: hidden;">`);
1295
+ xnew$1.nest(`<div style="width: min(100cqw, 100cqh); aspect-ratio: 1; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; pointer-events: auto; overflow: hidden;">`);
1291
1296
  xnew$1((unit) => {
1292
1297
  xnew$1.extend(SVGTemplate, { fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin });
1293
1298
  xnew$1('<polygon points="32 7 27 13 37 13">');
@@ -1323,7 +1328,7 @@
1323
1328
  }
1324
1329
  function DPad(unit, { diagonal = true, stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 1, strokeLinejoin = 'round', fill = '#FFF', fillOpacity = 0.8 } = {}) {
1325
1330
  xnew$1.nest(`<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; container-type: size;">`);
1326
- xnew$1.nest(`<div style="width: min(100cqw, 100cqh); aspect-ratio: 1; cursor: pointer; user-select: none; pointer-events: auto; overflow: hidden;">`);
1331
+ xnew$1.nest(`<div style="width: min(100cqw, 100cqh); aspect-ratio: 1; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; pointer-events: auto; overflow: hidden;">`);
1327
1332
  const polygons = [
1328
1333
  '<polygon points="32 32 23 23 23 4 24 3 40 3 41 4 41 23">',
1329
1334
  '<polygon points="32 32 23 41 23 60 24 61 40 61 41 60 41 41">',
package/dist/xnew.mjs CHANGED
@@ -1256,7 +1256,8 @@ function Popup(unit) {
1256
1256
  });
1257
1257
  }
1258
1258
 
1259
- function Screen(unit, { aspect, fit = 'contain' } = {}) {
1259
+ function Screen(unit, { width = 800, height = 600, fit = 'contain' } = {}) {
1260
+ const aspect = width / height;
1260
1261
  xnew$1.nest('<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; container-type: size; overflow: hidden;">');
1261
1262
  xnew$1.nest(`<div style="position: relative; aspect-ratio: ${aspect}; container-type: size; overflow: hidden;">`);
1262
1263
  if (fit === 'contain') {
@@ -1266,6 +1267,10 @@ function Screen(unit, { aspect, fit = 'contain' } = {}) {
1266
1267
  unit.element.style.flexShrink = '0';
1267
1268
  unit.element.style.width = `max(100cqw, calc(100cqh * ${aspect}))`;
1268
1269
  }
1270
+ const canvas = xnew$1(`<canvas width="${width}" height="${height}" style="width: 100%; height: 100%; vertical-align: bottom;">`);
1271
+ return {
1272
+ get canvas() { return canvas.element; }
1273
+ };
1269
1274
  }
1270
1275
 
1271
1276
  //----------------------------------------------------------------------------------------------------
@@ -1274,14 +1279,14 @@ function Screen(unit, { aspect, fit = 'contain' } = {}) {
1274
1279
  function SVGTemplate(self, { stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 1, strokeLinejoin = 'round', fill = null, fillOpacity = 0.8 }) {
1275
1280
  xnew$1.nest(`<svg
1276
1281
  viewBox="0 0 64 64"
1277
- style="position: absolute; width: 100%; height: 100%; user-select: none;
1282
+ style="position: absolute; width: 100%; height: 100%; user-select: none; -webkit-user-select: none;
1278
1283
  stroke: ${stroke}; stroke-opacity: ${strokeOpacity}; stroke-width: ${strokeWidth}; stroke-linejoin: ${strokeLinejoin};
1279
1284
  ${fill ? `fill: ${fill}; fill-opacity: ${fillOpacity};` : ''}
1280
1285
  ">`);
1281
1286
  }
1282
1287
  function AnalogStick(unit, { stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 1, strokeLinejoin = 'round', fill = '#FFF', fillOpacity = 0.8 } = {}) {
1283
1288
  xnew$1.nest(`<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; container-type: size;">`);
1284
- xnew$1.nest(`<div style="width: min(100cqw, 100cqh); aspect-ratio: 1; cursor: pointer; user-select: none; pointer-events: auto; overflow: hidden;">`);
1289
+ xnew$1.nest(`<div style="width: min(100cqw, 100cqh); aspect-ratio: 1; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; pointer-events: auto; overflow: hidden;">`);
1285
1290
  xnew$1((unit) => {
1286
1291
  xnew$1.extend(SVGTemplate, { fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin });
1287
1292
  xnew$1('<polygon points="32 7 27 13 37 13">');
@@ -1317,7 +1322,7 @@ function AnalogStick(unit, { stroke = 'currentColor', strokeOpacity = 0.8, strok
1317
1322
  }
1318
1323
  function DPad(unit, { diagonal = true, stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 1, strokeLinejoin = 'round', fill = '#FFF', fillOpacity = 0.8 } = {}) {
1319
1324
  xnew$1.nest(`<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; container-type: size;">`);
1320
- xnew$1.nest(`<div style="width: min(100cqw, 100cqh); aspect-ratio: 1; cursor: pointer; user-select: none; pointer-events: auto; overflow: hidden;">`);
1325
+ xnew$1.nest(`<div style="width: min(100cqw, 100cqh); aspect-ratio: 1; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; pointer-events: auto; overflow: hidden;">`);
1321
1326
  const polygons = [
1322
1327
  '<polygon points="32 32 23 23 23 4 24 3 40 3 41 4 41 23">',
1323
1328
  '<polygon points="32 32 23 41 23 60 24 61 40 61 41 60 41 41">',
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "keywords": [
5
5
  "Component-Oriented Programming"
6
6
  ],
7
- "version": "0.6.7",
7
+ "version": "0.6.8",
8
8
  "main": "dist/xnew.js",
9
9
  "module": "dist/xnew.mjs",
10
10
  "types": "dist/xnew.d.ts",