@tarojs/taro-h5 3.3.19 → 3.3.20

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 (18) hide show
  1. package/dist/api/canvas/CanvasContext.js +33 -33
  2. package/dist/api/canvas/createCanvasContext.js +1 -1
  3. package/dist/api/location/chooseLocation.js +2 -2
  4. package/dist/api/media/audio/index.js +16 -16
  5. package/dist/api/media/image/previewImage.js +3 -24
  6. package/dist/api/ui/animation/index.js +1 -6
  7. package/dist/api/wxml/nodesRef.js +10 -3
  8. package/dist/api/wxml/selectorQuery.js +73 -25
  9. package/dist/index.cjs.js +138 -109
  10. package/package.json +7 -7
  11. package/src/api/canvas/CanvasContext.ts +35 -32
  12. package/src/api/canvas/createCanvasContext.ts +2 -2
  13. package/src/api/location/chooseLocation.ts +2 -2
  14. package/src/api/media/audio/index.ts +16 -16
  15. package/src/api/media/image/previewImage.ts +3 -24
  16. package/src/api/ui/animation/index.ts +1 -6
  17. package/src/api/wxml/nodesRef.ts +10 -3
  18. package/src/api/wxml/selectorQuery.ts +68 -23
package/dist/api/canvas/CanvasContext.js CHANGED
@@ -5,49 +5,25 @@ const TextBaseLineMap = {
5
5
  normal: 'alphabetic'
6
6
  };
7
7
  export class CanvasContext {
8
- constructor() {
8
+ constructor(canvas, ctx) {
9
9
  this.actions = [];
10
- this.arc = this.enqueueActions(this.ctx.arc);
11
- this.arcTo = this.enqueueActions(this.ctx.arcTo);
12
- this.beginPath = this.enqueueActions(this.ctx.beginPath);
13
- this.bezierCurveTo = this.enqueueActions(this.ctx.bezierCurveTo);
14
- this.clearRect = this.enqueueActions(this.ctx.clearRect);
15
- this.clip = this.enqueueActions(this.ctx.clip);
16
- this.closePath = this.enqueueActions(this.ctx.closePath);
17
- this.fill = this.enqueueActions(this.ctx.fill);
18
- this.fillRect = this.enqueueActions(this.ctx.fillRect);
19
- this.fillText = this.enqueueActions(this.ctx.fillText);
20
- this.lineTo = this.enqueueActions(this.ctx.lineTo);
21
- this.moveTo = this.enqueueActions(this.ctx.moveTo);
22
- this.quadraticCurveTo = this.enqueueActions(this.ctx.quadraticCurveTo);
23
- this.rect = this.enqueueActions(this.ctx.rect);
24
- this.restore = this.enqueueActions(this.ctx.restore);
25
- this.rotate = this.enqueueActions(this.ctx.rotate);
26
- this.save = this.enqueueActions(this.ctx.save);
27
- this.scale = this.enqueueActions(this.ctx.scale);
28
- this.setTransform = this.enqueueActions(this.ctx.setTransform);
29
- this.stroke = this.enqueueActions(this.ctx.stroke);
30
- this.strokeRect = this.enqueueActions(this.ctx.strokeRect);
31
- this.strokeText = this.enqueueActions(this.ctx.strokeText);
32
- this.transform = this.enqueueActions(this.ctx.transform);
33
- this.translate = this.enqueueActions(this.ctx.translate);
10
+ this.canvas = canvas;
11
+ this.ctx = ctx;
34
12
  }
35
13
  set ctx(e) {
36
14
  this.__raw__ = e;
37
15
  }
38
16
  get ctx() {
39
- return this.__raw__;
17
+ return this.__raw__ || {};
40
18
  }
41
19
  emptyActions() {
42
20
  this.actions.length = 0;
43
21
  }
44
- enqueueActions(func) {
45
- return (...args) => {
46
- this.actions.push({
47
- func,
48
- args
49
- });
50
- };
22
+ enqueueActions(func, ...args) {
23
+ this.actions.push({
24
+ func,
25
+ args
26
+ });
51
27
  }
52
28
  set fillStyle(e) { this.enqueueActions(() => { this.ctx.fillStyle = e; }); }
53
29
  get fillStyle() { return this.ctx.fillStyle; }
@@ -89,6 +65,13 @@ export class CanvasContext {
89
65
  get imageSmoothingQuality() { return this.ctx.imageSmoothingQuality; }
90
66
  set filter(e) { this.enqueueActions(() => { this.ctx.filter = e; }); }
91
67
  get filter() { return this.ctx.filter; }
68
+ arc(...args) { return this.enqueueActions(this.ctx.arc, ...args); }
69
+ arcTo(...args) { return this.enqueueActions(this.ctx.arcTo, ...args); }
70
+ beginPath(...args) { return this.enqueueActions(this.ctx.beginPath, ...args); }
71
+ bezierCurveTo(...args) { return this.enqueueActions(this.ctx.bezierCurveTo, ...args); }
72
+ clearRect(...args) { return this.enqueueActions(this.ctx.clearRect, ...args); }
73
+ clip(...args) { return this.enqueueActions(this.ctx.clip, ...args); }
74
+ closePath(...args) { return this.enqueueActions(this.ctx.closePath, ...args); }
92
75
  createPattern(image, repetition) {
93
76
  return this.createPattern(image, repetition);
94
77
  }
@@ -125,6 +108,17 @@ export class CanvasContext {
125
108
  this.ctx.drawImage(imageResource, ...extra);
126
109
  });
127
110
  }
111
+ fill(...args) { return this.enqueueActions(this.ctx.fill, ...args); }
112
+ fillRect(...args) { return this.enqueueActions(this.ctx.fillRect, ...args); }
113
+ fillText(...args) { return this.enqueueActions(this.ctx.fillText, ...args); }
114
+ lineTo(...args) { return this.enqueueActions(this.ctx.lineTo, ...args); }
115
+ moveTo(...args) { return this.enqueueActions(this.ctx.moveTo, ...args); }
116
+ quadraticCurveTo(...args) { return this.enqueueActions(this.ctx.quadraticCurveTo, ...args); }
117
+ rect(...args) { return this.enqueueActions(this.ctx.rect, ...args); }
118
+ restore(...args) { return this.enqueueActions(this.ctx.restore, ...args); }
119
+ rotate(...args) { return this.enqueueActions(this.ctx.rotate, ...args); }
120
+ save(...args) { return this.enqueueActions(this.ctx.save, ...args); }
121
+ scale(...args) { return this.enqueueActions(this.ctx.scale, ...args); }
128
122
  setFillStyle(color) {
129
123
  this.enqueueActions(() => { this.ctx.fillStyle = color; });
130
124
  }
@@ -169,6 +163,12 @@ export class CanvasContext {
169
163
  setTextBaseline(textBaseline) {
170
164
  this.textBaseline = TextBaseLineMap[textBaseline] || 'alphabetic';
171
165
  }
166
+ setTransform(...args) { return this.enqueueActions(this.ctx.setTransform, ...args); }
167
+ stroke(...args) { return this.enqueueActions(this.ctx.stroke, ...args); }
168
+ strokeRect(...args) { return this.enqueueActions(this.ctx.strokeRect, ...args); }
169
+ strokeText(...args) { return this.enqueueActions(this.ctx.strokeText, ...args); }
170
+ transform(...args) { return this.enqueueActions(this.ctx.transform, ...args); }
171
+ translate(...args) { return this.enqueueActions(this.ctx.translate, ...args); }
172
172
  measureText(text) {
173
173
  return this.measureText(text);
174
174
  }
package/dist/api/canvas/createCanvasContext.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import { findDOM } from '../utils';
2
2
  import { CanvasContext } from './CanvasContext';
3
3
  export const createCanvasContext = (canvasId, inst) => {
4
- const context = new CanvasContext();
5
4
  const el = findDOM(inst);
6
5
  const canvas = el === null || el === void 0 ? void 0 : el.querySelector(`canvas[canvas-id="${canvasId}"]`);
7
6
  const ctx = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d');
7
+ const context = new CanvasContext(canvas, ctx);
8
8
  if (!ctx)
9
9
  return context;
10
10
  context.canvas = canvas;
package/dist/api/location/chooseLocation.js CHANGED
@@ -24,12 +24,12 @@ function createLocationChooser(handler, key = LOCATION_APIKEY) {
24
24
  main.style.top = '100%';
25
25
  }
26
26
  function back() {
27
- handler({ errMsg: 'cancel' });
28
27
  hide();
28
+ handler({ errMsg: 'cancel' });
29
29
  }
30
30
  function submit() {
31
- handler();
32
31
  hide();
32
+ handler();
33
33
  }
34
34
  function remove() {
35
35
  container.remove();
package/dist/api/media/audio/index.js CHANGED
@@ -22,26 +22,26 @@ class InnerAudioContext {
22
22
  this.Instance = undefined;
23
23
  }
24
24
  };
25
- this.onCanplay = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.addEventListener('oncanplay', callback); };
26
- this.onPlay = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.addEventListener('onplay', callback); };
27
- this.onPause = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.addEventListener('onpause', callback); };
25
+ this.onCanplay = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.addEventListener('canplay', callback); };
26
+ this.onPlay = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.addEventListener('play', callback); };
27
+ this.onPause = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.addEventListener('pause', callback); };
28
28
  this.onStop = (callback = () => { }) => this.stopStack.add(callback);
