Skip to content

Commit d01c602

Browse files
triniwiztriniwiz
committed
chore: updates
1 parent f4ec2d6 commit d01c602

File tree

248 files changed

+11891
-832
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

248 files changed

+11891
-832
lines changed

‎apps/demo/src/plugin-demos/canvas-svg.xml

+13-14
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
1-
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
2-
<Page.actionBar>
3-
<ActionBar title="canvas-svg" icon="" class="action-bar">
4-
</ActionBar>
5-
</Page.actionBar>
6-
<StackLayout class="p-20">
7-
<ScrollView class="h-full">
8-
<StackLayout>
9-
<Button text="Test canvas-svg" tap="{{ testIt }}" class="btn btn-primary"/>
10-
11-
</StackLayout>
12-
</ScrollView>
13-
</StackLayout>
14-
</Page>
1+
<Page xmlns:ui="@nativescript/canvas-svg" xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo"
2+
class="page">
3+
<Page.actionBar>
4+
<ActionBar title="canvas-svg" icon="" class="action-bar">
5+
</ActionBar>
6+
</Page.actionBar>
7+
<GridLayout columns="*,*" rows="*,*">
8+
<ui:Svg id="1" width="100%" height="100%" src="{{src1}}" loaded="{{svgViewLoaded}}"/>
9+
<!--<ui:Svg id="2" col="1" width="100%" height="100%" src="{{src2}}" loaded="{{svgViewLoaded}}"/>
10+
<ui:Svg id="3" row="1" width="100%" height="100%" src="{{src3}}" loaded="{{svgViewLoaded}}"/>
11+
<ui:Svg id="4" row="1" col="1" width="100%" height="100%" src="{{src4}}" loaded="{{svgViewLoaded}}"/>-->
12+
</GridLayout>
13+
</Page>

‎apps/demo/src/plugin-demos/canvas.xml

+8-12
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
</Page.actionBar>
66

77
<GridLayout rows="*" columns="*" loaded="{{ gridLoaded }}" iosOverflowSafeArea="false" width="100%" height="100%">
8-
8+
99
<!-- <ui:Dom rowSpan="2" colSpan="2" loaded="{{ domLoaded }}"> -->
1010

1111

@@ -83,7 +83,7 @@ loaded="{{ rectLoaded }}"
8383
<ui:Paint color="#adbce6" paintStyle="stroke" strokeWidth="{{strokeWidth}}" />
8484
<ui:Paint color="#ade6d8" paintStyle="stroke" strokeWidth="{{strokeWidth / 2}}" />
8585
</ui:Rect> -->
86-
<!--
86+
<!--
8787
<ui:Circle cx="{{groupR}}" cy="{{groupR}}" r="{{groupR}}" color="#51AFED" />
8888
<ui:Group color="lightblue" paintStyle="stroke" strokeWidth="10">
8989
<ui:Circle cx="{{groupR}}" cy="{{groupR}}" r="{{groupR / 2}}" />
@@ -97,10 +97,10 @@ loaded="{{ rectLoaded }}"
9797
origin="{{origin}}"
9898
transform="{{[{ skewX: Math.PI / 6 }]}}"
9999
>
100-
<ui:RoundedRect x="64" y="64" width="128" height="128" r="10" />
100+
<ui:RoundedRect x="64" y="64" width="128" height="128" r="10" />
101101
102102
</ui:Group> -->
103-
103+
104104

105105
<!-- <ui:Circle cx="{{groupR}}" cy="{{groupR}}" r="{{groupR}}" color="#51AFED" />
106106
<ui:Group color="lightblue" paintStyle="stroke" strokeWidth="10">
@@ -129,17 +129,13 @@ loaded="{{ rectLoaded }}"
129129
<ui:Shadow dx="-12" dy="-12" blur="25" color="#c7f8ff" />
130130
</ui:RoundedRect>
131131
-->
132-
132+
133133
<!-- </ui:Dom> -->
134-
135-
134+
135+
136136
<!-- <WebView rowSpan="2" colSpan="2" height="100%" width="100%" loaded="loaded"/> -->
137137
<canvas:Canvas rowSpan="2" colSpan="2" ready="{{ canvasLoaded }}"
138-
layoutChanged="{{ onLayout }}"/>
139-
<!-- <canvas:Svg id="1" width="100%" height="100%" src="{{src1}}" loaded="{{svgViewLoaded}}"/> -->
140-
<!-- <canvas:Svg id="2" col="1" width="100%" height="100%" src="{{src2}}" loaded="{{svgViewLoaded}}"/> -->
141-
<!-- <canvas:Svg id="3" row="1" width="100%" height="100%" src="{{src3}}" loaded="{{svgViewLoaded}}"/> -->
142-
<!-- <canvas:Svg id="4" row="1" col="1" width="100%" height="100%" src="{{src4}}" loaded="{{svgViewLoaded}}"/> -->
138+
layoutChanged="{{ onLayout }}"/>
143139
<!-- <Button height="40" text="Draw" tap="{{ draw }}"/> -->
144140

