├── .gitignore ├── .paket └── paket.bootstrapper.exe ├── LICENSE ├── README.md ├── bindings ├── Fable.Graphics.fsproj ├── Settings.FSharpLint ├── fable-import-d3 │ ├── Fable.Import.D3.fs │ ├── README.md │ └── package.json ├── fable-import-dc │ ├── Fable.Import.DC.fs │ ├── README.md │ └── package.json ├── fable-import-dimple │ ├── Fable.Import.Dimple.fs │ ├── README.md │ └── package.json ├── fable-import-phaser │ └── Fable.Import.Phaser.fs ├── fable-import-pixi │ ├── Fable.Import.Pixi.fs │ ├── README.md │ └── package.json └── fable-import-three │ ├── Fable.Import.Three.fs │ ├── README.md │ └── package.json ├── build.cmd ├── build.fsx ├── build.sh ├── docs ├── docs.fsx ├── helpers.fs ├── liquid.fs ├── source │ ├── content │ │ ├── custom.css │ │ ├── snippets.css │ │ └── tips.js │ ├── images │ │ ├── fsharp.png │ │ ├── hpscreen.pdn │ │ └── hpscreen.png │ ├── index.md │ ├── samples.md │ └── samples │ │ └── images │ │ └── add.png └── templates │ ├── content.html │ ├── page.html │ └── sample.html ├── package.json ├── paket.dependencies ├── paket.lock └── samples ├── README.md ├── d3 └── barchart │ ├── README.md │ ├── barchart.fsx │ ├── fableconfig.json │ ├── index.html │ └── package.json ├── package.json ├── pixi ├── basic │ ├── README.md │ ├── basic.fsx │ ├── fableconfig.json │ ├── index.html │ ├── package.json │ └── public │ │ └── assets │ │ └── bunny.png ├── blur-filter │ ├── README.md │ ├── blur-filter.fsx │ ├── fableconfig.json │ ├── index.html │ ├── package.json │ └── public │ │ └── assets │ │ ├── depth_blur_BG.jpg │ │ ├── depth_blur_dudes.jpg │ │ └── depth_blur_moby.jpg ├── dragging │ ├── .DS_Store │ ├── README.md │ ├── dragging.fsx │ ├── fableconfig.json │ ├── index.html │ ├── package.json │ └── public │ │ └── assets │ │ └── bunny.png ├── graphics │ ├── README.md │ ├── fableconfig.json │ ├── graphics.fsx │ ├── index.html │ └── package.json ├── masking │ ├── README.md │ ├── fableconfig.json │ ├── index.html │ ├── masking.fsx │ ├── package.json │ └── public │ │ └── assets │ │ ├── BGrotate.jpg │ │ ├── LightRotate1.png │ │ ├── LightRotate2.png │ │ ├── SceneRotate.jpg │ │ └── panda.png ├── movieclip │ ├── README.md │ ├── fableconfig.json │ ├── index.html │ ├── movieclip.fsx │ ├── package.json │ └── public │ │ └── assets │ │ ├── mc.json │ │ └── mc.png ├── particle-container │ ├── README.md │ ├── fableconfig.json │ ├── index.html │ ├── package.json │ ├── particle-container.fsx │ └── public │ │ └── assets │ │ └── tinyMaggot.png ├── render-texture │ ├── README.md │ ├── fableconfig.json │ ├── index.html │ ├── package.json │ ├── public │ │ └── assets │ │ │ ├── spinObj_01.png │ │ │ ├── spinObj_02.png │ │ │ ├── spinObj_03.png │ │ │ ├── spinObj_04.png │ │ │ ├── spinObj_05.png │ │ │ ├── spinObj_06.png │ │ │ ├── spinObj_07.png │ │ │ └── spinObj_08.png │ └── render-texture.fsx └── text │ ├── README.md │ ├── fableconfig.json │ ├── index.html │ ├── package.json │ ├── public │ └── assets │ │ ├── desyrel.png │ │ ├── desyrel.xml │ │ └── textDemoBG.jpg │ └── text.fsx └── server ├── fableconfig.json ├── index.fsx └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | ## Ignore Visual Studio temporary files, build results, and 2 | ## files generated by popular Visual Studio add-ons. 3 | 4 | # User-specific files 5 | *.suo 6 | *.user 7 | *.userosscache 8 | *.sln.docstates 9 | 10 | # User-specific files (MonoDevelop/Xamarin Studio) 11 | *.userprefs 12 | 13 | # Build results 14 | [Dd]ebug/ 15 | [Dd]ebugPublic/ 16 | [Rr]elease/ 17 | [Rr]eleases/ 18 | x64/ 19 | x86/ 20 | bld/ 21 | [Bb]in/ 22 | [Oo]bj/ 23 | [Ll]og/ 24 | [Bb]uild/ 25 | 26 | # Visual Studio 2015 cache/options directory 27 | .vs/ 28 | # Uncomment if you have tasks that create the project's static files in wwwroot 29 | #wwwroot/ 30 | 31 | # MSTest test Results 32 | [Tt]est[Rr]esult*/ 33 | [Bb]uild[Ll]og.* 34 | 35 | # NUNIT 36 | *.VisualState.xml 37 | TestResult.xml 38 | 39 | # Build Results of an ATL Project 40 | [Dd]ebugPS/ 41 | [Rr]eleasePS/ 42 | dlldata.c 43 | 44 | # DNX 45 | project.lock.json 46 | artifacts/ 47 | 48 | *_i.c 49 | *_p.c 50 | *_i.h 51 | *.ilk 52 | *.meta 53 | *.obj 54 | *.pch 55 | *.pdb 56 | *.pgc 57 | *.pgd 58 | *.rsp 59 | *.sbr 60 | *.tlb 61 | *.tli 62 | *.tlh 63 | *.tmp 64 | *.tmp_proj 65 | *.log 66 | *.vspscc 67 | *.vssscc 68 | .builds 69 | *.pidb 70 | *.svclog 71 | *.scc 72 | 73 | # Chutzpah Test files 74 | _Chutzpah* 75 | 76 | # Visual C++ cache files 77 | ipch/ 78 | *.aps 79 | *.ncb 80 | *.opendb 81 | *.opensdf 82 | *.sdf 83 | *.cachefile 84 | *.VC.db 85 | *.VC.VC.opendb 86 | 87 | # Visual Studio profiler 88 | *.psess 89 | *.vsp 90 | *.vspx 91 | *.sap 92 | 93 | # TFS 2012 Local Workspace 94 | $tf/ 95 | 96 | # Guidance Automation Toolkit 97 | *.gpState 98 | 99 | # ReSharper is a .NET coding add-in 100 | _ReSharper*/ 101 | *.[Rr]e[Ss]harper 102 | *.DotSettings.user 103 | 104 | # JustCode is a .NET coding add-in 105 | .JustCode 106 | 107 | # TeamCity is a build add-in 108 | _TeamCity* 109 | 110 | # DotCover is a Code Coverage Tool 111 | *.dotCover 112 | 113 | # NCrunch 114 | _NCrunch_* 115 | .*crunch*.local.xml 116 | nCrunchTemp_* 117 | 118 | # MightyMoose 119 | *.mm.* 120 | AutoTest.Net/ 121 | 122 | # Web workbench (sass) 123 | .sass-cache/ 124 | 125 | # Installshield output folder 126 | [Ee]xpress/ 127 | 128 | # DocProject is a documentation generator add-in 129 | DocProject/buildhelp/ 130 | DocProject/Help/*.HxT 131 | DocProject/Help/*.HxC 132 | DocProject/Help/*.hhc 133 | DocProject/Help/*.hhk 134 | DocProject/Help/*.hhp 135 | DocProject/Help/Html2 136 | DocProject/Help/html 137 | 138 | # Click-Once directory 139 | publish/ 140 | 141 | # Publish Web Output 142 | *.[Pp]ublish.xml 143 | *.azurePubxml 144 | # TODO: Comment the next line if you want to checkin your web deploy settings 145 | # but database connection strings (with potential passwords) will be unencrypted 146 | *.pubxml 147 | *.publishproj 148 | 149 | # Microsoft Azure Web App publish settings. Comment the next line if you want to 150 | # checkin your Azure Web App publish settings, but sensitive information contained 151 | # in these scripts will be unencrypted 152 | PublishScripts/ 153 | 154 | # NuGet Packages 155 | *.nupkg 156 | # The packages folder can be ignored because of Package Restore 157 | **/packages/* 158 | # except build/, which is used as an MSBuild target. 159 | !**/packages/build/ 160 | # Uncomment if necessary however generally it will be regenerated when needed 161 | #!**/packages/repositories.config 162 | # NuGet v3's project.json files produces more ignoreable files 163 | *.nuget.props 164 | *.nuget.targets 165 | 166 | # Microsoft Azure Build Output 167 | csx/ 168 | *.build.csdef 169 | 170 | # Microsoft Azure Emulator 171 | ecf/ 172 | rcf/ 173 | 174 | # Windows Store app package directories and files 175 | AppPackages/ 176 | BundleArtifacts/ 177 | Package.StoreAssociation.xml 178 | _pkginfo.txt 179 | 180 | # Visual Studio cache files 181 | # files ending in .cache can be ignored 182 | *.[Cc]ache 183 | # but keep track of directories ending in .cache 184 | !*.[Cc]ache/ 185 | 186 | # Others 187 | ClientBin/ 188 | ~$* 189 | *~ 190 | *.dbmdl 191 | *.dbproj.schemaview 192 | *.pfx 193 | *.publishsettings 194 | node_modules/ 195 | orleans.codegen.cs 196 | 197 | # Since there are multiple workflows, uncomment next line to ignore bower_components 198 | # (https://github.com/github/gitignore/pull/1529#issuecomment-104372622) 199 | #bower_components/ 200 | 201 | # RIA/Silverlight projects 202 | Generated_Code/ 203 | 204 | # Backup & report files from converting an old project file 205 | # to a newer Visual Studio version. Backup files are not needed, 206 | # because we have git ;-) 207 | _UpgradeReport_Files/ 208 | Backup*/ 209 | UpgradeLog*.XML 210 | UpgradeLog*.htm 211 | 212 | # SQL Server files 213 | *.mdf 214 | *.ldf 215 | 216 | # Business Intelligence projects 217 | *.rdl.data 218 | *.bim.layout 219 | *.bim_*.settings 220 | 221 | # Microsoft Fakes 222 | FakesAssemblies/ 223 | 224 | # GhostDoc plugin setting file 225 | *.GhostDoc.xml 226 | 227 | # Node.js Tools for Visual Studio 228 | .ntvs_analysis.dat 229 | 230 | # Visual Studio 6 build log 231 | *.plg 232 | 233 | # Visual Studio 6 workspace options file 234 | *.opt 235 | 236 | # Visual Studio LightSwitch build output 237 | **/*.HTMLClient/GeneratedArtifacts 238 | **/*.DesktopClient/GeneratedArtifacts 239 | **/*.DesktopClient/ModelManifest.xml 240 | **/*.Server/GeneratedArtifacts 241 | **/*.Server/ModelManifest.xml 242 | _Pvt_Extensions 243 | 244 | # Paket dependency manager 245 | .paket/paket.exe 246 | paket-files/ 247 | 248 | # FAKE - F# Make 249 | .fake/ 250 | 251 | # JetBrains Rider 252 | .idea/ 253 | *.sln.iml 254 | docs/output 255 | temp/ 256 | **/public/*.js 257 | **/public/*.js.map 258 | .DS_Store -------------------------------------------------------------------------------- /.paket/paket.bootstrapper.exe: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fable-compiler/fable-graphics/777629763c49a7632dd7885b058e9aa21cbf28c3/.paket/paket.bootstrapper.exe -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "{}" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright {yyyy} {name of copyright owner} 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # fable-graphics 2 | Fable bindings for graphic tools: D3, DC, Three, Pixi 3 | 4 | [How to create a sample ?](https://github.com/fable-compiler/fable-graphics/wiki/How-to-create-a-sample-%3F) -------------------------------------------------------------------------------- /bindings/Fable.Graphics.fsproj: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Debug 6 | AnyCPU 7 | 2.0 8 | fd5eda87-08d3-4c28-95c3-3eb40bc6f24c 9 | Library 10 | Fable.Graphics 11 | Fable.Graphics 12 | v4.5 13 | true 14 | 4.4.0.0 15 | Fable.Graphics 16 | 17 | 18 | true 19 | full 20 | false 21 | false 22 | bin\$(Configuration)\ 23 | DEBUG;TRACE 24 | 3 25 | bin\$(Configuration)\$(AssemblyName).XML 26 | 27 | 28 | pdbonly 29 | true 30 | true 31 | bin\$(Configuration)\ 32 | TRACE 33 | 3 34 | bin\$(Configuration)\$(AssemblyName).XML 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 14 55 | 56 | 57 | 58 | 59 | $(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\FSharp\Microsoft.FSharp.Targets 60 | 61 | 62 | 63 | 64 | $(MSBuildExtensionsPath32)\..\Microsoft SDKs\F#\4.0\Framework\v4.0\Microsoft.FSharp.Targets 65 | 66 | 67 | 68 | 69 | 76 | 77 | 78 | 79 | 80 | ..\packages\FSharp.Core\lib\net20\FSharp.Core.dll 81 | True 82 | True 83 | 84 | 85 | 86 | 87 | 88 | 89 | ..\packages\FSharp.Core\lib\net40\FSharp.Core.dll 90 | True 91 | True 92 | 93 | 94 | 95 | 96 | 97 | 98 | ..\packages\FSharp.Core\lib\portable-net45+netcore45\FSharp.Core.dll 99 | True 100 | True 101 | 102 | 103 | 104 | 105 | 106 | 107 | ..\packages\FSharp.Core\lib\portable-net45+monoandroid10+monotouch10+xamarinios10\FSharp.Core.dll 108 | True 109 | True 110 | 111 | 112 | 113 | 114 | 115 | 116 | ..\packages\FSharp.Core\lib\portable-net45+sl5+netcore45\FSharp.Core.dll 117 | True 118 | True 119 | 120 | 121 | 122 | 123 | 124 | 125 | ..\packages\FSharp.Core\lib\portable-net45+netcore45+wp8\FSharp.Core.dll 126 | True 127 | True 128 | 129 | 130 | 131 | 132 | 133 | 134 | ..\packages\FSharp.Core\lib\portable-net45+netcore45+wpa81+wp8\FSharp.Core.dll 135 | True 136 | True 137 | 138 | 139 | 140 | 141 | 142 | -------------------------------------------------------------------------------- /bindings/Settings.FSharpLint: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | False 6 | 7 | 8 | -------------------------------------------------------------------------------- /bindings/fable-import-d3/README.md: -------------------------------------------------------------------------------- 1 | # fable-import-d3 2 | 3 | Fable bindings for D3 4 | 5 | ## Installation 6 | 7 | ```sh 8 | $ npm install --save fable-core d3@^3.0.0 9 | $ npm install --save-dev fable-import-d3 10 | ``` 11 | 12 | ## Usage 13 | 14 | Note: To prevent naming conflicts, module names start with upper case, 15 | while variables containing global methods are lower case. 16 | 17 | ### In a F# project (.fsproj) 18 | 19 | ```xml 20 | 21 | 22 | 23 | 24 | 25 | 26 | ``` 27 | 28 | ### In a F# script (.fsx) 29 | 30 | ```fsharp 31 | #r "node_modules/fable-core/Fable.Core.dll" 32 | #load "node_modules/fable-import-d3/Fable.Import.D3.fs" 33 | 34 | open Fable.Core 35 | open Fable.Import 36 | ``` 37 | -------------------------------------------------------------------------------- /bindings/fable-import-d3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fable-import-d3", 3 | "version": "0.0.5", 4 | "description": "Fable bindings for D3", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/fable-compiler/fable-graphics" 8 | }, 9 | "license": "Apache-2.0", 10 | "author": "Alfonso Garcia-Caro", 11 | "keywords": [ 12 | "fable", 13 | "fable-compiler", 14 | "fsharp", 15 | "F#" 16 | ], 17 | "homepage": "https://github.com/fable-compiler/Fable#readme" 18 | } 19 | -------------------------------------------------------------------------------- /bindings/fable-import-dc/Fable.Import.DC.fs: -------------------------------------------------------------------------------- 1 | namespace Fable.Import 2 | open System 3 | open Fable.Core 4 | open Fable.Import.JS 5 | 6 | module DC = 7 | type ILegendwidget = 8 | abstract x: float->float 9 | abstract x: unit->float 10 | abstract y: float->float 11 | abstract y: unit->float 12 | abstract gap: float->float 13 | abstract gap: unit->float 14 | abstract itemHeight: float->float 15 | abstract itemHeight: unit->float 16 | abstract horizontal: bool->bool 17 | abstract horizontal: unit->bool 18 | abstract legendWidth: float->float 19 | abstract legendWidth: unit->float 20 | abstract itemWidth: float->float 21 | abstract itemWidth: unit->float 22 | 23 | and IBaseChart<'T> = 24 | abstract width: float->'T 25 | abstract width: unit->'T 26 | abstract height: float->'T 27 | abstract height: unit->'T 28 | abstract minWidth: float->'T 29 | abstract minWidth: unit->'T 30 | abstract minHeight: float->'T 31 | abstract minHeight: unit->'T 32 | abstract dimension: obj->'T 33 | abstract dimension: unit->'T 34 | abstract group: obj->'T 35 | abstract group: unit->'T 36 | abstract transitionDuration: float->'T 37 | abstract transitionDuration: unit->'T 38 | abstract colors: string[]->'T 39 | abstract colors: unit->'T 40 | abstract keyAccessor: Func->'T 41 | abstract keyAccessor: unit->Func 42 | abstract valueAccessor: Func->'T 43 | abstract valueAccessor: unit->Func 44 | abstract label: Func->'T 45 | abstract label: unit->Func 46 | abstract renderLabel: bool->'T 47 | abstract renderLabel: unit->bool 48 | abstract renderlet: Func<'T, unit>->'T 49 | abstract title: Func->'T 50 | abstract title: unit->Func 51 | abstract filter: obj->'T 52 | abstract filter: unit->obj 53 | abstract filterAll: unit->unit 54 | abstract expireCache: unit->unit 55 | abstract legend: ILegendwidget->'T 56 | abstract chartID: unit->float 57 | abstract options: obj->unit 58 | abstract select: obj->obj 59 | abstract selectAll: obj->obj 60 | 61 | and IEvents = 62 | abstract trigger: fnctn: Func * ?delay: float -> unit 63 | 64 | and IListener<'T> = 65 | abstract on: string * Func<'T, unit> -> 'T 66 | 67 | and ImarginObj = 68 | abstract top: float with get, set 69 | abstract right: float with get, set 70 | abstract bottom: float with get, set 71 | abstract left: float with get, set 72 | 73 | and IMarginable<'T> = 74 | abstract margins: ImarginObj->'T 75 | abstract margins: unit->ImarginObj 76 | 77 | and IAbstractColorChart<'T> = 78 | abstract colorDomain: float[]->'T 79 | abstract colorDomain: unit->float[] 80 | 81 | and IAbstractStackableChart<'T> = 82 | abstract stack: IChartGroup * string * Func * 'T 83 | 84 | and IAbstractCoordinateGridChart<'T> = 85 | abstract x: obj->'T 86 | abstract x: unit->obj 87 | abstract y: obj->'T 88 | abstract y: unit->obj 89 | abstract elasticY: unit->bool 90 | abstract elasticY: bool->'T 91 | abstract xAxis: unit->obj 92 | abstract xAxis: obj->'T 93 | abstract yAxis: unit->obj 94 | abstract yAxis: obj->'T 95 | abstract yAxisPadding: unit->float 96 | abstract yAxisPadding: float->'T 97 | abstract xAxisPadding: unit->float 98 | abstract xAxisPadding: float->'T 99 | abstract renderHorizontalGridLines: unit->bool 100 | abstract renderHorizontalGridLines: bool->'T 101 | 102 | and IAbstractBubblechart<'T> = 103 | abstract r: obj->'T 104 | abstract r: unit->obj 105 | abstract radiusValueAccessor: Func->'T 106 | abstract radiusValueAccessor: unit->Func 107 | 108 | and IBubblechart = 109 | inherit IBaseChart 110 | inherit IAbstractColorChart 111 | inherit IAbstractBubblechart 112 | inherit IAbstractCoordinateGridChart 113 | inherit IMarginable 114 | inherit IListener 115 | 116 | and IPiechart = 117 | inherit IBaseChart 118 | inherit IAbstractColorChart 119 | inherit IAbstractBubblechart 120 | inherit IAbstractCoordinateGridChart 121 | inherit IMarginable 122 | inherit IListener 123 | abstract radius: float->IPiechart 124 | abstract radius: unit->float 125 | abstract minAngleForLabel: float->IPiechart 126 | abstract minAngleForLabel: unit->float 127 | 128 | and IBarchart = 129 | inherit IBaseChart 130 | inherit IAbstractStackableChart 131 | inherit IAbstractCoordinateGridChart 132 | inherit IMarginable 133 | inherit IListener 134 | abstract centerBar: Func with get, set 135 | abstract gap: Func with get, set 136 | 137 | and ILinechart = 138 | inherit IBaseChart 139 | inherit IAbstractStackableChart 140 | inherit IAbstractCoordinateGridChart 141 | inherit IMarginable 142 | inherit IListener 143 | 144 | 145 | and IDatachart = 146 | inherit IBaseChart 147 | inherit IAbstractStackableChart 148 | inherit IAbstractCoordinateGridChart 149 | inherit IMarginable 150 | inherit IListener 151 | abstract size: float->IDatachart 152 | abstract size: unit->float 153 | abstract columns: Func[]->IDatachart 154 | abstract columns: unit->Func[] 155 | abstract sortBy: Func->IDatachart 156 | abstract sortBy: unit->Func 157 | abstract order: Func->IDatachart 158 | abstract order: unit->Func 159 | 160 | and IRowchart = 161 | inherit IBaseChart 162 | inherit IAbstractColorChart 163 | inherit IAbstractStackableChart 164 | inherit IAbstractCoordinateGridChart 165 | inherit IMarginable 166 | inherit IListener 167 | 168 | 169 | and IChartGroup = 170 | interface end 171 | 172 | type [] Globals = 173 | static member events with get(): IEvents = failwith "JS only" and set(v: IEvents): unit = failwith "JS only" 174 | static member filterAll(?chartGroup: IChartGroup): unit = failwith "JS only" 175 | static member renderAll(?chartGroup: IChartGroup): unit = failwith "JS only" 176 | static member redrawAll(?chartGroup: IChartGroup): unit = failwith "JS only" 177 | static member bubbleChart(cssSel: string): IBubblechart = failwith "JS only" 178 | static member pieChart(cssSel: string): IPiechart = failwith "JS only" 179 | static member barChart(cssSel: string): IBarchart = failwith "JS only" 180 | static member lineChart(cssSel: string): ILinechart = failwith "JS only" 181 | static member dataTable(cssSel: string): IDatachart = failwith "JS only" 182 | static member rowChart(cssSel: string): IRowchart = failwith "JS only" 183 | 184 | -------------------------------------------------------------------------------- /bindings/fable-import-dc/README.md: -------------------------------------------------------------------------------- 1 | # fable-import-dc 2 | 3 | Fable bindings for dc.js 4 | 5 | ## Installation 6 | 7 | ```sh 8 | $ npm install --save fable-core d3@^3.0.0 crossfilter dc 9 | $ npm install --save-dev fable-import-dc 10 | ``` 11 | 12 | ## Usage 13 | 14 | ### In a F# project (.fsproj) 15 | 16 | ```xml 17 | 18 | 19 | 20 | 21 | 22 | 23 | ``` 24 | 25 | ### In a F# script (.fsx) 26 | 27 | ```fsharp 28 | #r "node_modules/fable-core/Fable.Core.dll" 29 | #load "node_modules/fable-import-dc/Fable.Import.DC.fs" 30 | 31 | open Fable.Core 32 | open Fable.Import 33 | ``` 34 | -------------------------------------------------------------------------------- /bindings/fable-import-dc/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fable-import-dc", 3 | "version": "0.0.3", 4 | "description": "Fable bindings for dc.js", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/fable-compiler/fable-graphics" 8 | }, 9 | "license": "Apache-2.0", 10 | "author": "Alfonso Garcia-Caro", 11 | "keywords": [ 12 | "fable", 13 | "fable-compiler", 14 | "fsharp", 15 | "F#" 16 | ], 17 | "homepage": "https://github.com/fable-compiler/Fable#readme" 18 | } 19 | -------------------------------------------------------------------------------- /bindings/fable-import-dimple/Fable.Import.Dimple.fs: -------------------------------------------------------------------------------- 1 | namespace Fable.Import 2 | 3 | open Fable.Core 4 | 5 | module Dimple = 6 | 7 | type Chart = 8 | abstract addLegend: int*int*int*int*string -> unit 9 | abstract addLegend: int*int*int*int*string*Series array -> unit 10 | abstract addMeasureAxis: string*string -> Axis 11 | abstract addCategoryAxis: string*string -> Axis 12 | abstract addPctAxis: string*string -> Axis 13 | abstract draw: unit -> unit 14 | abstract setMargins: int*int*int*int -> unit 15 | abstract setBounds: int*int*int*int -> unit 16 | abstract setBounds: string*string*string*string -> unit 17 | abstract defaultColors: Color array with get,set 18 | [] 19 | abstract addSeries: string*Plot -> Series 20 | [] 21 | abstract addPieSeries: string*Plot -> PieSeries 22 | 23 | and Axis = 24 | abstract colors: string array with get,set 25 | abstract floatingBarWidth: float with get,set 26 | abstract fontSize: string with get,set 27 | abstract hidden: bool with get,set 28 | abstract shapes: D3.Selection with get,set 29 | abstract showGridlines: bool with get,set 30 | abstract ticks: int with get,set 31 | abstract title: string with get,set 32 | and Plot = interface end 33 | 34 | and Svg = inherit Fable.Import.D3.Selection 35 | 36 | and Color = 37 | abstract opacity: float with get,set 38 | 39 | and Series = 40 | abstract addOrderRule: string array -> unit 41 | abstract addEventHandler: string*(EventArgs->unit) -> unit 42 | abstract afterDraw: (D3.Selection*obj -> unit) with get,set 43 | abstract barGap: float with get,set 44 | abstract interpolation: string with get,set 45 | abstract lineWeight: float with get,set 46 | abstract shapes: D3.Selection with get,set 47 | 48 | and PieSeries = 49 | abstract innerRadius: string with get,set 50 | abstract outerRadius: string with get,set 51 | inherit Series 52 | 53 | and EventArgs = 54 | abstract seriesValue: string array with get 55 | abstract xValue: float with get 56 | abstract yValue: float with get 57 | abstract zValue: float with get 58 | abstract pValue: float with get 59 | abstract colorValue: int with get 60 | abstract frameValue: string with get 61 | abstract seriesShapes: obj with get 62 | abstract selectedShape: obj with get 63 | 64 | and Plots = 65 | abstract pie: Plot 66 | abstract bar: Plot 67 | abstract area: Plot 68 | 69 | and [] Globals = 70 | [] 71 | abstract chart: Svg*obj -> Chart 72 | [] 73 | abstract color: string -> Color 74 | [] 75 | abstract color: string*string -> Color 76 | abstract newSvg: string*int*int -> Svg 77 | abstract plot: Plots with get -------------------------------------------------------------------------------- /bindings/fable-import-dimple/README.md: -------------------------------------------------------------------------------- 1 | # fable-import-dimple 2 | 3 | Fable bindings for Dimple.js 4 | 5 | ## Installation 6 | 7 | ```sh 8 | $ npm install --save fable-core git+https://github.com/PMSI-AlignAlytics/dimple.git 9 | $ npm install --save-dev fable-import-dimple 10 | ``` 11 | 12 | ## Usage 13 | 14 | Note: To prevent naming conflicts, module names start with upper case, 15 | while variables containing global methods are lower case. 16 | 17 | ### In a F# project (.fsproj) 18 | 19 | ```xml 20 | 21 | 22 | 23 | 24 | 25 | 26 | ``` 27 | 28 | ### In a F# script (.fsx) 29 | 30 | ```fsharp 31 | #r "node_modules/fable-core/Fable.Core.dll" 32 | #load "node_modules/fable-import-dimple/Fable.Import.Dimple.fs" 33 | 34 | open Fable.Core 35 | open Fable.Import 36 | ``` 37 | -------------------------------------------------------------------------------- /bindings/fable-import-dimple/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fable-import-dimple", 3 | "version": "0.0.1", 4 | "description": "Fable bindings for dimple.js", 5 | "scripts": { 6 | "test": "echo \"Error: no test specified\" && exit 1" 7 | }, 8 | "dependencies": {}, 9 | "repository": { 10 | "type": "git", 11 | "url": "git://github.com/fable/fable-graphics.git" 12 | }, 13 | "keywords": [ 14 | "F#", 15 | "Fable", 16 | "d3", 17 | "dimple" 18 | ], 19 | "author": "Justin Sacks", 20 | "license": "MIT" 21 | } 22 | -------------------------------------------------------------------------------- /bindings/fable-import-pixi/README.md: -------------------------------------------------------------------------------- 1 | # fable-import-pixi 2 | 3 | Fable bindings for [PixiJS](http://www.pixijs.com/) v3 4 | 5 | ## Installation 6 | 7 | ```sh 8 | npm install --save fable-core pixi.js@^3.0.0 9 | npm install --save-dev fable-import-pixi 10 | ``` 11 | 12 | > Note: If you're loading PixiJS on the browser with [require.js](http://requirejs.org/), 13 | use the prebuilt file: `node_modules/pixi.js/bin/pixi.min.js` 14 | 15 | ## Usage 16 | 17 | ### F# project (.fsproj) 18 | 19 | ```xml 20 | 21 | 22 | 23 | 24 | 25 | 26 | ``` 27 | 28 | ### F# script (.fsx) 29 | 30 | ```fsharp 31 | #r "node_modules/fable-core/Fable.Core.dll" 32 | #load "node_modules/fable-import-pixi/Fable.Import.Pixi.fs" 33 | 34 | open Fable.Core 35 | open Fable.Import 36 | ``` 37 | -------------------------------------------------------------------------------- /bindings/fable-import-pixi/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fable-import-pixi", 3 | "version": "0.0.10", 4 | "description": "Fable bindings for Pixi.js", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/fable-compiler/fable-graphics" 8 | }, 9 | "license": "Apache-2.0", 10 | "author": "Alfonso Garcia-Caro", 11 | "keywords": [ 12 | "fable", 13 | "fable-compiler", 14 | "fsharp", 15 | "F#" 16 | ], 17 | "homepage": "https://github.com/fable-compiler/Fable#readme" 18 | } 19 | -------------------------------------------------------------------------------- /bindings/fable-import-three/README.md: -------------------------------------------------------------------------------- 1 | # fable-import-three 2 | 3 | Fable bindings for three.js 4 | 5 | ## Installation 6 | 7 | ```shell 8 | $ npm install --save fable-core three 9 | $ npm install --save-dev fable-import-three 10 | ``` 11 | 12 | ## Usage 13 | 14 | Note: To prevent naming conflicts, `THREE` as a module is upper case, 15 | while `three` as a value containing global methods is lower case. 16 | 17 | ### In a F# project (.fsproj) 18 | 19 | ```xml 20 | 21 | 22 | 23 | 24 | 25 | 26 | ``` 27 | 28 | ### In a F# script (.fsx) 29 | 30 | ```fsharp 31 | #r "node_modules/fable-core/Fable.Core.dll" 32 | #load "node_modules/fable-import-three/Fable.Import.Three.fs" 33 | 34 | open Fable.Core 35 | open Fable.Import 36 | ``` 37 | -------------------------------------------------------------------------------- /bindings/fable-import-three/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fable-import-three", 3 | "version": "0.0.5", 4 | "description": "Fable bindings for three.js", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/fable-compiler/fable-graphics" 8 | }, 9 | "license": "Apache-2.0", 10 | "author": "Alfonso Garcia-Caro", 11 | "keywords": [ 12 | "fable", 13 | "fable-compiler", 14 | "fsharp", 15 | "F#" 16 | ], 17 | "homepage": "https://github.com/fable-compiler/Fable#readme" 18 | } 19 | -------------------------------------------------------------------------------- /build.cmd: -------------------------------------------------------------------------------- 1 | @echo off 2 | cls 3 | 4 | .paket\paket.bootstrapper.exe 5 | if errorlevel 1 ( 6 | exit /b %errorlevel% 7 | ) 8 | 9 | .paket\paket.exe restore 10 | if errorlevel 1 ( 11 | exit /b %errorlevel% 12 | ) 13 | 14 | packages\FAKE\tools\FAKE.exe build.fsx %* 15 | -------------------------------------------------------------------------------- /build.fsx: -------------------------------------------------------------------------------- 1 | // include Fake libs 2 | #r "./packages/FAKE/tools/FakeLib.dll" 3 | 4 | open System 5 | open Fake 6 | open Fake.NpmHelper 7 | 8 | module Fake = 9 | let fakePath = "packages" "docs" "FAKE" "tools" "FAKE.exe" 10 | let fakeStartInfo script workingDirectory args fsiargs environmentVars = 11 | (fun (info: System.Diagnostics.ProcessStartInfo) -> 12 | info.FileName <- System.IO.Path.GetFullPath fakePath 13 | info.Arguments <- sprintf "%s --fsiargs -d:FAKE %s \"%s\"" args fsiargs script 14 | info.WorkingDirectory <- workingDirectory 15 | let setVar k v = info.EnvironmentVariables.[k] <- v 16 | for (k, v) in environmentVars do setVar k v 17 | setVar "MSBuild" msBuildExe 18 | setVar "GIT" Git.CommandHelper.gitPath 19 | setVar "FSI" fsiPath) 20 | 21 | /// Run the given buildscript with FAKE.exe 22 | let executeFAKEWithOutput workingDirectory script fsiargs envArgs = 23 | let exitCode = 24 | ExecProcessWithLambdas 25 | (fakeStartInfo script workingDirectory "" fsiargs envArgs) 26 | TimeSpan.MaxValue false ignore ignore 27 | System.Threading.Thread.Sleep 1000 28 | exitCode 29 | 30 | // Directories 31 | let buildDir = "./build/" 32 | let deployDir = "./deploy/" 33 | 34 | 35 | // Filesets 36 | let appReferences = 37 | !! "/**/*.fsproj" 38 | 39 | // version info 40 | let version = "0.1" // or retrieve from CI server 41 | 42 | // Targets 43 | Target "Clean" (fun _ -> 44 | CleanDirs [buildDir; deployDir] 45 | ) 46 | 47 | Target "Npm" (fun _ -> 48 | appReferences 49 | |> Seq.iter (fun s -> 50 | let path = IO.Path.GetDirectoryName s 51 | Npm (fun p -> 52 | { p with 53 | Command = Install Standard 54 | WorkingDirectory = path 55 | })) 56 | ) 57 | 58 | Target "Build" (fun _ -> 59 | // compile all projects below src/app/ 60 | MSBuildDebug buildDir "Build" appReferences 61 | |> Log "AppBuild-Output: " 62 | ) 63 | 64 | Target "Deploy" (fun _ -> 65 | !! (buildDir + "/**/*.*") 66 | -- "*.zip" 67 | |> Zip buildDir (deployDir + "ApplicationName." + version + ".zip") 68 | ) 69 | 70 | Target "BrowseDocs" (fun _ -> 71 | let exit = Fake.executeFAKEWithOutput "docs" "docs.fsx" "" ["target", "BrowseDocs"] 72 | if exit <> 0 then failwith "Browsing documentation failed" 73 | ) 74 | 75 | Target "GenerateDocs" (fun _ -> 76 | let exit = Fake.executeFAKEWithOutput "docs" "docs.fsx" "" ["target", "GenerateDocs"] 77 | if exit <> 0 then failwith "Generating documentation failed" 78 | ) 79 | 80 | Target "PublishDocs" (fun _ -> 81 | let exit = Fake.executeFAKEWithOutput "docs" "docs.fsx" "" ["target", "PublishDocs"] 82 | if exit <> 0 then failwith "Publishing documentation failed" 83 | ) 84 | 85 | // Build order 86 | "Clean" 87 | ==> "Npm" 88 | ==> "Build" 89 | ==> "Deploy" 90 | 91 | // start build 92 | RunTargetOrDefault "Build" 93 | -------------------------------------------------------------------------------- /build.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | if test "$OS" = "Windows_NT" 3 | then 4 | # use .Net 5 | 6 | .paket/paket.bootstrapper.exe 7 | exit_code=$? 8 | if [ $exit_code -ne 0 ]; then 9 | exit $exit_code 10 | fi 11 | 12 | .paket/paket.exe restore 13 | exit_code=$? 14 | if [ $exit_code -ne 0 ]; then 15 | exit $exit_code 16 | fi 17 | 18 | packages/FAKE/tools/FAKE.exe $@ --fsiargs build.fsx 19 | else 20 | # use mono 21 | mono .paket/paket.bootstrapper.exe 22 | exit_code=$? 23 | if [ $exit_code -ne 0 ]; then 24 | exit $exit_code 25 | fi 26 | 27 | mono .paket/paket.exe restore 28 | exit_code=$? 29 | if [ $exit_code -ne 0 ]; then 30 | exit $exit_code 31 | fi 32 | mono packages/FAKE/tools/FAKE.exe $@ --fsiargs -d:MONO build.fsx 33 | fi 34 | -------------------------------------------------------------------------------- /docs/docs.fsx: -------------------------------------------------------------------------------- 1 | // -------------------------------------------------------------------------------------- 2 | // Fable documentation build script 3 | // -------------------------------------------------------------------------------------- 4 | 5 | #load "../packages/docs/FSharp.Formatting/FSharp.Formatting.fsx" 6 | #I "../packages/docs/FAKE/tools/" 7 | #I "../packages/docs/Suave/lib/net40" 8 | #I "../packages/docs/DotLiquid/lib/NET45" 9 | #r "FakeLib.dll" 10 | #r "Suave.dll" 11 | #r "DotLiquid.dll" 12 | #load "liquid.fs" 13 | #load "helpers.fs" 14 | open Fake 15 | open System 16 | open System.IO 17 | open System.Text.RegularExpressions 18 | open FSharp.Literate 19 | open FSharp.Markdown 20 | open Suave 21 | open Suave.Web 22 | open Suave.Http 23 | open System.IO 24 | open Helpers 25 | open Fake.Git 26 | 27 | // -------------------------------------------------------------------------------------- 28 | // Global definitions and folders 29 | // -------------------------------------------------------------------------------------- 30 | 31 | // Where to push generated documentation 32 | let publishSite = "//fable-compiler.github.io/fable-graphics" 33 | let githubLink = "git@github.com:fable-compiler/fable-graphics.git" 34 | let publishBranch = "gh-pages" 35 | 36 | // Paths with template/source/output locations 37 | let source = __SOURCE_DIRECTORY__ "source" 38 | let templates = __SOURCE_DIRECTORY__ "templates" 39 | let output = __SOURCE_DIRECTORY__ "output" 40 | let contentPage = "content.html" 41 | let samplePage = "sample.html" 42 | let fableRoot = __SOURCE_DIRECTORY__ ".." |> Path.GetFullPath 43 | let temp = fableRoot "temp" 44 | 45 | let samplesRoot = fableRoot "samples" 46 | 47 | let samples = 48 | [ "samples/d3/barchart", "d3" 49 | "samples/pixi/basic", "pixi" 50 | "samples/pixi/graphics", "pixi" 51 | "samples/pixi/dragging", "pixi" 52 | "samples/pixi/blur-filter", "pixi" 53 | "samples/pixi/text", "pixi" 54 | "samples/pixi/movieclip", "pixi" 55 | "samples/pixi/particle-container", "pixi" 56 | "samples/pixi/render-texture", "pixi" 57 | "samples/pixi/masking", "pixi" 58 | ] 59 | 60 | 61 | 62 | printfn "Samples root: %A" samplesRoot 63 | printfn "Samples: %A" samples 64 | printfn "fableRoot: %A" fableRoot 65 | 66 | 67 | // Set templates directory for DotLiquid 68 | DotLiquid.setTemplatesDirs [templates] 69 | DotLiquid.Template.NamingConvention <- DotLiquid.NamingConventions.CSharpNamingConvention() 70 | 71 | // -------------------------------------------------------------------------------------- 72 | // Markdown pre-processing 73 | // -------------------------------------------------------------------------------------- 74 | 75 | /// Extract heading from the document 76 | let extractHeading name paragraphs = 77 | let heading, other = 78 | paragraphs 79 | |> List.map (function 80 | | Heading(1, [Literal text]) -> Choice1Of2 text 81 | | p -> Choice2Of2 p) 82 | |> List.partition (function Choice1Of2 _ -> true | _ -> false) 83 | match heading, other with 84 | | [Choice1Of2 text], pars -> text, List.map (function Choice2Of2 p -> p | _ -> failwith "unexpected") pars 85 | | _ -> failwithf "Document '%s' does not contain parseable top-level heading." name 86 | 87 | /// Extracts list with metadata from a document 88 | let extractAttributes name (doc:MarkdownDocument) paragraphs = 89 | match paragraphs with 90 | | ListBlock(_, lis)::pars -> 91 | [ for li in lis do 92 | match li with 93 | // The
  • is either Span (for short items) or Paragraph (if there 94 | // are any long items). We extract key from "key: value" in the first 95 | // paragraph. Then we format short things as Span and long as Paragraph 96 | // (black magic to make sure we emit nice HTML....) 97 | | Paragraph (Literal s::spans)::pars 98 | | Span (Literal s::spans)::pars when s.Contains(":") -> 99 | let col = s.IndexOf(":") 100 | let wrap = match li with (Span _)::_ | [Paragraph _] -> Span | _ -> Paragraph 101 | let rest = wrap(Literal (s.Substring(col+1))::spans)::pars 102 | yield s.Substring(0, col).Trim(), Markdown.WriteHtml(MarkdownDocument(rest, doc.DefinedLinks)).Trim() 103 | | _ -> failwithf "Document '%s' has unsupported formatting in header block: %A" name li ], 104 | pars 105 | | _ -> failwithf "Document '%s' is missing header block." name 106 | 107 | 108 | // -------------------------------------------------------------------------------------- 109 | // Generating static parts of the web site 110 | // -------------------------------------------------------------------------------------- 111 | 112 | /// Simple model for processed Markdown documents 113 | type Page = 114 | { Root : string 115 | Active : string 116 | Heading : string 117 | Tagline : string 118 | Content : string } 119 | 120 | 121 | // Copy static files from the 'source' folder to 'output' folder (add more extensions!) 122 | let copyFiles force = 123 | Helpers.processDirectory force source output [".css"; ".js"; ".png"; ".gif"; ".jpg"] 124 | (fun source outdir -> 125 | let name = Path.GetFileName(source) 126 | File.Copy(source, outdir name, true) ) 127 | 128 | // Build documentation from Markdown files in `content` 129 | let processMarkdown siteRoot force = 130 | Helpers.processDirectory force source output [".md"] 131 | (fun source outdir -> 132 | let name = Path.GetFileNameWithoutExtension(source) 133 | printfn "Processing markdown file: %s.md" name 134 | use tmp = TempFile.New() 135 | let attrs = System.Collections.Generic.Dictionary<_, _>() 136 | let heading = ref "" 137 | Literate.ProcessMarkdown(source, output=tmp.Name, generateAnchors=true, customizeDocument = fun _ doc -> 138 | let kvps, pars = extractAttributes name doc.MarkdownDocument doc.Paragraphs 139 | for k, v in kvps do attrs.Add(k, v) 140 | let htext, pars = extractHeading name pars 141 | heading.Value <- htext 142 | doc.With(pars) ) 143 | let html = 144 | { Root = siteRoot 145 | Active = if attrs.ContainsKey("active") then attrs.["active"] else name 146 | Tagline = attrs.["tagline"] 147 | Heading = heading.Value 148 | Content = File.ReadAllText(tmp.Name) } 149 | |> DotLiquid.page contentPage 150 | File.WriteAllText(outdir name + ".html", html)) 151 | 152 | // Build documentation from HTML files in `content` (just apply templating) 153 | let processHtml siteRoot force = 154 | Helpers.processDirectory force source output [".html"] 155 | (fun source outdir -> 156 | let name = Path.GetFileNameWithoutExtension(source) 157 | printfn "Processing html file: %s.html" name 158 | let html = 159 | { Active = name; Content = ""; Tagline = ""; Heading = ""; Root = siteRoot } 160 | |> DotLiquid.page source 161 | File.WriteAllText(outdir name + ".html", html)) 162 | 163 | // Generate all static parts of the web site (this is pretty fast) 164 | let generateStaticPages siteRoot force () = 165 | traceImportant "Updating static pages" 166 | copyFiles force 167 | processMarkdown siteRoot force 168 | processHtml siteRoot force 169 | traceImportant "Updating static pages completed" 170 | 171 | 172 | // -------------------------------------------------------------------------------------- 173 | // Generating pages for the Fable demos 174 | // -------------------------------------------------------------------------------------- 175 | 176 | 177 | /// Extract string (from HTML page) enclosed between 178 | /// and 179 | let extractMarkedPagePart tag (page:string) = 180 | let pattern = """\<\!--\s*\[""" + tag + """\]\s*--\>(.*)\<\!--\s*\[/""" + tag + """\]\s*--\>""" 181 | let mtch = Regex.Match(page, pattern, RegexOptions.Singleline) 182 | if mtch.Success then mtch.Groups.[1].Value else "" 183 | 184 | let prepareDependencies () = 185 | Npm.run samplesRoot "i" [] 186 | 187 | /// Compile sample using Fable & copy static and JS files to `samples/` 188 | let compileSample copyOutput name (path: string) outerDir = 189 | // Compile and copy JS files 190 | System.Environment.CurrentDirectory <- fableRoot 191 | 192 | Npm.run path "run" ["build"] 193 | ensureDirectory (output "samples" outerDir name) 194 | 195 | if copyOutput then 196 | Directory.GetDirectories(path) 197 | |> Seq.filter (fun d -> not (d.EndsWith("out")) && not (d.EndsWith("node_modules"))) 198 | |> Seq.iter (fun d -> CopyDir (output "samples" outerDir name (Path.GetFileName d)) d (fun _ -> true)) 199 | 200 | Directory.GetFiles(path) 201 | |> Seq.filter (fun d -> 202 | ["index.html"; ".json"; ".fsx"; ".fsproj"; ".fs"] 203 | |> Seq.forall (fun s -> not (d.EndsWith(s))) ) 204 | |> Seq.iter (fun d -> CopyFile (output "samples" outerDir name (Path.GetFileName d)) d) 205 | 206 | 207 | /// Model passed to DotLiquid sample page 208 | type Sample = 209 | { Root : string 210 | Active : string 211 | Name : string 212 | Title : string 213 | Tagline : string 214 | GithubLink : string 215 | Introduction : string 216 | Document : string 217 | ExternalScript: string 218 | Application : string 219 | Head : string 220 | AppStyle : string } 221 | 222 | 223 | /// Generate page from `.fsx` and (optionally) `index.html` files in the sample path 224 | let generateSamplePage siteRoot dir name (path: string) outerDir = 225 | 226 | /// Find first `.fsx` file and format it using F# Formatting 227 | /// (and also extract meta-data from the first paragraph) 228 | let script = Directory.GetFiles(fableRoot path, "*.fsx") |> Seq.head 229 | use f = TempFile.New() 230 | let attrs = System.Collections.Generic.Dictionary<_, _>() 231 | Literate.ProcessScriptFile(script, output=f.Name, generateAnchors=true, customizeDocument = fun _ doc -> 232 | let kvps, pars = extractAttributes name doc.MarkdownDocument doc.Paragraphs 233 | for k, v in kvps do attrs.Add(k, v) 234 | doc.With(pars) ) 235 | let document = File.ReadAllText(f.Name) 236 | 237 | // If there is `index.html` page, read `` bit from it 238 | let (app, appHead), appStyle = 239 | let index = fableRoot path "index.html" 240 | ( if File.Exists index then 241 | let indexHtml = File.ReadAllText(index) 242 | extractMarkedPagePart "body" indexHtml, 243 | extractMarkedPagePart "head" indexHtml 244 | else "", "" ), 245 | ( if attrs.ContainsKey("app-style") then attrs.["app-style"] else "" ) 246 | 247 | let githubLink = sprintf "https://github.com/fable-compiler/fable-graphics/tree/master/samples/%s/%s" dir name 248 | // Require paths are specified using ` .. ` - drop 249 | let requirePaths = 250 | if not (attrs.ContainsKey("require-paths")) then "" else 251 | Regex.Match(attrs.["require-paths"], "(.*)").Groups.[1].Value 252 | 253 | let externalScript = 254 | if not (attrs.ContainsKey("external-script")) then "" else 255 | Regex.Match(attrs.["external-script"], "(.*)").Groups.[1].Value 256 | 257 | 258 | // Get `title` and `tagline` from the attrs and generate sample page 259 | let html = 260 | { Root = siteRoot; 261 | Active = "samples"; Name = name; Document = document 262 | Application = app; Head = appHead 263 | ExternalScript = externalScript 264 | Title = attrs.["title"] 265 | GithubLink = githubLink 266 | Introduction = if attrs.ContainsKey("intro") then attrs.["intro"] else "" 267 | Tagline = attrs.["tagline"] 268 | AppStyle = appStyle } 269 | |> DotLiquid.page samplePage 270 | ensureDirectory(output "samples" outerDir name) 271 | File.WriteAllText(output "samples" outerDir name "index.html", html) 272 | 273 | 274 | /// Generates pages from all samples & optionally recompiles the JS too 275 | let generateSamplePages siteRoot recompile () = 276 | traceImportant "Updating sample pages" 277 | let lastEdit path = Directory.GetFiles(path) |> Seq.map File.GetLastWriteTime |> Seq.fold max DateTime.MinValue 278 | 279 | printfn "Samples: %A" (samples |> Seq.toList) 280 | for sample, outerDir in samples do 281 | let outOfDate = 282 | if Directory.Exists(output "samples" outerDir Path.GetFileName(sample)) |> not 283 | then true 284 | else 285 | let sourceModified = lastEdit (fableRoot sample) 286 | let outputModified = lastEdit (output "samples" outerDir Path.GetFileName(sample)) 287 | sourceModified > outputModified 288 | if outOfDate then 289 | let dir = Path.GetFileName(Path.GetDirectoryName(sample)) 290 | let name = Path.GetFileName(sample) 291 | traceImportant (sprintf "Generating sample page: %s" name) 292 | generateSamplePage siteRoot dir name sample outerDir 293 | if recompile then 294 | traceImportant (sprintf "Compiling sample: %s" name) 295 | compileSample true name sample outerDir 296 | 297 | 298 | // -------------------------------------------------------------------------------------- 299 | // Local Suave server for hosting page during development (with WebSockets refresh!) 300 | // -------------------------------------------------------------------------------------- 301 | 302 | open Suave.Sockets 303 | open Suave.Sockets.Control 304 | open Suave.WebSocket 305 | open Suave.Operators 306 | 307 | let refreshEvent = new Event() 308 | 309 | let socketHandler (webSocket : WebSocket) cx = socket { 310 | while true do 311 | let! refreshed = 312 | Control.Async.AwaitEvent(refreshEvent.Publish) 313 | |> Suave.Sockets.SocketOp.ofAsync 314 | do! webSocket.send Text (Suave.Utils.ASCII.bytes "refreshed") true } 315 | 316 | let startWebServer () = 317 | let port = 8911 318 | let serverConfig = 319 | { defaultConfig with 320 | homeFolder = Some (FullName output) 321 | bindings = [ HttpBinding.mkSimple HTTP "127.0.0.1" port ] } 322 | let app = 323 | choose [ 324 | Filters.path "/websocket" >=> handShake socketHandler 325 | Writers.setHeader "Cache-Control" "no-cache, no-store, must-revalidate" 326 | >=> Writers.setHeader "Pragma" "no-cache" 327 | >=> Writers.setHeader "Expires" "0" 328 | >=> choose [ Files.browseHome; Filters.path "/" >=> Files.browseFileHome "index.html" ] ] 329 | 330 | let addMime f = function 331 | | ".wav" -> Writers.mkMimeType "audio/wav" false 332 | | ".tsv" -> Writers.mkMimeType "text/tsv" false | ext -> f ext 333 | let app ctx = app { ctx with runtime = { ctx.runtime with mimeTypesMap = addMime ctx.runtime.mimeTypesMap } } 334 | 335 | startWebServerAsync serverConfig app |> snd |> Async.Start 336 | System.Diagnostics.Process.Start (sprintf "http://localhost:%d/index.html" port) |> ignore 337 | 338 | 339 | // -------------------------------------------------------------------------------------- 340 | // FAKE targets for generating and releasing documentation 341 | // -------------------------------------------------------------------------------------- 342 | 343 | Target "CleanDocs" (fun _ -> 344 | CleanDirs [output] 345 | ) 346 | 347 | Target "GenerateDocs" (fun _ -> 348 | prepareDependencies () 349 | generateStaticPages publishSite true () 350 | generateSamplePages publishSite true () 351 | ) 352 | 353 | Target "BrowseDocs" (fun _ -> 354 | // Update static pages & sample pages (but don't recompile JS) 355 | let root = "http://localhost:8911" 356 | prepareDependencies () 357 | generateStaticPages root true () 358 | generateSamplePages root false () 359 | 360 | // Setup watchers to regenerate things as needed 361 | let watchAndRefresh f = WatchChanges (fun _ -> 362 | try f(); refreshEvent.Trigger() with e -> traceException e) 363 | use w1 = !! (source + "/**/*.*") |> watchAndRefresh (generateStaticPages root false) 364 | use w2 = !! (templates + "/*.*") |> watchAndRefresh (generateSamplePages root false >> generateStaticPages root true) 365 | use w3 = !! (samplesRoot + "/**/*.*") |> watchAndRefresh (generateSamplePages root true) 366 | 367 | // Start local server 368 | startWebServer () 369 | traceImportant "Waiting for page edits. Press ^C to kill the process." 370 | System.Threading.Thread.Sleep(-1) 371 | ) 372 | 373 | Target "PublishDocs" (fun _ -> 374 | CleanDir temp 375 | Repository.cloneSingleBranch "" githubLink publishBranch temp 376 | 377 | CopyRecursive output temp true |> tracefn "%A" 378 | StageAll temp 379 | Git.Commit.Commit temp (sprintf "Update site (%s)" (DateTime.Now.ToShortDateString())) 380 | Branches.push temp 381 | ) 382 | 383 | // -------------------------------------------------------------------------------------- 384 | // Regenerate all docs when publishing, by default just generate & browse 385 | // -------------------------------------------------------------------------------------- 386 | 387 | "CleanDocs" 388 | ==> "GenerateDocs" 389 | ==> "PublishDocs" 390 | 391 | RunTargetOrDefault "BrowseDocs" 392 | -------------------------------------------------------------------------------- /docs/helpers.fs: -------------------------------------------------------------------------------- 1 | module Helpers 2 | open System.IO 3 | open Fake 4 | open System 5 | 6 | /// Recursively process all files in the directory tree 7 | let rec processDirectory force indir outdir (exts:seq<_>) func = 8 | let exts = exts |> Seq.map (fun (s:string) -> s.ToLower()) |> set 9 | ensureDirectory outdir 10 | for d in Directory.EnumerateDirectories(indir) do 11 | let name = Path.GetFileName(d) 12 | processDirectory force (Path.Combine(indir, name)) (Path.Combine(outdir, name)) exts func 13 | for file in Directory.GetFiles(indir, "*.*") do 14 | let dir = Path.GetDirectoryName(file) 15 | let name = Path.GetFileNameWithoutExtension(file) 16 | let output = Path.Combine(outdir, sprintf "%s.html" name) 17 | 18 | // Update only when needed 19 | let changeTime = File.GetLastWriteTime(file) 20 | let generateTime = File.GetLastWriteTime(output) 21 | let ext = Path.GetExtension file 22 | if force || changeTime > generateTime then 23 | if exts.Contains(ext) then 24 | func file outdir 25 | 26 | let rec directoryCopy(sourceDirName, destDirName, copySubDirs) = 27 | // Get the subdirectories for the specified directory. 28 | let dir = DirectoryInfo sourceDirName 29 | if not(dir.Exists) then 30 | DirectoryNotFoundException( 31 | "Source directory does not exist or could not be found: " 32 | + sourceDirName) |> raise 33 | 34 | let dirs = dir.GetDirectories() 35 | // If the destination directory doesn't exist, create it. 36 | if not(Directory.Exists(destDirName)) then 37 | Directory.CreateDirectory(destDirName) |> ignore 38 | 39 | // Get the files in the directory and copy them to the new location. 40 | let files = dir.GetFiles() 41 | for file in files do 42 | let temppath = Path.Combine(destDirName, file.Name) 43 | file.CopyTo(temppath, true) |> ignore 44 | 45 | // If copying subdirectories, copy them and their contents to new location. 46 | if copySubDirs then 47 | for subdir in dirs do 48 | let temppath = Path.Combine(destDirName, subdir.Name) 49 | directoryCopy(subdir.FullName, temppath, copySubDirs) 50 | 51 | /// Generates a temp file and deletes it when disposed (to be used via `use`) 52 | type TempFile() = 53 | let name = System.IO.Path.GetTempFileName() 54 | member x.Name = name 55 | static member New() = new TempFile() 56 | interface System.IDisposable with 57 | member x.Dispose() = 58 | File.Delete(name) 59 | 60 | 61 | /// Utils for running NPM and Node 62 | module Util = 63 | let run workingDir fileName args = 64 | let ok = 65 | execProcess (fun info -> 66 | info.FileName <- fileName 67 | info.WorkingDirectory <- workingDir 68 | info.Arguments <- args) TimeSpan.MaxValue 69 | if not ok then failwith (sprintf "'%s> %s %s' task failed" workingDir fileName args) 70 | 71 | module Node = 72 | let run workingDir script args = 73 | let args = sprintf "%s %s" script (String.concat " " args) 74 | Util.run workingDir "node" args 75 | 76 | module Npm = 77 | let npmFilePath args = 78 | if EnvironmentHelper.isUnix 79 | then "npm", args 80 | else "cmd", ("/C npm " + args) 81 | 82 | let run workingDir script args = 83 | sprintf "%s %s" script (String.concat " " args) 84 | |> npmFilePath ||> Util.run workingDir 85 | 86 | let install workingDir modules = 87 | run workingDir "install" modules 88 | -------------------------------------------------------------------------------- /docs/liquid.fs: -------------------------------------------------------------------------------- 1 | module Suave.DotLiquid 2 | 3 | open System 4 | open System.IO 5 | open DotLiquid 6 | open Microsoft.FSharp.Reflection 7 | 8 | // ------------------------------------------------------------------------------------------------- 9 | // Registering things with DotLiquid 10 | // ------------------------------------------------------------------------------------------------- 11 | 12 | /// Represents a local file system relative to the specified 'root' 13 | let private localFileSystem roots = 14 | { new DotLiquid.FileSystems.IFileSystem with 15 | member this.ReadTemplateFile(context, templateName) = 16 | let templatePath = context.[templateName] :?> string 17 | let fullPath = 18 | roots |> Seq.pick (fun root -> 19 | let fn = Path.Combine(root, templatePath) 20 | if File.Exists fn then Some fn else None) 21 | if not (File.Exists(fullPath)) then failwithf "File not found: %s" fullPath 22 | File.ReadAllText(fullPath) } 23 | 24 | /// Protects accesses to various DotLiquid internal things 25 | let private safe = 26 | let o = obj() 27 | fun f -> lock o f 28 | 29 | /// Given a type which is an F# record containing seq<_>, list<_> and other 30 | /// records, register the type with DotLiquid so that its fields are accessible 31 | let private registerTypeTree = 32 | let registered = System.Collections.Generic.Dictionary<_, _>() 33 | let rec loop ty = 34 | if not (registered.ContainsKey ty) then 35 | if FSharpType.IsRecord ty then 36 | let fields = FSharpType.GetRecordFields(ty) 37 | Template.RegisterSafeType(ty, [| for f in fields -> f.Name |]) 38 | for f in fields do loop f.PropertyType 39 | elif ty.IsGenericType && 40 | ( let t = ty.GetGenericTypeDefinition() 41 | in t = typedefof> || t = typedefof> ) then 42 | loop (ty.GetGenericArguments().[0]) 43 | registered.[ty] <- true 44 | fun ty -> safe (fun () -> loop ty) 45 | 46 | /// Use the ruby naming convention by default 47 | do Template.NamingConvention <- DotLiquid.NamingConventions.RubyNamingConvention() 48 | 49 | // ------------------------------------------------------------------------------------------------- 50 | // Parsing and loading DotLiquid templates and caching the results 51 | // ------------------------------------------------------------------------------------------------- 52 | 53 | /// Memoize asynchronous function. An item is recomputed when `isValid` returns `false` 54 | let private asyncMemoize isValid f = 55 | let cache = Collections.Concurrent.ConcurrentDictionary<_ , _>() 56 | fun x -> async { 57 | match cache.TryGetValue(x) with 58 | | true, res when isValid x res -> return res 59 | | _ -> 60 | let! res = f x 61 | cache.[x] <- res 62 | return res } 63 | 64 | /// Parse the specified template & register the type that we want to use as "model" 65 | let private parseTemplate template ty = 66 | registerTypeTree ty 67 | let t = Template.Parse(template) 68 | fun k v -> t.Render(Hash.FromDictionary(dict [k, v])) 69 | 70 | /// Asynchronously loads a template & remembers the last write time 71 | /// (so that we can automatically reload the template when file changes) 72 | let private loadTemplate (ty, fileName) = async { 73 | let writeTime = File.GetLastWriteTime(fileName) 74 | use file = new FileStream(fileName, FileMode.Open, FileAccess.Read, FileShare.ReadWrite) 75 | use reader = new StreamReader(file) 76 | let! razorTemplate = reader.ReadToEndAsync() |> Async.AwaitTask 77 | return writeTime, parseTemplate razorTemplate ty } 78 | 79 | /// Load template & memoize & automatically reload when the file changes 80 | let private loadTemplateCached = 81 | loadTemplate |> asyncMemoize (fun (_, templatePath) (lastWrite, _) -> 82 | File.GetLastWriteTime(templatePath) <= lastWrite ) 83 | 84 | // ------------------------------------------------------------------------------------------------- 85 | // Public API 86 | // ------------------------------------------------------------------------------------------------- 87 | 88 | let mutable private templatesDirs : string list option = None 89 | 90 | /// Set the root directory where DotLiquid is looking for templates. For example, you can 91 | /// write something like this: 92 | /// 93 | /// DotLiquid.setTemplatesDirs (__SOURCE_DIRECTORY__ + "/templates") 94 | /// 95 | /// The current directory is a global variable and so it should not change between 96 | /// multiple HTTP requests. This is a DotLiquid limitation. 97 | let setTemplatesDirs dirs = 98 | if templatesDirs <> Some dirs then 99 | templatesDirs <- Some dirs 100 | safe (fun () -> Template.FileSystem <- localFileSystem dirs) 101 | 102 | /// Render a page using DotLiquid template. Takes a path (relative to the directory specified 103 | /// using `setTemplatesDirs` and a value that is exposed as the "model" variable. You can use 104 | /// any F# record type, seq<_> and list<_> without having to explicitly register the fields. 105 | /// 106 | /// type Page = { Total : int } 107 | /// let app = page "index.html" { Total = 42 } 108 | /// 109 | let page<'T> path (model : 'T) = 110 | let path = 111 | if Path.IsPathRooted path then path else 112 | match templatesDirs with 113 | | None -> failwith "Templates directory not set!" 114 | | Some roots -> 115 | roots |> Seq.pick (fun root -> 116 | let fn = Path.Combine(root, path) 117 | if File.Exists fn then Some fn else None) 118 | let writeTime, renderer = 119 | loadTemplateCached (typeof<'T>, path) 120 | |> Async.RunSynchronously 121 | renderer "model" (box model) 122 | 123 | /// Register functions from a module as filters available in DotLiquid templates. 124 | /// For example, the following snippet lets you write `{{ model.Total | nuce_num }}`: 125 | /// 126 | /// module MyFilters = 127 | /// let niceNum i = if i > 10 then "lot" else "not much" 128 | /// 129 | /// do registerFiltersByName "MyFilters" 130 | /// 131 | let registerFiltersByName name = 132 | let asm = System.Reflection.Assembly.GetExecutingAssembly() 133 | let typ = 134 | [ for t in asm.GetTypes() do 135 | if t.FullName.EndsWith(name) && not(t.FullName.Contains(" Seq.last 137 | Template.RegisterFilter(typ) 138 | 139 | /// Similar to `registerFiltersByName`, but the module is speicfied by its `System.Type` 140 | /// (This is more cumbersome, but safer alternative.) 141 | let registerFiltersByType typ = 142 | Template.RegisterFilter(typ) 143 | -------------------------------------------------------------------------------- /docs/source/content/custom.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Josefin Sans', sans-serif; 3 | } 4 | 5 | /* Navigation bar - links at the top */ 6 | .fb-navbar { 7 | background:#202020; 8 | padding:0px; 9 | } 10 | .navbar { 11 | font-size:18pt; 12 | background:transparent; 13 | border-style:none; 14 | margin:0px; 15 | } 16 | .navbar .navbar-brand { 17 | padding:15px 40px 15px 0px; 18 | font-weight:600; 19 | font-size:22pt; 20 | color:#686868; 21 | } 22 | .navbar li a { 23 | font-weight:300; 24 | font-size:18pt; 25 | padding:15px 25px 15px 25px; 26 | } 27 | .nav .active a { 28 | background-color:#303030 !important; 29 | color:#e0e0e0 !important; 30 | } 31 | .nav li > a:hover { 32 | color:#e0e0e0 !important; 33 | } 34 | .navbar-wrapper { 35 | max-width:550px; 36 | margin:0px auto 0px auto; 37 | } 38 | 39 | 40 | 41 | /* Heading - purple box */ 42 | .fb-heading { 43 | background:#7A325D; 44 | color:#f0f0f0; 45 | padding:25px 0px 40px 0px; 46 | text-align:center; 47 | } 48 | .fb-heading h1 { 49 | font-weight:400; 50 | font-size:35pt; 51 | } 52 | .fb-heading p { 53 | font-size:20pt; 54 | } 55 | 56 | 57 | /* Standard page formatting */ 58 | .fb-content { 59 | padding:30px 20px 80px 20px; 60 | } 61 | .fb-content-wrapper p, .fb-content-wrapper li { 62 | font-size:14pt; 63 | } 64 | .fb-content-wrapper code { 65 | font:11pt 'Roboto Mono',consolas,monospace; 66 | } 67 | .fb-content-wrapper h1 { 68 | font-size:30pt; 69 | font-weight:500; 70 | } 71 | .fb-content-wrapper h2 { 72 | font-size:24pt; 73 | font-weight:500; 74 | } 75 | .fb-content-wrapper h3 { 76 | font-size:16pt; 77 | font-weight:700; 78 | } 79 | .fb-content-wrapper h3 .anchor, .fb-content-wrapper h2 .anchor, .fb-content-wrapper h1 .anchor { 80 | color:#7A325D; 81 | } 82 | .fb-content-wrapper h3 a.anchor:hover, .fb-content-wrapper h2 a.anchor:hover, .fb-content-wrapper h1 a.anchor:hover { 83 | text-decoration:none; 84 | } 85 | .fb-content-wrapper table code { 86 | background:transparent; 87 | } 88 | .fb-content-wrapper table p { 89 | margin:0px; 90 | } 91 | .fb-content-wrapper th { 92 | background:#f0f0f0; 93 | } 94 | .fb-content-wrapper tr:nth-child(even) { 95 | background:#f8f8f8; 96 | } 97 | .fb-content-wrapper td, .fb-content-wrapper th { 98 | padding:2px 10px 2px 10px; 99 | } 100 | .fb-content-wrapper table { 101 | margin:0px 20px 0px 20px; 102 | border-left:1px solid #e0e0e0; 103 | border-top:1px solid #e0e0e0; 104 | } 105 | .fb-content-wrapper td, .fb-content-wrapper th { 106 | border-right:1px solid #e0e0e0; 107 | border-bottom:1px solid #e0e0e0; 108 | } 109 | .fb-content-wrapper .pre, .fb-content-wrapper .pre td { 110 | border-style:none; 111 | } 112 | 113 | /* Styles for some of the special pages */ 114 | .fb-docs .fa { 115 | margin:0px 10px 5px 10px; 116 | float:right; 117 | font-size:40px; 118 | } 119 | .fb-gettingstarted { 120 | background:#f4f4f4; 121 | margin:30px 0px 30px 0px; 122 | } 123 | .fb-buzzwords { 124 | padding:30px 0px 30px 0px; 125 | } 126 | .fb-buzzwords p { 127 | font-size:14pt; 128 | } 129 | .fb-buzzwords .fa { 130 | margin:25px 20px 20px 0px; 131 | float:left; 132 | font-size:40px; 133 | } 134 | .fb-homepage pre { 135 | font-size:11pt; 136 | line-height:18pt; 137 | padding:12px; 138 | } 139 | @media(max-width:768px) { 140 | .fb-gettingstarted { 141 | padding:0px 20px 0px 20px; 142 | } 143 | .fb-buzzwords { 144 | padding:20px 30px 20px 30px; 145 | } 146 | } 147 | 148 | 149 | 150 | /* Hide GitHub button so that it does not overlap with menu */ 151 | .gh-forkme { display:none; } 152 | @media (min-width: 768px) { 153 | .gh-forkme { display:block; } 154 | } 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | /**/ 163 | -------------------------------------------------------------------------------- /docs/source/content/snippets.css: -------------------------------------------------------------------------------- 1 | /*-------------------------------------------------------------------------- 2 | Formatting for F# code snippets 3 | /*--------------------------------------------------------------------------*/ 4 | 5 | /* strings --- and stlyes for other string related formats */ 6 | span.s { color:#E0E268; } 7 | /* printf formatters */ 8 | span.pf { color:#E0C57F; } 9 | /* escaped chars */ 10 | span.e { color:#EA8675; } 11 | 12 | /* identifiers --- and styles for more specific identifier types */ 13 | span.i { color:#d1d1d1; } 14 | /* type or module */ 15 | span.t { color:#43AEC6; } 16 | /* function */ 17 | span.f { color:#e1e1e1; } 18 | /* DU case or active pattern */ 19 | span.p { color:#4ec9b0; } 20 | 21 | /* keywords */ 22 | span.k { color:#FAB11D; } 23 | /* comment */ 24 | span.c { color:#808080; } 25 | /* operators */ 26 | span.o { color:#af75c1; } 27 | /* numbers */ 28 | span.n { color:#96C71D; } 29 | /* line number */ 30 | span.l { color:#80b0b0; } 31 | /* mutable var or ref cell */ 32 | span.v { color:#d1d1d1; font-weight: bold; } 33 | /* inactive code */ 34 | span.inactive { color:#808080; } 35 | /* preprocessor */ 36 | span.prep { color:#af75c1; } 37 | /* fsi output */ 38 | span.fsi { color:#808080; } 39 | 40 | /* omitted */ 41 | span.omitted { 42 | background:#3c4e52; 43 | border-radius:5px; 44 | color:#808080; 45 | padding:0px 0px 1px 0px; 46 | } 47 | /* tool tip */ 48 | div.tip { 49 | background:#475b5f; 50 | border-radius:4px; 51 | font-size:11pt; 52 | padding:6px 8px 6px 8px; 53 | display:none; 54 | color:#d1d1d1; 55 | z-index:1; 56 | } 57 | table.pre pre { 58 | padding:0px; 59 | margin:0px; 60 | border:none; 61 | } 62 | table.pre, pre.fssnip, pre { 63 | line-height:13pt; 64 | border:1px solid #d8d8d8; 65 | border-collapse:separate; 66 | white-space:pre; 67 | font: 9pt 'Roboto Mono',consolas,monospace; 68 | width:90%; 69 | margin:10px 20px 20px 20px; 70 | background-color:#343434; 71 | padding:10px; 72 | border-radius:5px; 73 | color:#d1d1d1; 74 | } 75 | pre.fssnip code { 76 | font: 9pt 'Roboto Mono',consolas,monospace; 77 | } 78 | table.pre pre { 79 | padding:0px; 80 | margin:0px; 81 | border-radius:0px; 82 | width: 100%; 83 | } 84 | table.pre td { 85 | padding:0px; 86 | white-space:normal; 87 | margin:0px; 88 | } 89 | table.pre td.lines { 90 | width:30px; 91 | } 92 | 93 | pre { 94 | word-wrap: inherit; 95 | overflow: hidden; 96 | } 97 | -------------------------------------------------------------------------------- /docs/source/content/tips.js: -------------------------------------------------------------------------------- 1 | var currentTip = null; 2 | var currentTipElement = null; 3 | 4 | function hideTip(evt, name, unique) { 5 | var el = document.getElementById(name); 6 | el.style.display = "none"; 7 | currentTip = null; 8 | } 9 | 10 | function findPos(obj) { 11 | var curleft = 0; 12 | var curtop = obj.offsetHeight; 13 | while (obj) { 14 | var pos = $(obj).css("position"); 15 | if (pos == "relative" || pos == "absolute") break; 16 | curleft += obj.offsetLeft; 17 | curtop += obj.offsetTop; 18 | obj = obj.offsetParent; 19 | }; 20 | return [curleft, curtop]; 21 | } 22 | 23 | function hideUsingEsc(e) { 24 | if (!e) { e = event; } 25 | hideTip(e, currentTipElement, currentTip); 26 | } 27 | 28 | function showTip(evt, name, unique, owner) { 29 | document.onkeydown = hideUsingEsc; 30 | if (currentTip == unique) return; 31 | currentTip = unique; 32 | currentTipElement = name; 33 | 34 | var pos = findPos(owner ? owner : (evt.srcElement ? evt.srcElement : evt.target)); 35 | var posx = pos[0]; 36 | var posy = pos[1]; 37 | 38 | var el = document.getElementById(name); 39 | var parent = (document.documentElement == null) ? document.body : document.documentElement; 40 | el.style.position = "absolute"; 41 | el.style.left = posx + "px"; 42 | el.style.top = posy + "px"; 43 | el.style.display = "block"; 44 | } -------------------------------------------------------------------------------- /docs/source/images/fsharp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fable-compiler/fable-graphics/777629763c49a7632dd7885b058e9aa21cbf28c3/docs/source/images/fsharp.png -------------------------------------------------------------------------------- /docs/source/images/hpscreen.pdn: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fable-compiler/fable-graphics/777629763c49a7632dd7885b058e9aa21cbf28c3/docs/source/images/hpscreen.pdn -------------------------------------------------------------------------------- /docs/source/images/hpscreen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fable-compiler/fable-graphics/777629763c49a7632dd7885b058e9aa21cbf28c3/docs/source/images/hpscreen.png -------------------------------------------------------------------------------- /docs/source/index.md: -------------------------------------------------------------------------------- 1 | - tagline: Explore Fable-graphics through demos! 2 | 3 | # Fable-graphics 4 | 5 | Fable-graphics is a project grouping several binding for graphics library with Fable. 6 | 7 | The current bindings available are: 8 | 9 | - [dc.js](http://dc-js.github.io/dc.js/) 10 | - [d3js](https://d3js.org/) 11 | - [PixiJS](http://www.pixijs.com/) (only v3 for the moment) 12 | - [Three.js](http://threejs.org/) 13 | 14 | You can also contribute more examples by sending us a pull 15 | request [for the samples directory](https://github.com/fable-compiler/fable-graphics/tree/master/samples)! 16 | 17 | ## Samples 18 | 19 | ### dc.js 20 | 21 | *No sample available for the moment* 22 | 23 | ### d3.js 24 | 25 | * [Bar chart](samples/d3/barchart/index.html) 26 | 27 | ### PixiJS 28 | 29 | Here is a selection of some official Pixi.js sampes ported to F#/Fable. 30 | They work with Pixi.js v3.0.11 and v4.x.x although we don't support v4 officially at the moment. 31 | 32 | Each sample displays both the resulting animation and the F# source code 33 | 34 | * [Basic - Your very first pixi sample](samples/pixi/basic/index.html) 35 | * [Graphics - How to use the graphics API](samples/pixi/graphics/index.html) 36 | * [Dragging - Play with mouse events and add interactivity](samples/pixi/dragging/index.html) 37 | * [Blur Filter - How to use a common filter](samples/pixi/blur-filter/index.html) 38 | * [Text - Add simple text and bitmap text with style!](samples/pixi/text/index.html) 39 | * [MovieClip - Load your spritesheet in a movieclip fashion](samples/pixi/movieclip/index.html) 40 | * [Particles - Zounds of sprites with ParticleContainer!](samples/pixi/particle-container/index.html) 41 | * [Render Texture - Eye bleeding effects! ](samples/pixi/render-texture/index.html) 42 | * [Masking - Masking unleashed! ](samples/pixi/masking/index.html) 43 | 44 | ### Three.js 45 | 46 | *No sample available for the moment* 47 | -------------------------------------------------------------------------------- /docs/source/samples.md: -------------------------------------------------------------------------------- 1 | - tagline: Explore Fable-graphics through fun demos! 2 | 3 | # Fable-graphics samples 4 | 5 | Fable-graphics is great for building modern web application following the [elm architecture](http://guide.elm-lang.org/architecture/index.html). 6 | Hopefully the samples here show you how to get started and gives you some inspiration about how to build your application using Fable-graphics. 7 | 8 | You can also contribute more examples by sending us a pull 9 | request [for the samples directory](https://github.com/fable-compiler/fable-graphics/tree/master/samples)! 10 | 11 | ## Sample applications 12 | 13 | * [Hello world - simple application with one input](samples/helloworld/index.html) 14 | * [Clock - demo of how to have the app consume events from outside the app using a producer](samples/clock/index.html) 15 | -------------------------------------------------------------------------------- /docs/source/samples/images/add.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fable-compiler/fable-graphics/777629763c49a7632dd7885b058e9aa21cbf28c3/docs/source/samples/images/add.png -------------------------------------------------------------------------------- /docs/templates/content.html: -------------------------------------------------------------------------------- 1 | {% extends "page.html" %} 2 | {% block head %} 3 | {{ model.Heading }} - F# |> BABEL 4 | 5 | {% endblock %} 6 | 7 | {% block content %} 8 |
    9 |
    10 |
    11 |
    12 |

    {{ model.Heading }}

    13 |

    {{ model.Tagline }}

    14 |
    15 |
    16 |
    17 |
    18 | 19 |
    20 |
    21 |
    22 |
    23 | {{ model.Content }} 24 |
    25 |
    26 |
    27 |
    28 | {% endblock %} 29 | -------------------------------------------------------------------------------- /docs/templates/page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 32 | {% block head %} 33 | {% endblock %} 34 | 35 | 36 | 37 |
    38 |
    39 | 60 |
    61 |
    62 | 63 |
    64 | {% block content %} {% endblock %} 65 |
    66 | 67 | Fork me on GitHub 68 | 69 | 70 | -------------------------------------------------------------------------------- /docs/templates/sample.html: -------------------------------------------------------------------------------- 1 | {% extends "page.html" %} 2 | {% block head %} 3 | {{ model.Title }} - F# |> BABEL 4 | {{ model.Head }} 5 | 6 | {% endblock %} 7 | 8 | {% block content %} 9 |
    10 |
    11 |
    12 |
    13 |

    {{ model.Title }}

    14 |

    {{ model.Tagline }} (go to source)

    15 |
    16 |
    17 |
    18 |
    19 | 20 |
    21 |
    22 |
    23 |
    24 |

    {{ model.Introduction }}

    25 |
    26 |
    27 |
    28 | 29 | 30 | 31 |
    32 |
    33 |
    34 | {{ model.Application }} 35 |
    36 |
    37 |
    38 | 39 |
    40 |
    41 |
    42 | {{ model.Document }} 43 |
    44 |
    45 |
    46 |
    47 | {% endblock %} 48 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "fable-graphics", 4 | "version": "1.0.0", 5 | "description": "Fable bindings and helpers for graphic JS tools", 6 | "main": "index.js", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/fable-compiler/fable-graphics.git" 13 | }, 14 | "keywords": [], 15 | "author": "", 16 | "license": "ISC", 17 | "bugs": { 18 | "url": "https://github.com/fable-graphics/issues" 19 | }, 20 | "homepage": "https://github.com/fable-graphics#readme", 21 | "devDependencies": { 22 | "fable-core": "^0.7.25" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /paket.dependencies: -------------------------------------------------------------------------------- 1 | source https://www.nuget.org/api/v2 2 | nuget FAKE 3 | nuget FSharp.Core 4 | 5 | group Docs 6 | source https://www.nuget.org/api/v2 7 | 8 | nuget FAKE 9 | nuget Suave 10 | nuget DotLiquid 11 | nuget FSharp.Formatting 2.14.4 -------------------------------------------------------------------------------- /paket.lock: -------------------------------------------------------------------------------- 1 | NUGET 2 | remote: https://www.nuget.org/api/v2 3 | FAKE (4.37.2) 4 | FSharp.Core (4.0.0.1) 5 | 6 | GROUP Docs 7 | NUGET 8 | remote: https://www.nuget.org/api/v2 9 | DotLiquid (2.0.26) 10 | FAKE (4.37.2) 11 | FSharp.Compiler.Service (2.0.0.6) 12 | FSharp.Core (4.0.0.1) 13 | FSharp.Formatting (2.14.4) 14 | FSharp.Compiler.Service (2.0.0.6) 15 | FSharpVSPowerTools.Core (>= 2.3 < 2.4) 16 | FSharpVSPowerTools.Core (2.3) 17 | FSharp.Compiler.Service (>= 2.0.0.3) 18 | Suave (1.1.3) 19 | FSharp.Core (>= 3.1.2.5) 20 | -------------------------------------------------------------------------------- /samples/README.md: -------------------------------------------------------------------------------- 1 | # fable-graphics-samples 2 | 3 | * [node.js](http://nodejs.org) and [F#](http://fsharp.org) must be installed in your system. 4 | 5 | * Install first common dependencies. In this directory, type: `npm install` 6 | 7 | * To build any sample, go to its directory (e.g. `samples/pixi/basic`) 8 | and type: `npm run build` 9 | 10 | * After that, to run the sample, in the same directory type: `npm start` -------------------------------------------------------------------------------- /samples/d3/barchart/README.md: -------------------------------------------------------------------------------- 1 | # To build and run the sample 2 | 3 | * [node.js](http://nodejs.org) and [F#](http://fsharp.org) must be installed in your system. 4 | 5 | * Be sure common dependencies are installed (in `samples` directory, type: `npm install`). 6 | 7 | * To compile the F# code to JS, in this directory type: `npm run build` 8 | 9 | * To start a local server and open a web with the sample, type: `npm start` 10 | 11 | > If you want to listen for changes and recompile 12 | the F# code, you can use `npm build -- --watch`. 13 | Then you need to run `npm start` in a different 14 | terminal window. 15 | -------------------------------------------------------------------------------- /samples/d3/barchart/barchart.fsx: -------------------------------------------------------------------------------- 1 | (** 2 | - title: Bar chart sample 3 | - tagline: Bar chart implemented using Fable-D3 bindings 4 | - app-style: width:800px; margin:20px auto 50px auto; 5 | - intro: Creating a bar chart using Fable-D3 bindings 6 | *) 7 | 8 | #r "../../node_modules/fable-core/Fable.Core.dll" 9 | #load "../../node_modules/fable-import-d3/Fable.Import.D3.fs" 10 | 11 | open Fable.Core 12 | open Fable.Core.JsInterop 13 | open Fable.Import 14 | open Fable.Import.Browser 15 | 16 | let random = new System.Random() 17 | let dataset = Array.init 25 (fun _ -> (random.Next(3,25))) 18 | let barHeight x = x * 5 19 | let barPadding = 1. 20 | let width = 500. 21 | let height = 100. 22 | let dataSetLength = float dataset.Length 23 | 24 | let svg = D3.Globals.select("#display") 25 | .append("svg") 26 | .attr("width", U3.Case1 width) 27 | .attr("height", U3.Case1 height) 28 | 29 | svg.selectAll("rect") 30 | .data(dataset) 31 | |> fun x -> (unbox> x).enter() 32 | |> fun x -> x.append("rect") 33 | |> fun x -> x.attr("width", fun _ _ _ -> U3.Case1 (System.Math.Abs(width / dataSetLength - barPadding))) 34 | .attr("height", fun data _ _ -> U3.Case1 (float data * 4.)) 35 | .attr("x", fun _ x _ -> U3.Case1 (x * (width/dataSetLength))) 36 | .attr("y", fun data _ _ -> U3.Case1 (height - float data * 4.)) 37 | .attr("fill", fun data _ _ -> U3.Case2 (sprintf "rgb(63,%A,150)" (data * 10))) 38 | |> ignore 39 | 40 | 41 | svg.selectAll("text") 42 | .data(dataset) 43 | |> fun x -> (unbox> x).enter() 44 | |> fun x -> x.append("text") 45 | |> fun x -> x.text(fun data _ _ -> U3.Case2 (string data)) 46 | .attr("x", fun _ x _ -> U3.Case1 (x * (width/dataSetLength))) 47 | .attr("y", fun data _ _ -> U3.Case1 (height - (float data * 4.))) 48 | |> ignore -------------------------------------------------------------------------------- /samples/d3/barchart/fableconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "sourceMaps": true, 3 | "targets": { 4 | "umd": { 5 | "projFile": "./barchart.fsx", 6 | "rollup": { 7 | "dest": "./public/Main.js", 8 | "external": ["d3"], 9 | "globals": { 10 | "d3": "d3" 11 | }, 12 | "format": "umd" 13 | } 14 | } 15 | } 16 | } -------------------------------------------------------------------------------- /samples/d3/barchart/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 13 | 14 | 15 | 16 | 17 |

    18 | Barchart sample 19 |

    20 | 21 | 22 |
    23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /samples/d3/barchart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "fable-d3-samples", 4 | "version": "0.0.1", 5 | "description": "Creating bar chart using D3 bindings", 6 | "main": "index.js", 7 | "scripts": { 8 | "build": "node ../../node_modules/fable-compiler --target umd", 9 | "start": "node ../../server" 10 | }, 11 | "author": "Leo Lorenzo Luis", 12 | "license": "MIT" 13 | } -------------------------------------------------------------------------------- /samples/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "fable-graphics-samples", 4 | "version": "1.0.0", 5 | "description": "", 6 | "main": "index.js", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "finalhandler": "^0.5.0", 15 | "open": "0.0.5", 16 | "pixi.js": "^3.0.11", 17 | "requirejs": "^2.2.0", 18 | "serve-static": "^1.11.1", 19 | "core-js": "^2.4.1", 20 | "fable-compiler": "^0.7.19", 21 | "fable-core": "^0.7.15", 22 | "fable-import-pixi": "0.0.10", 23 | "babel-plugin-transform-runtime": "^6.15.0", 24 | "fable-import-d3": "0.0.4" 25 | } 26 | } -------------------------------------------------------------------------------- /samples/pixi/basic/README.md: -------------------------------------------------------------------------------- 1 | # To build and run the sample 2 | 3 | * [node.js](http://nodejs.org) and [F#](http://fsharp.org) must be installed in your system. 4 | 5 | * Be sure common dependencies are installed (in `samples` directory, type: `npm install`). 6 | 7 | * To compile the F# code to JS, in this directory type: `npm run build` 8 | 9 | * To start a local server and open a web with the sample, type: `npm start` 10 | 11 | > If you wan to listen for changes and recompile 12 | the F# code, you can use `npm build -- --watch`. 13 | Then you need to run `npm start` in a different 14 | terminal window. -------------------------------------------------------------------------------- /samples/pixi/basic/basic.fsx: -------------------------------------------------------------------------------- 1 | (** 2 | - title: Basic sample 3 | - tagline: Basic sample implemented with fable-pixi 4 | - app-style: width:800px; margin:20px auto 50px auto; 5 | - external-script: `"https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.11/pixi.min.js"` 6 | - intro: This is a port from [basic sample](http://pixijs.github.io/examples/#/basics/basic.js) 7 | *) 8 | 9 | #r "../../node_modules/fable-core/Fable.Core.dll" 10 | #load "../../node_modules/fable-import-pixi/Fable.Import.Pixi.fs" 11 | 12 | open System 13 | open Fable.Core 14 | open Fable.Core.JsInterop 15 | open Fable.Import.PIXI 16 | open Fable.Import.Browser 17 | 18 | importAll "core-js" 19 | 20 | let options = [ 21 | BackgroundColor (float 0x1099bb) 22 | Resolution 1. 23 | ] 24 | 25 | let renderer = 26 | Globals.autoDetectRenderer( 800., 600., options ) 27 | |> unbox 28 | 29 | let gameDiv = document.getElementById("game") 30 | gameDiv.appendChild( renderer.view ) 31 | 32 | // create the root of the scene graph 33 | let stage = Container() 34 | 35 | // create a texture from an image path 36 | let texture = Texture.fromImage("public/assets/bunny.png") 37 | 38 | // create a new Sprite using the texture 39 | let bunny = Sprite(texture) 40 | 41 | // center the sprite's anchor point 42 | bunny.anchor.x <- 0.5 43 | bunny.anchor.y <- 0.5 44 | 45 | // move the sprite 46 | bunny.position.x <- 200. 47 | bunny.position.y <- 150. 48 | 49 | // Add the bunny to the scene we are building. 50 | stage.addChild(bunny) |> ignore 51 | 52 | let rec animate (dt:float) = 53 | window.requestAnimationFrame(FrameRequestCallback animate) |> ignore 54 | 55 | // just for fun, let's rotate mr rabbit a little 56 | bunny.rotation <- bunny.rotation + 0.1 57 | 58 | // render the container 59 | renderer.render(stage) 60 | 61 | // start animating 62 | animate 0. 63 | -------------------------------------------------------------------------------- /samples/pixi/basic/fableconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "projFile": "./basic.fsx", 3 | "sourceMaps": true, 4 | "babelPlugins": ["transform-runtime"], 5 | "rollup": { 6 | "dest": "public/bundle.js", 7 | // PIXI will be loaded directly from a script tag 8 | "external": ["PIXI"], 9 | "globals": { 10 | "PIXI": "PIXI" 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /samples/pixi/basic/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Herebris - IMGUI 6 | 14 | 15 | 16 | 17 | 18 | 19 |
    20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /samples/pixi/basic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "fable-pixi-samples", 4 | "version": "0.0.1", 5 | "description": "F# port of pixi.js official samples", 6 | "main": "index.js", 7 | "scripts": { 8 | "build": "node ../../node_modules/fable-compiler", 9 | "start": "node ../../server" 10 | }, 11 | "author": "François Nicaise", 12 | "license": "MIT" 13 | } 14 | -------------------------------------------------------------------------------- /samples/pixi/basic/public/assets/bunny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fable-compiler/fable-graphics/777629763c49a7632dd7885b058e9aa21cbf28c3/samples/pixi/basic/public/assets/bunny.png -------------------------------------------------------------------------------- /samples/pixi/blur-filter/README.md: -------------------------------------------------------------------------------- 1 | # To build and run the sample 2 | 3 | * [node.js](http://nodejs.org) and [F#](http://fsharp.org) must be installed in your system. 4 | 5 | * Be sure common dependencies are installed (in `samples` directory, type: `npm install`). 6 | 7 | * To compile the F# code to JS, in this directory type: `npm run build` 8 | 9 | * To start a local server and open a web with the sample, type: `npm start` 10 | 11 | > If you wan to listen for changes and recompile 12 | the F# code, you can use `npm build -- --watch`. 13 | Then you need to run `npm start` in a different 14 | terminal window. -------------------------------------------------------------------------------- /samples/pixi/blur-filter/blur-filter.fsx: -------------------------------------------------------------------------------- 1 | (** 2 | - title: Blur Filter sample 3 | - tagline: Basic sample implemented with fable-pixi 4 | - app-style: width:800px; margin:20px auto 50px auto; 5 | - external-script: `"https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.11/pixi.min.js"` 6 | - intro: This is a port from [blur filter sample](http://pixijs.github.io/examples/#/filters/blur-filter.js) 7 | *) 8 | 9 | #r "../../node_modules/fable-core/Fable.Core.dll" 10 | #load "../../node_modules/fable-import-pixi/Fable.Import.Pixi.fs" 11 | 12 | open System 13 | open Fable.Core 14 | open Fable.Core.JsInterop 15 | open Fable.Import.PIXI 16 | open Fable.Import.Browser 17 | open Fable.Import.JS 18 | 19 | importAll "core-js" 20 | 21 | let renderer = 22 | Globals.autoDetectRenderer(800., 600.) 23 | |> unbox 24 | 25 | let gameDiv = document.getElementById("game") 26 | gameDiv.appendChild( renderer.view ) 27 | 28 | // create the root of the scene graph 29 | let stage = Container() 30 | 31 | let bg = Sprite.fromImage("./public/assets/depth_blur_BG.jpg") 32 | bg.width <- renderer.width 33 | bg.height <- renderer.height 34 | stage.addChild(bg) 35 | 36 | let littleDudes = Sprite.fromImage("./public/assets/depth_blur_dudes.jpg") 37 | littleDudes.position.x <- (renderer.width / 2.) - 315. 38 | littleDudes.position.y <- 200. 39 | stage.addChild(littleDudes) 40 | 41 | let littleRobot = Sprite.fromImage("./public/assets/depth_blur_moby.jpg") 42 | littleRobot.position.x <- (renderer.width / 2.) - 200. 43 | littleRobot.position.y <- 100. 44 | stage.addChild(littleRobot) 45 | 46 | let blurFilter1 = filters.BlurFilter() 47 | let blurFilter2 = filters.BlurFilter() 48 | 49 | littleDudes.filters <- Some(ResizeArray[|blurFilter1 :> AbstractFilter|]) 50 | littleRobot.filters <- Some(ResizeArray[|blurFilter2 :> AbstractFilter|]) 51 | 52 | let rec animate = 53 | let mutable count = 0. 54 | let rec animate (dt:float) = 55 | count <- count + 0.005 56 | let blurAmount = Math.cos(count) 57 | let blurAmount2 = Math.sin(count) 58 | blurFilter1.blur <- 20. * (blurAmount) 59 | blurFilter2.blur <- 20. * (blurAmount2) 60 | window.requestAnimationFrame(FrameRequestCallback animate) |> ignore 61 | renderer.render(stage) 62 | animate 63 | 64 | // start animating 65 | animate 0. 66 | -------------------------------------------------------------------------------- /samples/pixi/blur-filter/fableconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "projFile": "./blur-filter.fsx", 3 | "sourceMaps": true, 4 | "babelPlugins": ["transform-runtime"], 5 | "rollup": { 6 | "dest": "public/bundle.js", 7 | // PIXI will be loaded directly from a script tag 8 | "external": ["PIXI"], 9 | "globals": { 10 | "PIXI": "PIXI" 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /samples/pixi/blur-filter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Herebris - IMGUI 6 | 14 | 15 | 16 | 17 | 18 | 19 |
    20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /samples/pixi/blur-filter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "fable-pixi-samples", 4 | "version": "0.0.1", 5 | "description": "F# port of pixi.js official samples", 6 | "main": "index.js", 7 | "scripts": { 8 | "build": "node ../../node_modules/fable-compiler", 9 | "start": "node ../../server" 10 | }, 11 | "author": "François Nicaise", 12 | "license": "MIT" 13 | } 14 | -------------------------------------------------------------------------------- /samples/pixi/blur-filter/public/assets/depth_blur_BG.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fable-compiler/fable-graphics/777629763c49a7632dd7885b058e9aa21cbf28c3/samples/pixi/blur-filter/public/assets/depth_blur_BG.jpg -------------------------------------------------------------------------------- /samples/pixi/blur-filter/public/assets/depth_blur_dudes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fable-compiler/fable-graphics/777629763c49a7632dd7885b058e9aa21cbf28c3/samples/pixi/blur-filter/public/assets/depth_blur_dudes.jpg -------------------------------------------------------------------------------- /samples/pixi/blur-filter/public/assets/depth_blur_moby.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fable-compiler/fable-graphics/777629763c49a7632dd7885b058e9aa21cbf28c3/samples/pixi/blur-filter/public/assets/depth_blur_moby.jpg -------------------------------------------------------------------------------- /samples/pixi/dragging/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fable-compiler/fable-graphics/777629763c49a7632dd7885b058e9aa21cbf28c3/samples/pixi/dragging/.DS_Store -------------------------------------------------------------------------------- /samples/pixi/dragging/README.md: -------------------------------------------------------------------------------- 1 | # To build and run the sample 2 | 3 | * [node.js](http://nodejs.org) and [F#](http://fsharp.org) must be installed in your system. 4 | 5 | * Be sure common dependencies are installed (in `samples` directory, type: `npm install`). 6 | 7 | * To compile the F# code to JS, in this directory type: `npm run build` 8 | 9 | * To start a local server and open a web with the sample, type: `npm start` 10 | 11 | > If you wan to listen for changes and recompile 12 | the F# code, you can use `npm build -- --watch`. 13 | Then you need to run `npm start` in a different 14 | terminal window. -------------------------------------------------------------------------------- /samples/pixi/dragging/dragging.fsx: -------------------------------------------------------------------------------- 1 | (** 2 | - title: Dragging sample 3 | - tagline: Basic sample implemented with fable-pixi 4 | - app-style: width:800px; margin:20px auto 50px auto; 5 | - external-script: `"https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.11/pixi.min.js"` 6 | - intro: This is a port from [dragging sample](http://pixijs.github.io/examples/#/demos/dragging.js) 7 | *) 8 | 9 | #r "../../node_modules/fable-core/Fable.Core.dll" 10 | #load "../../node_modules/fable-import-pixi/Fable.Import.Pixi.fs" 11 | 12 | open System 13 | open Fable.Core 14 | open Fable.Core.JsInterop 15 | open Fable.Import.PIXI 16 | open Fable.Import.Browser 17 | open Fable.Import.JS 18 | 19 | importAll "core-js" 20 | 21 | let renderer = 22 | Globals.autoDetectRenderer( 800., 600. ) 23 | |> unbox 24 | 25 | let gameDiv = document.getElementById("game") 26 | gameDiv.appendChild( renderer.view ) 27 | 28 | // create the root of the scene graph 29 | let stage = Container() 30 | 31 | let texture = Texture.fromImage("./public/assets/bunny.png") 32 | 33 | type MyBunny(texture) = 34 | inherit Sprite(texture) 35 | 36 | member this.noop() = console.log("click") 37 | member this.tap = this.noop 38 | member this.click = this.noop 39 | 40 | member this.mousedown(event) = 41 | this?data <- event?data 42 | this?alpha <- 0.5 43 | this?dragging <- true 44 | 45 | member this.mouseup() = 46 | this?data <- None 47 | this?alpha <- 1. 48 | this?dragging <- false 49 | 50 | member this.mousemove() = 51 | if unbox this?dragging then 52 | let newPosition = this?data?getLocalPosition(this?parent) 53 | this.position.x <- unbox newPosition?x 54 | this.position.y <- unbox newPosition?y 55 | 56 | member this.touchstart = this.mousedown 57 | member this.touchend = this.mouseup 58 | member this.touchendoutside = this.mouseup 59 | member this.mouseupoutside = this.mouseup 60 | member this.touchmove = this.mousemove 61 | 62 | let createBunny x y = 63 | let bunny = MyBunny(texture) 64 | bunny.interactive <- true 65 | bunny.buttonMode <- true 66 | bunny.anchor.set(0.5) 67 | bunny.scale.set(3.) 68 | bunny.position.x <- x 69 | bunny.position.y <- y 70 | stage.addChild(bunny) 71 | 72 | for i in 0..9 do 73 | let x = Math.floor(Math.random() * 800.) 74 | let y = Math.floor(Math.random() * 600.) 75 | createBunny x y |> ignore 76 | 77 | let rec animate (dt:float) = 78 | window.requestAnimationFrame(FrameRequestCallback animate) |> ignore 79 | // render the container 80 | renderer.render(stage) 81 | 82 | animate 0. 83 | -------------------------------------------------------------------------------- /samples/pixi/dragging/fableconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "projFile": "./dragging.fsx", 3 | "sourceMaps": true, 4 | "babelPlugins": ["transform-runtime"], 5 | "rollup": { 6 | "dest": "public/bundle.js", 7 | // PIXI will be loaded directly from a script tag 8 | "external": ["PIXI"], 9 | "globals": { 10 | "PIXI": "PIXI" 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /samples/pixi/dragging/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Herebris - IMGUI 6 | 14 | 15 | 16 | 17 | 18 | 19 |
    20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /samples/pixi/dragging/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "fable-pixi-samples", 4 | "version": "0.0.1", 5 | "description": "F# port of pixi.js official samples", 6 | "main": "index.js", 7 | "scripts": { 8 | "build": "node ../../node_modules/fable-compiler", 9 | "start": "node ../../server" 10 | }, 11 | "author": "François Nicaise", 12 | "license": "MIT" 13 | } 14 | -------------------------------------------------------------------------------- /samples/pixi/dragging/public/assets/bunny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fable-compiler/fable-graphics/777629763c49a7632dd7885b058e9aa21cbf28c3/samples/pixi/dragging/public/assets/bunny.png -------------------------------------------------------------------------------- /samples/pixi/graphics/README.md: -------------------------------------------------------------------------------- 1 | # To build and run the sample 2 | 3 | * [node.js](http://nodejs.org) and [F#](http://fsharp.org) must be installed in your system. 4 | 5 | * Be sure common dependencies are installed (in `samples` directory, type: `npm install`). 6 | 7 | * To compile the F# code to JS, in this directory type: `npm run build` 8 | 9 | * To start a local server and open a web with the sample, type: `npm start` 10 | 11 | > If you wan to listen for changes and recompile 12 | the F# code, you can use `npm build -- --watch`. 13 | Then you need to run `npm start` in a different 14 | terminal window. -------------------------------------------------------------------------------- /samples/pixi/graphics/fableconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "projFile": "./graphics.fsx", 3 | "sourceMaps": true, 4 | "babelPlugins": ["transform-runtime"], 5 | "rollup": { 6 | "dest": "public/bundle.js", 7 | // PIXI will be loaded directly from a script tag 8 | "external": ["PIXI"], 9 | "globals": { 10 | "PIXI": "PIXI" 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /samples/pixi/graphics/graphics.fsx: -------------------------------------------------------------------------------- 1 | (** 2 | - title: Graphics sample 3 | - tagline: Basic sample implemented with fable-pixi 4 | - app-style: width:800px; margin:20px auto 50px auto; 5 | - external-script: `"https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.11/pixi.min.js"` 6 | - intro: This is a port from [graphics sample](http://pixijs.github.io/examples/#/demos/graphics-demo.js) 7 | *) 8 | 9 | #r "../../node_modules/fable-core/Fable.Core.dll" 10 | #load "../../node_modules/fable-import-pixi/Fable.Import.Pixi.fs" 11 | 12 | open System 13 | open Fable.Core 14 | open Fable.Core.JsInterop 15 | open Fable.Import.PIXI 16 | open Fable.Import.Browser 17 | open Fable.Import.JS 18 | 19 | importAll "core-js" 20 | 21 | let options = [ 22 | Antialias true 23 | ] 24 | 25 | let renderer = 26 | Globals.autoDetectRenderer(800., 600., options) 27 | |> unbox 28 | 29 | let gameDiv = document.getElementById("game") 30 | gameDiv.appendChild( renderer.view ) 31 | 32 | // create the root of the scene graph 33 | let stage = Container() 34 | 35 | let graphics = Graphics() 36 | 37 | // set a fill and line style 38 | graphics.beginFill(float 0xFF3300) 39 | graphics.lineStyle(4., float 0xffd900, 1.) 40 | 41 | // draw a shape 42 | graphics.moveTo(50.,50.) 43 | graphics.lineTo(250., 50.) 44 | graphics.lineTo(100., 100.) 45 | graphics.lineTo(50., 50.) 46 | graphics.endFill() 47 | 48 | // set a fill and line style again 49 | graphics.lineStyle(10., float 0xFF0000, 0.8) 50 | graphics.beginFill(float 0xFF700B, 1.) 51 | 52 | // draw a second shape 53 | graphics.moveTo(210.,300.) 54 | graphics.lineTo(450.,320.) 55 | graphics.lineTo(570.,350.) 56 | graphics.quadraticCurveTo(600., 0., 480.,100.) 57 | graphics.lineTo(330.,120.) 58 | graphics.lineTo(410.,200.) 59 | graphics.lineTo(210.,300.) 60 | graphics.endFill() 61 | 62 | // draw a rectangle 63 | graphics.lineStyle(2., float 0x0000FF, 1.) 64 | graphics.drawRect(50., 250., 100., 100.) 65 | 66 | // draw a circle 67 | graphics.lineStyle(0.) 68 | graphics.beginFill(float 0xFFFF0B, 0.5) 69 | graphics.drawCircle(470., 200.,100.) 70 | graphics.endFill() 71 | 72 | graphics.lineStyle(20., float 0x33FF00) 73 | graphics.moveTo(30.,30.) 74 | graphics.lineTo(600., 300.) 75 | 76 | stage.addChild(graphics) 77 | 78 | // let's create a moving shape 79 | let thing = Graphics() 80 | stage.addChild(thing) 81 | thing.position.x <- 620. / 2. 82 | thing.position.y <- 380. / 2. 83 | 84 | let onClick() = 85 | graphics.lineStyle( 86 | Math.random() * 30., Math.random() * float 0xFFFFFF, 1.) |>ignore 87 | graphics.moveTo( 88 | Math.random() * 620., Math.random() * 380.) |>ignore 89 | graphics.bezierCurveTo( 90 | Math.random() * 620., Math.random() * 380., 91 | Math.random() * 620., Math.random() * 380., 92 | Math.random() * 620., Math.random() * 380.) |> ignore 93 | 94 | stage.interactive <- true 95 | // Just click on the stage to draw random lines 96 | stage.on_click(fun _ -> onClick()) 97 | stage.on_tap(fun _ -> onClick()) 98 | 99 | let animate = 100 | let mutable count = 0. 101 | let rec animate (dt:float) = 102 | thing.clear() |> ignore 103 | count <- count + 0.1 104 | thing.clear() |> ignore 105 | thing.lineStyle(10., float 0xff0000, 1.) |> ignore 106 | thing.beginFill(float 0xffFF00, 0.5) |> ignore 107 | thing.moveTo( 108 | -120. + Math.sin(count) * 20., 109 | -100. + Math.cos(count)* 20.) |> ignore 110 | thing.lineTo( 111 | 120. + Math.cos(count) * 20., 112 | -100. + Math.sin(count)* 20.) |> ignore 113 | thing.lineTo( 114 | 120. + Math.sin(count) * 20., 115 | 100. + Math.cos(count)* 20.) |> ignore 116 | thing.lineTo( 117 | -120. + Math.cos(count)* 20., 118 | 100. + Math.sin(count)* 20.) |> ignore 119 | thing.lineTo( 120 | -120. + Math.sin(count) * 20., 121 | -100. + Math.cos(count)* 20.) |> ignore 122 | thing.rotation <- count * 0.1 123 | window.requestAnimationFrame(FrameRequestCallback animate) |> ignore 124 | renderer.render(stage) 125 | animate 126 | 127 | // start animating 128 | animate 0. 129 | -------------------------------------------------------------------------------- /samples/pixi/graphics/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Herebris - IMGUI 6 | 14 | 15 | 16 | 17 | 18 | 19 |
    20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /samples/pixi/graphics/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "fable-pixi-samples", 4 | "version": "0.0.1", 5 | "description": "F# port of pixi.js official samples", 6 | "main": "index.js", 7 | "scripts": { 8 | "build": "node ../../node_modules/fable-compiler", 9 | "start": "node ../../server" 10 | }, 11 | "author": "François Nicaise", 12 | "license": "MIT" 13 | } 14 | -------------------------------------------------------------------------------- /samples/pixi/masking/README.md: -------------------------------------------------------------------------------- 1 | # To build and run the sample 2 | 3 | * [node.js](http://nodejs.org) and [F#](http://fsharp.org) must be installed in your system. 4 | 5 | * Be sure common dependencies are installed (in `samples` directory, type: `npm install`). 6 | 7 | * To compile the F# code to JS, in this directory type: `npm run build` 8 | 9 | * To start a local server and open a web with the sample, type: `npm start` 10 | 11 | > If you wan to listen for changes and recompile 12 | the F# code, you can use `npm build -- --watch`. 13 | Then you need to run `npm start` in a different 14 | terminal window. -------------------------------------------------------------------------------- /samples/pixi/masking/fableconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "projFile": "./masking.fsx", 3 | "sourceMaps": true, 4 | "babelPlugins": ["transform-runtime"], 5 | "rollup": { 6 | "dest": "public/bundle.js", 7 | // PIXI will be loaded directly from a script tag 8 | "external": ["PIXI"], 9 | "globals": { 10 | "PIXI": "PIXI" 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /samples/pixi/masking/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Herebris - IMGUI 6 | 14 | 15 | 16 | 17 | 18 | 19 |
    20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /samples/pixi/masking/masking.fsx: -------------------------------------------------------------------------------- 1 | (** 2 | - title: Masking sample 3 | - tagline: Basic sample implemented with fable-pixi 4 | - app-style: width:800px; margin:20px auto 50px auto; 5 | - external-script: `"https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.11/pixi.min.js"` 6 | - intro: This is a port from [Masking sample](http://pixijs.github.io/examples/#/demos/masking.js) 7 | *) 8 | 9 | #r "../../node_modules/fable-core/Fable.Core.dll" 10 | #load "../../node_modules/fable-import-pixi/Fable.Import.Pixi.fs" 11 | 12 | open System 13 | open Fable.Core 14 | open Fable.Core.JsInterop 15 | open Fable.Import 16 | open Fable.Import.PIXI 17 | open Fable.Import.Browser 18 | open Fable.Import.JS 19 | 20 | importAll "core-js" 21 | 22 | let renderer = WebGLRenderer( 800., 600. ) 23 | 24 | let gameDiv = document.getElementById("game") 25 | gameDiv.appendChild( renderer.view ) 26 | 27 | // create the root of the scene graph 28 | let stage = Container() 29 | stage.interactive <- true 30 | 31 | let bg = Sprite.fromImage("./public/assets/BGrotate.jpg") 32 | 33 | bg.anchor.x <- 0.5 34 | bg.anchor.y <- 0.5 35 | 36 | bg.position.x <- renderer.width / 2. 37 | bg.position.y <- renderer.height / 2. 38 | 39 | stage.addChild(bg) 40 | 41 | let container = Container() 42 | container.position.x <- renderer.width / 2. 43 | container.position.y <- renderer.height / 2. 44 | 45 | // add a bunch of sprites 46 | let bgFront = Sprite.fromImage("./public/assets/SceneRotate.jpg") 47 | bgFront.anchor.x <- 0.5 48 | bgFront.anchor.y <- 0.5 49 | 50 | container.addChild(bgFront) 51 | 52 | let light2 = Sprite.fromImage("./public/assets/LightRotate2.png") 53 | light2.anchor.x <- 0.5 54 | light2.anchor.y <- 0.5 55 | container.addChild(light2) 56 | 57 | let light1 = Sprite.fromImage("./public/assets/LightRotate1.png") 58 | light1.anchor.x <- 0.5 59 | light1.anchor.y <- 0.5 60 | container.addChild(light1) 61 | 62 | let panda = Sprite.fromImage("./public/assets/panda.png") 63 | panda.anchor.x <- 0.5 64 | panda.anchor.y <- 0.5 65 | 66 | container.addChild(panda) 67 | 68 | stage.addChild(container) 69 | 70 | // let's create a moving shape 71 | let thing = Graphics() 72 | stage.addChild(thing) 73 | thing.position.x <- renderer.width / 2. 74 | thing.position.y <- renderer.height / 2. 75 | thing.lineStyle(0.) 76 | 77 | container.mask <- Some(U2.Case1 thing) 78 | 79 | let onClick() = 80 | match container.mask with 81 | | None -> container.mask <- Some(U2.Case1 thing) 82 | | Some mask -> container.mask <- None 83 | 84 | stage.on_click(fun _ -> onClick()) 85 | stage.on_tap(fun _ -> onClick()) 86 | 87 | let style = [ 88 | Font "bold 12pt Arial" 89 | Fill (U2.Case1 "white") 90 | ] 91 | let help = PIXI.Text("Click to turn masking on / off.", style) 92 | help.position.y <- renderer.height - 26. 93 | help.position.x <- 10. 94 | stage.addChild(help) 95 | 96 | let animate = 97 | let mutable count = 0. 98 | let rec animate (dt:float) = 99 | bg.rotation <- bg.rotation + 0.01 100 | bgFront.rotation <- bgFront.rotation - 0.01 101 | 102 | light1.rotation <- light1.rotation + 0.02 103 | light2.rotation <- light2.rotation + 0.01 104 | 105 | panda.scale.x <- 1. + Math.sin(count) * 0.04 106 | panda.scale.y <- 1. + Math.cos(count) * 0.04 107 | 108 | count <- count + 0.1 109 | 110 | thing.clear() |> ignore 111 | 112 | (* 113 | Version specifics: 114 | v3: clipping (you should see some edges blinking) 115 | v4: no clipping 116 | *) 117 | thing.beginFill(float 0x8bc5ff, 0.4) |> ignore 118 | let myangle = 20. 119 | let mysin = Math.sin(count) * myangle 120 | let mycos = Math.cos(count) * myangle 121 | thing.moveTo(-120. + mysin, -100. + mycos) |> ignore 122 | thing.lineTo(-320. + mycos, 100. + mysin) |> ignore 123 | thing.lineTo(120. + mycos, -100. + mysin) |> ignore 124 | thing.lineTo(120. + mysin, 100. + mycos) |> ignore 125 | thing.lineTo(-120. + mycos, 100. + mysin) |> ignore 126 | thing.lineTo(-120. + mysin, -300. + mycos) |> ignore 127 | thing.lineTo(-320. + mysin, -100. + mycos) |> ignore 128 | thing.rotation <- count * 0.1 129 | 130 | window.requestAnimationFrame(FrameRequestCallback animate) |> ignore 131 | renderer.render(stage) 132 | 133 | animate // Return `animate` function with `count` trapped in a closure 134 | 135 | // start animating 136 | animate 0. 137 | -------------------------------------------------------------------------------- /samples/pixi/masking/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "fable-pixi-samples", 4 | "version": "0.0.1", 5 | "description": "F# port of pixi.js official samples", 6 | "main": "index.js", 7 | "scripts": { 8 | "build": "node ../../node_modules/fable-compiler", 9 | "start": "node ../../server" 10 | }, 11 | "author": "François Nicaise", 12 | "license": "MIT" 13 | } 14 | -------------------------------------------------------------------------------- /samples/pixi/masking/public/assets/BGrotate.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fable-compiler/fable-graphics/777629763c49a7632dd7885b058e9aa21cbf28c3/samples/pixi/masking/public/assets/BGrotate.jpg -------------------------------------------------------------------------------- /samples/pixi/masking/public/assets/LightRotate1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fable-compiler/fable-graphics/777629763c49a7632dd7885b058e9aa21cbf28c3/samples/pixi/masking/public/assets/LightRotate1.png -------------------------------------------------------------------------------- /samples/pixi/masking/public/assets/LightRotate2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fable-compiler/fable-graphics/777629763c49a7632dd7885b058e9aa21cbf28c3/samples/pixi/masking/public/assets/LightRotate2.png -------------------------------------------------------------------------------- /samples/pixi/masking/public/assets/SceneRotate.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fable-compiler/fable-graphics/777629763c49a7632dd7885b058e9aa21cbf28c3/samples/pixi/masking/public/assets/SceneRotate.jpg -------------------------------------------------------------------------------- /samples/pixi/masking/public/assets/panda.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fable-compiler/fable-graphics/777629763c49a7632dd7885b058e9aa21cbf28c3/samples/pixi/masking/public/assets/panda.png -------------------------------------------------------------------------------- /samples/pixi/movieclip/README.md: -------------------------------------------------------------------------------- 1 | # To build and run the sample 2 | 3 | * [node.js](http://nodejs.org) and [F#](http://fsharp.org) must be installed in your system. 4 | 5 | * Be sure common dependencies are installed (in `samples` directory, type: `npm install`). 6 | 7 | * To compile the F# code to JS, in this directory type: `npm run build` 8 | 9 | * To start a local server and open a web with the sample, type: `npm start` 10 | 11 | > If you wan to listen for changes and recompile 12 | the F# code, you can use `npm build -- --watch`. 13 | Then you need to run `npm start` in a different 14 | terminal window. -------------------------------------------------------------------------------- /samples/pixi/movieclip/fableconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "projFile": "./movieclip.fsx", 3 | "sourceMaps": true, 4 | "babelPlugins": ["transform-runtime"], 5 | "rollup": { 6 | "dest": "public/bundle.js", 7 | // PIXI will be loaded directly from a script tag 8 | "external": ["PIXI"], 9 | "globals": { 10 | "PIXI": "PIXI" 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /samples/pixi/movieclip/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Herebris - IMGUI 6 | 14 | 15 | 16 | 17 | 18 | 19 |
    20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /samples/pixi/movieclip/movieclip.fsx: -------------------------------------------------------------------------------- 1 | (** 2 | - title: MovieClip sample 3 | - tagline: Basic sample implemented with fable-pixi 4 | - app-style: width:800px; margin:20px auto 50px auto; 5 | - external-script: `"https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.11/pixi.min.js"` 6 | - intro: This is a port from [MovieClip sample](http://pixijs.github.io/examples/#/demos/movieclip-demo.js) 7 | *) 8 | 9 | #r "../../node_modules/fable-core/Fable.Core.dll" 10 | #load "../../node_modules/fable-import-pixi/Fable.Import.Pixi.fs" 11 | 12 | open System 13 | open Fable.Core 14 | open Fable.Core.JsInterop 15 | open Fable.Import.PIXI 16 | open Fable.Import.Browser 17 | open Fable.Import.JS 18 | 19 | importAll "core-js" 20 | 21 | let renderer = WebGLRenderer( 800., 600. ) 22 | 23 | let gameDiv = document.getElementById("game") 24 | gameDiv.appendChild( renderer.view ) 25 | 26 | // create the root of the scene graph 27 | let stage = Container() 28 | 29 | let rec animate (dt:float) = 30 | window.requestAnimationFrame(FrameRequestCallback animate) |> ignore 31 | // render the container 32 | renderer.render(stage) 33 | 34 | let onLoad resources = 35 | // create an array to store the textures 36 | let explosionTextures = ResizeArray() 37 | for i in 0..25 do 38 | Texture.fromFrame(sprintf "Explosion_Sequence_A %i.png" (i+1)) 39 | |> explosionTextures.Add 40 | for i in 0..49 do 41 | let explosion = extras.MovieClip(explosionTextures) 42 | explosion.position.x <- Math.random() * 800. 43 | explosion.position.y <- Math.random() * 600. 44 | explosion.anchor.x <- 0.5 45 | explosion.anchor.y <- 0.5 46 | explosion.rotation <- Math.random() * Math.PI 47 | explosion.scale.set(0.75 + Math.random() * 0.5) 48 | explosion.gotoAndPlay(Math.random() * 27.) 49 | stage.addChild(explosion) |> ignore 50 | animate 0. 51 | 52 | Globals.loader 53 | .add("spritesheet","./public/assets/mc.json") 54 | .load(Func<_,_,_>(fun _ resources -> 55 | onLoad(resources))) 56 | -------------------------------------------------------------------------------- /samples/pixi/movieclip/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "fable-pixi-samples", 4 | "version": "0.0.1", 5 | "description": "F# port of pixi.js official samples", 6 | "main": "index.js", 7 | "scripts": { 8 | "build": "node ../../node_modules/fable-compiler", 9 | "start": "node ../../server" 10 | }, 11 | "author": "François Nicaise", 12 | "license": "MIT" 13 | } 14 | -------------------------------------------------------------------------------- /samples/pixi/movieclip/public/assets/mc.json: -------------------------------------------------------------------------------- 1 | {"frames": { 2 | 3 | "Explosion_Sequence_A 1.png": 4 | { 5 | "frame": {"x":244,"y":1454,"w":240,"h":240}, 6 | "rotated": false, 7 | "trimmed": false, 8 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 9 | "sourceSize": {"w":240,"h":240} 10 | }, 11 | "Explosion_Sequence_A 10.png": 12 | { 13 | "frame": {"x":244,"y":970,"w":240,"h":240}, 14 | "rotated": false, 15 | "trimmed": false, 16 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 17 | "sourceSize": {"w":240,"h":240} 18 | }, 19 | "Explosion_Sequence_A 11.png": 20 | { 21 | "frame": {"x":2,"y":970,"w":240,"h":240}, 22 | "rotated": false, 23 | "trimmed": false, 24 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 25 | "sourceSize": {"w":240,"h":240} 26 | }, 27 | "Explosion_Sequence_A 12.png": 28 | { 29 | "frame": {"x":728,"y":728,"w":240,"h":240}, 30 | "rotated": false, 31 | "trimmed": false, 32 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 33 | "sourceSize": {"w":240,"h":240} 34 | }, 35 | "Explosion_Sequence_A 13.png": 36 | { 37 | "frame": {"x":486,"y":728,"w":240,"h":240}, 38 | "rotated": false, 39 | "trimmed": false, 40 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 41 | "sourceSize": {"w":240,"h":240} 42 | }, 43 | "Explosion_Sequence_A 14.png": 44 | { 45 | "frame": {"x":244,"y":728,"w":240,"h":240}, 46 | "rotated": false, 47 | "trimmed": false, 48 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 49 | "sourceSize": {"w":240,"h":240} 50 | }, 51 | "Explosion_Sequence_A 15.png": 52 | { 53 | "frame": {"x":2,"y":728,"w":240,"h":240}, 54 | "rotated": false, 55 | "trimmed": false, 56 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 57 | "sourceSize": {"w":240,"h":240} 58 | }, 59 | "Explosion_Sequence_A 16.png": 60 | { 61 | "frame": {"x":728,"y":486,"w":240,"h":240}, 62 | "rotated": false, 63 | "trimmed": false, 64 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 65 | "sourceSize": {"w":240,"h":240} 66 | }, 67 | "Explosion_Sequence_A 17.png": 68 | { 69 | "frame": {"x":486,"y":486,"w":240,"h":240}, 70 | "rotated": false, 71 | "trimmed": false, 72 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 73 | "sourceSize": {"w":240,"h":240} 74 | }, 75 | "Explosion_Sequence_A 18.png": 76 | { 77 | "frame": {"x":244,"y":486,"w":240,"h":240}, 78 | "rotated": false, 79 | "trimmed": false, 80 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 81 | "sourceSize": {"w":240,"h":240} 82 | }, 83 | "Explosion_Sequence_A 19.png": 84 | { 85 | "frame": {"x":2,"y":486,"w":240,"h":240}, 86 | "rotated": false, 87 | "trimmed": false, 88 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 89 | "sourceSize": {"w":240,"h":240} 90 | }, 91 | "Explosion_Sequence_A 2.png": 92 | { 93 | "frame": {"x":728,"y":1212,"w":240,"h":240}, 94 | "rotated": false, 95 | "trimmed": false, 96 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 97 | "sourceSize": {"w":240,"h":240} 98 | }, 99 | "Explosion_Sequence_A 20.png": 100 | { 101 | "frame": {"x":728,"y":244,"w":240,"h":240}, 102 | "rotated": false, 103 | "trimmed": false, 104 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 105 | "sourceSize": {"w":240,"h":240} 106 | }, 107 | "Explosion_Sequence_A 21.png": 108 | { 109 | "frame": {"x":486,"y":244,"w":240,"h":240}, 110 | "rotated": false, 111 | "trimmed": false, 112 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 113 | "sourceSize": {"w":240,"h":240} 114 | }, 115 | "Explosion_Sequence_A 22.png": 116 | { 117 | "frame": {"x":244,"y":244,"w":240,"h":240}, 118 | "rotated": false, 119 | "trimmed": false, 120 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 121 | "sourceSize": {"w":240,"h":240} 122 | }, 123 | "Explosion_Sequence_A 23.png": 124 | { 125 | "frame": {"x":2,"y":244,"w":240,"h":240}, 126 | "rotated": false, 127 | "trimmed": false, 128 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 129 | "sourceSize": {"w":240,"h":240} 130 | }, 131 | "Explosion_Sequence_A 24.png": 132 | { 133 | "frame": {"x":728,"y":2,"w":240,"h":240}, 134 | "rotated": false, 135 | "trimmed": false, 136 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 137 | "sourceSize": {"w":240,"h":240} 138 | }, 139 | "Explosion_Sequence_A 25.png": 140 | { 141 | "frame": {"x":486,"y":2,"w":240,"h":240}, 142 | "rotated": false, 143 | "trimmed": false, 144 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 145 | "sourceSize": {"w":240,"h":240} 146 | }, 147 | "Explosion_Sequence_A 26.png": 148 | { 149 | "frame": {"x":244,"y":2,"w":240,"h":240}, 150 | "rotated": false, 151 | "trimmed": false, 152 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 153 | "sourceSize": {"w":240,"h":240} 154 | }, 155 | "Explosion_Sequence_A 27.png": 156 | { 157 | "frame": {"x":2,"y":2,"w":240,"h":240}, 158 | "rotated": false, 159 | "trimmed": false, 160 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 161 | "sourceSize": {"w":240,"h":240} 162 | }, 163 | "Explosion_Sequence_A 3.png": 164 | { 165 | "frame": {"x":486,"y":1212,"w":240,"h":240}, 166 | "rotated": false, 167 | "trimmed": false, 168 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 169 | "sourceSize": {"w":240,"h":240} 170 | }, 171 | "Explosion_Sequence_A 4.png": 172 | { 173 | "frame": {"x":244,"y":1212,"w":240,"h":240}, 174 | "rotated": false, 175 | "trimmed": false, 176 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 177 | "sourceSize": {"w":240,"h":240} 178 | }, 179 | "Explosion_Sequence_A 5.png": 180 | { 181 | "frame": {"x":2,"y":1696,"w":240,"h":240}, 182 | "rotated": false, 183 | "trimmed": false, 184 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 185 | "sourceSize": {"w":240,"h":240} 186 | }, 187 | "Explosion_Sequence_A 6.png": 188 | { 189 | "frame": {"x":2,"y":1454,"w":240,"h":240}, 190 | "rotated": false, 191 | "trimmed": false, 192 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 193 | "sourceSize": {"w":240,"h":240} 194 | }, 195 | "Explosion_Sequence_A 7.png": 196 | { 197 | "frame": {"x":2,"y":1212,"w":240,"h":240}, 198 | "rotated": false, 199 | "trimmed": false, 200 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 201 | "sourceSize": {"w":240,"h":240} 202 | }, 203 | "Explosion_Sequence_A 8.png": 204 | { 205 | "frame": {"x":728,"y":970,"w":240,"h":240}, 206 | "rotated": false, 207 | "trimmed": false, 208 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 209 | "sourceSize": {"w":240,"h":240} 210 | }, 211 | "Explosion_Sequence_A 9.png": 212 | { 213 | "frame": {"x":486,"y":970,"w":240,"h":240}, 214 | "rotated": false, 215 | "trimmed": false, 216 | "spriteSourceSize": {"x":0,"y":0,"w":240,"h":240}, 217 | "sourceSize": {"w":240,"h":240} 218 | }}, 219 | "meta": { 220 | "app": "http://www.texturepacker.com", 221 | "version": "1.0", 222 | "image": "mc.png", 223 | "format": "RGBA8888", 224 | "size": {"w":1024,"h":2048}, 225 | "scale": "1", 226 | "smartupdate": "$TexturePacker:SmartUpdate:17e4a2d92ff3e27832c3f4938cec7c85$" 227 | } 228 | } 229 | -------------------------------------------------------------------------------- /samples/pixi/movieclip/public/assets/mc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fable-compiler/fable-graphics/777629763c49a7632dd7885b058e9aa21cbf28c3/samples/pixi/movieclip/public/assets/mc.png -------------------------------------------------------------------------------- /samples/pixi/particle-container/README.md: -------------------------------------------------------------------------------- 1 | # To build and run the sample 2 | 3 | * [node.js](http://nodejs.org) and [F#](http://fsharp.org) must be installed in your system. 4 | 5 | * Be sure common dependencies are installed (in `samples` directory, type: `npm install`). 6 | 7 | * To compile the F# code to JS, in this directory type: `npm run build` 8 | 9 | * To start a local server and open a web with the sample, type: `npm start` 10 | 11 | > If you wan to listen for changes and recompile 12 | the F# code, you can use `npm build -- --watch`. 13 | Then you need to run `npm start` in a different 14 | terminal window. -------------------------------------------------------------------------------- /samples/pixi/particle-container/fableconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "projFile": "./particle-container.fsx", 3 | "sourceMaps": true, 4 | "babelPlugins": ["transform-runtime"], 5 | "rollup": { 6 | "dest": "public/bundle.js", 7 | // PIXI will be loaded directly from a script tag 8 | "external": ["PIXI"], 9 | "globals": { 10 | "PIXI": "PIXI" 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /samples/pixi/particle-container/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Herebris - IMGUI 6 | 14 | 15 | 16 | 17 | 18 | 19 |
    20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /samples/pixi/particle-container/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "fable-pixi-samples", 4 | "version": "0.0.1", 5 | "description": "F# port of pixi.js official samples", 6 | "main": "index.js", 7 | "scripts": { 8 | "build": "node ../../node_modules/fable-compiler", 9 | "start": "node ../../server" 10 | }, 11 | "author": "François Nicaise", 12 | "license": "MIT" 13 | } 14 | -------------------------------------------------------------------------------- /samples/pixi/particle-container/particle-container.fsx: -------------------------------------------------------------------------------- 1 | (** 2 | - title: Particle Container sample 3 | - tagline: Basic sample implemented with fable-pixi 4 | - app-style: width:800px; margin:20px auto 50px auto; 5 | - external-script: `"https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.11/pixi.min.js"` 6 | - intro: This is a port from [Particle Container sample](http://pixijs.github.io/examples/#/demos/batch-v3.js) 7 | *) 8 | 9 | #r "../../node_modules/fable-core/Fable.Core.dll" 10 | #load "../../node_modules/fable-import-pixi/Fable.Import.Pixi.fs" 11 | 12 | open System 13 | open Fable.Core 14 | open Fable.Core.JsInterop 15 | open Fable.Import.PIXI 16 | open Fable.Import.Browser 17 | open Fable.Import.JS 18 | 19 | importAll "core-js" 20 | 21 | let isWebGL, renderer = 22 | match Globals.autoDetectRenderer(800., 600.) with 23 | | U2.Case1 webgl -> true, webgl :> SystemRenderer 24 | | U2.Case2 canvas -> false, canvas :> SystemRenderer 25 | 26 | let gameDiv = document.getElementById("game") 27 | gameDiv.appendChild( renderer.view ) 28 | 29 | // create the root of the scene graph 30 | let stage = Container() 31 | 32 | type PCP = ParticleContainerProperties 33 | let options = [ 34 | PCP.Scale true 35 | PCP.Position true 36 | PCP.Rotation true 37 | PCP.Uvs true 38 | PCP.Alpha true 39 | ] 40 | let sprites = ParticleContainer(10000., options) 41 | stage.addChild(sprites) 42 | 43 | // create an array to store a reference to the dudes 44 | let maggots = ResizeArray() 45 | let totalSprites = if isWebGL then 10000 else 100 46 | 47 | for i in 0..totalSprites-1 do 48 | // create a new Sprite that uses the image name 49 | // we just generated as its source 50 | let dude = Sprite.fromImage("./public/assets/tinyMaggot.png") 51 | 52 | // Exists in code but is not used in actual demo 53 | // http://pixijs.github.io/examples/#/demos/batch-v3.js 54 | //dude.tint <- Math.random() * (float 0xE8D4CD) 55 | 56 | dude.anchor.set(0.5) 57 | 58 | // set a random scale for the dude 59 | dude.scale.set(0.8 + Math.random() * 0.3) 60 | 61 | // finally let"s set the dude to be at a random position... 62 | dude.position.x <- Math.floor(Math.random() * renderer.width) 63 | dude.position.y <- Math.floor(Math.random() * renderer.height) 64 | 65 | // Exists in code but is not used in actual demo 66 | // http://pixijs.github.io/examples/#/demos/batch-v3.js 67 | //dude.tint <- Math.random() * (float 0x808080) 68 | 69 | // create some extra properties that will control movement 70 | // create a random direction in radians. This is a number 71 | // between 0 and PI*2 which is the equivalent of 0 - 360 degrees 72 | dude?direction <- Math.random() * Math.PI * 2. 73 | 74 | // this number will be used to modify the direction of the dude over time 75 | dude?turningSpeed <- Math.random() - 0.8 76 | 77 | // create a random speed between 0 - 2, and these maggots are slooww 78 | dude?speed <- 2. + Math.random() * 2. * 0.2 79 | 80 | dude?offset <- Math.random() * 100. 81 | 82 | // push the dude into the maggots so it can be easily accessed later 83 | maggots.Add(dude) 84 | 85 | stage.addChild(dude) |> ignore 86 | 87 | 88 | // create a bounding box box for the little dudes 89 | let dudeBoundsPadding = 100. 90 | 91 | let dudeBounds = Rectangle(-dudeBoundsPadding, 92 | -dudeBoundsPadding, 93 | renderer.width + dudeBoundsPadding * 2., 94 | renderer.height + dudeBoundsPadding * 2.) 95 | 96 | let animate = 97 | let mutable tick = 0. 98 | let rec animate (dt:float) = 99 | // iterate through the dudes and update the positions 100 | let dc = maggots.Count - 1 101 | for i in 0..dc do 102 | let dude = maggots.[i] 103 | dude.scale.y <- 104 | 0.95 + Math.sin(tick + unbox dude?offset) * 0.05 105 | 106 | dude?direction <- 107 | (unbox dude?direction) + (unbox dude?turningSpeed) * 0.01 108 | 109 | dude.position.x <- 110 | dude.position.x + Math.sin(unbox dude?direction) 111 | * (unbox dude?speed) * dude.scale.y 112 | 113 | dude.position.y <- 114 | dude.position.y + Math.cos(unbox dude?direction) 115 | * (unbox dude?speed) * dude.scale.y 116 | 117 | dude.rotation <- 118 | -(unbox dude?direction) - Math.PI 119 | 120 | // wrap the dudes by testing their bounds... 121 | if (dude.position.x < dudeBounds.x) 122 | then dude.position.x <- dude.position.x + dudeBounds.width 123 | elif (dude.position.x > dudeBounds.x + dudeBounds.width) 124 | then dude.position.x <- dude.position.x - dudeBounds.width 125 | 126 | if (dude.position.y < dudeBounds.y) 127 | then dude.position.y <- dude.position.y + dudeBounds.height 128 | elif (dude.position.y > dudeBounds.y + dudeBounds.height) 129 | then dude.position.y <- dude.position.y - dudeBounds.height 130 | 131 | // increment the ticker 132 | tick <- tick + 0.1 133 | window.requestAnimationFrame(FrameRequestCallback animate) |> ignore 134 | renderer.render(stage) 135 | 136 | animate // Return `animate` function with `tick` trapped in a closure 137 | 138 | // start animating 139 | animate 0. 140 | -------------------------------------------------------------------------------- /samples/pixi/particle-container/public/assets/tinyMaggot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fable-compiler/fable-graphics/777629763c49a7632dd7885b058e9aa21cbf28c3/samples/pixi/particle-container/public/assets/tinyMaggot.png -------------------------------------------------------------------------------- /samples/pixi/render-texture/README.md: -------------------------------------------------------------------------------- 1 | # To build and run the sample 2 | 3 | * [node.js](http://nodejs.org) and [F#](http://fsharp.org) must be installed in your system. 4 | 5 | * Be sure common dependencies are installed (in `samples` directory, type: `npm install`). 6 | 7 | * To compile the F# code to JS, in this directory type: `npm run build` 8 | 9 | * To start a local server and open a web with the sample, type: `npm start` 10 | 11 | > If you wan to listen for changes and recompile 12 | the F# code, you can use `npm build -- --watch`. 13 | Then you need to run `npm start` in a different 14 | terminal window. -------------------------------------------------------------------------------- /samples/pixi/render-texture/fableconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "projFile": "./render-texture.fsx", 3 | "sourceMaps": true, 4 | "babelPlugins": ["transform-runtime"], 5 | "rollup": { 6 | "dest": "public/bundle.js", 7 | // PIXI will be loaded directly from a script tag 8 | "external": ["PIXI"], 9 | "globals": { 10 | "PIXI": "PIXI" 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /samples/pixi/render-texture/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Herebris - IMGUI 6 | 14 | 15 | 16 | 17 | 18 | 19 |
    20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /samples/pixi/render-texture/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "fable-pixi-samples", 4 | "version": "0.0.1", 5 | "description": "F# port of pixi.js official samples", 6 | "main": "index.js", 7 | "scripts": { 8 | "build": "node ../../node_modules/fable-compiler", 9 | "start": "node ../../server" 10 | }, 11 | "author": "François Nicaise", 12 | "license": "MIT" 13 | } 14 | -------------------------------------------------------------------------------- /samples/pixi/render-texture/public/assets/spinObj_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fable-compiler/fable-graphics/777629763c49a7632dd7885b058e9aa21cbf28c3/samples/pixi/render-texture/public/assets/spinObj_01.png -------------------------------------------------------------------------------- /samples/pixi/render-texture/public/assets/spinObj_02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fable-compiler/fable-graphics/777629763c49a7632dd7885b058e9aa21cbf28c3/samples/pixi/render-texture/public/assets/spinObj_02.png -------------------------------------------------------------------------------- /samples/pixi/render-texture/public/assets/spinObj_03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fable-compiler/fable-graphics/777629763c49a7632dd7885b058e9aa21cbf28c3/samples/pixi/render-texture/public/assets/spinObj_03.png -------------------------------------------------------------------------------- /samples/pixi/render-texture/public/assets/spinObj_04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fable-compiler/fable-graphics/777629763c49a7632dd7885b058e9aa21cbf28c3/samples/pixi/render-texture/public/assets/spinObj_04.png -------------------------------------------------------------------------------- /samples/pixi/render-texture/public/assets/spinObj_05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fable-compiler/fable-graphics/777629763c49a7632dd7885b058e9aa21cbf28c3/samples/pixi/render-texture/public/assets/spinObj_05.png -------------------------------------------------------------------------------- /samples/pixi/render-texture/public/assets/spinObj_06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fable-compiler/fable-graphics/777629763c49a7632dd7885b058e9aa21cbf28c3/samples/pixi/render-texture/public/assets/spinObj_06.png -------------------------------------------------------------------------------- /samples/pixi/render-texture/public/assets/spinObj_07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fable-compiler/fable-graphics/777629763c49a7632dd7885b058e9aa21cbf28c3/samples/pixi/render-texture/public/assets/spinObj_07.png -------------------------------------------------------------------------------- /samples/pixi/render-texture/public/assets/spinObj_08.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fable-compiler/fable-graphics/777629763c49a7632dd7885b058e9aa21cbf28c3/samples/pixi/render-texture/public/assets/spinObj_08.png -------------------------------------------------------------------------------- /samples/pixi/render-texture/render-texture.fsx: -------------------------------------------------------------------------------- 1 | (** 2 | - title: Render Texture sample 3 | - tagline: Basic sample implemented with fable-pixi 4 | - app-style: width:800px; margin:20px auto 50px auto; 5 | - external-script: `"https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.11/pixi.min.js"` 6 | - intro: This is a port from [Render texture sample](http://pixijs.github.io/examples/#/demos/render-texture-demo.js) 7 | *) 8 | 9 | #r "../../node_modules/fable-core/Fable.Core.dll" 10 | #load "../../node_modules/fable-import-pixi/Fable.Import.Pixi.fs" 11 | 12 | open System 13 | open Fable.Core 14 | open Fable.Core.JsInterop 15 | open Fable.Import.PIXI 16 | open Fable.Import.Browser 17 | open Fable.Import.JS 18 | 19 | importAll "core-js" 20 | 21 | let renderer = WebGLRenderer( 800., 600. ) 22 | 23 | let gameDiv = document.getElementById("game") 24 | gameDiv.appendChild( renderer.view ) 25 | 26 | // create the root of the scene graph 27 | let stage = Container() 28 | 29 | let mutable renderTexture = 30 | RenderTexture( U2.Case2 renderer, renderer.width, renderer.height) 31 | 32 | let mutable renderTexture2 = 33 | RenderTexture( U2.Case2 renderer, renderer.width, renderer.height) 34 | 35 | // create a new sprite that uses the render texture we created above 36 | let outputSprite = Sprite(renderTexture) 37 | 38 | // align the sprite 39 | outputSprite.position.x <- 400. 40 | outputSprite.position.y <- 300. 41 | outputSprite.anchor.set(0.5) 42 | 43 | // add to stage 44 | stage.addChild(outputSprite) 45 | 46 | let stuffContainer = Container() 47 | stuffContainer.position.x <- 400. 48 | stuffContainer.position.y <- 300. 49 | stage.addChild(stuffContainer) 50 | 51 | // create an array of image ids 52 | let fruits = 53 | ResizeArray [| 54 | "./public/assets/spinObj_01.png"; 55 | "./public/assets/spinObj_02.png"; 56 | "./public/assets/spinObj_03.png"; 57 | "./public/assets/spinObj_04.png"; 58 | "./public/assets/spinObj_05.png"; 59 | "./public/assets/spinObj_06.png"; 60 | "./public/assets/spinObj_07.png"; 61 | "./public/assets/spinObj_08.png" 62 | |] 63 | 64 | // create an array of items 65 | let items = ResizeArray() 66 | 67 | // now create some items and randomly position them in the stuff container 68 | for i in 0..19 do 69 | let item = Sprite.fromImage(fruits.[i % fruits.Count]) 70 | item.position.x <- Math.random() * 400. - 200. 71 | item.position.y <- Math.random() * 400. - 200. 72 | item.anchor.set(0.5) 73 | stuffContainer.addChild(item) |> ignore 74 | items.Add(item) 75 | 76 | let animate = 77 | let mutable count = 0. 78 | let rec animate (dt:float) = 79 | window.requestAnimationFrame(FrameRequestCallback animate) 80 | |> ignore 81 | 82 | let il = items.Count - 1 83 | console.log(il) 84 | for i in 0..il do 85 | let item = items.[i] 86 | item.rotation <- item.rotation + 0.1 87 | 88 | count <- count + 0.01 89 | 90 | // swap the buffers ... 91 | let temp = renderTexture 92 | renderTexture <- renderTexture2 93 | renderTexture2 <- temp 94 | 95 | // set the new texture 96 | outputSprite.texture <- renderTexture 97 | 98 | // twist this up! 99 | stuffContainer.rotation <- stuffContainer.rotation - 0.01 100 | outputSprite.scale.set(1. + Math.sin(float count) * 0.2) 101 | 102 | // render the stage to the texture 103 | // the 'true' clears the texture before the content is rendered 104 | renderTexture2.render(displayObject=stage, clear=false) 105 | 106 | // render the container 107 | renderer.render(stage) 108 | 109 | animate // Return `animate` function with `count` trapped in a closure 110 | 111 | animate 0. 112 | -------------------------------------------------------------------------------- /samples/pixi/text/README.md: -------------------------------------------------------------------------------- 1 | # To build and run the sample 2 | 3 | * [node.js](http://nodejs.org) and [F#](http://fsharp.org) must be installed in your system. 4 | 5 | * Be sure common dependencies are installed (in `samples` directory, type: `npm install`). 6 | 7 | * To compile the F# code to JS, in this directory type: `npm run build` 8 | 9 | * To start a local server and open a web with the sample, type: `npm start` 10 | 11 | > If you wan to listen for changes and recompile 12 | the F# code, you can use `npm build -- --watch`. 13 | Then you need to run `npm start` in a different 14 | terminal window. -------------------------------------------------------------------------------- /samples/pixi/text/fableconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "projFile": "./text.fsx", 3 | "sourceMaps": true, 4 | "babelPlugins": ["transform-runtime"], 5 | "rollup": { 6 | "dest": "public/bundle.js", 7 | // PIXI will be loaded directly from a script tag 8 | "external": ["PIXI"], 9 | "globals": { 10 | "PIXI": "PIXI" 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /samples/pixi/text/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Herebris - IMGUI 6 | 14 | 15 | 16 | 17 | 18 | 19 |
    20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /samples/pixi/text/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "fable-pixi-samples", 4 | "version": "0.0.1", 5 | "description": "F# port of pixi.js official samples", 6 | "main": "index.js", 7 | "scripts": { 8 | "build": "node ../../node_modules/fable-compiler", 9 | "start": "node ../../server" 10 | }, 11 | "author": "François Nicaise", 12 | "license": "MIT" 13 | } 14 | -------------------------------------------------------------------------------- /samples/pixi/text/public/assets/desyrel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fable-compiler/fable-graphics/777629763c49a7632dd7885b058e9aa21cbf28c3/samples/pixi/text/public/assets/desyrel.png -------------------------------------------------------------------------------- /samples/pixi/text/public/assets/textDemoBG.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fable-compiler/fable-graphics/777629763c49a7632dd7885b058e9aa21cbf28c3/samples/pixi/text/public/assets/textDemoBG.jpg -------------------------------------------------------------------------------- /samples/pixi/text/text.fsx: -------------------------------------------------------------------------------- 1 | (** 2 | - title: Text sample 3 | - tagline: Basic sample implemented with fable-pixi 4 | - app-style: width:800px; margin:20px auto 50px auto; 5 | - external-script: `"https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.11/pixi.min.js"` 6 | - intro: This is a port from [text sample](http://pixijs.github.io/examples/#/demos/text-demo.js) 7 | *) 8 | 9 | #r "../../node_modules/fable-core/Fable.Core.dll" 10 | #load "../../node_modules/fable-import-pixi/Fable.Import.Pixi.fs" 11 | 12 | open System 13 | open Fable.Core 14 | open Fable.Core.JsInterop 15 | open Fable.Import 16 | open Fable.Import.PIXI 17 | open Fable.Import.Browser 18 | open Fable.Import.JS 19 | 20 | importAll "core-js" 21 | 22 | let renderer = 23 | Globals.autoDetectRenderer( 620., 400. ) 24 | |> unbox 25 | 26 | renderer.view.style.display <- "block" 27 | renderer.view.style.margin <- "0 auto" 28 | 29 | let gameDiv = document.getElementById("game") 30 | gameDiv.appendChild( renderer.view ) 31 | 32 | // create the root of the scene graph 33 | let stage = Container() 34 | 35 | let onAssetsLoad resources = 36 | let fontStyle = [ 37 | extras.Font (U2.Case1 "35px Desyrel") 38 | extras.Align "right" 39 | ] 40 | let bitmapFontText = 41 | extras.BitmapText("bitmap fonts are\n now supported", fontStyle) 42 | bitmapFontText.position.x <- 600. - bitmapFontText.textWidth 43 | bitmapFontText.position.y <- 20. 44 | stage.addChild(bitmapFontText) 45 | |> ignore 46 | 47 | // add a shiny background... 48 | let background = Sprite.fromImage("./public/assets/textDemoBG.jpg") 49 | stage.addChild( background) 50 | 51 | // create some white text using the Snippet webfont 52 | let style = [ 53 | TextStyle.Font "35px Arial" 54 | TextStyle.Fill (U2.Case1 "white") 55 | TextStyle.Align "left" 56 | ] 57 | let textSample = PIXI.Text("Pixi.js can have\n multiline text!", style) 58 | textSample.position.set(20.) 59 | 60 | // create a text object with a nice stroke 61 | let funStyle = [ 62 | TextStyle.Font "bold 60px Arial" 63 | TextStyle.Fill (U2.Case1 "#cc00ff") 64 | TextStyle.Align "center" 65 | TextStyle.Stroke (U2.Case1 "#FFFFFF") 66 | TextStyle.StrokeThickness 6. 67 | ] 68 | let spinningText = PIXI.Text("I\'m fun!", funStyle) 69 | spinningText.anchor.set(0.5) 70 | spinningText.position.x <- 310. 71 | spinningText.position.y <- 200. 72 | 73 | let countingStyle = [ 74 | TextStyle.Font "bold italic 60px Arial" 75 | TextStyle.Fill (U2.Case1 "#3e1707") 76 | TextStyle.Align "center" 77 | TextStyle.Stroke (U2.Case1 "#a4410e") 78 | TextStyle.StrokeThickness 7. 79 | ] 80 | let countingText = PIXI.Text("COUNT 4EVAR: 0", countingStyle) 81 | countingText.position.x <- 310. 82 | countingText.position.y <- 320. 83 | countingText.anchor.x <- 0.5 84 | 85 | stage.addChild(textSample) 86 | stage.addChild(spinningText) 87 | stage.addChild(countingText) 88 | 89 | Globals.loader 90 | .add("desyrel","./public/assets/desyrel.xml") 91 | .load(Func<_,_,_>(fun _ resources -> 92 | onAssetsLoad(resources))) 93 | 94 | let animate = 95 | let mutable count = 0. 96 | let rec animate (dt:float) = 97 | // render the container 98 | renderer.render(stage) 99 | count <- count + 0.5 100 | // update the text with a new string 101 | countingText.text <- sprintf "COUNT 4EVAR: %.0f" (Math.floor(count)) 102 | // let's spin the spinning text 103 | spinningText.rotation <- spinningText.rotation + 0.03 104 | window.requestAnimationFrame(FrameRequestCallback animate) |> ignore 105 | animate 106 | 107 | // start animating 108 | animate 0. 109 | -------------------------------------------------------------------------------- /samples/server/fableconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "module": "commonjs", 3 | "projFile": "index.fsx" 4 | } -------------------------------------------------------------------------------- /samples/server/index.fsx: -------------------------------------------------------------------------------- 1 | #r "../node_modules/fable-core/Fable.Core.dll" 2 | open System 3 | open Fable.Core 4 | open Fable.Core.JsInterop 5 | open Fable.Import 6 | open Fable.Import.Node 7 | 8 | let finalhandler = importDefault "finalhandler" 9 | let serveStatic = importDefault "serve-static" 10 | let opener = importDefault "open" 11 | 12 | let port = 13 | match ``process``.argv with 14 | | args when args.Count >= 3 -> int args.[2] 15 | | _ -> 8080 16 | 17 | let samplesPath = path.resolve("../..") 18 | let relPath = path.relative(samplesPath, ".") 19 | 20 | let server = 21 | let serve = serveStatic$(samplesPath) 22 | let server = 23 | http.createServer(Func<_,_,_>(fun req res -> 24 | let isDone = finalhandler$(req, res) 25 | serve$(req, res, isDone) 26 | |> ignore)) 27 | server.listen(port) 28 | 29 | opener$(sprintf "http://localhost:%i/%s" port relPath) 30 | -------------------------------------------------------------------------------- /samples/server/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.server = exports.relPath = exports.samplesPath = exports.port = exports.opener = exports.serveStatic = exports.finalhandler = undefined; 7 | 8 | var _finalhandler = require("finalhandler"); 9 | 10 | var _finalhandler2 = _interopRequireDefault(_finalhandler); 11 | 12 | var _serveStatic = require("serve-static"); 13 | 14 | var _serveStatic2 = _interopRequireDefault(_serveStatic); 15 | 16 | var _open = require("open"); 17 | 18 | var _open2 = _interopRequireDefault(_open); 19 | 20 | var _path = require("path"); 21 | 22 | var path = _interopRequireWildcard(_path); 23 | 24 | var _http = require("http"); 25 | 26 | var http = _interopRequireWildcard(_http); 27 | 28 | var _fableCore = require("fable-core"); 29 | 30 | function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } } 31 | 32 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 33 | 34 | var finalhandler = exports.finalhandler = _finalhandler2.default; 35 | var serveStatic = exports.serveStatic = _serveStatic2.default; 36 | var opener = exports.opener = _open2.default; 37 | 38 | var port = exports.port = function () { 39 | var matchValue = process.argv; 40 | 41 | if (matchValue.length >= 3) { 42 | return Number.parseInt(matchValue[2]); 43 | } else { 44 | return 8080; 45 | } 46 | }(); 47 | 48 | var samplesPath = exports.samplesPath = path.resolve("../.."); 49 | var relPath = exports.relPath = path.relative(samplesPath, "."); 50 | 51 | var server = exports.server = function () { 52 | var serve = serveStatic(samplesPath); 53 | var server = http.createServer(function (req, res) { 54 | var isDone = finalhandler(req, res); 55 | serve(req, res, isDone); 56 | }); 57 | return server.listen(port); 58 | }(); 59 | 60 | opener(_fableCore.String.fsFormat("http://localhost:%i/%s")(function (x) { 61 | return x; 62 | })(port)(relPath)); --------------------------------------------------------------------------------