29
- this.onEnded = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.addEventListener('onended', callback); };
30
- this.onTimeUpdate = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.addEventListener('ontimeUpdate', callback); };
29
+ this.onEnded = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.addEventListener('ended', callback); };
30
+ this.onTimeUpdate = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.addEventListener('timeupdate', callback); };
31
31
  this.onError = (callback) => this.errorStack.add(callback);
32
- this.onWaiting = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.addEventListener('onwaiting', callback); };
33
- this.onSeeking = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.addEventListener('onseeking', callback); };
34
- this.onSeeked = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.addEventListener('onseeked', callback); };
35
- this.offCanplay = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.removeEventListener('offcanplay', callback); };
36
- this.offPlay = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.removeEventListener('offplay', callback); };
37
- this.offPause = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.removeEventListener('offpause', callback); };
32
+ this.onWaiting = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.addEventListener('waiting', callback); };
33
+ this.onSeeking = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.addEventListener('seeking', callback); };
34
+ this.onSeeked = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.addEventListener('seeked', callback); };
35
+ this.offCanplay = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.removeEventListener('canplay', callback); };
36
+ this.offPlay = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.removeEventListener('play', callback); };
37
+ this.offPause = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.removeEventListener('pause', callback); };
38
38
  this.offStop = (callback = () => { }) => this.stopStack.remove(callback);
39
- this.offEnded = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.removeEventListener('offended', callback); };
40
- this.offTimeUpdate = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.removeEventListener('offtimeUpdate', callback); };
39
+ this.offEnded = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.removeEventListener('ended', callback); };
40
+ this.offTimeUpdate = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.removeEventListener('timeupdate', callback); };
41
41
  this.offError = (callback = () => { }) => this.errorStack.remove(callback);
42
- this.offWaiting = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.removeEventListener('offwaiting', callback); };
43
- this.offSeeking = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.removeEventListener('offseeking', callback); };
44
- this.offSeeked = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.removeEventListener('offseeked', callback); };
42
+ this.offWaiting = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.removeEventListener('waiting', callback); };
43
+ this.offSeeking = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.removeEventListener('seeking', callback); };
44
+ this.offSeeked = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.removeEventListener('seeked', callback); };
45
45
  this.Instance = new Audio();
46
46
  this.errorStack = new CallbackManager();
47
47
  this.stopStack = new CallbackManager();
