add project files from main project
This commit is contained in:
pengfei.zhou
parent
fbeb910c1a
commit
8a6ae585bb
21
index.ts
Normal file
21
index.ts
Normal file
@ -0,0 +1,21 @@
|
||||
export default [
|
||||
'src/Counter',
|
||||
'src/Snake',
|
||||
'src/ListDemo',
|
||||
'src/ScrollerDemo',
|
||||
'src/SliderDemo',
|
||||
'src/LayoutDemo',
|
||||
'src/EffectsDemo',
|
||||
'src/ImageDemo',
|
||||
'src/ModalDemo',
|
||||
'src/NetworkDemo',
|
||||
'src/StorageDemo',
|
||||
'src/NavigatorDemo',
|
||||
'src/NavbarDemo',
|
||||
'src/RefreshableDemo',
|
||||
'src/FlowLayoutDemo',
|
||||
'src/PopoverDemo',
|
||||
'src/AnimatorDemo',
|
||||
'src/ComplicatedAnimations',
|
||||
'src/ComplicatedDemo',
|
||||
]
|
||||
268
package-lock.json
generated
Normal file
268
package-lock.json
generated
Normal file
@ -0,0 +1,268 @@
|
||||
{
|
||||
"name": "demo",
|
||||
"version": "0.1.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
"@types/estree": {
|
||||
"version": "0.0.39",
|
||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
|
||||
"integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw=="
|
||||
},
|
||||
"@types/node": {
|
||||
"version": "12.12.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.7.tgz",
|
||||
"integrity": "sha512-E6Zn0rffhgd130zbCbAr/JdXfXkoOUFAKNs/rF8qnafSJ8KYaA/j3oz7dcwal+lYjLA7xvdd5J4wdYpCTlP8+w=="
|
||||
},
|
||||
"@types/resolve": {
|
||||
"version": "0.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
|
||||
"integrity": "sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==",
|
||||
"requires": {
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"acorn": {
|
||||
"version": "7.1.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.0.tgz",
|
||||
"integrity": "sha512-kL5CuoXA/dgxlBbVrflsflzQ3PAas7RYZB52NOm/6839iVYJgKMJ3cQJD+t2i5+qFa8h3MDpEOJiS64E8JLnSQ=="
|
||||
},
|
||||
"builtin-modules": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz",
|
||||
"integrity": "sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw=="
|
||||
},
|
||||
"doric": {
|
||||
"version": "file:../js-framework",
|
||||
"requires": {
|
||||
"@types/ws": "^6.0.3",
|
||||
"reflect-metadata": "^0.1.13",
|
||||
"rollup": "^1.27.2",
|
||||
"rollup-plugin-node-resolve": "^5.2.0",
|
||||
"tslib": "^1.10.0",
|
||||
"typescript": "^3.7.2",
|
||||
"ws": "^7.2.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/estree": {
|
||||
"version": "0.0.39",
|
||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
|
||||
"integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw=="
|
||||
},
|
||||
"@types/node": {
|
||||
"version": "12.12.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.7.tgz",
|
||||
"integrity": "sha512-E6Zn0rffhgd130zbCbAr/JdXfXkoOUFAKNs/rF8qnafSJ8KYaA/j3oz7dcwal+lYjLA7xvdd5J4wdYpCTlP8+w=="
|
||||
},
|
||||
"@types/resolve": {
|
||||
"version": "0.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
|
||||
"integrity": "sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==",
|
||||
"requires": {
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"@types/ws": {
|
||||
"version": "6.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-6.0.3.tgz",
|
||||
"integrity": "sha512-yBTM0P05Tx9iXGq00BbJPo37ox68R5vaGTXivs6RGh/BQ6QP5zqZDGWdAO6JbRE/iR1l80xeGAwCQS2nMV9S/w==",
|
||||
"requires": {
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"acorn": {
|
||||
"version": "7.1.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.0.tgz",
|
||||
"integrity": "sha512-kL5CuoXA/dgxlBbVrflsflzQ3PAas7RYZB52NOm/6839iVYJgKMJ3cQJD+t2i5+qFa8h3MDpEOJiS64E8JLnSQ=="
|
||||
},
|
||||
"async-limiter": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
|
||||
"integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ=="
|
||||
},
|
||||
"builtin-modules": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz",
|
||||
"integrity": "sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw=="
|
||||
},
|
||||
"estree-walker": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
|
||||
"integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w=="
|
||||
},
|
||||
"is-module": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
|
||||
"integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE="
|
||||
},
|
||||
"path-parse": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
|
||||
"integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
|
||||
},
|
||||
"reflect-metadata": {
|
||||
"version": "0.1.13",
|
||||
"resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",
|
||||
"integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg=="
|
||||
},
|
||||
"resolve": {
|
||||
"version": "1.12.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.0.tgz",
|
||||
"integrity": "sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==",
|
||||
"requires": {
|
||||
"path-parse": "^1.0.6"
|
||||
}
|
||||
},
|
||||
"rollup": {
|
||||
"version": "1.26.5",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-1.26.5.tgz",
|
||||
"integrity": "sha512-c6Pv0yWzjYNpy2DIhLFUnyP6e1UTGownr4IfpJcPY/k186RJjpaGGPRwKQ62KCauctG6dgtHt88pw1EGrPRkuA==",
|
||||
"requires": {
|
||||
"@types/estree": "*",
|
||||
"@types/node": "*",
|
||||
"acorn": "^7.1.0"
|
||||
}
|
||||
},
|
||||
"rollup-plugin-node-resolve": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-5.2.0.tgz",
|
||||
"integrity": "sha512-jUlyaDXts7TW2CqQ4GaO5VJ4PwwaV8VUGA7+km3n6k6xtOEacf61u0VXwN80phY/evMcaS+9eIeJ9MOyDxt5Zw==",
|
||||
"requires": {
|
||||
"@types/resolve": "0.0.8",
|
||||
"builtin-modules": "^3.1.0",
|
||||
"is-module": "^1.0.0",
|
||||
"resolve": "^1.11.1",
|
||||
"rollup-pluginutils": "^2.8.1"
|
||||
}
|
||||
},
|
||||
"rollup-pluginutils": {
|
||||
"version": "2.8.2",
|
||||
"resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
|
||||
"integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
|
||||
"requires": {
|
||||
"estree-walker": "^0.6.1"
|
||||
}
|
||||
},
|
||||
"tslib": {
|
||||
"version": "1.10.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
|
||||
"integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
|
||||
},
|
||||
"typescript": {
|
||||
"version": "3.7.2",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.2.tgz",
|
||||
"integrity": "sha512-ml7V7JfiN2Xwvcer+XAf2csGO1bPBdRbFCkYBczNZggrBZ9c7G3riSUeJmqEU5uOtXNPMhE3n+R4FA/3YOAWOQ=="
|
||||
},
|
||||
"ws": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-7.2.0.tgz",
|
||||
"integrity": "sha512-+SqNqFbwTm/0DC18KYzIsMTnEWpLwJsiasW/O17la4iDRRIO9uaHbvKiAS3AHgTiuuWerK/brj4O6MYZkei9xg==",
|
||||
"requires": {
|
||||
"async-limiter": "^1.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"estree-walker": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
|
||||
"integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w=="
|
||||
},
|
||||
"is-module": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
|
||||
"integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE="
|
||||
},
|
||||
"is-reference": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.1.4.tgz",
|
||||
"integrity": "sha512-uJA/CDPO3Tao3GTrxYn6AwkM4nUPJiGGYu5+cB8qbC7WGFlrKZbiRo7SFKxUAEpFUfiHofWCXBUNhvYJMh+6zw==",
|
||||
"requires": {
|
||||
"@types/estree": "0.0.39"
|
||||
}
|
||||
},
|
||||
"magic-string": {
|
||||
"version": "0.25.4",
|
||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.4.tgz",
|
||||
"integrity": "sha512-oycWO9nEVAP2RVPbIoDoA4Y7LFIJ3xRYov93gAyJhZkET1tNuB0u7uWkZS2LpBWTJUWnmau/To8ECWRC+jKNfw==",
|
||||
"requires": {
|
||||
"sourcemap-codec": "^1.4.4"
|
||||
}
|
||||
},
|
||||
"path-parse": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
|
||||
"integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
|
||||
},
|
||||
"reflect-metadata": {
|
||||
"version": "0.1.13",
|
||||
"resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",
|
||||
"integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg=="
|
||||
},
|
||||
"resolve": {
|
||||
"version": "1.12.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.0.tgz",
|
||||
"integrity": "sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==",
|
||||
"requires": {
|
||||
"path-parse": "^1.0.6"
|
||||
}
|
||||
},
|
||||
"rollup": {
|
||||
"version": "1.27.2",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-1.27.2.tgz",
|
||||
"integrity": "sha512-sD3iyd0zlvgK1S3MmICi6F/Y+R/QWY5XxzsTGN4pAd+nCasDUizmAhgq2hdh1t2eLux974NHU2TW41fhuGPv+Q==",
|
||||
"requires": {
|
||||
"@types/estree": "*",
|
||||
"@types/node": "*",
|
||||
"acorn": "^7.1.0"
|
||||
}
|
||||
},
|
||||
"rollup-plugin-commonjs": {
|
||||
"version": "10.1.0",
|
||||
"resolved": "https://registry.npmjs.org/rollup-plugin-commonjs/-/rollup-plugin-commonjs-10.1.0.tgz",
|
||||
"integrity": "sha512-jlXbjZSQg8EIeAAvepNwhJj++qJWNJw1Cl0YnOqKtP5Djx+fFGkp3WRh+W0ASCaFG5w1jhmzDxgu3SJuVxPF4Q==",
|
||||
"requires": {
|
||||
"estree-walker": "^0.6.1",
|
||||
"is-reference": "^1.1.2",
|
||||
"magic-string": "^0.25.2",
|
||||
"resolve": "^1.11.0",
|
||||
"rollup-pluginutils": "^2.8.1"
|
||||
}
|
||||
},
|
||||
"rollup-plugin-node-resolve": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-5.2.0.tgz",
|
||||
"integrity": "sha512-jUlyaDXts7TW2CqQ4GaO5VJ4PwwaV8VUGA7+km3n6k6xtOEacf61u0VXwN80phY/evMcaS+9eIeJ9MOyDxt5Zw==",
|
||||
"requires": {
|
||||
"@types/resolve": "0.0.8",
|
||||
"builtin-modules": "^3.1.0",
|
||||
"is-module": "^1.0.0",
|
||||
"resolve": "^1.11.1",
|
||||
"rollup-pluginutils": "^2.8.1"
|
||||
}
|
||||
},
|
||||
"rollup-pluginutils": {
|
||||
"version": "2.8.2",
|
||||
"resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
|
||||
"integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
|
||||
"requires": {
|
||||
"estree-walker": "^0.6.1"
|
||||
}
|
||||
},
|
||||
"sourcemap-codec": {
|
||||
"version": "1.4.6",
|
||||
"resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.6.tgz",
|
||||
"integrity": "sha512-1ZooVLYFxC448piVLBbtOxFcXwnymH9oUF8nRd3CuYDVvkRBxRl6pB4Mtas5a4drtL+E8LDgFkQNcgIw6tc8Hg=="
|
||||
},
|
||||
"tslib": {
|
||||
"version": "1.10.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
|
||||
"integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
|
||||
},
|
||||
"typescript": {
|
||||
"version": "3.7.2",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.2.tgz",
|
||||
"integrity": "sha512-ml7V7JfiN2Xwvcer+XAf2csGO1bPBdRbFCkYBczNZggrBZ9c7G3riSUeJmqEU5uOtXNPMhE3n+R4FA/3YOAWOQ=="
|
||||
}
|
||||
}
|
||||
}
|
||||
21
package.json
Normal file
21
package.json
Normal file
@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "demo",
|
||||
"version": "0.1.0",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"build": "tsc -p .&& rollup -c",
|
||||
"dev": "tsc -w -p . & rollup -c -w",
|
||||
"clean": "rm -rf build && rm -rf bundle"
|
||||
},
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"doric": "file:../js-framework",
|
||||
"reflect-metadata": "^0.1.13",
|
||||
"rollup": "^1.27.2",
|
||||
"rollup-plugin-commonjs": "^10.1.0",
|
||||
"rollup-plugin-node-resolve": "^5.2.0",
|
||||
"tslib": "^1.10.0",
|
||||
"typescript": "^3.7.2"
|
||||
}
|
||||
}
|
||||
23
rollup.config.js
Normal file
23
rollup.config.js
Normal file
@ -0,0 +1,23 @@
|
||||
import resolve from 'rollup-plugin-node-resolve'
|
||||
import commonjs from 'rollup-plugin-commonjs'
|
||||
import bundles from './build/index'
|
||||
|
||||
export default bundles.map(bundle => {
|
||||
return {
|
||||
input: `build/${bundle}.js`,
|
||||
output: {
|
||||
format: "cjs",
|
||||
file: `bundle/${bundle}.js`,
|
||||
sourcemap: true,
|
||||
},
|
||||
plugins: [
|
||||
resolve({ mainFields: ["jsnext"] }),
|
||||
commonjs()
|
||||
],
|
||||
external: ['reflect-metadata', 'doric'],
|
||||
onwarn: function (warning) {
|
||||
if (warning.code === 'THIS_IS_UNDEFINED') { return; }
|
||||
console.warn(warning.message);
|
||||
}
|
||||
}
|
||||
})
|
||||
185
src/AnimatorDemo.ts
Normal file
185
src/AnimatorDemo.ts
Normal file
@ -0,0 +1,185 @@
|
||||
import { animate, Group, Panel, gravity, Color, AnimationSet, vlayout, scroller, layoutConfig, IVLayout, modal, IText, network, View, stack, IHLayout, hlayout, IView, text, TranslationAnimation, ScaleAnimation, RotationAnimation, FillMode } from "doric";
|
||||
import { title, colors, box } from "./utils";
|
||||
|
||||
function thisLabel(str: string) {
|
||||
return text({
|
||||
text: str,
|
||||
width: 60,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 15,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().exactly(),
|
||||
})
|
||||
}
|
||||
|
||||
@Entry
|
||||
class AnimatorDemo extends Panel {
|
||||
build(rootView: Group): void {
|
||||
const view = box(2)
|
||||
view.onClick = () => {
|
||||
modal(context).toast('Clicked')
|
||||
}
|
||||
const view2 = box(3)
|
||||
let idx = 0
|
||||
vlayout([
|
||||
title("Animator Demo"),
|
||||
vlayout(
|
||||
[
|
||||
hlayout([
|
||||
thisLabel('Reset').apply({
|
||||
onClick: () => {
|
||||
animate(this)({
|
||||
animations: () => {
|
||||
view.width = view.height = 20
|
||||
view.x = view.y = 0
|
||||
view.rotation = 0
|
||||
view.backgroundColor = colors[2]
|
||||
view.corners = 0
|
||||
view.scaleX = 1
|
||||
view.scaleY = 1
|
||||
view.translationX = 0
|
||||
view.translationY = 0
|
||||
view.rotation = 0
|
||||
},
|
||||
duration: 1500,
|
||||
}).then(() => {
|
||||
modal(context).toast('Fininshed')
|
||||
}).catch(e => {
|
||||
modal(context).toast(`${e}`)
|
||||
})
|
||||
}
|
||||
}),
|
||||
]).apply({ space: 10 } as IHLayout),
|
||||
hlayout([
|
||||
thisLabel('X').apply({
|
||||
onClick: () => {
|
||||
animate(this)({
|
||||
animations: () => {
|
||||
view.x = view.x || 0
|
||||
view.x += 100
|
||||
view2.x += 50
|
||||
},
|
||||
duration: 1000,
|
||||
})
|
||||
}
|
||||
}),
|
||||
thisLabel('Y').apply({
|
||||
onClick: () => {
|
||||
animate(this)({
|
||||
animations: () => {
|
||||
view.y = view.y || 0
|
||||
view.y += 100
|
||||
view2.y += 50
|
||||
},
|
||||
duration: 1000,
|
||||
})
|
||||
}
|
||||
}),
|
||||
thisLabel('Width').apply({
|
||||
onClick: () => {
|
||||
animate(this)({
|
||||
animations: () => {
|
||||
view.width += 100
|
||||
},
|
||||
duration: 1000,
|
||||
})
|
||||
}
|
||||
}),
|
||||
thisLabel('Height').apply({
|
||||
onClick: () => {
|
||||
animate(this)({
|
||||
animations: () => {
|
||||
view.height += 100
|
||||
},
|
||||
duration: 1000,
|
||||
})
|
||||
}
|
||||
}),
|
||||
]).apply({ space: 10 } as IHLayout),
|
||||
hlayout([
|
||||
thisLabel('BgColor').apply({
|
||||
onClick: () => {
|
||||
animate(this)({
|
||||
animations: () => {
|
||||
view.backgroundColor = colors[(idx++) % colors.length]
|
||||
},
|
||||
duration: 1000,
|
||||
});
|
||||
}
|
||||
}),
|
||||
thisLabel('Rotation').apply({
|
||||
onClick: () => {
|
||||
animate(this)({
|
||||
animations: () => {
|
||||
if (view.rotation) {
|
||||
view.rotation += 0.5
|
||||
} else {
|
||||
view.rotation = 0.5
|
||||
}
|
||||
},
|
||||
duration: 1000,
|
||||
});
|
||||
}
|
||||
}),
|
||||
thisLabel('Corner').apply({
|
||||
onClick: () => {
|
||||
animate(this)({
|
||||
animations: () => {
|
||||
if (typeof view.corners === 'number') {
|
||||
view.corners += 10
|
||||
} else {
|
||||
view.corners = 10
|
||||
}
|
||||
},
|
||||
duration: 1000,
|
||||
});
|
||||
}
|
||||
}),
|
||||
]).apply({ space: 10 } as IHLayout),
|
||||
|
||||
hlayout([
|
||||
thisLabel('scaleX').apply({
|
||||
onClick: () => {
|
||||
animate(this)({
|
||||
animations: () => {
|
||||
if (view.scaleX) {
|
||||
view.scaleX += 0.1
|
||||
} else {
|
||||
view.scaleX = 1.1
|
||||
}
|
||||
},
|
||||
duration: 1000,
|
||||
});
|
||||
}
|
||||
}),
|
||||
thisLabel('scaleY').apply({
|
||||
onClick: () => {
|
||||
animate(this)({
|
||||
animations: () => {
|
||||
if (view.scaleY) {
|
||||
view.scaleY += 0.1
|
||||
} else {
|
||||
view.scaleY = 1.1
|
||||
}
|
||||
},
|
||||
duration: 1000,
|
||||
});
|
||||
}
|
||||
}),
|
||||
]).apply({ space: 10 } as IHLayout),
|
||||
]
|
||||
).apply({ space: 10 } as IVLayout),
|
||||
stack([
|
||||
view,
|
||||
]).apply({
|
||||
layoutConfig: layoutConfig().atmost(),
|
||||
backgroundColor: colors[1].alpha(0.3 * 255),
|
||||
}),
|
||||
]).apply({
|
||||
layoutConfig: layoutConfig().atmost(),
|
||||
gravity: gravity().center(),
|
||||
space: 10,
|
||||
} as IVLayout).in(rootView)
|
||||
}
|
||||
}
|
||||
202
src/ComplicatedAnimations.ts
Normal file
202
src/ComplicatedAnimations.ts
Normal file
@ -0,0 +1,202 @@
|
||||
import { animate, Group, Panel, gravity, Color, AnimationSet, vlayout, scroller, layoutConfig, IVLayout, modal, IText, network, View, stack, IHLayout, hlayout, IView, text, TranslationAnimation, ScaleAnimation, RotationAnimation, FillMode, TimingFunction } from "doric";
|
||||
import { title, colors, box } from "./utils";
|
||||
|
||||
function thisLabel(str: string) {
|
||||
return text({
|
||||
text: str,
|
||||
width: 80,
|
||||
height: 30,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 10,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().exactly(),
|
||||
})
|
||||
}
|
||||
|
||||
@Entry
|
||||
class AnimationDemo extends Panel {
|
||||
build(rootView: Group): void {
|
||||
const view = box(2)
|
||||
const view2 = box(3)
|
||||
view.onClick = () => {
|
||||
modal(context).toast('Clicked')
|
||||
}
|
||||
vlayout([
|
||||
title("Complicated Animation"),
|
||||
vlayout(
|
||||
[
|
||||
hlayout([
|
||||
thisLabel('reset').apply({
|
||||
onClick: () => {
|
||||
const rotation = new RotationAnimation
|
||||
rotation.duration = 1000
|
||||
rotation.fromRotation = view.rotation || 0
|
||||
rotation.toRotation = 0
|
||||
const translation = new TranslationAnimation
|
||||
translation.duration = 1000
|
||||
translation.fromTranslationX = view.translationX || 0
|
||||
translation.toTranslationX = 0
|
||||
translation.fromTranslationY = view.translationY || 0
|
||||
translation.toTranslationY = 0
|
||||
const scale = new ScaleAnimation
|
||||
scale.duration = 1000
|
||||
scale.fromScaleX = view.scaleX || 1
|
||||
scale.toScaleX = 1
|
||||
scale.fromScaleY = view.scaleY || 1
|
||||
scale.toScaleY = 1
|
||||
const animationSet = new AnimationSet
|
||||
animationSet.addAnimation(rotation)
|
||||
animationSet.addAnimation(translation)
|
||||
animationSet.addAnimation(scale)
|
||||
view.doAnimation(context, animationSet).then(() => {
|
||||
modal(context).toast('Resetd')
|
||||
})
|
||||
}
|
||||
}),
|
||||
]).apply({ space: 10 } as IHLayout),
|
||||
hlayout([
|
||||
thisLabel('TranslationX').apply({
|
||||
onClick: () => {
|
||||
const animation = new TranslationAnimation
|
||||
animation.duration = 1000
|
||||
animation.fromTranslationX = view.translationX || 0
|
||||
animation.toTranslationX = animation.fromTranslationX + 100
|
||||
animation.fromTranslationY = view.translationY || 0
|
||||
animation.toTranslationY = view.translationY || 0
|
||||
view.doAnimation(context, animation)
|
||||
}
|
||||
}),
|
||||
thisLabel('TranslationY').apply({
|
||||
onClick: () => {
|
||||
const animation = new TranslationAnimation
|
||||
animation.duration = 1000
|
||||
animation.fromTranslationX = view.translationX || 0
|
||||
animation.toTranslationX = view.translationX || 0
|
||||
animation.fromTranslationY = view.translationY || 0
|
||||
animation.toTranslationY = animation.fromTranslationY + 100
|
||||
view.doAnimation(context, animation)
|
||||
}
|
||||
}),
|
||||
thisLabel('ScaleX').apply({
|
||||
onClick: () => {
|
||||
const animation = new ScaleAnimation
|
||||
animation.duration = 1000
|
||||
animation.fromScaleX = view.scaleX || 1
|
||||
animation.toScaleX = animation.fromScaleX + 1
|
||||
view.doAnimation(context, animation)
|
||||
}
|
||||
}),
|
||||
thisLabel('ScaleY').apply({
|
||||
onClick: () => {
|
||||
const animation = new ScaleAnimation
|
||||
animation.duration = 1000
|
||||
animation.fromScaleY = view.scaleY || 1
|
||||
animation.toScaleY = animation.fromScaleY + 1
|
||||
view.doAnimation(context, animation)
|
||||
}
|
||||
}),
|
||||
thisLabel('rotation').apply({
|
||||
onClick: () => {
|
||||
const animation = new RotationAnimation
|
||||
animation.duration = 1000
|
||||
animation.fromRotation = view.rotation || 0
|
||||
animation.toRotation = animation.fromRotation + 0.25
|
||||
view.doAnimation(context, animation)
|
||||
}
|
||||
}),
|
||||
]).apply({ space: 10 } as IHLayout),
|
||||
hlayout([
|
||||
thisLabel('group').apply({
|
||||
onClick: () => {
|
||||
const rotation = new RotationAnimation
|
||||
rotation.duration = 1000
|
||||
rotation.fromRotation = 0
|
||||
rotation.toRotation = 4
|
||||
const translation = new TranslationAnimation
|
||||
translation.duration = 1000
|
||||
translation.fromTranslationX = view.translationX || 0
|
||||
translation.toTranslationX = 100
|
||||
const animationSet = new AnimationSet
|
||||
animationSet.addAnimation(rotation)
|
||||
animationSet.addAnimation(translation)
|
||||
view.doAnimation(context, animationSet)
|
||||
}
|
||||
}),
|
||||
]).apply({ space: 10 } as IHLayout),
|
||||
hlayout([
|
||||
thisLabel('Default').apply({
|
||||
onClick: () => {
|
||||
const translation = new TranslationAnimation
|
||||
translation.duration = 3000
|
||||
translation.fromTranslationX = 0
|
||||
translation.toTranslationX = 300
|
||||
translation.timingFunction = TimingFunction.Default
|
||||
view.doAnimation(context, translation)
|
||||
}
|
||||
}),
|
||||
thisLabel('Linear').apply({
|
||||
onClick: () => {
|
||||
const translation = new TranslationAnimation
|
||||
translation.duration = 3000
|
||||
translation.fromTranslationX = 0
|
||||
translation.toTranslationX = 300
|
||||
translation.timingFunction = TimingFunction.Linear
|
||||
view.doAnimation(context, translation)
|
||||
}
|
||||
}),
|
||||
thisLabel('EaseIn').apply({
|
||||
onClick: () => {
|
||||
const translation = new TranslationAnimation
|
||||
translation.duration = 3000
|
||||
translation.fromTranslationX = 0
|
||||
translation.toTranslationX = 300
|
||||
translation.timingFunction = TimingFunction.EaseIn
|
||||
view.doAnimation(context, translation)
|
||||
}
|
||||
}),
|
||||
thisLabel('EaseOut').apply({
|
||||
onClick: () => {
|
||||
const translation = new TranslationAnimation
|
||||
translation.duration = 3000
|
||||
translation.fromTranslationX = 0
|
||||
translation.toTranslationX = 300
|
||||
translation.timingFunction = TimingFunction.EaseOut
|
||||
view.doAnimation(context, translation)
|
||||
}
|
||||
}),
|
||||
thisLabel('EaseInEaseOut').apply({
|
||||
onClick: () => {
|
||||
const translation = new TranslationAnimation
|
||||
translation.duration = 3000
|
||||
translation.fromTranslationX = 0
|
||||
translation.toTranslationX = 300
|
||||
translation.timingFunction = TimingFunction.EaseInEaseOut
|
||||
view.doAnimation(context, translation)
|
||||
}
|
||||
}),
|
||||
]).apply({ space: 10 } as IHLayout),
|
||||
]
|
||||
).apply({ space: 10 } as IVLayout),
|
||||
stack([
|
||||
view.also(v => {
|
||||
v.x = 20
|
||||
v.y = 0
|
||||
v.width = 30
|
||||
v.left = 15
|
||||
}),
|
||||
view2.also(v => {
|
||||
v.x = v.y = 20
|
||||
v.y = 40
|
||||
v.scaleX = 1.5
|
||||
})
|
||||
]).apply({
|
||||
layoutConfig: layoutConfig().atmost(),
|
||||
backgroundColor: colors[1].alpha(0.3 * 255),
|
||||
}),
|
||||
]).apply({
|
||||
layoutConfig: layoutConfig().atmost(),
|
||||
gravity: gravity().center(),
|
||||
space: 10,
|
||||
} as IVLayout).in(rootView)
|
||||
}
|
||||
}
|
||||
49
src/ComplicatedDemo.ts
Normal file
49
src/ComplicatedDemo.ts
Normal file
@ -0,0 +1,49 @@
|
||||
import { Panel, Group, vlayout, image, layoutConfig, ScaleType, refreshable, Color, pullable, stack, Image, Refreshable, TranslationAnimation, loge, log } from "doric";
|
||||
import { title, icon_refresh } from "./utils";
|
||||
|
||||
@Entry
|
||||
class MyDemo extends Panel {
|
||||
build(root: Group) {
|
||||
let refreshed: Refreshable
|
||||
let headerImage: Image
|
||||
stack([
|
||||
refreshed = refreshable({
|
||||
onRefresh: () => {
|
||||
refreshed.setRefreshing(context, false)
|
||||
},
|
||||
header: pullable(context,
|
||||
stack([]).apply({
|
||||
backgroundColor: Color.RED,
|
||||
layoutConfig: layoutConfig().exactly(),
|
||||
width: 100,
|
||||
height: 30,
|
||||
}),
|
||||
{
|
||||
startAnimation: () => {
|
||||
},
|
||||
stopAnimation: () => {
|
||||
},
|
||||
setPullingDistance: (distance: number) => {
|
||||
headerImage.scaleX = headerImage.scaleY = (headerImage.height + distance * 2) / headerImage.height
|
||||
log(`Header Image scaleY:${headerImage.scaleY},height:${headerImage.height},distance:${distance}`)
|
||||
},
|
||||
}),
|
||||
content: vlayout([]).apply({
|
||||
backgroundColor: Color.YELLOW,
|
||||
}),
|
||||
}).apply({
|
||||
layoutConfig: layoutConfig().atmost(),
|
||||
}).also(v => {
|
||||
v.top = 200
|
||||
}),
|
||||
|
||||
headerImage = image({
|
||||
imageUrl: "https://img.zcool.cn/community/01e75b5da933daa801209e1ffa4649.jpg@1280w_1l_2o_100sh.jpg",
|
||||
layoutConfig: layoutConfig().exactly(),
|
||||
width: root.width,
|
||||
height: 200,
|
||||
scaleType: ScaleType.ScaleAspectFill,
|
||||
}),
|
||||
]).in(root)
|
||||
}
|
||||
}
|
||||
121
src/Counter.ts
Normal file
121
src/Counter.ts
Normal file
@ -0,0 +1,121 @@
|
||||
import { text, vlayout, Image, ViewHolder, VMPanel, ViewModel, Gravity, NativeCall, Text, Color, log, logw, loge, Group, LayoutSpec, } from "doric"
|
||||
|
||||
interface CountModel {
|
||||
count: number
|
||||
}
|
||||
|
||||
class CounterView extends ViewHolder<CountModel> {
|
||||
|
||||
number!: Text
|
||||
counter!: Text
|
||||
build(root: Group) {
|
||||
root.addChild(vlayout([
|
||||
text({
|
||||
textSize: 40,
|
||||
layoutConfig: {
|
||||
alignment: Gravity.Center,
|
||||
widthSpec: LayoutSpec.WRAP_CONTENT,
|
||||
heightSpec: LayoutSpec.WRAP_CONTENT,
|
||||
},
|
||||
}).also(it => { this.number = it }),
|
||||
text({
|
||||
text: "点击计数",
|
||||
textSize: 20,
|
||||
border: {
|
||||
width: 1,
|
||||
color: Color.parse('#000000'),
|
||||
},
|
||||
corners: 5,
|
||||
layoutConfig: {
|
||||
alignment: Gravity.Center,
|
||||
widthSpec: LayoutSpec.WRAP_CONTENT,
|
||||
heightSpec: LayoutSpec.WRAP_CONTENT,
|
||||
},
|
||||
shadow: {
|
||||
color: Color.parse("#00ff00"),
|
||||
opacity: 0.5,
|
||||
radius: 20,
|
||||
offsetX: 10,
|
||||
offsetY: 10,
|
||||
}
|
||||
}).also(it => { this.counter = it }),
|
||||
]).also(it => {
|
||||
it.width = 200
|
||||
it.height = 200
|
||||
it.space = 20
|
||||
it.gravity = Gravity.Center
|
||||
it.layoutConfig = {
|
||||
alignment: Gravity.Center
|
||||
}
|
||||
it.border = {
|
||||
width: 1,
|
||||
color: Color.parse("#000000"),
|
||||
}
|
||||
it.shadow = {
|
||||
color: Color.parse("#ffff00"),
|
||||
opacity: 0.5,
|
||||
radius: 20,
|
||||
offsetX: 10,
|
||||
offsetY: 10,
|
||||
}
|
||||
it.corners = 20
|
||||
it.backgroundColor = Color.parse('#ff00ff')
|
||||
}))
|
||||
|
||||
root.addChild((new Image).also(iv => {
|
||||
iv.imageUrl = "https://misc.aotu.io/ONE-SUNDAY/SteamEngine.png"
|
||||
iv.layoutConfig = {
|
||||
widthSpec: LayoutSpec.WRAP_CONTENT,
|
||||
heightSpec: LayoutSpec.WRAP_CONTENT,
|
||||
}
|
||||
}))
|
||||
}
|
||||
|
||||
bind(state: CountModel) {
|
||||
this.number.text = `${state.count}`
|
||||
}
|
||||
|
||||
setCounter(v: Function) {
|
||||
this.counter.onClick = v
|
||||
}
|
||||
}
|
||||
|
||||
class CounterVM extends ViewModel<CountModel, CounterView> {
|
||||
onAttached(s: CountModel, vh: CounterView): void {
|
||||
vh.counter.onClick = () => {
|
||||
this.updateState(state => {
|
||||
state.count++
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Entry
|
||||
class MyPage extends VMPanel<CountModel, CounterView>{
|
||||
|
||||
|
||||
getViewHolderClass() {
|
||||
return CounterView
|
||||
}
|
||||
|
||||
getViewModelClass() {
|
||||
return CounterVM
|
||||
}
|
||||
|
||||
getState(): CountModel {
|
||||
return {
|
||||
count: 0
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@NativeCall
|
||||
log() {
|
||||
log("Hello.HEGO")
|
||||
logw("Hello.HEGO")
|
||||
loge("Hello.HEGO")
|
||||
context.modal.toast('This is a toast.').then((r) => {
|
||||
loge(r)
|
||||
})
|
||||
}
|
||||
}
|
||||
367
src/EffectsDemo.ts
Normal file
367
src/EffectsDemo.ts
Normal file
@ -0,0 +1,367 @@
|
||||
|
||||
import { Group, Panel, Text, text, gravity, Color, Stack, LayoutSpec, vlayout, hlayout, scroller, IVLayout, IHLayout, layoutConfig, Gravity } from "doric";
|
||||
import { colors } from "./utils";
|
||||
|
||||
|
||||
function box(idx = 0) {
|
||||
return (new Stack).also(it => {
|
||||
it.width = it.height = 20
|
||||
it.backgroundColor = colors[idx || 0]
|
||||
})
|
||||
}
|
||||
|
||||
function boxStr(str: string, idx = 0) {
|
||||
return (new Text).also(it => {
|
||||
it.width = it.height = 20
|
||||
it.text = str
|
||||
it.textColor = Color.WHITE
|
||||
it.backgroundColor = colors[idx || 0]
|
||||
})
|
||||
}
|
||||
|
||||
function label(str: string) {
|
||||
return text({
|
||||
text: str,
|
||||
textSize: 16,
|
||||
})
|
||||
}
|
||||
|
||||
@Entry
|
||||
class EffectsDemo extends Panel {
|
||||
build(rootView: Group) {
|
||||
scroller(
|
||||
vlayout([
|
||||
hlayout([
|
||||
vlayout([
|
||||
label("Origin view"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100
|
||||
}),]).apply({
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
label("Border"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
border: {
|
||||
width: 5,
|
||||
color: colors[3]
|
||||
},
|
||||
layoutConfig: layoutConfig().exactly().m({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),]).apply({
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
label("Corner"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: 10,
|
||||
layoutConfig: layoutConfig().exactly().m({
|
||||
bottom: 10
|
||||
})
|
||||
}),]).apply({
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
label("Shadow"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
shadow: {
|
||||
opacity: 1,
|
||||
color: colors[1],
|
||||
offsetX: 3,
|
||||
offsetY: 3,
|
||||
radius: 5,
|
||||
},
|
||||
layoutConfig: layoutConfig().exactly().m({
|
||||
bottom: 10
|
||||
})
|
||||
}),]).apply({
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout),
|
||||
]).apply({ space: 20 } as IHLayout),
|
||||
hlayout([
|
||||
vlayout([
|
||||
label("Border,Corner"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
border: {
|
||||
width: 5,
|
||||
color: colors[3]
|
||||
},
|
||||
corners: 10,
|
||||
layoutConfig: layoutConfig().exactly().m({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),]).apply({
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
label("Border,Shadow"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
border: {
|
||||
width: 5,
|
||||
color: colors[3]
|
||||
},
|
||||
shadow: {
|
||||
opacity: 1,
|
||||
color: colors[1],
|
||||
offsetX: 3,
|
||||
offsetY: 3,
|
||||
radius: 5,
|
||||
},
|
||||
layoutConfig: layoutConfig().exactly().m({
|
||||
bottom: 10
|
||||
})
|
||||
}),]).apply({
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
label("Corner,Shadow"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: 10,
|
||||
shadow: {
|
||||
opacity: 1,
|
||||
color: colors[1],
|
||||
offsetX: 3,
|
||||
offsetY: 3,
|
||||
radius: 5,
|
||||
},
|
||||
layoutConfig: layoutConfig().exactly().m({
|
||||
bottom: 10
|
||||
})
|
||||
}),]).apply({
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
label("Border,Corner,Shadow"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
border: {
|
||||
width: 5,
|
||||
color: colors[3]
|
||||
},
|
||||
corners: 10,
|
||||
shadow: {
|
||||
opacity: 1,
|
||||
color: colors[1],
|
||||
offsetX: 3,
|
||||
offsetY: 3,
|
||||
radius: 5,
|
||||
},
|
||||
layoutConfig: layoutConfig().exactly().m({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),]).apply({
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout),
|
||||
]).apply({ space: 20 } as IHLayout),
|
||||
hlayout([
|
||||
vlayout([
|
||||
label("Shadow"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: 50,
|
||||
shadow: {
|
||||
opacity: 1,
|
||||
color: colors[1],
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
radius: 10,
|
||||
},
|
||||
layoutConfig: layoutConfig().exactly().m({
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 10,
|
||||
})
|
||||
}),]).apply({
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
label("Shadow,offset"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: 50,
|
||||
shadow: {
|
||||
opacity: 1,
|
||||
color: colors[1],
|
||||
offsetX: 5,
|
||||
offsetY: 5,
|
||||
radius: 5,
|
||||
},
|
||||
layoutConfig: layoutConfig().exactly().m({
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 10,
|
||||
})
|
||||
}),]).apply({
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
label("Shadow,opacity"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: 50,
|
||||
shadow: {
|
||||
opacity: 0.5,
|
||||
color: colors[1],
|
||||
offsetX: 5,
|
||||
offsetY: 5,
|
||||
radius: 5,
|
||||
},
|
||||
layoutConfig: layoutConfig().exactly().m({
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 10,
|
||||
})
|
||||
}),]).apply({
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
label("Shadow,color"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: 50,
|
||||
shadow: {
|
||||
opacity: 1,
|
||||
color: colors[2],
|
||||
offsetX: 5,
|
||||
offsetY: 5,
|
||||
radius: 5,
|
||||
},
|
||||
layoutConfig: layoutConfig().exactly().m({
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 10,
|
||||
})
|
||||
}),]).apply({
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout),
|
||||
]).apply({ space: 20 } as IHLayout),
|
||||
hlayout([
|
||||
vlayout([
|
||||
label("Corner round"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: 50,
|
||||
layoutConfig: layoutConfig().exactly().m({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),]).apply({
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
label("Corner left top"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: {
|
||||
leftTop: 50,
|
||||
},
|
||||
layoutConfig: layoutConfig().exactly().m({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),]).apply({
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
label("Corner right top"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: {
|
||||
rightTop: 50,
|
||||
},
|
||||
layoutConfig: layoutConfig().exactly().m({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),]).apply({
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
label("Corner left bottom"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: {
|
||||
leftBottom: 50,
|
||||
},
|
||||
layoutConfig: layoutConfig().exactly().m({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),]).apply({
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
label("Corner right bottom"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: {
|
||||
rightBottom: 50,
|
||||
},
|
||||
layoutConfig: layoutConfig().exactly().m({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),]).apply({
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout),
|
||||
]).apply({ space: 20 } as IHLayout),
|
||||
]).also(it => {
|
||||
it.space = 20
|
||||
}),
|
||||
).also(it => {
|
||||
it.layoutConfig = layoutConfig().atmost()
|
||||
}).in(rootView)
|
||||
}
|
||||
}
|
||||
41
src/FlowLayoutDemo.ts
Normal file
41
src/FlowLayoutDemo.ts
Normal file
@ -0,0 +1,41 @@
|
||||
import { Group, Panel, flowlayout, layoutConfig, FlowLayoutItem, text, Color, IFlowLayout, LayoutSpec, Gravity } from "doric";
|
||||
import { colors, label } from "./utils";
|
||||
|
||||
const imageUrls = [
|
||||
'http://b.hiphotos.baidu.com/image/pic/item/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg',
|
||||
'http://f.hiphotos.baidu.com/image/pic/item/0e2442a7d933c8956c0e8eeadb1373f08202002a.jpg',
|
||||
'http://f.hiphotos.baidu.com/image/pic/item/b151f8198618367aa7f3cc7424738bd4b31ce525.jpg',
|
||||
'http://b.hiphotos.baidu.com/image/pic/item/0eb30f2442a7d9337119f7dba74bd11372f001e0.jpg',
|
||||
'http://a.hiphotos.baidu.com/image/h%3D300/sign=b38f3fc35b0fd9f9bf175369152cd42b/9a504fc2d5628535bdaac29e9aef76c6a6ef63c2.jpg',
|
||||
'http://h.hiphotos.baidu.com/image/pic/item/810a19d8bc3eb1354c94a704ac1ea8d3fd1f4439.jpg',
|
||||
'http://calonye.com/wp-content/uploads/2015/08/0-wx_fmtgiftpwebpwxfrom5wx_lazy1-9.gif',
|
||||
'http://hbimg.b0.upaiyun.com/ca29ea125b7f2d580f573e48eb594b1ef509757f34a08-m0hK45_fw658',
|
||||
'https://misc.aotu.io/ONE-SUNDAY/SteamEngine.png',
|
||||
]
|
||||
@Entry
|
||||
class FlowDemo extends Panel {
|
||||
build(rootView: Group): void {
|
||||
flowlayout({
|
||||
layoutConfig: layoutConfig().atmost(),
|
||||
itemCount: 500,
|
||||
columnCount: 3,
|
||||
columnSpace: 10,
|
||||
rowSpace: 10,
|
||||
renderItem: (idx) => {
|
||||
return new FlowLayoutItem().apply({
|
||||
backgroundColor: colors[idx % colors.length],
|
||||
height: 50 + (idx % 3) * 20,
|
||||
layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST),
|
||||
}).also(it => {
|
||||
it.addChild(text({
|
||||
text: `${idx}`,
|
||||
textColor: Color.WHITE,
|
||||
textSize: 20,
|
||||
layoutConfig: layoutConfig().wrap().a(Gravity.Center)
|
||||
}))
|
||||
})
|
||||
},
|
||||
})
|
||||
.in(rootView)
|
||||
}
|
||||
}
|
||||
109
src/ImageDemo.ts
Normal file
109
src/ImageDemo.ts
Normal file
@ -0,0 +1,109 @@
|
||||
import { Group, Panel, List, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, Text, scroller, layoutConfig, image, IView, IVLayout, ScaleType, Image } from "doric";
|
||||
import { colors, label } from "./utils";
|
||||
import { img_base64 } from "./image_base64";
|
||||
const imageUrl = 'https://img.zcool.cn/community/01e75b5da933daa801209e1ffa4649.jpg@1280w_1l_2o_100sh.jpg'
|
||||
|
||||
@Entry
|
||||
class ImageDemo extends Panel {
|
||||
build(rootView: Group): void {
|
||||
let imageView: Image
|
||||
scroller(vlayout([
|
||||
text({
|
||||
text: "Image Demo",
|
||||
layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST),
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
backgroundColor: colors[5],
|
||||
textAlignment: gravity().center(),
|
||||
height: 50,
|
||||
}),
|
||||
label('Gif'),
|
||||
image({
|
||||
imageUrl: "https://misc.aotu.io/ONE-SUNDAY/world-cup_2014_42.gif",
|
||||
scaleType: ScaleType.ScaleToFill,
|
||||
loadCallback: function (ret) {
|
||||
log('this')
|
||||
log('loadCallback', ret)
|
||||
}
|
||||
}),
|
||||
label('APNG'),
|
||||
image({
|
||||
imageUrl: "https://misc.aotu.io/ONE-SUNDAY/world_cup_2014_42.png",
|
||||
loadCallback: (ret) => {
|
||||
}
|
||||
}),
|
||||
label('Animated WebP'),
|
||||
image({
|
||||
imageUrl: "https://p.upyun.com/demo/webp/webp/animated-gif-0.webp",
|
||||
loadCallback: (ret) => {
|
||||
}
|
||||
}),
|
||||
label('WebP'),
|
||||
imageView = image({
|
||||
imageUrl: "https://p.upyun.com/demo/webp/webp/jpg-0.webp",
|
||||
loadCallback: (ret) => {
|
||||
if (ret) {
|
||||
imageView.width = ret.width
|
||||
imageView.height = ret.height
|
||||
}
|
||||
}
|
||||
}),
|
||||
label('ScaleToFill'),
|
||||
image({
|
||||
imageUrl,
|
||||
width: 300,
|
||||
height: 300,
|
||||
border: {
|
||||
width: 2,
|
||||
color: Color.GRAY,
|
||||
},
|
||||
scaleType: ScaleType.ScaleToFill,
|
||||
layoutConfig: layoutConfig().exactly(),
|
||||
loadCallback: (ret) => {
|
||||
}
|
||||
}),
|
||||
label('ScaleAspectFit'),
|
||||
image({
|
||||
imageUrl,
|
||||
width: 300,
|
||||
height: 300,
|
||||
border: {
|
||||
width: 2,
|
||||
color: Color.GRAY,
|
||||
},
|
||||
scaleType: ScaleType.ScaleAspectFit,
|
||||
layoutConfig: layoutConfig().exactly(),
|
||||
}),
|
||||
label('ScaleAspectFill'),
|
||||
image({
|
||||
imageUrl,
|
||||
width: 300,
|
||||
height: 300,
|
||||
border: {
|
||||
width: 2,
|
||||
color: Color.GRAY,
|
||||
},
|
||||
scaleType: ScaleType.ScaleAspectFill,
|
||||
layoutConfig: layoutConfig().exactly(),
|
||||
}),
|
||||
label('ImageBase64'),
|
||||
image({
|
||||
imageBase64: img_base64,
|
||||
width: 300,
|
||||
height: 300,
|
||||
border: {
|
||||
width: 2,
|
||||
color: Color.GRAY,
|
||||
},
|
||||
scaleType: ScaleType.ScaleAspectFill,
|
||||
layoutConfig: layoutConfig().exactly(),
|
||||
}),
|
||||
]).apply({
|
||||
layoutConfig: layoutConfig().atmost().h(LayoutSpec.WRAP_CONTENT),
|
||||
gravity: gravity().center(),
|
||||
space: 10,
|
||||
} as IVLayout)).apply({
|
||||
layoutConfig: layoutConfig().atmost(),
|
||||
}).in(rootView)
|
||||
}
|
||||
}
|
||||
460
src/LayoutDemo.ts
Normal file
460
src/LayoutDemo.ts
Normal file
@ -0,0 +1,460 @@
|
||||
|
||||
import { Group, Panel, Text, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, slider, slideItem, scroller, IVLayout, IHLayout, layoutConfig } from "doric";
|
||||
import { O_TRUNC } from "constants";
|
||||
|
||||
const colors = [
|
||||
"#f0932b",
|
||||
"#eb4d4b",
|
||||
"#6ab04c",
|
||||
"#e056fd",
|
||||
"#686de0",
|
||||
"#30336b",
|
||||
]
|
||||
|
||||
function box(idx = 0) {
|
||||
return (new Stack).also(it => {
|
||||
it.width = it.height = 20
|
||||
it.backgroundColor = Color.parse(colors[idx || 0])
|
||||
})
|
||||
}
|
||||
function boxStr(str: string, idx = 0) {
|
||||
return (new Text).also(it => {
|
||||
it.width = it.height = 20
|
||||
it.text = str
|
||||
it.textColor = Color.parse('#ffffff')
|
||||
it.backgroundColor = Color.parse(colors[idx || 0])
|
||||
})
|
||||
}
|
||||
function label(str: string) {
|
||||
return text({
|
||||
text: str,
|
||||
textSize: 16,
|
||||
})
|
||||
}
|
||||
@Entry
|
||||
class LayoutDemo extends Panel {
|
||||
build(rootView: Group) {
|
||||
scroller(
|
||||
hlayout([
|
||||
vlayout([
|
||||
label("Horizontal Layout(Align to Top)"),
|
||||
hlayout([
|
||||
box().apply({
|
||||
height: 20
|
||||
}),
|
||||
box().apply({
|
||||
height: 40
|
||||
}),
|
||||
box().apply({
|
||||
height: 60
|
||||
}),
|
||||
box().apply({
|
||||
height: 40
|
||||
}),
|
||||
box().apply({
|
||||
height: 20
|
||||
}),
|
||||
]).also(it => {
|
||||
it.space = 20
|
||||
}),
|
||||
label("Horizontal Layout(Align to Bottom)"),
|
||||
hlayout([
|
||||
box().apply({
|
||||
height: 20
|
||||
}),
|
||||
box().apply({
|
||||
height: 40
|
||||
}),
|
||||
box().apply({
|
||||
height: 60
|
||||
}),
|
||||
box().apply({
|
||||
height: 40
|
||||
}),
|
||||
box().apply({
|
||||
height: 20
|
||||
}),
|
||||
]).also(it => {
|
||||
it.space = 20
|
||||
it.gravity = gravity().bottom()
|
||||
}),
|
||||
label("Horizontal Layout(Align to Center)"),
|
||||
hlayout([
|
||||
box().apply({
|
||||
height: 20
|
||||
}),
|
||||
box().apply({
|
||||
height: 40
|
||||
}),
|
||||
box().apply({
|
||||
height: 60
|
||||
}),
|
||||
box().apply({
|
||||
height: 40
|
||||
}),
|
||||
box().apply({
|
||||
height: 20
|
||||
}),
|
||||
]).also(it => {
|
||||
it.space = 20
|
||||
it.gravity = gravity().center()
|
||||
}),
|
||||
label("Horizontal Layout(Weight)"),
|
||||
hlayout([
|
||||
boxStr('weight=1', 3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
box(2),
|
||||
box(4),
|
||||
]).apply({
|
||||
width: 200,
|
||||
height: 30,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
} as IHLayout),
|
||||
hlayout([
|
||||
box(3),
|
||||
boxStr('weight=1', 2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
box(4),
|
||||
]).apply({
|
||||
width: 200,
|
||||
height: 30,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
} as IHLayout),
|
||||
hlayout([
|
||||
box(3),
|
||||
box(2),
|
||||
boxStr('weight=1', 4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
]).apply({
|
||||
width: 200,
|
||||
height: 30,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
} as IHLayout),
|
||||
hlayout([
|
||||
boxStr('weight=1', 3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
boxStr('weight=1', 2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
box(4),
|
||||
]).apply({
|
||||
width: 200,
|
||||
height: 30,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
} as IHLayout),
|
||||
hlayout([
|
||||
boxStr('weight=1', 3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
boxStr('weight=1', 2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
boxStr('weight=1', 4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
]).apply({
|
||||
width: 200,
|
||||
height: 30,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
} as IHLayout),
|
||||
]).also(it => {
|
||||
it.space = 20
|
||||
it.gravity = gravity().center()
|
||||
}),
|
||||
vlayout([
|
||||
label("Vertical Layout(Algin to Left)"),
|
||||
vlayout([
|
||||
box(1).apply({
|
||||
width: 20
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 40
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 60
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 40
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 20
|
||||
}),
|
||||
]).apply({
|
||||
space: 20
|
||||
} as IVLayout),
|
||||
label("Vertical Layout(Algin to Right)"),
|
||||
vlayout([
|
||||
box(1).apply({
|
||||
width: 20
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 40
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 60
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 40
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 20
|
||||
}),
|
||||
]).apply({
|
||||
space: 20,
|
||||
gravity: gravity().right(),
|
||||
} as IVLayout),
|
||||
label("Vertical Layout(Algin to Center)"),
|
||||
vlayout([
|
||||
box(1).apply({
|
||||
width: 20
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 40
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 60
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 40
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 20
|
||||
}),
|
||||
]).apply({
|
||||
space: 20,
|
||||
gravity: gravity().center(),
|
||||
} as IVLayout),
|
||||
label("Vertical Layout(Weight)"),
|
||||
hlayout([
|
||||
|
||||
vlayout([
|
||||
boxStr('weight=1', 3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
},
|
||||
}),
|
||||
box(2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
}
|
||||
}),
|
||||
box(4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
}
|
||||
}),
|
||||
]).apply({
|
||||
width: 100,
|
||||
height: 200,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
box(3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
},
|
||||
}),
|
||||
boxStr('weight=1', 2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
box(4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
}
|
||||
}),
|
||||
]).apply({
|
||||
width: 100,
|
||||
height: 200,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
box(3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
},
|
||||
}),
|
||||
box(2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
},
|
||||
}),
|
||||
boxStr('weight=1', 4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
]).apply({
|
||||
width: 100,
|
||||
height: 200,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
boxStr('weight=1', 3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
},
|
||||
}),
|
||||
boxStr('weight=1', 2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
box(4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
}
|
||||
}),
|
||||
]).apply({
|
||||
width: 100,
|
||||
height: 200,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
boxStr('weight=1', 3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
},
|
||||
}),
|
||||
boxStr('weight=1', 2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
boxStr('weight=1', 4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
]).apply({
|
||||
width: 100,
|
||||
height: 200,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
} as IVLayout),
|
||||
]).also(it => {
|
||||
it.space = 20
|
||||
}),
|
||||
|
||||
]).also(it => {
|
||||
it.space = 20
|
||||
it.gravity = gravity().left()
|
||||
})
|
||||
]).also(it => {
|
||||
it.space = 20
|
||||
}),
|
||||
).also(it => {
|
||||
it.layoutConfig = layoutConfig().atmost()
|
||||
})
|
||||
.in(rootView)
|
||||
}
|
||||
}
|
||||
114
src/ListDemo.ts
Normal file
114
src/ListDemo.ts
Normal file
@ -0,0 +1,114 @@
|
||||
import { Group, Panel, List, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, Text, refreshable, Refreshable, ListItem } from "doric";
|
||||
import { rotatedArrow, colors } from "./utils";
|
||||
@Entry
|
||||
class ListPanel extends Panel {
|
||||
build(rootView: Group): void {
|
||||
let refreshView: Refreshable
|
||||
let offset = Math.ceil(Math.random() * colors.length)
|
||||
vlayout([
|
||||
text({
|
||||
text: "ListDemo",
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
},
|
||||
textSize: 30,
|
||||
textColor: Color.parse("#535c68"),
|
||||
backgroundColor: Color.parse("#dff9fb"),
|
||||
textAlignment: gravity().center(),
|
||||
height: 50,
|
||||
}),
|
||||
refreshView = refreshable({
|
||||
onRefresh: () => {
|
||||
refreshView.setRefreshing(context, false).then(() => {
|
||||
(refreshView.content as List).also(it => {
|
||||
it.reset()
|
||||
offset = Math.ceil(Math.random() * colors.length)
|
||||
it.itemCount = 40
|
||||
it.renderItem = (idx: number) => {
|
||||
let counter!: Text
|
||||
return listItem(
|
||||
hlayout([
|
||||
text({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.WRAP_CONTENT,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
alignment: gravity().center(),
|
||||
},
|
||||
text: `Cell At Line ${idx}`,
|
||||
textAlignment: gravity().center(),
|
||||
textColor: Color.parse("#ffffff"),
|
||||
textSize: 20,
|
||||
height: 50,
|
||||
}),
|
||||
text({
|
||||
textColor: Color.parse("#ffffff"),
|
||||
textSize: 20,
|
||||
text: "",
|
||||
}).also(it => {
|
||||
counter = it
|
||||
it.layoutConfig = {
|
||||
widthSpec: LayoutSpec.WRAP_CONTENT,
|
||||
heightSpec: LayoutSpec.WRAP_CONTENT,
|
||||
margin: {
|
||||
left: 10,
|
||||
}
|
||||
}
|
||||
})
|
||||
]).also(it => {
|
||||
it.layoutConfig = {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.WRAP_CONTENT,
|
||||
margin: {
|
||||
bottom: 2,
|
||||
}
|
||||
}
|
||||
it.gravity = gravity().center()
|
||||
it.backgroundColor = colors[(idx + offset) % colors.length]
|
||||
let clicked = 0
|
||||
it.onClick = () => {
|
||||
counter.text = `Item Clicked ${++clicked}`
|
||||
}
|
||||
})
|
||||
).also(it => {
|
||||
it.layoutConfig = {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.WRAP_CONTENT,
|
||||
}
|
||||
it.onClick = () => {
|
||||
log(`Click item at ${idx}`)
|
||||
it.height += 10
|
||||
it.nativeChannel(context, "getWidth")().then(
|
||||
resolve => {
|
||||
log(`resolve,${resolve}`)
|
||||
},
|
||||
reject => {
|
||||
log(`reject,${reject}`)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
header: rotatedArrow(context),
|
||||
content: list({
|
||||
itemCount: 0,
|
||||
renderItem: () => new ListItem,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.AT_MOST,
|
||||
},
|
||||
}),
|
||||
}),
|
||||
|
||||
]).also(it => {
|
||||
it.layoutConfig = {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.AT_MOST,
|
||||
}
|
||||
it.backgroundColor = Color.WHITE
|
||||
}).in(rootView)
|
||||
refreshView.backgroundColor = Color.YELLOW
|
||||
}
|
||||
}
|
||||
150
src/ModalDemo.ts
Normal file
150
src/ModalDemo.ts
Normal file
@ -0,0 +1,150 @@
|
||||
import { Group, Panel, List, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, Text, scroller, layoutConfig, image, IView, IVLayout, ScaleType, IText, modal } from "doric";
|
||||
import { colors, label } from "./utils";
|
||||
|
||||
@Entry
|
||||
class ModalDemo extends Panel {
|
||||
build(rootView: Group): void {
|
||||
scroller(vlayout([
|
||||
text({
|
||||
text: "Modal",
|
||||
layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST),
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
backgroundColor: colors[1],
|
||||
textAlignment: Gravity.Center,
|
||||
height: 50,
|
||||
}),
|
||||
label('toast on bottom'),
|
||||
label('Click me').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
modal(context).toast('This is a toast.')
|
||||
}
|
||||
} as IText),
|
||||
label('toast on top'),
|
||||
label('Click me').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
modal(context).toast('This is a toast.', Gravity.Top)
|
||||
}
|
||||
} as IText),
|
||||
|
||||
label('toast on center'),
|
||||
label('Click me').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
modal(context).toast('This is a toast.', Gravity.Center)
|
||||
}
|
||||
} as IText),
|
||||
text({
|
||||
text: "Alert",
|
||||
layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST),
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
backgroundColor: colors[2],
|
||||
textAlignment: Gravity.Center,
|
||||
height: 50,
|
||||
}),
|
||||
label('Click me').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
modal(context).alert({
|
||||
msg: 'This is alert.',
|
||||
title: 'Alert title',
|
||||
okLabel: "OkLabel"
|
||||
}).then(e => {
|
||||
modal(context).toast('Clicked OK.')
|
||||
})
|
||||
}
|
||||
} as IText),
|
||||
text({
|
||||
text: "Confirm",
|
||||
layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST),
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
backgroundColor: colors[3],
|
||||
textAlignment: Gravity.Center,
|
||||
height: 50,
|
||||
}),
|
||||
label('Click me').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
modal(context).confirm({
|
||||
msg: 'This is Confirm.',
|
||||
title: 'Confirm title',
|
||||
okLabel: "OkLabel",
|
||||
cancelLabel: 'CancelLabel',
|
||||
}).then(
|
||||
() => {
|
||||
modal(context).toast('Clicked OK.')
|
||||
},
|
||||
() => {
|
||||
modal(context).toast('Clicked Cancel.')
|
||||
})
|
||||
}
|
||||
} as IText),
|
||||
text({
|
||||
text: "Prompt",
|
||||
layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST),
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
backgroundColor: colors[4],
|
||||
textAlignment: Gravity.Center,
|
||||
height: 50,
|
||||
}),
|
||||
label('Click me').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
modal(context).prompt({
|
||||
msg: 'This is Prompt.',
|
||||
title: 'Prompt title',
|
||||
okLabel: "OkLabel",
|
||||
cancelLabel: 'CancelLabel',
|
||||
}).then(
|
||||
e => {
|
||||
modal(context).toast(`Clicked OK.Input:${e}`)
|
||||
},
|
||||
e => {
|
||||
modal(context).toast(`Clicked Cancel.Input:${e}`)
|
||||
})
|
||||
}
|
||||
} as IText),
|
||||
]).apply({
|
||||
layoutConfig: layoutConfig().atmost().h(LayoutSpec.WRAP_CONTENT),
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout)).apply({
|
||||
layoutConfig: layoutConfig().atmost(),
|
||||
}).in(rootView)
|
||||
}
|
||||
}
|
||||
84
src/NavbarDemo.ts
Normal file
84
src/NavbarDemo.ts
Normal file
@ -0,0 +1,84 @@
|
||||
import { Group, Panel, navbar, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, Text, scroller, layoutConfig, image, IView, IVLayout, ScaleType, modal, IText, network, navigator } from "doric";
|
||||
import { title, label, colors } from "./utils";
|
||||
|
||||
@Entry
|
||||
class NavbarDemo extends Panel {
|
||||
build(rootView: Group): void {
|
||||
scroller(vlayout([
|
||||
title("Navbar Demo"),
|
||||
label('isHidden').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
navbar(context).isHidden().then(e => modal(context).alert(`Navbar isHidden:${e}`)).catch(e => {
|
||||
modal(context).alert(e)
|
||||
})
|
||||
}
|
||||
} as IText),
|
||||
label('setHidden').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
navbar(context).isHidden()
|
||||
.then(e => navbar(context).setHidden(!e))
|
||||
.catch(e => {
|
||||
modal(context).alert(e)
|
||||
})
|
||||
}
|
||||
} as IText),
|
||||
label('setTitle').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
navbar(context).setTitle('Setted Title')
|
||||
.catch(e => {
|
||||
modal(context).alert(e)
|
||||
})
|
||||
}
|
||||
} as IText),
|
||||
label('setBgColor').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
navbar(context).setBgColor(Color.YELLOW)
|
||||
.catch(e => {
|
||||
modal(context).alert(e)
|
||||
})
|
||||
}
|
||||
} as IText),
|
||||
label('Pop').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
navigator(context).pop()
|
||||
}
|
||||
} as IText),
|
||||
]).apply({
|
||||
layoutConfig: layoutConfig().atmost().h(LayoutSpec.WRAP_CONTENT),
|
||||
gravity: gravity().center(),
|
||||
space: 10,
|
||||
} as IVLayout)).apply({
|
||||
layoutConfig: layoutConfig().atmost(),
|
||||
}).in(rootView)
|
||||
}
|
||||
}
|
||||
52
src/NavigatorDemo.ts
Normal file
52
src/NavigatorDemo.ts
Normal file
@ -0,0 +1,52 @@
|
||||
import { Panel, scroller, vlayout, text, layoutConfig, LayoutSpec, Color, gravity, IVLayout, Group, IText, navigator } from "doric";
|
||||
import { colors, label } from "./utils";
|
||||
@Entry
|
||||
class NaivgatorDemo extends Panel {
|
||||
build(root: Group) {
|
||||
scroller(vlayout([
|
||||
text({
|
||||
text: "Navigator Demo",
|
||||
layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST),
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
backgroundColor: colors[1],
|
||||
textAlignment: gravity().center(),
|
||||
height: 50,
|
||||
}),
|
||||
...[
|
||||
'NavbarDemo',
|
||||
'Counter', 'EffectsDemo', 'ImageDemo', 'LayoutDemo',
|
||||
'ListDemo', 'ModalDemo', 'NavigatorDemo',
|
||||
'NetworkDemo', 'ScrollerDemo', 'SliderDemo', 'Snake', 'StorageDemo'].map(e =>
|
||||
label(e).apply({
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().exactly().w(LayoutSpec.AT_MOST),
|
||||
onClick: () => {
|
||||
navigator(context).push(`assets://demo/${e}.js`, `${e}.js`)
|
||||
},
|
||||
} as IText)
|
||||
),
|
||||
label('POP').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
navigator(context).pop()
|
||||
},
|
||||
} as IText),
|
||||
]).apply({
|
||||
layoutConfig: layoutConfig().atmost().h(LayoutSpec.WRAP_CONTENT),
|
||||
gravity: gravity().center(),
|
||||
space: 10,
|
||||
} as IVLayout)).apply({
|
||||
layoutConfig: layoutConfig().atmost(),
|
||||
}).in(root)
|
||||
}
|
||||
|
||||
}
|
||||
34
src/NetworkDemo.ts
Normal file
34
src/NetworkDemo.ts
Normal file
@ -0,0 +1,34 @@
|
||||
import { Group, Panel, List, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, Text, scroller, layoutConfig, image, IView, IVLayout, ScaleType, modal, IText, network } from "doric";
|
||||
import { title, label, colors } from "./utils";
|
||||
|
||||
@Entry
|
||||
class NetworkDemo extends Panel {
|
||||
build(rootView: Group): void {
|
||||
scroller(vlayout([
|
||||
title("Network Demo"),
|
||||
label('Click me').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
network(context).get('https://m.baidu.com').then(
|
||||
e => {
|
||||
modal(context).alert(JSON.stringify(e))
|
||||
}
|
||||
).catch(e => {
|
||||
modal(context).toast('Catched:' + JSON.stringify(e))
|
||||
})
|
||||
}
|
||||
} as IText),
|
||||
]).apply({
|
||||
layoutConfig: layoutConfig().atmost().h(LayoutSpec.WRAP_CONTENT),
|
||||
gravity: gravity().center(),
|
||||
space: 10,
|
||||
} as IVLayout)).apply({
|
||||
layoutConfig: layoutConfig().atmost(),
|
||||
}).in(rootView)
|
||||
}
|
||||
}
|
||||
44
src/PopoverDemo.ts
Normal file
44
src/PopoverDemo.ts
Normal file
@ -0,0 +1,44 @@
|
||||
import { Group, Panel, popover, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, Text, scroller, layoutConfig, image, IView, IVLayout, ScaleType, modal, IText, network } from "doric";
|
||||
import { title, label, colors } from "./utils";
|
||||
|
||||
@Entry
|
||||
class PopoverDemo extends Panel {
|
||||
build(rootView: Group): void {
|
||||
scroller(vlayout([
|
||||
title("Popover Demo"),
|
||||
label('Popover').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
popover(context).show(text({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().exactly().a(Gravity.Center),
|
||||
text: "This is PopOver Window",
|
||||
}).also(v => {
|
||||
let idx = 0
|
||||
v.onClick = () => {
|
||||
v.backgroundColor = colors[(++idx) % colors.length]
|
||||
}
|
||||
modal(context).toast('Dismissed after 3 seconds')
|
||||
setTimeout(() => {
|
||||
popover(context).dismiss()
|
||||
}, 3000)
|
||||
}))
|
||||
}
|
||||
} as IText),
|
||||
]).apply({
|
||||
layoutConfig: layoutConfig().atmost().h(LayoutSpec.WRAP_CONTENT),
|
||||
gravity: gravity().center(),
|
||||
space: 10,
|
||||
} as IVLayout)).apply({
|
||||
layoutConfig: layoutConfig().atmost(),
|
||||
}).in(rootView)
|
||||
}
|
||||
}
|
||||
95
src/RefreshableDemo.ts
Normal file
95
src/RefreshableDemo.ts
Normal file
@ -0,0 +1,95 @@
|
||||
import { refreshable, Group, Panel, pullable, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, Text, scroller, layoutConfig, image, IView, IVLayout, ScaleType, modal, IText, network, navigator, stack, Image } from "doric";
|
||||
import { title, label, colors, icon_refresh } from "./utils";
|
||||
|
||||
@Entry
|
||||
class RefreshableDemo extends Panel {
|
||||
build(rootView: Group): void {
|
||||
let refreshImage: Image
|
||||
let refreshView = refreshable({
|
||||
layoutConfig: layoutConfig().atmost(),
|
||||
onRefresh: () => {
|
||||
log('onRefresh')
|
||||
setTimeout(() => {
|
||||
refreshView.setRefreshing(context, false)
|
||||
}, 5000)
|
||||
},
|
||||
header: pullable(context,
|
||||
stack([
|
||||
image({
|
||||
layoutConfig: layoutConfig().exactly().m({ top: 50, bottom: 10, }),
|
||||
width: 30,
|
||||
height: 30,
|
||||
imageBase64: icon_refresh,
|
||||
}).also(v => {
|
||||
refreshImage = v
|
||||
}),
|
||||
]),
|
||||
{
|
||||
startAnimation: () => {
|
||||
log('startAnimation')
|
||||
},
|
||||
stopAnimation: () => {
|
||||
log('stopAnimation')
|
||||
},
|
||||
setPullingDistance: (distance: number) => {
|
||||
refreshImage.rotation = distance / 30
|
||||
},
|
||||
}),
|
||||
content: (vlayout([
|
||||
title("Refreshable Demo"),
|
||||
label('start Refresh').apply({
|
||||
width: 300,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
refreshView.setRefreshing(context, true)
|
||||
}
|
||||
} as IText),
|
||||
label('stop Refresh').apply({
|
||||
width: 300,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
refreshView.setRefreshing(context, false)
|
||||
}
|
||||
} as IText),
|
||||
|
||||
label('Enable Refresh').apply({
|
||||
width: 300,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
refreshView.setRefreshable(context, true)
|
||||
}
|
||||
} as IText),
|
||||
|
||||
label('Disable Refresh').apply({
|
||||
width: 300,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
refreshView.setRefreshable(context, false)
|
||||
}
|
||||
} as IText),
|
||||
]).apply({
|
||||
layoutConfig: layoutConfig().atmost().h(LayoutSpec.WRAP_CONTENT),
|
||||
gravity: gravity().centerX(),
|
||||
space: 10,
|
||||
} as IVLayout))
|
||||
}).apply({
|
||||
backgroundColor: Color.YELLOW
|
||||
}).in(rootView)
|
||||
}
|
||||
}
|
||||
34
src/ScrollerDemo.ts
Normal file
34
src/ScrollerDemo.ts
Normal file
@ -0,0 +1,34 @@
|
||||
import { Group, Panel, List, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, scroller, layoutConfig } from "doric";
|
||||
import { label } from "./utils";
|
||||
|
||||
@Entry
|
||||
class ScrollerPanel extends Panel {
|
||||
build(rootView: Group): void {
|
||||
scroller(
|
||||
vlayout([
|
||||
scroller(
|
||||
vlayout(new Array(100).fill(1).map(e => label('Scroll Content')))
|
||||
).apply({
|
||||
layoutConfig: layoutConfig().exactly(),
|
||||
width: 300,
|
||||
height: 500,
|
||||
backgroundColor: Color.RED,
|
||||
}),
|
||||
scroller(
|
||||
vlayout(new Array(100).fill(1).map(e => label('Scroll Content')))
|
||||
).apply({
|
||||
layoutConfig: layoutConfig().exactly(),
|
||||
width: 300,
|
||||
height: 500,
|
||||
backgroundColor: Color.BLUE,
|
||||
})
|
||||
])
|
||||
)
|
||||
.apply({
|
||||
layoutConfig: layoutConfig().atmost().h(LayoutSpec.EXACTLY),
|
||||
height: 500,
|
||||
backgroundColor: Color.YELLOW,
|
||||
})
|
||||
.in(rootView)
|
||||
}
|
||||
}
|
||||
58
src/SliderDemo.ts
Normal file
58
src/SliderDemo.ts
Normal file
@ -0,0 +1,58 @@
|
||||
import { Group, Panel, List, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, slider, slideItem, image, layoutConfig, ScaleType } from "doric";
|
||||
import { colors } from "./utils";
|
||||
|
||||
const imageUrls = [
|
||||
'http://b.hiphotos.baidu.com/image/pic/item/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg',
|
||||
'http://f.hiphotos.baidu.com/image/pic/item/0e2442a7d933c8956c0e8eeadb1373f08202002a.jpg',
|
||||
'http://f.hiphotos.baidu.com/image/pic/item/b151f8198618367aa7f3cc7424738bd4b31ce525.jpg',
|
||||
'http://b.hiphotos.baidu.com/image/pic/item/0eb30f2442a7d9337119f7dba74bd11372f001e0.jpg',
|
||||
'http://a.hiphotos.baidu.com/image/h%3D300/sign=b38f3fc35b0fd9f9bf175369152cd42b/9a504fc2d5628535bdaac29e9aef76c6a6ef63c2.jpg',
|
||||
'http://h.hiphotos.baidu.com/image/pic/item/810a19d8bc3eb1354c94a704ac1ea8d3fd1f4439.jpg',
|
||||
'http://calonye.com/wp-content/uploads/2015/08/0-wx_fmtgiftpwebpwxfrom5wx_lazy1-9.gif',
|
||||
'http://hbimg.b0.upaiyun.com/ca29ea125b7f2d580f573e48eb594b1ef509757f34a08-m0hK45_fw658',
|
||||
'https://misc.aotu.io/ONE-SUNDAY/SteamEngine.png',
|
||||
]
|
||||
@Entry
|
||||
class SliderPanel extends Panel {
|
||||
build(rootView: Group): void {
|
||||
rootView.addChild(vlayout([
|
||||
text({
|
||||
text: "Gallery",
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
},
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
backgroundColor: colors[1],
|
||||
textAlignment: gravity().center(),
|
||||
height: 50,
|
||||
}),
|
||||
slider({
|
||||
itemCount: 100,
|
||||
renderPage: (idx) => {
|
||||
return slideItem(image({
|
||||
imageUrl: imageUrls[idx % imageUrls.length],
|
||||
scaleType: ScaleType.ScaleAspectFit,
|
||||
layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST).h(LayoutSpec.AT_MOST).a(gravity().center()),
|
||||
})).also(it => {
|
||||
let start = idx
|
||||
it.onClick = () => {
|
||||
it.backgroundColor = (colors[++start % colors.length])
|
||||
}
|
||||
})
|
||||
},
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.WRAP_CONTENT,
|
||||
weight: 1,
|
||||
},
|
||||
}),
|
||||
]).also(it => {
|
||||
it.layoutConfig = {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.AT_MOST,
|
||||
}
|
||||
}))
|
||||
}
|
||||
}
|
||||
369
src/Snake.ts
Normal file
369
src/Snake.ts
Normal file
@ -0,0 +1,369 @@
|
||||
import { text, loge, log, ViewHolder, Stack, ViewModel, Gravity, Text, Color, HLayout, VLayout, Group, VMPanel, LayoutSpec, vlayout, hlayout, takeNonNull, stack } from "doric";
|
||||
|
||||
type SnakeNode = {
|
||||
x: number
|
||||
y: number
|
||||
prev?: SnakeNode
|
||||
next?: SnakeNode
|
||||
}
|
||||
|
||||
|
||||
enum Direction {
|
||||
left = 0,
|
||||
right = 1,
|
||||
up = 2,
|
||||
down = 3,
|
||||
}
|
||||
|
||||
enum State {
|
||||
idel,
|
||||
run,
|
||||
fail,
|
||||
}
|
||||
|
||||
class SnakeModel {
|
||||
state = State.idel
|
||||
direction = Direction.right
|
||||
|
||||
width: number
|
||||
height: number
|
||||
|
||||
constructor(w: number, h: number) {
|
||||
this.width = w
|
||||
this.height = h
|
||||
}
|
||||
food = { x: -1, y: -1 }
|
||||
|
||||
head: SnakeNode = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
}
|
||||
|
||||
refreshFood() {
|
||||
this.food.x = Math.floor(Math.random() * (this.width - 1))
|
||||
this.food.y = Math.floor(Math.random() * (this.height - 1))
|
||||
}
|
||||
|
||||
get tail() {
|
||||
let node = this.head
|
||||
while (node.next !== undefined) {
|
||||
node = node.next
|
||||
}
|
||||
return node
|
||||
}
|
||||
get score() {
|
||||
let node = this.head
|
||||
let n = 0
|
||||
while (node.next !== undefined) {
|
||||
n++
|
||||
node = node.next
|
||||
}
|
||||
return n
|
||||
}
|
||||
|
||||
forward(node: SnakeNode) {
|
||||
switch (this.direction) {
|
||||
case Direction.left:
|
||||
node.x -= 1
|
||||
break;
|
||||
case Direction.right:
|
||||
node.x += 1
|
||||
break;
|
||||
case Direction.up:
|
||||
node.y -= 1
|
||||
break;
|
||||
case Direction.down:
|
||||
node.y += 1
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
step() {
|
||||
if (this.state !== State.run) {
|
||||
return
|
||||
}
|
||||
let tail = this.tail
|
||||
while (tail.prev != undefined) {
|
||||
tail.x = tail.prev.x
|
||||
tail.y = tail.prev.y
|
||||
tail = tail.prev
|
||||
}
|
||||
this.forward(this.head)
|
||||
if (this.head.x < 0 || this.head.x >= this.width
|
||||
|| this.head.y < 0 || this.head.y >= this.height) {
|
||||
//If out of bound
|
||||
loge('out of bound')
|
||||
this.state = State.fail
|
||||
} else if (this.head.x == this.food.x && this.head.y == this.food.y) {
|
||||
//If eat food
|
||||
|
||||
let head: SnakeNode = { x: this.food.x, y: this.food.y }
|
||||
log('eat food', head)
|
||||
this.forward(head)
|
||||
this.head.prev = head
|
||||
head.next = this.head
|
||||
this.head = head
|
||||
this.refreshFood()
|
||||
}
|
||||
if (this.crashAtSelf()) {
|
||||
//If crash at self
|
||||
loge('crash at self')
|
||||
this.state = State.fail
|
||||
}
|
||||
}
|
||||
|
||||
crashAtSelf() {
|
||||
let cur = this.head.next
|
||||
while (cur !== undefined) {
|
||||
if (cur.x == this.head.x && cur.y == this.head.y) {
|
||||
return true
|
||||
}
|
||||
cur = cur.next
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.direction = Direction.right
|
||||
this.state = State.run
|
||||
this.head.x = 0
|
||||
this.head.y = 0
|
||||
this.head.next = undefined
|
||||
this.refreshFood()
|
||||
}
|
||||
}
|
||||
|
||||
class SnakeView extends ViewHolder<SnakeModel> {
|
||||
|
||||
panel!: Stack
|
||||
start?: Text
|
||||
up?: Text
|
||||
down?: Text
|
||||
left?: Text
|
||||
right?: Text
|
||||
|
||||
build(root: Group): void {
|
||||
root.backgroundColor = Color.parse('#000000')
|
||||
vlayout([
|
||||
text({
|
||||
text: "Snake",
|
||||
textSize: 20,
|
||||
textColor: Color.parse("#ffffff"),
|
||||
layoutConfig: {
|
||||
alignment: new Gravity().centerX(),
|
||||
margin: {
|
||||
top: 20
|
||||
},
|
||||
widthSpec: LayoutSpec.WRAP_CONTENT,
|
||||
heightSpec: LayoutSpec.WRAP_CONTENT,
|
||||
},
|
||||
}),
|
||||
(new Stack).also(panel => {
|
||||
panel.backgroundColor = Color.parse('#00ff00')
|
||||
this.panel = panel
|
||||
}),
|
||||
hlayout([
|
||||
text({
|
||||
text: "Start",
|
||||
textSize: 30,
|
||||
textColor: Color.parse("#ffffff"),
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.WRAP_CONTENT,
|
||||
heightSpec: LayoutSpec.WRAP_CONTENT,
|
||||
},
|
||||
}).also(it => this.start = it),
|
||||
]).also(it => {
|
||||
it.layoutConfig = {
|
||||
widthSpec: LayoutSpec.WRAP_CONTENT,
|
||||
heightSpec: LayoutSpec.WRAP_CONTENT,
|
||||
}
|
||||
}),
|
||||
|
||||
vlayout([
|
||||
hlayout([
|
||||
text({
|
||||
width: 50,
|
||||
height: 50,
|
||||
text: "↑",
|
||||
textSize: 30,
|
||||
textAlignment: new Gravity().center(),
|
||||
backgroundColor: Color.parse('#ffff00'),
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
},
|
||||
}).also(it => this.up = it)
|
||||
]).also(it => {
|
||||
it.layoutConfig = {
|
||||
widthSpec: LayoutSpec.WRAP_CONTENT,
|
||||
heightSpec: LayoutSpec.WRAP_CONTENT,
|
||||
}
|
||||
}),
|
||||
hlayout([
|
||||
text({
|
||||
width: 50,
|
||||
height: 50,
|
||||
text: "←",
|
||||
textSize: 30,
|
||||
textAlignment: new Gravity().center(),
|
||||
backgroundColor: Color.parse('#ffff00'),
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
},
|
||||
}).also(it => this.left = it),
|
||||
text({
|
||||
width: 50,
|
||||
height: 50,
|
||||
text: "↓",
|
||||
textSize: 30,
|
||||
textAlignment: new Gravity().center(),
|
||||
backgroundColor: Color.parse('#ffff00'),
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
},
|
||||
}).also(it => this.down = it),
|
||||
text({
|
||||
width: 50,
|
||||
height: 50,
|
||||
text: "→",
|
||||
textSize: 30,
|
||||
textAlignment: new Gravity().center(),
|
||||
backgroundColor: Color.parse('#ffff00'),
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
},
|
||||
}).also(it => this.right = it),
|
||||
]).also(it => {
|
||||
it.layoutConfig = {
|
||||
widthSpec: LayoutSpec.WRAP_CONTENT,
|
||||
heightSpec: LayoutSpec.WRAP_CONTENT,
|
||||
}
|
||||
it.space = 10
|
||||
}),
|
||||
]).also(controlArea => {
|
||||
controlArea.gravity = new Gravity().centerX()
|
||||
controlArea.space = 10
|
||||
controlArea.layoutConfig = {
|
||||
alignment: new Gravity().centerX(),
|
||||
widthSpec: LayoutSpec.WRAP_CONTENT,
|
||||
heightSpec: LayoutSpec.WRAP_CONTENT,
|
||||
}
|
||||
}),
|
||||
]).also(it => {
|
||||
it.space = 20
|
||||
it.layoutConfig = {
|
||||
alignment: new Gravity().centerX().top(),
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.AT_MOST,
|
||||
}
|
||||
it.gravity = new Gravity().centerX()
|
||||
}).in(root)
|
||||
}
|
||||
|
||||
bind(state: SnakeModel): void {
|
||||
log('build', state)
|
||||
this.panel.width = state.width * 10
|
||||
this.panel.height = state.height * 10
|
||||
let node: SnakeNode | undefined = state.head
|
||||
let nodes: SnakeNode[] = []
|
||||
while (node != undefined) {
|
||||
nodes.push(node)
|
||||
node = node.next
|
||||
}
|
||||
nodes.push(state.food)
|
||||
nodes.forEach((e, index) => {
|
||||
|
||||
let item = this.panel.children[index]
|
||||
if (item === undefined) {
|
||||
item = new Stack
|
||||
item.width = item.height = 10
|
||||
item.corners = 5
|
||||
item.shadow = {
|
||||
color: Color.GRAY,
|
||||
opacity: 1,
|
||||
radius: 3,
|
||||
offsetX: 3,
|
||||
offsetY: 3,
|
||||
}
|
||||
this.panel.addChild(item)
|
||||
}
|
||||
if (index === nodes.length - 1) {
|
||||
item.backgroundColor = Color.parse('#ffff00')
|
||||
} else {
|
||||
item.backgroundColor = Color.parse('#ff0000')
|
||||
}
|
||||
item.x = e.x * 10
|
||||
item.y = e.y * 10
|
||||
})
|
||||
|
||||
if (nodes.length < this.panel.children.length) {
|
||||
this.panel.children.length = nodes.length
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class SnakeVM extends ViewModel<SnakeModel, SnakeView>{
|
||||
timerId?: any
|
||||
|
||||
start = () => {
|
||||
if (this.timerId !== undefined) {
|
||||
clearInterval(this.timerId)
|
||||
}
|
||||
this.updateState(it => it.reset())
|
||||
this.timerId = setInterval(() => {
|
||||
this.updateState(it => it.step())
|
||||
if (this.getState().state === State.fail) {
|
||||
loge('Game Over')
|
||||
this.stop()
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
|
||||
stop = () => {
|
||||
if (this.timerId !== undefined) {
|
||||
clearInterval(this.timerId)
|
||||
this.timerId = undefined
|
||||
}
|
||||
}
|
||||
|
||||
left = () => {
|
||||
this.updateState(it => it.direction = Direction.left)
|
||||
}
|
||||
|
||||
right = () => {
|
||||
this.updateState(it => it.direction = Direction.right)
|
||||
}
|
||||
|
||||
up = () => {
|
||||
this.updateState(it => it.direction = Direction.up)
|
||||
}
|
||||
|
||||
down = () => {
|
||||
this.updateState(it => it.direction = Direction.down)
|
||||
}
|
||||
|
||||
onAttached(state: SnakeModel, v: SnakeView): void {
|
||||
takeNonNull(v.start)(it => it.onClick = this.start)
|
||||
takeNonNull(v.left)(it => it.onClick = this.left)
|
||||
takeNonNull(v.right)(it => it.onClick = this.right)
|
||||
takeNonNull(v.up)(it => it.onClick = this.up)
|
||||
takeNonNull(v.down)(it => it.onClick = this.down)
|
||||
}
|
||||
|
||||
}
|
||||
@Entry
|
||||
class SnakePanel extends VMPanel<SnakeModel, SnakeView>{
|
||||
getViewModelClass() {
|
||||
return SnakeVM
|
||||
}
|
||||
getState(): SnakeModel {
|
||||
return new SnakeModel(35, 35)
|
||||
}
|
||||
getViewHolderClass() {
|
||||
return SnakeView
|
||||
}
|
||||
}
|
||||
93
src/StorageDemo.ts
Normal file
93
src/StorageDemo.ts
Normal file
@ -0,0 +1,93 @@
|
||||
import { storage, Panel, scroller, vlayout, text, layoutConfig, LayoutSpec, Color, gravity, IVLayout, Group, IText, modal, Text, log, loge } from "doric";
|
||||
import { colors, label } from "./utils";
|
||||
const storedKey = 'StoredKey'
|
||||
const zone = 'StorageDemo'
|
||||
@Entry
|
||||
class StorageDemo extends Panel {
|
||||
stored!: Text
|
||||
|
||||
update() {
|
||||
storage(context).getItem(storedKey, zone).then(e => {
|
||||
this.stored.text = e || ""
|
||||
log('Called in then')
|
||||
})
|
||||
}
|
||||
|
||||
build(root: Group) {
|
||||
scroller(vlayout([
|
||||
text({
|
||||
text: "Storage Demo",
|
||||
layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST),
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
backgroundColor: colors[1],
|
||||
textAlignment: gravity().center(),
|
||||
height: 50,
|
||||
}),
|
||||
label('Stored'),
|
||||
text({
|
||||
layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST),
|
||||
textSize: 20,
|
||||
textColor: Color.WHITE,
|
||||
backgroundColor: colors[3],
|
||||
textAlignment: gravity().center(),
|
||||
height: 50,
|
||||
}).also(it => this.stored = it),
|
||||
label('store a value').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
storage(context).getItem(storedKey, zone).then(e => {
|
||||
modal(context).prompt({
|
||||
text: e,
|
||||
title: "Please input text to store",
|
||||
defaultText: "Default Value",
|
||||
}).then(text => {
|
||||
storage(context).setItem(storedKey, text, zone).then(() => {
|
||||
this.update()
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
} as IText),
|
||||
label('remove value').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
storage(context).remove(storedKey, zone).then(e => {
|
||||
this.update()
|
||||
})
|
||||
},
|
||||
} as IText),
|
||||
label('clear values').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().exactly(),
|
||||
onClick: () => {
|
||||
storage(context).clear(zone).then(e => {
|
||||
this.update()
|
||||
})
|
||||
},
|
||||
} as IText),
|
||||
]).apply({
|
||||
layoutConfig: layoutConfig().atmost().h(LayoutSpec.WRAP_CONTENT),
|
||||
gravity: gravity().center(),
|
||||
space: 10,
|
||||
} as IVLayout)).apply({
|
||||
layoutConfig: layoutConfig().atmost(),
|
||||
}).in(root)
|
||||
this.update()
|
||||
}
|
||||
|
||||
}
|
||||
2
src/image_base64.ts
Normal file
2
src/image_base64.ts
Normal file
File diff suppressed because one or more lines are too long
72
src/utils.ts
Normal file
72
src/utils.ts
Normal file
File diff suppressed because one or more lines are too long
61
tsconfig.json
Normal file
61
tsconfig.json
Normal file
@ -0,0 +1,61 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
/* Basic Options */
|
||||
// "incremental": true, /* Enable incremental compilation */
|
||||
"target": "ES2015", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
|
||||
"module": "es2015", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
|
||||
"lib": [], /* Specify library files to be included in the compilation. */
|
||||
// "allowJs": true, /* Allow javascript files to be compiled. */
|
||||
// "checkJs": true, /* Report errors in .js files. */
|
||||
// "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
|
||||
// "declaration": true, /* Generates corresponding '.d.ts' file. */
|
||||
// "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
|
||||
"sourceMap": true, /* Generates corresponding '.map' file. */
|
||||
// "outFile": "./", /* Concatenate and emit output to single file. */
|
||||
"outDir": "build/", /* Redirect output structure to the directory. */
|
||||
// "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
|
||||
// "composite": true, /* Enable project compilation */
|
||||
// "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
|
||||
// "removeComments": true, /* Do not emit comments to output. */
|
||||
// "noEmit": true, /* Do not emit outputs. */
|
||||
// "importHelpers": true, /* Import emit helpers from 'tslib'. */
|
||||
// "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
|
||||
// "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
|
||||
/* Strict Type-Checking Options */
|
||||
"strict": true, /* Enable all strict type-checking options. */
|
||||
// "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
|
||||
// "strictNullChecks": true, /* Enable strict null checks. */
|
||||
// "strictFunctionTypes": true, /* Enable strict checking of function types. */
|
||||
// "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
|
||||
// "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
|
||||
// "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
|
||||
// "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
|
||||
/* Additional Checks */
|
||||
// "noUnusedLocals": true, /* Report errors on unused locals. */
|
||||
// "noUnusedParameters": true, /* Report errors on unused parameters. */
|
||||
// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
|
||||
// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
|
||||
/* Module Resolution Options */
|
||||
"moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
|
||||
// "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
|
||||
// "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
|
||||
// "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
|
||||
// "typeRoots": [], /* List of folders to include type definitions from. */
|
||||
// "types": [], /* Type declaration files to be included in compilation. */
|
||||
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
|
||||
"esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
|
||||
// "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
|
||||
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
|
||||
/* Source Map Options */
|
||||
// "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
|
||||
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
|
||||
// "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
|
||||
// "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
|
||||
/* Experimental Options */
|
||||
"experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
|
||||
"emitDecoratorMetadata": true /* Enables experimental support for emitting type metadata for decorators. */
|
||||
},
|
||||
"include": [
|
||||
"**/*.ts",
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user