Skip to content

Commit 900538b

Browse files
farfromrefugfarfromrefug
committed
feat: moved @nativescript-community/ui-canvaslabel here
1 parent 01f9146 commit 900538b

File tree

21 files changed

+1843
-23
lines changed

21 files changed

+1843
-23
lines changed

‎demo-snippets/package.json

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,17 @@
33
"private": true,
44
"version": "0.0.1",
55
"dependencies": {
6-
"@nativescript-community/perms": "2.2.21",
6+
"@mdi/font": "6.5.95",
7+
"@nativescript-community/perms": "2.3.0",
78
"@nativescript-community/tween": "0.0.14",
89
"@nativescript-community/ui-canvas": "*",
10+
"@nativescript-community/ui-canvaslabel": "*",
11+
"@nativescript-community/ui-collectionview": "*",
912
"@nativescript-community/ui-svg": "*",
13+
"copy-webpack-plugin": "^11.0.0",
14+
"nativescript-vue-template-compiler": "~2.9.3",
15+
"scss-symbols-parser": "^2.0.1",
16+
"string-replace-loader": "^3.1.0",
1017
"vue-class-component": "7.2.6",
1118
"vue-property-decorator": "9.1.2"
1219
},

‎demo-snippets/vue/CanvasLabel.vue

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
<template>
2+
<Page>
3+
<StackLayout>
4+
<CollectionView width="100%" height="50%" rowHeight="80" ref="listView" :items="itemList" @itemTap="onItemTap" itemIdGenerator="index">
5+
<v-template>
6+
<GridLayout margin="4" borderRightWidth="20" borderRightColor="white" backgroundColor="darkgray">
7+
<Label color="blue" fontSize="38" verticalAlignment="middle" paddingLeft="20" fontStyle="italic" textWrap>
8+
<Span :text="item.text1" fontWeight="bold" />
9+
<Span :text="'\n' + item.text2" color="#ccc" fontSize="16" fontStyle="normal" />
10+
<Span :text="item.text2" color="#eee" fontFamily="Lato-Regular" fontSize="16" fontStyle="normal" />
11+
</Label>
12+
<Label color="white" fontSize="12" verticalAlignment="bottom" paddingLeft="20" paddingBottom="1" textWrap>
13+
<Span :text="item.icon1" fontSize="20" color="green" :fontFamily="mdiFontFamily" />
14+
<Span :text="' ' + item.texticon1" verticalTextAlignment="center" />
15+
<Span :text="' ' + item.icon2" fontSize="20" color="red" :fontFamily="mdiFontFamily" />
16+
<Span :text="' ' + item.texticon2" verticalTextAlignment="center" />
17+
<Span :text="' ' + item.icon3" fontSize="20" color="yellow" :fontFamily="mdiFontFamily" />
18+
<Span :text="' ' + item.icon3" verticalTextAlignment="center" />
19+
</Label>
20+
21+
<Label fontSize="12" verticalAlignment="middle" horizontalAlignment="center" textAlignment="right" paddingRight="20" color="brown" width="60" textWrap>
22+
<span :text="item.icon1" fontSize="14" :fontFamily="mdiFontFamily" />
23+
<Span :text="'\n' + item.texticon1" paddingRight="10" />
24+
</Label>
25+
<Label fontFamily="arial" :text="item.text4" color="red" fontSize="14" textAlignment="right" paddingRight="20" paddingTop="4" verticalAlignment="center"/>
26+
</GridLayout>
27+
</v-template>
28+
</CollectionView>
29+
<CollectionView width="100%" height="50%" rowHeight="80" ref="listView" :items="itemList" @itemTap="onItemTap" itemIdGenerator="index">
30+
<v-template>
31+
<GridLayout>
32+
<CanvasLabel id="canvaslabel" fontSize="10" color="white" backgroundColor="darkgray" margin="4" borderRightWidth="20" borderRightColor="white">
33+
<!-- <Rectangle left="-20" width="20" height="100%" color="red" horizontalAlignment="right" /> -->
34+
<CGroup id="group1" color="blue" fontSize="38" verticalAlignment="middle" paddingLeft="20" fontStyle="italic">
35+
<CSpan id="text1" :text="item.text1" fontWeight="bold" />
36+
<CSpan id="text2" :text="'\n' + item.text2" color="#ccc" fontSize="16" fontStyle="normal" />
37+
<CSpan id="text3" :text="item.text2" color="#eee" fontFamily="Lato-Regular" fontSize="16" fontStyle="normal" />
38+
</CGroup>
39+
<!-- <Line id="line" :antiAlias="true" color="yellow" startX="10%" startY="34%" stopX="90%" stopY="90%" strokeCap="round" strokeJoin="round" strokeWidth="4" dash="1 10 0" /> -->
40+
<!-- <CGroup backgroundColor="yellow" verticalTextAlignment="top" textAlignment="right">
41+
<CSpan text="TOTO" fontSize="20" color="green" />
42+
</CGroup> -->
43+
<CGroup id="group2" fontSize="12" verticalAlignment="bottom" paddingLeft="20" paddingBottom="1">
44+
<CSpan id="icon1" :text="item.icon1" fontSize="20" color="green" :fontFamily="mdiFontFamily" />
45+
<CSpan id="texticon1" :text="' ' + item.texticon1" verticalTextAlignment="center" />
46+
<CSpan id="icon2" :text="' ' + item.icon2" fontSize="20" color="red" :fontFamily="mdiFontFamily" />
47+
<CSpan id="texticon2" :text="' ' + item.texticon2" verticalTextAlignment="center" />
48+
<CSpan id="icon3" :text="' ' + item.icon3" fontSize="20" color="yellow" :fontFamily="mdiFontFamily" />
49+
<CSpan id="icon3" :text="' ' + item.icon3" verticalTextAlignment="center" />
50+
</CGroup>
51+
52+
<CGroup id="group3" fontSize="12" verticalAlignment="middle" horizontalAlignment="center" textAlignment="right" paddingRight="20" color="brown" width="60">
53+
<CSpan id="icon12" :text="item.icon1" fontSize="14" :fontFamily="mdiFontFamily" />
54+
<CSpan id="texticon12" :text="'\n' + item.texticon1" paddingRight="10" />
55+
</CGroup>
56+
<CSpan id="text4" fontFamily="arial" :text="item.text4" color="red" fontSize="14" textAlignment="right" paddingRight="20" paddingTop="4" verticalAlignment="center"/>
57+
<!-- <CGroup id="group1" fontSize="12" verticalAlignment="bottom" paddingLeft="20" paddingBottom="1" color="white" verticalTextAlignment="top">
58+
<CSpan id="span1" text="test1" margin="2" backgroundColor="green" borderRadius="4" verticalTextAlignment="super" />
59+
<CSpan id="span2" text="testtest2" backgroundColor="red" borderRadius="4" fontSize="24" />
60+
<CGroup id="group2" backgroundColor="green" borderRadius="4">
61+
<CSpan id="span3" text="mdi-access-point" fontSize="20" color="yellow" :fontFamily="mdiFontFamily" />
62+
<CSpan id="span4" text="test2" margin="2" />
63+
</CGroup>
64+
</CGroup> -->
65+
<!-- <CGroup>
66+
<CSpan fontSize="20" text="test1" margin="2" color="red" backgroundColor="green" borderRadius="10" @linkTap="onLinkTapped('test1')" />
67+
</CGroup> -->
68+
<!-- <CSpan
69+
width="44"
70+
height="44"
71+
horizontalAlignment="right"
72+
verticalAlignment="bottom"
73+
textAlignment="center"
74+
verticalTextAlignment="center"
75+
text="mdi-access-point"
76+
fontSize="20"
77+
color="yellow"
78+
:fontFamily="mdiFontFamily"
79+
backgroundColor="blue"
80+
borderRadius="4"
81+
shadow="0 1 4 red"
82+
/> -->
83+
</CanvasLabel>
84+
</GridLayout>
85+
</v-template>
86+
</CollectionView>
87+
</StackLayout>
88+
</Page>
89+
</template>
90+
91+
<script lang="ts">
92+
import { stringify } from 'querystring';
93+
const icons = [
94+
'mdi-numeric',
95+
'mdi-hat-fedora',
96+
'mdi-home-floor-g',
97+
'mdi-account-key',
98+
'mdi-ticket-confirmation',
99+
'mdi-rotate-orbit',
100+
'mdi-access-point',
101+
'mdi-arrow-right-bold-circle-outline',
102+
'mdi-crosshairs-gps',
103+
'mdi-jabber',
104+
'mdi-onepassword'
105+
];
106+
107+
const randomLanguage = ['javascript', 'typescript', 'go', 'c++'];
108+
export default {
109+
data() {
110+
const items = new Array(1000).fill(null).map((v, i) => ({
111+
index: i,
112+
// icon1: icons[Math.round(Math.random() * (icons.length - 1))],
113+
icon1: '1',
114+
icon2: 'mdi-access-point',
115+
icon3: '3',
116+
texticon1: randomLanguage[Math.round(Math.random() * (randomLanguage.length - 1))] + ` ${i}`,
117+
texticon2: randomLanguage[Math.round(Math.random() * (randomLanguage.length - 1))] + ` ${i}`,
118+
texticon3: randomLanguage[Math.round(Math.random() * (randomLanguage.length - 1))] + ` ${i}`,
119+
text1: `test asd g ${i}`,
120+
text2: 'asddg',
121+
text3: `icon ${i}`,
122+
text4: i % 3 === 0 ? 'test' : ''
123+
}));
124+
// console.log('items', JSON.stringify(items));
125+
126+
return {
127+
mdiFontFamily: 'materialdesignicons-webfont,Material Design Icons',
128+
itemList: items,
129+
item:null
130+
};
131+
},
132+
methods: {
133+
onLinkTapped(text) {
134+
console.log('onLinkTapped', text);
135+
},
136+
onItemTap({ index, item }) {
137+
console.log(`Tapped on ${index} ${item.title}`);
138+
},
139+
logEvent(e) {
140+
console.log('logEvent', e.eventName, e.extraData);
141+
}
142+
// itemIdGenerator(item, i) {
143+
// return item.index;
144+
// }
145+
}
146+
};
147+
</script>
148+
149+
<style scoped>
150+
ActionBar {
151+
background-color: #53ba82;
152+
color: #ffffff;
153+
}
154+
155+
.message {
156+
vertical-align: center;
157+
text-align: center;
158+
font-size: 20;
159+
color: #333333;
160+
}
161+
</style>