package/dist/api/media/image/previewImage.js CHANGED
@@ -4,23 +4,12 @@ export const previewImage = async (options) => {
4
4
  function loadImage(url, loadFail) {
5
5
  return new Promise((resolve) => {
6
6
  const item = document.createElement('taro-swiper-item-core');
7
- item.style.cssText = `
8
- display: flex;
9
- align-items: start;
10
- justify-content: center;
11
- overflow-y: scroll;
12
- `;
7
+ item.style.cssText = 'display:flex;align-items:start;justify-content:center;overflow-y:scroll;';
13
8
  const image = new Image();
14
9
  image.style.maxWidth = '100%';
15
10
  image.src = url;
16
11
  const div = document.createElement('div');
17
- div.style.cssText = `
18
- display: flex;
19
- align-items: center;
20
- justify-content: center;
21
- max-width: 100%;
22
- min-height: 100%;
23
- `;
12
+ div.style.cssText = 'display:flex;align-items:center;justify-content:center;max-width:100%;min-height:100%;';
24
13
  div.appendChild(image);
25
14
  item.appendChild(div);
26
15
  resolve(item);
@@ -41,17 +30,7 @@ export const previewImage = async (options) => {
41
30
  const handle = new MethodHandler({ name: 'previewImage', success, fail, complete });
42
31
  const container = document.createElement('div');
43
32
  container.classList.add('preview-image');
44
- container.style.cssText = `
45
- position: fixed;
46
- top: 0;
47
- left: 0;
48
- z-index: 1050;
49
- width: 100%;
50
- height: 100%;
51
- overflow: hidden;
52
- outline: 0;
53
- background-color: #111;
54
- `;
33
+ container.style.cssText = 'position:fixed;top:0;left:0;z-index:1050;width:100%;height:100%;overflow:hidden;outline:0;background-color:#111;';
55
34
  container.addEventListener('click', () => {
56
35
  container.remove();
57
36
  });
package/dist/api/ui/animation/index.js CHANGED
@@ -24,12 +24,7 @@ const styleSheet = new StyleSheet();
24
24
  let TRANSITION_END = 'transitionend';
25
25
  let TRANSFORM = 'transform';
26
26
  const $detect = document.createElement('div');
27
- $detect.style.cssText = `
28
- -webkit-animation-name: webkit;
29
- -moz-animation-name: moz;
30
- -ms-animation-name: ms;
31
- animation-name: standard;
32
- `;
27
+ $detect.style.cssText = '-webkit-animation-name:webkit;-moz-animation-name:moz;-ms-animation-name:ms;animation-name:standard;';
33
28
  if ($detect.style['animation-name'] === 'standard') {
34
29
  TRANSITION_END = 'transitionend';
35
30
  TRANSFORM = 'transform';
package/dist/api/wxml/nodesRef.js CHANGED
@@ -1,13 +1,20 @@
1
- import { temporarilyNotSupport } from '../utils';
2
1
  export class NodesRef {
3
2
  constructor(selector, querySelectorQuery, single) {
4
- this.context = temporarilyNotSupport('NodesRef.context');
5
- this.node = temporarilyNotSupport('NodesRef.node');
6
3
  this._component = querySelectorQuery._component;
7
4
  this._selector = selector;
8
5
  this._selectorQuery = querySelectorQuery;
9
6
  this._single = single;
10
7
  }
8
+ context(cb) {
9
+ const { _selector, _component, _single, _selectorQuery } = this;
10
+ _selectorQuery._push(_selector, _component, _single, { context: !0 }, cb);
11
+ return _selectorQuery;
12
+ }
13
+ node(cb) {
14
+ const { _selector, _component, _single, _selectorQuery } = this;
15
+ _selectorQuery._push(_selector, _component, _single, { nodeCanvasType: !0, node: !0 }, cb);
16
+ return _selectorQuery;
17
+ }
11
18
  boundingClientRect(cb) {
12
19
  const { _selector, _component, _single, _selectorQuery } = this;
13
20
  _selectorQuery._push(_selector, _component, _single, { id: !0, dataset: !0, rect: !0, size: !0 }, cb);
package/dist/api/wxml/selectorQuery.js CHANGED
@@ -1,38 +1,86 @@
1
+ import { CanvasContext } from '../canvas/CanvasContext';
1
2
  import { findDOM } from '../utils';
2
3
  import { NodesRef } from './nodesRef';
3
4
  function filter(fields, dom, selector) {
4
5
  if (!dom)
5
6
  return null;
6
- const { id, dataset, rect, size, scrollOffset, properties = [], computedStyle = [] } = fields;
7
- const { left, right, top, bottom, width, height } = dom.getBoundingClientRect();
8
- const isViewport = selector === 'html';
7
+ const isViewport = selector === '.taro_page';
8
+ const { id, dataset, rect, size, scrollOffset, properties = [], computedStyle = [], nodeCanvasType, node, context } = fields;
9
9
  const res = {};
10
- if (id)
11
- res.id = dom.id;
12
- if (dataset)
13
- res.dataset = Object.assign({}, dom.dataset);
14
- if (rect) {
15
- if (!isViewport) {
16
- res.left = left;
17
- res.right = right;
18
- res.top = top;
19
- res.bottom = bottom;
10
+ if (nodeCanvasType && node) {
11
+ const tagName = dom.tagName;
12
+ res.node = {
13
+ id: dom.id,
14
+ $taroElement: dom
15
+ };
16
+ if (/^taro-canvas-core/i.test(tagName)) {
17
+ const type = dom.type || '';
18
+ res.nodeCanvasType = type;
19
+ const canvas = dom.getElementsByTagName('canvas')[0];
20
+ if (/^(2d|webgl)/i.test(type) && canvas) {
21
+ res.node = canvas;
22
+ }
23
+ else {
24
+ res.node = null;
25
+ }
20
26
  }
21
27
  else {
22
- res.left = 0;
23
- res.right = 0;
24
- res.top = 0;
25
- res.bottom = 0;
28
+ res.nodeCanvasType = '';
29
+ res.node = dom;
26
30
  }
31
+ return res;
27
32
  }
28
- if (size) {
29
- if (!isViewport) {
30
- res.width = width;
31
- res.height = height;
33
+ if (context) {
34
+ const tagName = dom.tagName;
35
+ if (/^taro-video-core/i.test(tagName)) {
36
+ return { context: dom };
32
37
  }
33
- else {
34
- res.width = dom.clientWidth;
35
- res.height = dom.clientHeight;
38
+ else if (/^taro-canvas-core/i.test(tagName)) {
39
+ const type = dom.type || '2d';
40
+ const canvas = dom === null || dom === void 0 ? void 0 : dom.querySelector('canvas');
41
+ const ctx = canvas === null || canvas === void 0 ? void 0 : canvas.getContext(type);
42
+ return { context: new CanvasContext(canvas, ctx) };
43
+ }
44
+ else if (/^taro-live-player-core/i.test(tagName)) {
45
+ console.error('暂时不支持通过 NodesRef.context 获取 LivePlayerContext');
46
+ }
47
+ else if (/^taro-editor-core/i.test(tagName)) {
48
+ console.error('暂时不支持通过 NodesRef.context 获取 EditorContext');
49
+ }
50
+ else if (/^taro-map-core/i.test(tagName)) {
51
+ console.error('暂时不支持通过 NodesRef.context 获取 MapContext');
52
+ }
53
+ return;
54
+ }
55
+ if (id)
56
+ res.id = dom.id;
57
+ if (dataset)
58
+ res.dataset = Object.assign({}, dom.dataset);
59
+ if (rect || size) {
60
+ const { left, right, top, bottom, width, height } = dom.getBoundingClientRect();
61
+ if (rect) {
62
+ if (!isViewport) {
63
+ res.left = left;
64
+ res.right = right;
65
+ res.top = top;
66
+ res.bottom = bottom;
67
+ }
68
+ else {
69
+ res.left = 0;
70
+ res.right = 0;
71
+ res.top = 0;
72
+ res.bottom = 0;
73
+ }
74
+ }
75
+ if (size) {
76
+ if (!isViewport) {
77
+ res.width = width;
78
+ res.height = height;
79
+ }
80
+ else {
81
+ res.width = dom.clientWidth;
82
+ res.height = dom.clientHeight;
83
+ }
36
84
  }
37
85
  }
38
86
  if (scrollOffset) {
@@ -115,7 +163,7 @@ export class SelectorQuery {
115
163
  return new NodesRef(selector, this, false);
116
164
  }
117
165
  selectViewport() {
118
- return new NodesRef('html', this, true);
166
+ return new NodesRef('.taro_page', this, true);
119
167
  }
120
168
  exec(cb) {
121
169
  queryBat(this._queue, res => {
package/dist/index.cjs.js CHANGED
@@ -1473,49 +1473,25 @@ const TextBaseLineMap = {
1473
1473
  normal: 'alphabetic'
1474
1474
  };
1475
1475
  class CanvasContext {
1476
- constructor() {
1476
+ constructor(canvas, ctx) {
1477
1477
  this.actions = [];
1478
- this.arc = this.enqueueActions(this.ctx.arc);
1479
- this.arcTo = this.enqueueActions(this.ctx.arcTo);
1480
- this.beginPath = this.enqueueActions(this.ctx.beginPath);
1481
- this.bezierCurveTo = this.enqueueActions(this.ctx.bezierCurveTo);
1482
- this.clearRect = this.enqueueActions(this.ctx.clearRect);
1483
- this.clip = this.enqueueActions(this.ctx.clip);
1484
- this.closePath = this.enqueueActions(this.ctx.closePath);
1485
- this.fill = this.enqueueActions(this.ctx.fill);
1486
- this.fillRect = this.enqueueActions(this.ctx.fillRect);
1487
- this.fillText = this.enqueueActions(this.ctx.fillText);
1488
- this.lineTo = this.enqueueActions(this.ctx.lineTo);
1489
- this.moveTo = this.enqueueActions(this.ctx.moveTo);
1490
- this.quadraticCurveTo = this.enqueueActions(this.ctx.quadraticCurveTo);
1491
- this.rect = this.enqueueActions(this.ctx.rect);
1492
- this.restore = this.enqueueActions(this.ctx.restore);
1493
- this.rotate = this.enqueueActions(this.ctx.rotate);
1494
- this.save = this.enqueueActions(this.ctx.save);
1495
- this.scale = this.enqueueActions(this.ctx.scale);
1496
- this.setTransform = this.enqueueActions(this.ctx.setTransform);
1497
- this.stroke = this.enqueueActions(this.ctx.stroke);
1498
- this.strokeRect = this.enqueueActions(this.ctx.strokeRect);
1499
- this.strokeText = this.enqueueActions(this.ctx.strokeText);
1500
- this.transform = this.enqueueActions(this.ctx.transform);
1501
- this.translate = this.enqueueActions(this.ctx.translate);
1478
+ this.canvas = canvas;
1479
+ this.ctx = ctx;
1502
1480
  }
1503
1481
  set ctx(e) {
1504
1482
  this.__raw__ = e;
1505
1483
  }
1506
1484
  get ctx() {
1507
- return this.__raw__;
1485
+ return this.__raw__ || {};
1508
1486
  }
1509
1487
  emptyActions() {
1510
1488
  this.actions.length = 0;
1511
1489
  }
1512
- enqueueActions(func) {
1513
- return (...args) => {
1514
- this.actions.push({
1515
- func,
1516
- args
1517
- });
1518
- };
1490
+ enqueueActions(func, ...args) {
1491
+ this.actions.push({
1492
+ func,
1493
+ args
1494
+ });
1519
1495
  }
1520
1496
  set fillStyle(e) { this.enqueueActions(() => { this.ctx.fillStyle = e; }); }
1521
1497
  get fillStyle() { return this.ctx.fillStyle; }
@@ -1557,6 +1533,13 @@ class CanvasContext {
1557
1533
  get imageSmoothingQuality() { return this.ctx.imageSmoothingQuality; }
1558
1534
  set filter(e) { this.enqueueActions(() => { this.ctx.filter = e; }); }
1559
1535
  get filter() { return this.ctx.filter; }
1536
+ arc(...args) { return this.enqueueActions(this.ctx.arc, ...args); }
1537
+ arcTo(...args) { return this.enqueueActions(this.ctx.arcTo, ...args); }
1538
+ beginPath(...args) { return this.enqueueActions(this.ctx.beginPath, ...args); }
1539
+ bezierCurveTo(...args) { return this.enqueueActions(this.ctx.bezierCurveTo, ...args); }
1540
+ clearRect(...args) { return this.enqueueActions(this.ctx.clearRect, ...args); }
1541
+ clip(...args) { return this.enqueueActions(this.ctx.clip, ...args); }
1542
+ closePath(...args) { return this.enqueueActions(this.ctx.closePath, ...args); }
1560
1543
  createPattern(image, repetition) {
1561
1544
  return this.createPattern(image, repetition);
1562
1545
  }
@@ -1593,6 +1576,17 @@ class CanvasContext {
1593
1576
  this.ctx.drawImage(imageResource, ...extra);
1594
1577
  });
1595
1578
  }
1579
+ fill(...args) { return this.enqueueActions(this.ctx.fill, ...args); }
1580
+ fillRect(...args) { return this.enqueueActions(this.ctx.fillRect, ...args); }
1581
+ fillText(...args) { return this.enqueueActions(this.ctx.fillText, ...args); }
1582
+ lineTo(...args) { return this.enqueueActions(this.ctx.lineTo, ...args); }
1583
+ moveTo(...args) { return this.enqueueActions(this.ctx.moveTo, ...args); }
1584
+ quadraticCurveTo(...args) { return this.enqueueActions(this.ctx.quadraticCurveTo, ...args); }
1585
+ rect(...args) { return this.enqueueActions(this.ctx.rect, ...args); }
1586
+ restore(...args) { return this.enqueueActions(this.ctx.restore, ...args); }
1587
+ rotate(...args) { return this.enqueueActions(this.ctx.rotate, ...args); }
1588
+ save(...args) { return this.enqueueActions(this.ctx.save, ...args); }
1589
+ scale(...args) { return this.enqueueActions(this.ctx.scale, ...args); }
1596
1590
  setFillStyle(color) {
1597
1591
  this.enqueueActions(() => { this.ctx.fillStyle = color; });
1598
1592
  }
@@ -1637,6 +1631,12 @@ class CanvasContext {
1637
1631
  setTextBaseline(textBaseline) {
1638
1632
  this.textBaseline = TextBaseLineMap[textBaseline] || 'alphabetic';
1639
1633
  }
1634
+ setTransform(...args) { return this.enqueueActions(this.ctx.setTransform, ...args); }
1635
+ stroke(...args) { return this.enqueueActions(this.ctx.stroke, ...args); }
1636
+ strokeRect(...args) { return this.enqueueActions(this.ctx.strokeRect, ...args); }
1637
+ strokeText(...args) { return this.enqueueActions(this.ctx.strokeText, ...args); }
1638
+ transform(...args) { return this.enqueueActions(this.ctx.transform, ...args); }
1639
+ translate(...args) { return this.enqueueActions(this.ctx.translate, ...args); }
1640
1640
  measureText(text) {
1641
1641
  return this.measureText(text);
1642
1642
  }
@@ -1650,10 +1650,10 @@ class CanvasContext {
1650
1650
  }
1651
1651
 
1652
1652
  const createCanvasContext = (canvasId, inst) => {
1653
- const context = new CanvasContext();
1654
1653
  const el = findDOM(inst);
1655
1654
  const canvas = el === null || el === void 0 ? void 0 : el.querySelector(`canvas[canvas-id="${canvasId}"]`);
1656
1655
  const ctx = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d');
1656
+ const context = new CanvasContext(canvas, ctx);
1657
1657
  if (!ctx)
1658
1658
  return context;
1659
1659
  context.canvas = canvas;
@@ -2355,12 +2355,12 @@ function createLocationChooser(handler, key = LOCATION_APIKEY) {
2355
2355
  main.style.top = '100%';
2356
2356
  }
2357
2357
  function back() {
2358
- handler({ errMsg: 'cancel' });
2359
2358
  hide();
2359
+ handler({ errMsg: 'cancel' });
2360
2360
  }
2361
2361
  function submit() {
2362
- handler();
2363
2362
  hide();
2363
+ handler();
2364
2364
  }
2365
2365
  function remove() {
2366
2366
  container.remove();
@@ -2450,26 +2450,26 @@ class InnerAudioContext {
2450
2450
  this.Instance = undefined;
2451
2451
  }
2452
2452
  };
2453
- this.onCanplay = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.addEventListener('oncanplay', callback); };
2454
- this.onPlay = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.addEventListener('onplay', callback); };
2455
- this.onPause = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.addEventListener('onpause', callback); };
2453
+ this.onCanplay = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.addEventListener('canplay', callback); };
2454
+ this.onPlay = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.addEventListener('play', callback); };
2455
+ this.onPause = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.addEventListener('pause', callback); };
2456
2456
  this.onStop = (callback = () => { }) => this.stopStack.add(callback);
2457
- this.onEnded = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.addEventListener('onended', callback); };
2458
- this.onTimeUpdate = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.addEventListener('ontimeUpdate', callback); };
2457
+ this.onEnded = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.addEventListener('ended', callback); };
2458
+ this.onTimeUpdate = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.addEventListener('timeupdate', callback); };
2459
2459
  this.onError = (callback) => this.errorStack.add(callback);
2460
- this.onWaiting = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.addEventListener('onwaiting', callback); };
2461
- this.onSeeking = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.addEventListener('onseeking', callback); };
2462
- this.onSeeked = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.addEventListener('onseeked', callback); };
2463
- this.offCanplay = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.removeEventListener('offcanplay', callback); };
2464
- this.offPlay = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.removeEventListener('offplay', callback); };
2465
- this.offPause = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.removeEventListener('offpause', callback); };
2460
+ this.onWaiting = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.addEventListener('waiting', callback); };
2461
+ this.onSeeking = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.addEventListener('seeking', callback); };
2462
+ this.onSeeked = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.addEventListener('seeked', callback); };
2463
+ this.offCanplay = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.removeEventListener('canplay', callback); };
2464
+ this.offPlay = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.removeEventListener('play', callback); };
2465
+ this.offPause = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.removeEventListener('pause', callback); };
2466
2466
  this.offStop = (callback = () => { }) => this.stopStack.remove(callback);
