From 78f82eedd8d6f69674daedeb1113015a908cb205 Mon Sep 17 00:00:00 2001 From: FishOrBear Date: Mon, 22 May 2017 10:33:07 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0UI=20=E7=9B=B8=E6=9C=BA?= =?UTF-8?q?=E7=BC=A9=E6=94=BE=E7=8E=B0=E5=9C=A8=E6=94=AF=E6=8C=81=E9=BC=A0?= =?UTF-8?q?=E6=A0=87=E4=BD=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- manifest.json | 1 + package.json | 2 + sample/demo.md | 5 +- sample/使用react css.md | 10 +++ src/Application.ts | 4 +- src/Editor/DebugDatUi.ts | 1 + src/GraphicsSystem/Camera.ts | 22 +++--- src/GraphicsSystem/Viewer.ts | 26 +++++-- src/UI/AppUI.tsx | 130 +++++++++++++++++++++++++++++++++++ src/UI/AppUi.less | 62 +++++++++++++++++ src/UI/demo.tsx | 15 ++-- src/UI/test.ts | 0 src/index.tsx | 20 +++--- webpack.config.js | 24 ++++++- 14 files changed, 276 insertions(+), 46 deletions(-) create mode 100644 manifest.json create mode 100644 sample/使用react css.md create mode 100644 src/UI/AppUI.tsx create mode 100644 src/UI/AppUi.less create mode 100644 src/UI/test.ts diff --git a/manifest.json b/manifest.json new file mode 100644 index 000000000..e306196f6 --- /dev/null +++ b/manifest.json @@ -0,0 +1 @@ +{"name":"dll","content":{"./node_modules/dat.gui/build/dat.gui.js":{"id":0,"meta":{}},"./node_modules/lodash/lodash.js":{"id":1,"meta":{}},"./node_modules/three/build/three.module.js":{"id":2,"meta":{"harmonyModule":true},"exports":["WebGLRenderTargetCube","WebGLRenderTarget","WebGLRenderer","ShaderLib","UniformsLib","UniformsUtils","ShaderChunk","FogExp2","Fog","Scene","LensFlare","Sprite","LOD","SkinnedMesh","Skeleton","Bone","Mesh","LineSegments","LineLoop","Line","Points","Group","VideoTexture","DataTexture","CompressedTexture","CubeTexture","CanvasTexture","DepthTexture","Texture","CompressedTextureLoader","DataTextureLoader","CubeTextureLoader","TextureLoader","ObjectLoader","MaterialLoader","BufferGeometryLoader","DefaultLoadingManager","LoadingManager","JSONLoader","ImageLoader","FontLoader","FileLoader","Loader","Cache","AudioLoader","SpotLightShadow","SpotLight","PointLight","RectAreaLight","HemisphereLight","DirectionalLightShadow","DirectionalLight","AmbientLight","LightShadow","Light","StereoCamera","PerspectiveCamera","OrthographicCamera","CubeCamera","ArrayCamera","Camera","AudioListener","PositionalAudio","AudioContext","AudioAnalyser","Audio","VectorKeyframeTrack","StringKeyframeTrack","QuaternionKeyframeTrack","NumberKeyframeTrack","ColorKeyframeTrack","BooleanKeyframeTrack","PropertyMixer","PropertyBinding","KeyframeTrack","AnimationUtils","AnimationObjectGroup","AnimationMixer","AnimationClip","Uniform","InstancedBufferGeometry","BufferGeometry","GeometryIdCount","Geometry","InterleavedBufferAttribute","InstancedInterleavedBuffer","InterleavedBuffer","InstancedBufferAttribute","Face3","Object3D","Raycaster","Layers","EventDispatcher","Clock","QuaternionLinearInterpolant","LinearInterpolant","DiscreteInterpolant","CubicInterpolant","Interpolant","Triangle","Math","Spherical","Cylindrical","Plane","Frustum","Sphere","Ray","Matrix4","Matrix3","Box3","Box2","Line3","Euler","Vector4","Vector3","Vector2","Quaternion","Color","MorphBlendMesh","ImmediateRenderObject","VertexNormalsHelper","SpotLightHelper","SkeletonHelper","PointLightHelper","RectAreaLightHelper","HemisphereLightHelper","GridHelper","PolarGridHelper","FaceNormalsHelper","DirectionalLightHelper","CameraHelper","BoxHelper","ArrowHelper","AxisHelper","CatmullRomCurve3","CubicBezierCurve3","QuadraticBezierCurve3","LineCurve3","ArcCurve","EllipseCurve","SplineCurve","CubicBezierCurve","QuadraticBezierCurve","LineCurve","Shape","Path","ShapePath","Font","CurvePath","Curve","ShapeUtils","SceneUtils","WireframeGeometry","ParametricGeometry","ParametricBufferGeometry","TetrahedronGeometry","TetrahedronBufferGeometry","OctahedronGeometry","OctahedronBufferGeometry","IcosahedronGeometry","IcosahedronBufferGeometry","DodecahedronGeometry","DodecahedronBufferGeometry","PolyhedronGeometry","PolyhedronBufferGeometry","TubeGeometry","TubeBufferGeometry","TorusKnotGeometry","TorusKnotBufferGeometry","TorusGeometry","TorusBufferGeometry","TextGeometry","TextBufferGeometry","SphereGeometry","SphereBufferGeometry","RingGeometry","RingBufferGeometry","PlaneGeometry","PlaneBufferGeometry","LatheGeometry","LatheBufferGeometry","ShapeGeometry","ShapeBufferGeometry","ExtrudeGeometry","ExtrudeBufferGeometry","EdgesGeometry","ConeGeometry","ConeBufferGeometry","CylinderGeometry","CylinderBufferGeometry","CircleGeometry","CircleBufferGeometry","BoxGeometry","BoxBufferGeometry","ShadowMaterial","SpriteMaterial","RawShaderMaterial","ShaderMaterial","PointsMaterial","MeshPhysicalMaterial","MeshStandardMaterial","MeshPhongMaterial","MeshToonMaterial","MeshNormalMaterial","MeshLambertMaterial","MeshDepthMaterial","MeshBasicMaterial","LineDashedMaterial","LineBasicMaterial","Material","Float64BufferAttribute","Float32BufferAttribute","Uint32BufferAttribute","Int32BufferAttribute","Uint16BufferAttribute","Int16BufferAttribute","Uint8ClampedBufferAttribute","Uint8BufferAttribute","Int8BufferAttribute","BufferAttribute","REVISION","MOUSE","CullFaceNone","CullFaceBack","CullFaceFront","CullFaceFrontBack","FrontFaceDirectionCW","FrontFaceDirectionCCW","BasicShadowMap","PCFShadowMap","PCFSoftShadowMap","FrontSide","BackSide","DoubleSide","FlatShading","SmoothShading","NoColors","FaceColors","VertexColors","NoBlending","NormalBlending","AdditiveBlending","SubtractiveBlending","MultiplyBlending","CustomBlending","AddEquation","SubtractEquation","ReverseSubtractEquation","MinEquation","MaxEquation","ZeroFactor","OneFactor","SrcColorFactor","OneMinusSrcColorFactor","SrcAlphaFactor","OneMinusSrcAlphaFactor","DstAlphaFactor","OneMinusDstAlphaFactor","DstColorFactor","OneMinusDstColorFactor","SrcAlphaSaturateFactor","NeverDepth","AlwaysDepth","LessDepth","LessEqualDepth","EqualDepth","GreaterEqualDepth","GreaterDepth","NotEqualDepth","MultiplyOperation","MixOperation","AddOperation","NoToneMapping","LinearToneMapping","ReinhardToneMapping","Uncharted2ToneMapping","CineonToneMapping","UVMapping","CubeReflectionMapping","CubeRefractionMapping","EquirectangularReflectionMapping","EquirectangularRefractionMapping","SphericalReflectionMapping","CubeUVReflectionMapping","CubeUVRefractionMapping","RepeatWrapping","ClampToEdgeWrapping","MirroredRepeatWrapping","NearestFilter","NearestMipMapNearestFilter","NearestMipMapLinearFilter","LinearFilter","LinearMipMapNearestFilter","LinearMipMapLinearFilter","UnsignedByteType","ByteType","ShortType","UnsignedShortType","IntType","UnsignedIntType","FloatType","HalfFloatType","UnsignedShort4444Type","UnsignedShort5551Type","UnsignedShort565Type","UnsignedInt248Type","AlphaFormat","RGBFormat","RGBAFormat","LuminanceFormat","LuminanceAlphaFormat","RGBEFormat","DepthFormat","DepthStencilFormat","RGB_S3TC_DXT1_Format","RGBA_S3TC_DXT1_Format","RGBA_S3TC_DXT3_Format","RGBA_S3TC_DXT5_Format","RGB_PVRTC_4BPPV1_Format","RGB_PVRTC_2BPPV1_Format","RGBA_PVRTC_4BPPV1_Format","RGBA_PVRTC_2BPPV1_Format","RGB_ETC1_Format","LoopOnce","LoopRepeat","LoopPingPong","InterpolateDiscrete","InterpolateLinear","InterpolateSmooth","ZeroCurvatureEnding","ZeroSlopeEnding","WrapAroundEnding","TrianglesDrawMode","TriangleStripDrawMode","TriangleFanDrawMode","LinearEncoding","sRGBEncoding","GammaEncoding","RGBEEncoding","LogLuvEncoding","RGBM7Encoding","RGBM16Encoding","RGBDEncoding","BasicDepthPacking","RGBADepthPacking","CubeGeometry","Face4","LineStrip","LinePieces","MeshFaceMaterial","MultiMaterial","PointCloud","Particle","ParticleSystem","PointCloudMaterial","ParticleBasicMaterial","ParticleSystemMaterial","Vertex","DynamicBufferAttribute","Int8Attribute","Uint8Attribute","Uint8ClampedAttribute","Int16Attribute","Uint16Attribute","Int32Attribute","Uint32Attribute","Float32Attribute","Float64Attribute","ClosedSplineCurve3","SplineCurve3","Spline","BoundingBoxHelper","EdgesHelper","WireframeHelper","XHRLoader","BinaryTextureLoader","GeometryUtils","ImageUtils","Projector","CanvasRenderer"]},"./node_modules/webpack/buildin/global.js":{"id":3,"meta":{}},"./node_modules/webpack/buildin/module.js":{"id":4,"meta":{}}}} \ No newline at end of file diff --git a/package.json b/package.json index 03faff80b..1a4379bc9 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,8 @@ "extract-text-webpack-plugin": "^2.1.0", "file-loader": "^0.11.1", "html-loader": "^0.4.5", + "less": "^2.7.2", + "less-loader": "^4.0.3", "required-loader": "^1.2.11", "sass-loader": "^6.0.5", "source-map-loader": "^0.2.1", diff --git a/sample/demo.md b/sample/demo.md index 94c486d36..deedbb467 100644 --- a/sample/demo.md +++ b/sample/demo.md @@ -37,4 +37,7 @@ https://threejs.org/examples/#webgl_multiple_elements #光线追踪Demo -https://github.com/sbnietert/TypeScript-Ray-Tracer \ No newline at end of file +https://github.com/sbnietert/TypeScript-Ray-Tracer + + + diff --git a/sample/使用react css.md b/sample/使用react css.md new file mode 100644 index 000000000..9034e50cf --- /dev/null +++ b/sample/使用react css.md @@ -0,0 +1,10 @@ + + +#实例 +https://github.com/Quramy/typescript-css-modules-demo +https://github.com/css-modules/css-modules/issues/61 + + +#.Loader +https://github.com/olegstepura/typed-css-modules-loader + diff --git a/src/Application.ts b/src/Application.ts index cea16d23a..a4ab82f84 100644 --- a/src/Application.ts +++ b/src/Application.ts @@ -183,7 +183,7 @@ export class Application2 //数据 this.m_Database = new Database(); //渲染器 - this.m_Viewer = new Viewer(document.body, this.m_Database.m_Scene); + this.m_Viewer = new Viewer(document.getElementById("webgl"), this.m_Database.m_Scene); //相机控制 new CameraControls(this.m_Viewer, this.m_Viewer.m_Render.domElement); @@ -227,4 +227,4 @@ window["ft"] = function () let app = Application2.Application; app.m_Viewer.m_Direction.set(0, 1, 0); app.m_Viewer.m_bIsChange = true -} \ No newline at end of file +} diff --git a/src/Editor/DebugDatUi.ts b/src/Editor/DebugDatUi.ts index 749b3f7df..8affafa16 100644 --- a/src/Editor/DebugDatUi.ts +++ b/src/Editor/DebugDatUi.ts @@ -25,6 +25,7 @@ export class DebugDatUi } ); + this.m_Ctrl_UI.domElement.parentElement.style.top = "36px"; this.m_Ctrl_UI.add(this, "z"); this.m_Ctrl_UI.add(this, "arr", ["a", "b"]); diff --git a/src/GraphicsSystem/Camera.ts b/src/GraphicsSystem/Camera.ts index 2ac9e904a..914cc0dd8 100644 --- a/src/GraphicsSystem/Camera.ts +++ b/src/GraphicsSystem/Camera.ts @@ -132,7 +132,7 @@ export class CameraControls { event.preventDefault(); let key: ButtonKey = event.button; - this.m_StartChickPoint.set(event.clientX, event.clientY, 0); + this.m_StartChickPoint.set(event.offsetX, event.offsetY, 0); switch (key) { case ButtonKey.Left: @@ -164,23 +164,14 @@ export class CameraControls } onMouseMove = (event: MouseEvent) => { - - - - - event.preventDefault(); - this.m_EndChickPoint.set(event.clientX, event.clientY, 0); + this.m_EndChickPoint.set(event.offsetX, event.offsetY, 0); { let app = Application2.Application; let ent = app.m_Database.m_EntityCollection[2] as Solid3d; - ent.m_ThreeObj.position.copy(this.m_EndChickPoint); this.m_Viewer.ScreenToScenePt(ent.m_ThreeObj.position); - // let pt = this.m_EndChickPoint.clone(); - // this.m_Viewer.ScreenToScenePt(pt); - // ent.m_ThreeObj.position.copy(pt); this.m_Viewer.m_bIsChange = true; } @@ -201,7 +192,6 @@ export class CameraControls } case State.Rotate: { - break; } case State.Scale: @@ -214,12 +204,16 @@ export class CameraControls { event.preventDefault(); event.stopPropagation(); + + let pt = new THREE.Vector3(); + pt.set(event.offsetX, event.offsetY, 0); + this.m_Viewer.ScreenToScenePt(pt); if (event.deltaY < 0) { - this.m_Viewer.Zoom(0.6); + this.m_Viewer.Zoom(0.6, pt); } else if (event.deltaY > 0) { - this.m_Viewer.Zoom(1.4); + this.m_Viewer.Zoom(1.4, pt); } } //按键 diff --git a/src/GraphicsSystem/Viewer.ts b/src/GraphicsSystem/Viewer.ts index 5b472c6d6..367796948 100644 --- a/src/GraphicsSystem/Viewer.ts +++ b/src/GraphicsSystem/Viewer.ts @@ -31,9 +31,9 @@ export class Viewer constructor(canvas: HTMLElement, scene: THREE.Scene) { this.m_Stats = new Stats(); - this.m_Stats.showPanel(1); + this.m_Stats.showPanel(0); + this.m_Stats.dom.style.top = "36px"; document.body.appendChild(this.m_Stats.dom); - this.m_HtmlElement = canvas; this.setScene(scene); this.initRender(); @@ -42,7 +42,6 @@ export class Viewer canvas.appendChild(this.m_Render.domElement); //渲染循环 this.Render(); - } ScreenToScenePt(pt: THREE.Vector3) @@ -84,8 +83,16 @@ export class Viewer //设置设备像素比。 这通常用于HiDPI设备，以防止模糊输出画布。 this.m_Render.setPixelRatio(window.devicePixelRatio); + //这里暂时初始化成这个. 未来将分离出 Viewer - this.m_Render.setSize(this.m_HtmlElement.scrollWidth, this.m_HtmlElement.scrollHeight); + this.m_Render.setSize(this.m_HtmlElement.clientWidth, this.m_HtmlElement.clientHeight); + + window.onresize = () => + { + this.m_Render.setSize(this.m_HtmlElement.clientWidth, this.m_HtmlElement.clientHeight); + this.m_Camera.Update(); + this.m_bIsChange = true; + }; //设置它的背景色为黑色 this.m_Render.setClearColor(0x000000, 1); @@ -115,9 +122,15 @@ export class Viewer this.m_Camera.Update(); this.m_bIsChange = true; } - Zoom(scale: number) + Zoom(scale: number, scaleCenter?: THREE.Vector3) { this.m_ViewHeight *= scale; + if (scaleCenter != null) + { + this.m_Target.sub(scaleCenter); + this.m_Target.multiplyScalar(scale); + this.m_Target.add(scaleCenter); + } this.m_Camera.Update(); this.m_bIsChange = true; } @@ -138,4 +151,5 @@ export class Viewer this.m_Camera.Update(); this.m_bIsChange = true; } -} \ No newline at end of file +} + diff --git a/src/UI/AppUI.tsx b/src/UI/AppUI.tsx new file mode 100644 index 000000000..a65ee0e1d --- /dev/null +++ b/src/UI/AppUI.tsx @@ -0,0 +1,130 @@ +import * as React from "react"; + +import "./AppUI.less" +import { CSSProperties } from "react"; +import * as THREE from "three"; +//界面数据 +export class AppUi extends React.Component<{}, null> { + css: CSSProperties = { + width: "100%", + height: "100%" + } + render() + { + return ( +
+ + + +
+ ); + } +} + + + +interface Data +{ + name?: string; + age?: number; + date: string; +} + +export class TopPanel extends React.Component{ + timerID: any; + + tick() + { + + } + constructor(props) + { + super(props); + this.state = { + date: "" + } + + window["setg"] = (o) => + { + this.setState( + { + date: o + }); + } + } + + componentDidMount() + { + this.timerID = setInterval( + () => this.tick(), + 1000 + ); + } + + componentWillUnmount() + { + clearInterval(this.timerID); + } + render() + { + return ( +
+ + webCAD + dev + {this.state["date"]} + + + + + +
+ ); + } +} + +window["sb"] = "你是不是傻"; + +export class DownPanel extends React.Component<{}, null> +{ + style: CSSProperties = { + width: "100%", + height: "30px", + } + render() + { + return ( +
+ ); + } +} + +export class Btn extends React.Component<{}, null>{ + divStyle: CSSProperties = { + }; + render() + { + // act-undo + return ( + + ); + } +} + + +export class Contain extends React.Component<{}, null>{ + css: CSSProperties = + { + width: "100%", + height: "calc(100% - 59px)" + } + render() + { + return ( +
+
+ ); + } +} + diff --git a/src/UI/AppUi.less b/src/UI/AppUi.less new file mode 100644 index 000000000..31c1dc8d7 --- /dev/null +++ b/src/UI/AppUi.less @@ -0,0 +1,62 @@ +.topsize +{ + width: 100%; + height: 35px; +} + + +body { + .sans-serif; + font-size: 11px; + overflow: hidden; +} + +html, body { + background: gray; + height: 100%; + padding: 0; + margin: 0; +} + +.sans-serif { + font-family: sans-serif; +} + +.panel { + background: #444; + border: 0px solid black; + text-align: right +} + +.b-top { border-top-width: 1px; } + +.logo { + color: #bbb; + font-size: 18px; + padding: 3px 0 0 10px; + cursor: alias; + float: left +} + + +.btn { + border:1px solid #808080; + background: #606060 no-repeat center; + border-radius: 4px; + color: white; + vertical-align: top; +} + +.tbtn { + width:31px; + height:31px; + margin: 2px 2px; + font-size: 20px; + padding: 0; +} + + + +.sep { + margin-right: 1px; +} diff --git a/src/UI/demo.tsx b/src/UI/demo.tsx index 68fef885f..dffbd62e5 100644 --- a/src/UI/demo.tsx +++ b/src/UI/demo.tsx @@ -19,17 +19,16 @@ export class Hello extends React.Component { { throw new Error('You could be a little more enthusiastic. :D'); } - - const css = ` - .hello{ - font-size: 150px; - } - ` + // const css = ` + // .hello{ + // font-size: 150px; + // } + // ` return (
- + */}
Hello {name + getExclamationMarks(enthusiasmLevel)}
diff --git a/src/UI/test.ts b/src/UI/test.ts new file mode 100644 index 000000000..e69de29bb diff --git a/src/index.tsx b/src/index.tsx index 0908f7b2c..15602cfc6 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -2,22 +2,18 @@ import { Application, Application2 } from "./Application"; import * as React from "react"; import * as ReactDOM from "react-dom"; -import { Hello, Sx } from "./UI/demo"; - -import "./UI/Sb.css" - +import { AppUi } from "./UI/AppUI"; window.onload = function () { - var info = document.createElement('div'); - info.id = "root"; - document.body.appendChild(info); - ReactDOM.render( - , - document.getElementById('root') as HTMLElement + var root = document.createElement('div'); + root.style.height = "100%"; + root.style.widows = "100%"; + document.body.appendChild(root); + ReactDOM.render(, + root ); - - // new Application2(); + new Application2(); }; diff --git a/webpack.config.js b/webpack.config.js index 8b5110fc3..3d9c3f19e 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -31,6 +31,25 @@ module.exports = { use: ExtractTextPlugin.extract({ use: 'css-loader' }) + }, + { + test: /\.less$/, + use: + [ + { + loader: "style-loader" + }, + { + loader: "css-loader" + }, + { + loader: "less-loader", options: + { + strictMath: true, + noIeCompat: true + } + } + ] } ] }, @@ -43,14 +62,13 @@ module.exports = { contentBase: path.join(__dirname, "dist"), compress: true, port: 8188 - } - , + }, plugins: [ new webpack.DllReferencePlugin({ context: '.', manifest: require(path.resolve(__dirname, "./manifest.json")) }), - new HtmlWebPackPlugin(), + new HtmlWebPackPlugin({ title: "webCAD" }), new AddAssetHtmlPlugin({ filepath: path.resolve(__dirname, "./dist/dll.js") }), new ExtractTextPlugin('styles.css'), ]