diff --git a/.gitignore b/.gitignore index 39b6783c..98cff0bf 100644 --- a/.gitignore +++ b/.gitignore @@ -63,3 +63,4 @@ fastlane/Preview.html fastlane/screenshots fastlane/test_output fastlane/readme.md +js-framework-dst \ No newline at end of file diff --git a/js-framework/index.ts b/js-framework/index.ts new file mode 100644 index 00000000..4079689c --- /dev/null +++ b/js-framework/index.ts @@ -0,0 +1,6 @@ +import { Text } from "./view/view"; + +const v = new Text +v.width = 1 +console.log('start:') +v.height diff --git a/js-framework/package.json b/js-framework/package.json index 48286ae7..5da1599a 100644 --- a/js-framework/package.json +++ b/js-framework/package.json @@ -4,7 +4,8 @@ "description": "The JS Framework of Hego", "main": "index.js", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "test": "echo \"Error: no test specified\" && exit 1", + "dev": "tsc -p .&& node ../build/index.js" }, "repository": { "type": "git", @@ -16,4 +17,4 @@ "url": "https://github.com/penfeizhou/hego/issues" }, "homepage": "https://github.com/penfeizhou/hego#readme" -} +} \ No newline at end of file diff --git a/js-framework/tsconfig.json b/js-framework/tsconfig.json new file mode 100644 index 00000000..0a939879 --- /dev/null +++ b/js-framework/tsconfig.json @@ -0,0 +1,62 @@ +{ + "compilerOptions": { + "experimentalDecorators": true, + /* Basic Options */ + // "incremental": true, /* Enable incremental compilation */ + "target": "ES2015", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */ + "module": "commonjs", /* 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", + ] +} \ No newline at end of file diff --git a/js-framework/util/color.ts b/js-framework/util/color.ts new file mode 100644 index 00000000..be6990a9 --- /dev/null +++ b/js-framework/util/color.ts @@ -0,0 +1,63 @@ +/** + * Store color as format AARRGGBB or RRGGBB + */ +export class Color { + static TRANSPARENT = new Color(0) + _value: number = 0 + + constructor(v: number) { + this._value = v + } + + static parse(str: string) { + if (!str.startsWith("#")) { + throw new Error(`Parse color error with ${str}`) + } + const val = parseInt(str.substr(1), 16) + if (str.length === 7) { + return new Color(val | 0xff000000) + } else if (str.length === 9) { + return new Color(val) + } else { + throw new Error(`Parse color error with ${str}`) + } + } + + static safeParse(str: string, defVal: Color = Color.TRANSPARENT) { + let color = defVal + try { + color = Color.parse(str) + } catch (e) { + } finally { + return color + } + } + toNumber() { + return this._value + } +} +export enum GradientOrientation { + /** draw the gradient from the top to the bottom */ + TOP_BOTTOM = 0, + /** draw the gradient from the top-right to the bottom-left */ + TR_BL, + /** draw the gradient from the right to the left */ + RIGHT_LEFT, + /** draw the gradient from the bottom-right to the top-left */ + BR_TL, + /** draw the gradient from the bottom to the top */ + BOTTOM_TOP, + /** draw the gradient from the bottom-left to the top-right */ + BL_TR, + /** draw the gradient from the left to the right */ + LEFT_RIGHT, + /** draw the gradient from the top-left to the bottom-right */ + TL_BR, +} + +export interface GradientColor { + start: Color + end: Color + orientation: GradientOrientation +} + diff --git a/js-framework/util/types.ts b/js-framework/util/types.ts new file mode 100644 index 00000000..8ad66571 --- /dev/null +++ b/js-framework/util/types.ts @@ -0,0 +1,20 @@ +export interface IWatcher { + onPropertyChanged(propKey: string, oldV: any, newV: any): void +} + + +export function Property(target: IWatcher, propKey: string) { + const key = Symbol(propKey) + Reflect.defineProperty(target, propKey, { + configurable: false, + enumerable: true, + get: () => { + return Reflect.get(target, key) + }, + set: (v: any) => { + const oldV = Reflect.get(target, key) + Reflect.set(target, key, v) + target.onPropertyChanged(propKey, oldV, v) + } + }) +} diff --git a/js-framework/util/uniqueId.ts b/js-framework/util/uniqueId.ts new file mode 100644 index 00000000..36fb3fb9 --- /dev/null +++ b/js-framework/util/uniqueId.ts @@ -0,0 +1,5 @@ +let __uniqueId__: number = 0 + +export function uniqueId() { + return `__unique_${__uniqueId__++}__`; +} \ No newline at end of file diff --git a/js-framework/view/view.ts b/js-framework/view/view.ts new file mode 100644 index 00000000..06c4d916 --- /dev/null +++ b/js-framework/view/view.ts @@ -0,0 +1,93 @@ +import { Color, GradientColor } from "../util/color" +import { Property, IWatcher } from "../util/types"; + + +export abstract class View implements IWatcher { + + @Property + width: number = 0 + + @Property + height: number = 0 + + @Property + x: number = 0 + + @Property + y: number = 0 + + @Property + bgColor?: Color | GradientColor + + @Property + corners?: number | { leftTop?: number; rightTop?: number; leftBottom?: number; rightBottom?: number } + + @Property + border?: { width: number; color: Color; } + + @Property + shadow?: { color: Color; opacity: number; radius: number; offset: { width: number; height: number; }; } + + @Property + alpha?: number + + /** Anchor start*/ + get left() { + return this.x + } + set left(v: number) { + this.x = v + } + + get right() { + return this.x + this.width + } + set right(v: number) { + this.x = v - this.width + } + + get top() { + return this.y + } + + set top(v: number) { + this.y = v + } + + get bottom() { + return this.y + this.height + } + + set bottom(v: number) { + this.y = v - this.height + } + /** Anchor end*/ + + onPropertyChanged(propKey: string, oldV: any, newV: any): void { + console.log(`onPropertyChanged:${propKey},old value is ${oldV},new value is ${newV}`) + } +} + +export class Group extends View { + children: View[] = [] + + add(v: View) { + this.children.push(v) + } +} + +export class Text extends View { + +} + +export class Image extends View { + +} + +export class List extends View { + +} + +export class Slide extends View { + +}