2467
- this.offEnded = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.removeEventListener('offended', callback); };
2468
- this.offTimeUpdate = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.removeEventListener('offtimeUpdate', callback); };
2467
+ this.offEnded = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.removeEventListener('ended', callback); };
2468
+ this.offTimeUpdate = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.removeEventListener('timeupdate', callback); };
2469
2469
  this.offError = (callback = () => { }) => this.errorStack.remove(callback);
2470
- this.offWaiting = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.removeEventListener('offwaiting', callback); };
2471
- this.offSeeking = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.removeEventListener('offseeking', callback); };
2472
- this.offSeeked = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.removeEventListener('offseeked', callback); };
2470
+ this.offWaiting = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.removeEventListener('waiting', callback); };
2471
+ this.offSeeking = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.removeEventListener('seeking', callback); };
2472
+ this.offSeeked = (callback = () => { }) => { var _a; return (_a = this.Instance) === null || _a === void 0 ? void 0 : _a.removeEventListener('seeked', callback); };
2473
2473
  this.Instance = new Audio();
2474
2474
  this.errorStack = new CallbackManager();
2475
2475
  this.stopStack = new CallbackManager();
@@ -2541,23 +2541,12 @@ const previewImage = async (options) => {
2541
2541
  function loadImage(url, loadFail) {
2542
2542
  return new Promise((resolve) => {
2543
2543
  const item = document.createElement('taro-swiper-item-core');
2544
- item.style.cssText = `
2545
- display: flex;
2546
- align-items: start;
2547
- justify-content: center;
2548
- overflow-y: scroll;
2549
- `;
2544
+ item.style.cssText = 'display:flex;align-items:start;justify-content:center;overflow-y:scroll;';
2550
2545
  const image = new Image();
2551
2546
  image.style.maxWidth = '100%';
2552
2547
  image.src = url;
2553
2548
  const div = document.createElement('div');
2554
- div.style.cssText = `
2555
- display: flex;
2556
- align-items: center;
2557
- justify-content: center;
2558
- max-width: 100%;
2559
- min-height: 100%;
2560
- `;
2549
+ div.style.cssText = 'display:flex;align-items:center;justify-content:center;max-width:100%;min-height:100%;';
2561
2550
  div.appendChild(image);
2562
2551
  item.appendChild(div);
2563
2552
  resolve(item);
@@ -2578,17 +2567,7 @@ const previewImage = async (options) => {
2578
2567
  const handle = new MethodHandler({ name: 'previewImage', success, fail, complete });
2579
2568
  const container = document.createElement('div');
2580
2569
  container.classList.add('preview-image');
2581
- container.style.cssText = `
2582
- position: fixed;
2583
- top: 0;
2584
- left: 0;
2585
- z-index: 1050;
2586
- width: 100%;
2587
- height: 100%;
2588
- overflow: hidden;
2589
- outline: 0;
2590
- background-color: #111;
2591
- `;
2570
+ container.style.cssText = 'position:fixed;top:0;left:0;z-index:1050;width:100%;height:100%;overflow:hidden;outline:0;background-color:#111;';
2592
2571
  container.addEventListener('click', () => {
2593
2572
  container.remove();
2594
2573
  });
@@ -6222,12 +6201,7 @@ const styleSheet = new StyleSheet();
6222
6201
  let TRANSITION_END = 'transitionend';
6223
6202
  let TRANSFORM = 'transform';
6224
6203
  const $detect = document.createElement('div');
6225
- $detect.style.cssText = `
6226
- -webkit-animation-name: webkit;
6227
- -moz-animation-name: moz;
6228
- -ms-animation-name: ms;
6229
- animation-name: standard;
6230
- `;
6204
+ $detect.style.cssText = '-webkit-animation-name:webkit;-moz-animation-name:moz;-ms-animation-name:ms;animation-name:standard;';
6231
6205
  if ($detect.style['animation-name'] === 'standard') {
6232
6206
  TRANSITION_END = 'transitionend';
6233
6207
  TRANSFORM = 'transform';
@@ -7662,13 +7636,21 @@ const createWorker = temporarilyNotSupport('createWorker');
7662
7636
 
7663
7637
  class NodesRef {
7664
7638
  constructor(selector, querySelectorQuery, single) {
7665
- this.context = temporarilyNotSupport('NodesRef.context');
7666
- this.node = temporarilyNotSupport('NodesRef.node');
7667
7639
  this._component = querySelectorQuery._component;
7668
7640
  this._selector = selector;
7669
7641
  this._selectorQuery = querySelectorQuery;
7670
7642
  this._single = single;
7671
7643
  }
7644
+ context(cb) {
7645
+ const { _selector, _component, _single, _selectorQuery } = this;
7646
+ _selectorQuery._push(_selector, _component, _single, { context: !0 }, cb);
7647
+ return _selectorQuery;
7648
+ }
7649
+ node(cb) {
7650
+ const { _selector, _component, _single, _selectorQuery } = this;
7651
+ _selectorQuery._push(_selector, _component, _single, { nodeCanvasType: !0, node: !0 }, cb);
7652
+ return _selectorQuery;
7653
+ }
7672
7654
  boundingClientRect(cb) {
7673
7655
  const { _selector, _component, _single, _selectorQuery } = this;
7674
7656
  _selectorQuery._push(_selector, _component, _single, { id: !0, dataset: !0, rect: !0, size: !0 }, cb);
@@ -7698,36 +7680,83 @@ class NodesRef {
7698
7680
  function filter(fields, dom, selector) {
7699
7681
  if (!dom)
7700
7682
  return null;
7701
- const { id, dataset, rect, size, scrollOffset, properties = [], computedStyle = [] } = fields;
7702
- const { left, right, top, bottom, width, height } = dom.getBoundingClientRect();
7703
- const isViewport = selector === 'html';
7683
+ const isViewport = selector === '.taro_page';
7684
+ const { id, dataset, rect, size, scrollOffset, properties = [], computedStyle = [], nodeCanvasType, node, context } = fields;
7704
7685
  const res = {};
7705
- if (id)
7706
- res.id = dom.id;
7707
- if (dataset)
7708
- res.dataset = Object.assign({}, dom.dataset);
7709
- if (rect) {
7710
- if (!isViewport) {
7711
- res.left = left;
7712
- res.right = right;
7713
- res.top = top;
7714
- res.bottom = bottom;
7686
+ if (nodeCanvasType && node) {
7687
+ const tagName = dom.tagName;
7688
+ res.node = {
7689
+ id: dom.id,
7690
+ $taroElement: dom
7691
+ };
7692
+ if (/^taro-canvas-core/i.test(tagName)) {
7693
+ const type = dom.type || '';
7694
+ res.nodeCanvasType = type;
7695
+ const canvas = dom.getElementsByTagName('canvas')[0];
7696
+ if (/^(2d|webgl)/i.test(type) && canvas) {
7697
+ res.node = canvas;
7698
+ }
7699
+ else {
7700
+ res.node = null;
7701
+ }
7715
7702
  }
7716
7703
  else {
7717
- res.left = 0;
7718
- res.right = 0;
7719
- res.top = 0;
7720
- res.bottom = 0;
7704
+ res.nodeCanvasType = '';
7705
+ res.node = dom;
7721
7706
  }
7707
+ return res;
7722
7708
  }
7723
- if (size) {
7724
- if (!isViewport) {
7725
- res.width = width;
7726
- res.height = height;
7709
+ if (context) {
7710
+ const tagName = dom.tagName;
7711
+ if (/^taro-video-core/i.test(tagName)) {
7712
+ return { context: dom };
7727
7713
  }
7728
- else {
7729
- res.width = dom.clientWidth;
7730
- res.height = dom.clientHeight;
7714
+ else if (/^taro-canvas-core/i.test(tagName)) {
7715
+ const type = dom.type || '2d';
7716
+ const canvas = dom === null || dom === void 0 ? void 0 : dom.querySelector('canvas');
7717
+ const ctx = canvas === null || canvas === void 0 ? void 0 : canvas.getContext(type);
7718
+ return { context: new CanvasContext(canvas, ctx) };
7719
+ }
7720
+ else if (/^taro-live-player-core/i.test(tagName)) {
7721
+ console.error('暂时不支持通过 NodesRef.context 获取 LivePlayerContext');
7722
+ }
7723
+ else if (/^taro-editor-core/i.test(tagName)) {
7724
+ console.error('暂时不支持通过 NodesRef.context 获取 EditorContext');
7725
+ }
7726
+ else if (/^taro-map-core/i.test(tagName)) {
7727
+ console.error('暂时不支持通过 NodesRef.context 获取 MapContext');
7728
+ }
7729
+ return;
7730
+ }
7731
+ if (id)
7732
+ res.id = dom.id;
7733
+ if (dataset)
7734
+ res.dataset = Object.assign({}, dom.dataset);
7735
+ if (rect || size) {
7736
+ const { left, right, top, bottom, width, height } = dom.getBoundingClientRect();
7737
+ if (rect) {
7738
+ if (!isViewport) {
7739
+ res.left = left;
7740
+ res.right = right;
7741
+ res.top = top;
7742
+ res.bottom = bottom;
7743
+ }
7744
+ else {
7745
+ res.left = 0;
7746
+ res.right = 0;
7747
+ res.top = 0;
7748
+ res.bottom = 0;
7749
+ }
7750
+ }
7751
+ if (size) {
7752
+ if (!isViewport) {
7753
+ res.width = width;
7754
+ res.height = height;
7755
+ }
7756
+ else {
7757
+ res.width = dom.clientWidth;
7758
+ res.height = dom.clientHeight;
7759
+ }
7731
7760
  }
7732
7761
  }
7733
7762
  if (scrollOffset) {
@@ -7810,7 +7839,7 @@ class SelectorQuery {
7810
7839
  return new NodesRef(selector, this, false);
7811
7840
  }
7812
7841
  selectViewport() {
7813
- return new NodesRef('html', this, true);
7842
+ return new NodesRef('.taro_page', this, true);
7814
7843
  }
7815
7844
  exec(cb) {
7816
7845
  queryBat(this._queue, res => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tarojs/taro-h5",
3
- "version": "3.3.19",
3
+ "version": "3.3.20",
4
4
  "description": "Taro h5 framework",
5
5
  "main:h5": "dist/index.js",
6
6
  "main": "dist/index.cjs.js",
@@ -17,7 +17,7 @@
17
17
  "test:coverage": "jest --coverage",
18
18
  "prebuild": "tsc && copy src/**/*.css dist",
19
19
  "build": "rollup -c",
20
- "dev": "rollup -cw"
20
+ "dev": "tsc -w"
21
21
  },
22
22
  "repository": {
23
23
  "type": "git",
@@ -29,10 +29,10 @@
29
29
  "author": "O2Team",
30
30
  "license": "MIT",
31
31
  "dependencies": {
32
- "@tarojs/api": "3.3.19",
33
- "@tarojs/router": "3.3.19",
34
- "@tarojs/runtime": "3.3.19",
35
- "@tarojs/taro": "3.3.19",
32
+ "@tarojs/api": "3.3.20",
33
+ "@tarojs/router": "3.3.20",
34
+ "@tarojs/runtime": "3.3.20",
35
+ "@tarojs/taro": "3.3.20",
36
36
  "base64-js": "^1.3.0",
37
37
  "jsonp-retry": "^1.0.3",
38
38
  "mobile-detect": "^1.4.2",
@@ -42,5 +42,5 @@
42
42
  "devDependencies": {
43
43
  "jest-fetch-mock": "^3.0.3"
44
44
  },
45
- "gitHead": "e5152ac3ba4c46d5cc7af3c27a1e98ce73c2af17"
45
+ "gitHead": "f98ceefaa3e419db5a6c3bcd3bf123ce5a0a0124"
46
46
  }
package/src/api/canvas/CanvasContext.ts CHANGED
@@ -16,12 +16,17 @@ export class CanvasContext implements Taro.CanvasContext {
16
16
  __raw__: CanvasRenderingContext2D
17
17
  actions: IAction[] = []
18
18
 
19
+ constructor (canvas, ctx) {
20
+ this.canvas = canvas
21
+ this.ctx = ctx
22
+ }
23
+
19
24
  set ctx (e: CanvasRenderingContext2D) {
20
25
  this.__raw__ = e
21
26
  }
22
27
 
23
28
  get ctx () {
24
- return this.__raw__
29
+ return this.__raw__ || {}
25
30
  }
26
31
 
27
32
  canvas: HTMLCanvasElement
@@ -30,13 +35,11 @@ export class CanvasContext implements Taro.CanvasContext {
30
35
  this.actions.length = 0
31
36
  }
32
37
 
33
- protected enqueueActions (func: IAction['func']) {
34
- return (...args) => {
35
- this.actions.push({
36
- func,
37
- args
38
- })
39
- }
38
+ protected enqueueActions (func: IAction['func'], ...args) {
39
+ this.actions.push({
40
+ func,
41
+ args
42
+ })
40
43
  }
41
44
 
42
45
  set fillStyle (e) { this.enqueueActions(() => { this.ctx.fillStyle = e }) }
@@ -82,13 +85,13 @@ export class CanvasContext implements Taro.CanvasContext {
82
85
  get filter () { return this.ctx.filter }
83
86
  /** 小程序文档中不包括 ↑↑↑ */
84
87
 
85
- arc = this.enqueueActions(this.ctx.arc)
86
- arcTo = this.enqueueActions(this.ctx.arcTo)
87
- beginPath = this.enqueueActions(this.ctx.beginPath)
88
- bezierCurveTo = this.enqueueActions(this.ctx.bezierCurveTo)
89
- clearRect = this.enqueueActions(this.ctx.clearRect)
90
- clip = this.enqueueActions(this.ctx.clip)
91
- closePath = this.enqueueActions(this.ctx.closePath)
88
+ arc (...args) { return this.enqueueActions(this.ctx.arc, ...args) }
89
+ arcTo (...args) { return this.enqueueActions(this.ctx.arcTo, ...args) }
90
+ beginPath (...args) { return this.enqueueActions(this.ctx.beginPath, ...args) }
91
+ bezierCurveTo (...args) { return this.enqueueActions(this.ctx.bezierCurveTo, ...args) }
92
+ clearRect (...args) { return this.enqueueActions(this.ctx.clearRect, ...args) }
93
+ clip (...args) { return this.enqueueActions(this.ctx.clip, ...args) }
94
+ closePath (...args) { return this.enqueueActions(this.ctx.closePath, ...args) }
92
95
 
93
96
  createPattern (image: string, repetition: keyof Taro.CanvasContext.repetition): void {
94
97
  return this.createPattern(image, repetition)
@@ -139,17 +142,17 @@ export class CanvasContext implements Taro.CanvasContext {
139
142
  })
140
143
  }
141
144
 
142
- fill = this.enqueueActions(this.ctx.fill)
143
- fillRect = this.enqueueActions(this.ctx.fillRect)
144
- fillText = this.enqueueActions(this.ctx.fillText)
145
- lineTo = this.enqueueActions(this.ctx.lineTo)
146
- moveTo = this.enqueueActions(this.ctx.moveTo)
147
- quadraticCurveTo = this.enqueueActions(this.ctx.quadraticCurveTo)
148
- rect = this.enqueueActions(this.ctx.rect)
149
- restore = this.enqueueActions(this.ctx.restore)
150
- rotate = this.enqueueActions(this.ctx.rotate)
151
- save = this.enqueueActions(this.ctx.save)
152
- scale = this.enqueueActions(this.ctx.scale)
145
+ fill (...args) { return this.enqueueActions(this.ctx.fill, ...args) }
146
+ fillRect (...args) { return this.enqueueActions(this.ctx.fillRect, ...args) }
147
+ fillText (...args) { return this.enqueueActions(this.ctx.fillText, ...args) }
148
+ lineTo (...args) { return this.enqueueActions(this.ctx.lineTo, ...args) }
149
+ moveTo (...args) { return this.enqueueActions(this.ctx.moveTo, ...args) }
150
+ quadraticCurveTo (...args) { return this.enqueueActions(this.ctx.quadraticCurveTo, ...args) }
151
+ rect (...args) { return this.enqueueActions(this.ctx.rect, ...args) }
152
+ restore (...args) { return this.enqueueActions(this.ctx.restore, ...args) }
153
+ rotate (...args) { return this.enqueueActions(this.ctx.rotate, ...args) }
154
+ save (...args) { return this.enqueueActions(this.ctx.save, ...args) }
155
+ scale (...args) { return this.enqueueActions(this.ctx.scale, ...args) }
153
156
 
154
157
  setFillStyle (color: string | CanvasGradient): void {
155
158
  this.enqueueActions(() => { this.ctx.fillStyle = color })
@@ -207,12 +210,12 @@ export class CanvasContext implements Taro.CanvasContext {
207
210
  this.textBaseline = TextBaseLineMap[textBaseline] || 'alphabetic'
208
211
  }
209
212
 
210
- setTransform = this.enqueueActions(this.ctx.setTransform)
211
- stroke = this.enqueueActions(this.ctx.stroke)
212
- strokeRect = this.enqueueActions(this.ctx.strokeRect)
213
- strokeText = this.enqueueActions(this.ctx.strokeText)
214
- transform = this.enqueueActions(this.ctx.transform)
215
- translate = this.enqueueActions(this.ctx.translate)
213
+ setTransform (...args) { return this.enqueueActions(this.ctx.setTransform, ...args) }
214
+ stroke (...args) { return this.enqueueActions(this.ctx.stroke, ...args) }
215
+ strokeRect (...args) { return this.enqueueActions(this.ctx.strokeRect, ...args) }
216
+ strokeText (...args) { return this.enqueueActions(this.ctx.strokeText, ...args) }
217
+ transform (...args) { return this.enqueueActions(this.ctx.transform, ...args) }
218
+ translate (...args) { return this.enqueueActions(this.ctx.translate, ...args) }
216
219
 
217
220
  measureText (text: string): TextMetrics {
218
221
  return this.measureText(text)
package/src/api/canvas/createCanvasContext.ts CHANGED
@@ -6,10 +6,10 @@ import { CanvasContext } from './CanvasContext'
6
6
  * 创建 canvas 的绘图上下文 CanvasContext 对象
7
7
  */
8
8
  export const createCanvasContext: typeof Taro.createCanvasContext = (canvasId, inst) => {
9
- const context = new CanvasContext()
10
9
  const el = findDOM(inst) as HTMLElement
11
10
  const canvas = el?.querySelector(`canvas[canvas-id="${canvasId}"]`) as HTMLCanvasElement
12
- const ctx = canvas?.getContext('2d')
11
+ const ctx = canvas?.getContext('2d') as CanvasRenderingContext2D
12
+ const context = new CanvasContext(canvas, ctx)
13
13
  if (!ctx) return context
14
14
  context.canvas = canvas
15
15
  context.ctx = ctx
package/src/api/location/chooseLocation.ts CHANGED
@@ -28,13 +28,13 @@ function createLocationChooser (handler, key = LOCATION_APIKEY) {
28
28
  }
29
29
 
30
30
  function back () {
31
- handler({ errMsg: 'cancel' })
32
31
  hide()
32
+ handler({ errMsg: 'cancel' })
33
33
  }
34
34
 
35
35
  function submit () {
36
- handler()
37
36
  hide()
37
+ handler()
38
38
  }
39
39
 
40
40
  function remove () {
package/src/api/media/audio/index.ts CHANGED
@@ -67,26 +67,26 @@ class InnerAudioContext implements Taro.InnerAudioContext {
67
67
  }
68
68
  }
69
69
 
70
- onCanplay = (callback = () => {}) => this.Instance?.addEventListener('oncanplay', callback)
71
- onPlay = (callback = () => {}) => this.Instance?.addEventListener('onplay', callback)
72
- onPause = (callback = () => {}) => this.Instance?.addEventListener('onpause', callback)
70
+ onCanplay = (callback = () => {}) => this.Instance?.addEventListener('canplay', callback)
71
+ onPlay = (callback = () => {}) => this.Instance?.addEventListener('play', callback)
72
+ onPause = (callback = () => {}) => this.Instance?.addEventListener('pause', callback)
73
73
  onStop = (callback = () => {}) => this.stopStack.add(callback)
74
- onEnded = (callback = () => {}) => this.Instance?.addEventListener('onended', callback)
75
- onTimeUpdate = (callback = () => {}) => this.Instance?.addEventListener('ontimeUpdate', callback)
74
+ onEnded = (callback = () => {}) => this.Instance?.addEventListener('ended', callback)
75
+ onTimeUpdate = (callback = () => {}) => this.Instance?.addEventListener('timeupdate', callback)
76
76
  onError = (callback?: ((res: Taro.InnerAudioContext.onErrorDetail) => void)) => this.errorStack.add(callback)
77
- onWaiting = (callback = () => {}) => this.Instance?.addEventListener('onwaiting', callback)
78
- onSeeking = (callback = () => {}) => this.Instance?.addEventListener('onseeking', callback)
79
- onSeeked = (callback = () => {}) => this.Instance?.addEventListener('onseeked', callback)
80
- offCanplay = (callback = () => {}) => this.Instance?.removeEventListener('offcanplay', callback)
81
- offPlay = (callback = () => {}) => this.Instance?.removeEventListener('offplay', callback)
82
- offPause = (callback = () => {}) => this.Instance?.removeEventListener('offpause', callback)
77
+ onWaiting = (callback = () => {}) => this.Instance?.addEventListener('waiting', callback)
78
+ onSeeking = (callback = () => {}) => this.Instance?.addEventListener('seeking', callback)
79
+ onSeeked = (callback = () => {}) => this.Instance?.addEventListener('seeked', callback)
80
+ offCanplay = (callback = () => {}) => this.Instance?.removeEventListener('canplay', callback)
81
+ offPlay = (callback = () => {}) => this.Instance?.removeEventListener('play', callback)
82
+ offPause = (callback = () => {}) => this.Instance?.removeEventListener('pause', callback)
83
83
  offStop = (callback = () => {}) => this.stopStack.remove(callback)
84
- offEnded = (callback = () => {}) => this.Instance?.removeEventListener('offended', callback)
85
- offTimeUpdate = (callback = () => {}) => this.Instance?.removeEventListener('offtimeUpdate', callback)
84
+ offEnded = (callback = () => {}) => this.Instance?.removeEventListener('ended', callback)
85
+ offTimeUpdate = (callback = () => {}) => this.Instance?.removeEventListener('timeupdate', callback)
86
86
  offError = (callback = () => {}) => this.errorStack.remove(callback)
87
- offWaiting = (callback = () => {}) => this.Instance?.removeEventListener('offwaiting', callback)
88
- offSeeking = (callback = () => {}) => this.Instance?.removeEventListener('offseeking', callback)
89
- offSeeked = (callback = () => {}) => this.Instance?.removeEventListener('offseeked', callback)
87
+ offWaiting = (callback = () => {}) => this.Instance?.removeEventListener('waiting', callback)
88
+ offSeeking = (callback = () => {}) => this.Instance?.removeEventListener('seeking', callback)
89
+ offSeeked = (callback = () => {}) => this.Instance?.removeEventListener('seeked', callback)
90
90
  }
91
91
 
92
92
  export const stopVoice = temporarilyNotSupport('stopVoice')
package/src/api/media/image/previewImage.ts CHANGED
@@ -14,23 +14,12 @@ export const previewImage: typeof Taro.previewImage = async (options) => {
14
14
  function loadImage (url: string, loadFail: typeof fail): Promise<Node> {
15
15
  return new Promise((resolve) => {
16
16
  const item = document.createElement('taro-swiper-item-core')
17
- item.style.cssText = `
18
- display: flex;
19
- align-items: start;
20
- justify-content: center;
21
- overflow-y: scroll;
22
- `
17
+ item.style.cssText = 'display:flex;align-items:start;justify-content:center;overflow-y:scroll;'
23
18
  const image = new Image()
24
19
  image.style.maxWidth = '100%'
25
20
  image.src = url
26
21
  const div = document.createElement('div')
27
- div.style.cssText = `
28
- display: flex;
29
- align-items: center;
30
- justify-content: center;
31
- max-width: 100%;
32
- min-height: 100%;
33
- `
22
+ div.style.cssText = 'display:flex;align-items:center;justify-content:center;max-width:100%;min-height:100%;'
34
23
  div.appendChild(image)
35
24
  item.appendChild(div)
36
25
  // Note: 等待图片加载完后返回，会导致轮播被卡住
@@ -55,17 +44,7 @@ export const previewImage: typeof Taro.previewImage = async (options) => {
55
44
  const handle = new MethodHandler({ name: 'previewImage', success, fail, complete })
56
45
  const container = document.createElement('div')
57
46
  container.classList.add('preview-image')
58
- container.style.cssText = `
59
- position: fixed;
60
- top: 0;
61
- left: 0;
62
- z-index: 1050;
63
- width: 100%;
64
- height: 100%;
65
- overflow: hidden;
66
- outline: 0;
67
- background-color: #111;
68
- `
47
+ container.style.cssText = 'position:fixed;top:0;left:0;z-index:1050;width:100%;height:100%;overflow:hidden;outline:0;background-color:#111;'
69
48
  container.addEventListener('click', () => {
70
49
  container.remove()
71
50
  })
package/src/api/ui/animation/index.ts CHANGED
@@ -38,12 +38,7 @@ let TRANSITION_END = 'transitionend'
38
38
  let TRANSFORM = 'transform'
39
39
 
40
40
  const $detect = document.createElement('div')
41
- $detect.style.cssText = `
42
- -webkit-animation-name: webkit;
43
- -moz-animation-name: moz;
44
- -ms-animation-name: ms;
45
- animation-name: standard;
46
- `
41
+ $detect.style.cssText = '-webkit-animation-name:webkit;-moz-animation-name:moz;-ms-animation-name:ms;animation-name:standard;'
47
42
  if ($detect.style['animation-name'] === 'standard') {
48
43
  // 支持标准写法
49
44
  TRANSITION_END = 'transitionend'
package/src/api/wxml/nodesRef.ts CHANGED
@@ -1,4 +1,3 @@
1
- import { temporarilyNotSupport } from '../utils'
2
1
  import { SelectorQuery } from './selectorQuery'
3
2
 
4
3
  export class NodesRef implements Taro.NodesRef {
@@ -14,9 +13,17 @@ export class NodesRef implements Taro.NodesRef {
14
13
  this._single = single
15
14
  }
16
15
 
17
- context = temporarilyNotSupport('NodesRef.context') as unknown as Taro.NodesRef['context']
16
+ context (cb) {
17
+ const { _selector, _component, _single, _selectorQuery } = this
18
+ _selectorQuery._push(_selector, _component, _single, { context: !0 }, cb)
19
+ return _selectorQuery
20
+ }
18
21
 
19
- node = temporarilyNotSupport('NodesRef.node') as unknown as Taro.NodesRef['node']
22
+ node (cb) {
23
+ const { _selector, _component, _single, _selectorQuery } = this
24
+ _selectorQuery._push(_selector, _component, _single, { nodeCanvasType: !0, node: !0 }, cb)
25
+ return _selectorQuery
26
+ }
20
27
 
21
28
  boundingClientRect (cb) {
22
29
  const { _selector, _component, _single, _selectorQuery } = this
package/src/api/wxml/selectorQuery.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import Taro from '@tarojs/api'
2
+ import { CanvasContext } from '../canvas/CanvasContext'
2
3
  import { findDOM } from '../utils'
3
4
  import { NodesRef } from './nodesRef'
4
5
 
@@ -16,33 +17,77 @@ type TSelectorQueryQueueCallback = (res: ISelectorQueryQueue) => void
16
17
  function filter (fields, dom?: HTMLElement, selector?: string) {
17
18
  if (!dom) return null
18
19
 
19
- const { id, dataset, rect, size, scrollOffset, properties = [], computedStyle = [] } = fields
20
- const { left, right, top, bottom, width, height } = dom.getBoundingClientRect()
21
- const isViewport = selector === 'html'
20
+ const isViewport = selector === '.taro_page'
21
+ const { id, dataset, rect, size, scrollOffset, properties = [], computedStyle = [], nodeCanvasType, node, context } = fields
22
22
  const res: any = {}
23
23
 
24
- if (id) res.id = dom.id
25
- if (dataset) res.dataset = Object.assign({}, dom.dataset)
26
- if (rect) {
27
- if (!isViewport) {
28
- res.left = left
29
- res.right = right
30
- res.top = top
31
- res.bottom = bottom
24
+ if (nodeCanvasType && node) {
25
+ const tagName = dom.tagName
26
+ res.node = {
27
+ id: dom.id,
28
+ $taroElement: dom
29
+ }
30
+ if (/^taro-canvas-core/i.test(tagName)) {
31
+ const type = (dom as any).type! || ''
32
+ res.nodeCanvasType = type
33
+ const canvas = dom.getElementsByTagName('canvas')[0]
34
+ if (/^(2d|webgl)/i.test(type) && canvas) {
35
+ res.node = canvas
36
+ } else {
37
+ res.node = null
38
+ }
32
39
  } else {
33
- res.left = 0
34
- res.right = 0
35
- res.top = 0
36
- res.bottom = 0
40
+ // TODO https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
41
+ // if (/^taro-scroll-view-core/i.test(tagName))
42
+ res.nodeCanvasType = ''
43
+ res.node = dom
37
44
  }
45
+ return res
38
46
  }
39
- if (size) {
40
- if (!isViewport) {
41
- res.width = width
42
- res.height = height
43
- } else {
44
- res.width = dom.clientWidth
45
- res.height = dom.clientHeight
47
+ if (context) {
48
+ const tagName = dom.tagName
49
+ if (/^taro-video-core/i.test(tagName)) {
50
+ // TODO HTMLVideoElement to VideoContext
51
+ return { context: dom as unknown as Taro.VideoContext }
52
+ } else if (/^taro-canvas-core/i.test(tagName)) {
53
+ const type = (dom as any).type! || '2d'
54
+ const canvas = dom?.querySelector('canvas') as HTMLCanvasElement
55
+ const ctx = canvas?.getContext(type) as CanvasRenderingContext2D
56
+ return { context: new CanvasContext(canvas, ctx) }
57
+ } else if (/^taro-live-player-core/i.test(tagName)) {
58
+ console.error('暂时不支持通过 NodesRef.context 获取 LivePlayerContext')
59
+ } else if (/^taro-editor-core/i.test(tagName)) {
60
+ console.error('暂时不支持通过 NodesRef.context 获取 EditorContext')
61
+ } else if (/^taro-map-core/i.test(tagName)) {
62
+ console.error('暂时不支持通过 NodesRef.context 获取 MapContext')
63
+ }
64
+ return
65
+ }
66
+ if (id) res.id = dom.id
67
+ if (dataset) res.dataset = Object.assign({}, dom.dataset)
68
+ if (rect || size) {
69
+ const { left, right, top, bottom, width, height } = dom.getBoundingClientRect()
70
+ if (rect) {
71
+ if (!isViewport) {
72
+ res.left = left
73
+ res.right = right
74
+ res.top = top
75
+ res.bottom = bottom
76
+ } else {
77
+ res.left = 0
78
+ res.right = 0
79
+ res.top = 0
80
+ res.bottom = 0
81
+ }
82
+ }
83
+ if (size) {
84
+ if (!isViewport) {
85
+ res.width = width
86
+ res.height = height
87
+ } else {
88
+ res.width = dom.clientWidth
89
+ res.height = dom.clientHeight
90
+ }
46
91
  }
47
92
  }
48
93
  if (scrollOffset) {
@@ -147,7 +192,7 @@ export class SelectorQuery implements Taro.SelectorQuery {
147
192
  }
148
193
 
149
194
  selectViewport () {
150
- return new NodesRef('html', this, true)
195
+ return new NodesRef('.taro_page', this, true)
151
196
  }
152
197
 
153
198
  exec (cb) {