145141
<!-- <ScrollView rowSpan="4" visibility="{{ show ? 'visible': 'collapse' }}" orientation="vertical">

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,9 @@
1818
"build.canvas.ios.release": "nx run canvas:build.native.ios.release",
1919
"build.canvas.ios.debug": "nx run canvas:build.native.ios.debug",
2020
"build.canvas.ios.framework.release": "nx run canvas:build.native.ios.framework.release",
21-
"build.canvas.ios.framework.debug": "nx run canvas:build.native.ios.framework.debug"
21+
"build.canvas.ios.framework.debug": "nx run canvas:build.native.ios.framework.debug",
22+
"build.canvas.svg.ios.framework.release": "nx run canvas-svg:build.native.ios.framework.release",
23+
"build.canvas.svg.ios.framework.debug": "nx run canvas-svg:build.native.ios.framework.debug"
2224
},
2325
"private": true,
2426
"devDependencies": {

‎packages/canvas-babylon/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@nativescript/canvas-babylon",
3-
"version": "2.0.0-beta.15",
3+
"version": "2.0.0-beta.16",
44
"description": "",
55
"main": "index",
66
"typings": "index.d.ts",

‎packages/canvas-media/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@nativescript/canvas-media",
3-
"version": "2.0.0-beta.15",
3+
"version": "2.0.0-beta.16",
44
"description": "Canvas media",
55
"main": "index",
66
"typings": "index.d.ts",

‎packages/canvas-phaser-ce/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@nativescript/canvas-phaser-ce",
3-
"version": "2.0.0-beta.15",
3+
"version": "2.0.0-beta.16",
44
"description": "Tools for using Phaser-ce to build native 2D games in NativeScript 👾",
55
"main": "index",
66
"typings": "index.d.ts",

‎packages/canvas-phaser/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@nativescript/canvas-phaser",
3-
"version": "2.0.0-beta.15",
3+
"version": "2.0.0-beta.16",
44
"description": "Build awesome 2D games with Phaser.js and NativeScript",
55
"main": "index",
66
"typings": "index.d.ts",

‎packages/canvas-pixi/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@nativescript/canvas-pixi",
3-
"version": "2.0.0-beta.15",
3+
"version": "2.0.0-beta.16",
44
"description": "Plugin for using pixi.js in NativeScript",
55
"main": "index",
66
"typings": "index.d.ts",

‎packages/canvas-polyfill/DOM/Document.ts

+32-24
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import { HTMLElement } from './HTMLElement';
22
import { HTMLVideoElement } from './HTMLVideoElement';
33
import { HTMLImageElement } from './HTMLImageElement';
44
import { HTMLCanvasElement } from './HTMLCanvasElement';
5-
import { SVGElement, SVGCircleElement, SVGRectElement, SVGGElement, SVGPathElement } from './svg';
5+
import { HTMLDivElement } from './HTMLDivElement';
66
import { Text } from './Text';
77
import { Canvas } from '@nativescript/canvas';
8-
import { Frame } from '@nativescript/core';
8+
import { Frame, StackLayout } from '@nativescript/core';
99
import { Node } from './Node';
1010
import { Element } from './Element';
1111

@@ -29,6 +29,8 @@ export class Document extends Node {
2929

3030
createElement(tagName: string) {
3131
switch ((tagName || '').toLowerCase()) {
32+
case 'div':
33+
return new HTMLDivElement();
3234
case 'video':
3335
return new HTMLVideoElement();
3436
case 'img':
@@ -38,16 +40,16 @@ export class Document extends Node {
3840
case 'iframe':
3941
// Return nothing to keep firebase working.
4042
return null;
41-
// case 'svg':
42-
// return new SVGElement();
43-
// case 'rect':
44-
// return new SVGRectElement();
45-
// case 'circle':
46-
// return new SVGCircleElement();
47-
// case 'g':
48-
// return new SVGGElement();
49-
// case 'path':
50-
// return new SVGPathElement();
43+
case 'svg':
44+
return new SVGElement();
45+
case 'rect':
46+
return new SVGRectElement();
47+
case 'circle':
48+
return new SVGCircleElement();
49+
case 'g':
50+
return new SVGGElement();
51+
case 'path':
52+
return new SVGPathElement();
5153
default:
5254
return new Element(tagName);
5355
}
@@ -75,6 +77,10 @@ export class Document extends Node {
7577
const canvas = new HTMLCanvasElement();
7678
canvas.nativeElement = nativeElement;
7779
return canvas;
80+
} else if (nativeElement instanceof StackLayout) {
81+
const div = new HTMLDivElement();
82+
div.nativeElement = nativeElement;
83+
return div;
7884
}
7985
const element = new HTMLElement();
8086
element.nativeElement = nativeElement;
@@ -93,23 +99,25 @@ export class Document extends Node {
9399
}
94100

95101
//@ts-ignore
96-
set documentElement(value) {}
102+
set documentElement(value) {
103+
}
97104

98105
querySelectorAll(selector) {
99-
return (this as any)._instance?.querySelectorAll?.(selector) ?? [];
106+
return [];
107+
//return (this as any)._instance?.querySelectorAll?.(selector) ?? [];
100108
}
101109

102110
querySelector(selector) {
103-
const ret = (this as any)._instance?.querySelectorAll?.(selector);
104-
let element = ret?.[0] ?? null;
105-
if (ret === undefined) {
106-
const items = (this as any)._instance.getElementsByTagName(selector);
107-
element = items[0];
108-
}
109-
110-
if (element) {
111-
return new (Element as any)(element);
112-
}
111+
// const ret = (this as any)._instance?.querySelectorAll?.(selector);
112+
// let element = ret?.[0] ?? null;
113+
// if (ret === undefined) {
114+
// const items = (this as any)._instance.getElementsByTagName(selector);
115+
// element = items[0];
116+
// }
117+
//
118+
// if (element) {
119+
// return new (Element as any)(element);
120+
// }
113121
return null;
114122
}
115123
}

‎packages/canvas-polyfill/DOM/Element.ts

+19-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export class DOMRect extends DOMRectReadOnly {
3636

3737
export class Element extends Node {
3838
private _classList = new Set();
39-
private _nativeElement: ViewBase;
39+
_nativeElement: ViewBase;
4040
private _width: number;
4141
private _height: number;
4242
private _attrs: Map<string, any> = new Map<string, unknown>();
@@ -185,22 +185,40 @@ export class Element extends Node {
185185
}
186186

187187
get width() {
188+
if (this.nativeElement) {
189+
return this.nativeElement['width'];
190+
}
188191
return this._width;
189192
}
190193

191194
set width(value: number) {
192195
this._width = value;
196+
if (this.nativeElement) {
197+
setValue(this.nativeElement, 'width', value);
198+
}
193199
}
194200

195201
get height() {
202+
if (this.nativeElement) {
203+
return this.nativeElement['height'];
204+
}
196205
return this._height;
197206
}
198207

199208
set height(value: number) {
200209
this._height = value;
210+
if (this.nativeElement) {
211+
setValue(this.nativeElement, 'height', value);
212+
}
201213
}
202214

203215
get ontouchstart() {
204216
return {};
205217
}
218+
219+
setPointerCapture(id: string) {
220+
}
221+
222+
releasePointerCapture(id: string) {
223+
}
206224
}

‎packages/canvas-polyfill/DOM/EventTarget.ts

-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ export class EventTarget {
2929
if (global.isIOS) {
3030
emitter = this._emitter?.deref?.();
3131
}
32-
3332
if (emitter !== null && emitter !== undefined) {
3433
emitter.addEventListener(event, handler);
3534
}

‎packages/canvas-polyfill/DOM/HTMLDivElement.ts

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { HTMLElement } from './HTMLElement';
2+
import { StackLayout } from '@nativescript/core';
3+
4+
export class HTMLDivElement extends HTMLElement {
5+
constructor() {
6+
super('div');
7+
const div = arguments[0];
8+
9+
// using StackLayout for now
10+
if (!(div instanceof StackLayout)) {
11+
this.nativeElement = new StackLayout();
12+
} else {
13+
this.nativeElement = arguments[0];
14+
}
15+
}
16+
}

‎packages/canvas-polyfill/DOM/HTMLElement.ts

+50
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,57 @@
11
import { Element } from './Element';
2+
import { ViewBase } from '@nativescript/core';
3+
import setValue from 'set-value';
4+
5+
export class Style {
6+
proxy;
7+
8+
constructor() {
9+
const values = new Map();
10+
this.proxy = new Proxy(this, {
11+
set(target, prop, value) {
12+
target.setProperty(prop, value);
13+
return true;
14+
},
15+
get(target, prop, receiver) {
16+
return target.getPropertyValue(prop);
17+
}
18+
});
19+
this._values = values;
20+
}
21+
22+
_values: Map<any, any>;
23+
nativeElement: WeakRef<ViewBase>;
24+
25+
setProperty(key: string | symbol, val: unknown) {
26+
this._values.set(key, val);
27+
// const nativeElement = this.nativeElement?.deref?.();
28+
// if (nativeElement !== null) {
29+
// setValue(nativeElement, key, val);
30+
// }
31+
}
32+
33+
getPropertyValue(key: string | symbol) {
34+
// const nativeElement = this.nativeElement?.deref?.();
35+
// if (nativeElement !== null) {
36+
// return nativeElement[key];
37+
// }
38+
return this._values.get(key);
39+
}
40+
}
241

342
export class HTMLElement extends Element {
43+
44+
private _style = new Style();
45+
446
constructor(tagName: string = '') {
547
super(tagName ?? '');
648
}
49+
50+
get style() {
51+
if (this.nativeElement) {
52+
return this.nativeElement.style;
53+
}
54+
return this._style;
55+
}
56+
757
}

0 commit comments

Comments
 (0)