‎demo-snippets/vue/install.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,17 @@ import Shapes from './Shapes.vue';
55
import Image from './Image.vue';
66
import Complex from './Complex.vue';
77
import SVG from './SVG.vue';
8+
import CanvasLabel from './CanvasLabel.vue';
89
import CanvasPlugin from '@nativescript-community/ui-canvas/vue';
10+
import CanvasLabelPlugin from '@nativescript-community/ui-canvaslabel/vue';
11+
import CollectionViewPlugin from '@nativescript-community/ui-collectionview/vue';
912
import SVGPlugin from '@nativescript-community/ui-svg/vue';
1013

1114
export function installPlugin() {
1215
Vue.use(CanvasPlugin);
1316
Vue.use(SVGPlugin);
17+
Vue.use(CanvasLabelPlugin);
18+
Vue.use(CollectionViewPlugin);
1419
}
1520

1621
export const demos = [
@@ -19,5 +24,6 @@ export const demos = [
1924
{ name: 'Shapes', path: 'Shapes', component: Shapes },
2025
{ name: 'Image', path: 'Image', component: Image },
2126
{ name: 'Complex', path: 'Complex', component: Complex },
22-
{ name: 'SVG', path: 'SVG', component: SVG }
27+
{ name: 'SVG', path: 'SVG', component: SVG },
28+
{ name: 'CanvasLabel', path: 'CanvasLabel', component: CanvasLabel }
2329
];

‎demo-snippets/webpack.config.vue.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
const NsVueTemplateCompiler = require('../demo-vue/node_modules/nativescript-vue-template-compiler');
2+
const { readFileSync } = require('fs');
3+
const CopyWebpackPlugin = require('copy-webpack-plugin');
4+
5+
const { resolve } = require('path');
6+
function fixedFromCharCode(codePt) {
7+
if (codePt > 0xffff) {
8+
codePt -= 0x10000;
9+
return String.fromCharCode(0xd800 + (codePt >> 10), 0xdc00 + (codePt & 0x3ff));
10+
} else {
11+
return String.fromCharCode(codePt);
12+
}
13+
}
14+
15+
module.exports = (env, webpack) => {
16+
const platform = env && ((env.android && 'android') || (env.ios && 'ios'));
17+
webpack.chainWebpack((config) => {
18+
const symbolsParser = require('scss-symbols-parser');
19+
const mdiSymbols = symbolsParser.parseSymbols(readFileSync(resolve(__dirname, './node_modules/@mdi/font/scss/_variables.scss')).toString());
20+
const mdiIcons = JSON.parse(`{${mdiSymbols.variables[mdiSymbols.variables.length - 1].value.replace(/" (F|0)(.*?)([,\n]|$)/g, '": "$1$2"$3')}}`);
21+
22+
const scssPrepend = `$mdi-fontFamily: ${platform === 'android' ? 'materialdesignicons-webfont' : 'Material Design Icons'};`;
23+
config.module.rule('scss').use('sass-loader').options({
24+
additionalData: scssPrepend
25+
});
26+
config.module
27+
.rule('replace_mdi')
28+
.exclude.add(/node_modules/)
29+
.end()
30+
.test(/\.(ts|js|scss|css|vue)$/)
31+
.use('string-replace-loader')
32+
.loader(resolve(__dirname, './node_modules/string-replace-loader'))
33+
.options({
34+
search: 'mdi-([a-z0-9-_]+)',
35+
replace: (match, p1, offset, str) => {
36+
if (mdiIcons[p1]) {
37+
return fixedFromCharCode(parseInt(mdiIcons[p1], 16));
38+
}
39+
return match;
40+
},
41+
flags: 'g'
42+
});
43+
config.plugin('material-font').use(CopyWebpackPlugin, [
44+
{
45+
patterns: [
46+
{
47+
from: resolve(__dirname, './node_modules/@mdi/font/fonts/materialdesignicons-webfont.ttf'),
48+
to: 'fonts'
49+
}
50+
]
51+
}
52+
]);
53+
});
54+
};

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,5 +95,8 @@
9595
"yarn": ">=1.19.1",
9696
"pnpm": ">=7.0.0",
9797
"node": "^14.20.0 || ^16.13.0 || >=18.10.0"
98+
},
99+
"resolutions": {
100+
"@nativescript-community/text": "portal:/Volumes/dev/nativescript/nativescript-text/packages/text"
98101
}
99102
}

‎packages/ui-canvaslabel/.npmignore

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.DS_Store
2+
tsconfig.json
3+
node_modules/
4+
pnpm-global/
5+
CHANGELOG.md
6+
blueprint.md
7+
*.aar
8+
*.jar

0 commit comments

Comments
 (0)