├── .gitignore ├── README.md ├── agpl.txt ├── minimal.html ├── morphic.html ├── morphic.js ├── morphic.txt └── multiple.html /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | morphic.js 3 | 4 | a lively Web-GUI 5 | inspired by Squeak 6 | 7 | written by Jens Mönig 8 | jens@moenig.org 9 | 10 | Copyright (C) 2016 by Jens Mönig 11 | 12 | Morphic.js is free software: you can redistribute it and/or modify 13 | it under the terms of the GNU Affero General Public License as 14 | published by the Free Software Foundation, either version 3 of 15 | the License, or (at your option) any later version. 16 | 17 | This program is distributed in the hope that it will be useful, 18 | but WITHOUT ANY WARRANTY; without even the implied warranty of 19 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 20 | GNU Affero General Public License for more details. 21 | 22 | You should have received a copy of the GNU Affero General Public License 23 | along with this program. If not, see . 24 | -------------------------------------------------------------------------------- /agpl.txt: -------------------------------------------------------------------------------- 1 | GNU AFFERO GENERAL PUBLIC LICENSE 2 | Version 3, 19 November 2007 3 | 4 | Copyright (C) 2007 Free Software Foundation, Inc. 5 | Everyone is permitted to copy and distribute verbatim copies 6 | of this license document, but changing it is not allowed. 7 | 8 | Preamble 9 | 10 | The GNU Affero General Public License is a free, copyleft license for 11 | software and other kinds of works, specifically designed to ensure 12 | cooperation with the community in the case of network server software. 13 | 14 | The licenses for most software and other practical works are designed 15 | to take away your freedom to share and change the works. By contrast, 16 | our General Public Licenses are intended to guarantee your freedom to 17 | share and change all versions of a program--to make sure it remains free 18 | software for all its users. 19 | 20 | When we speak of free software, we are referring to freedom, not 21 | price. Our General Public Licenses are designed to make sure that you 22 | have the freedom to distribute copies of free software (and charge for 23 | them if you wish), that you receive source code or can get it if you 24 | want it, that you can change the software or use pieces of it in new 25 | free programs, and that you know you can do these things. 26 | 27 | Developers that use our General Public Licenses protect your rights 28 | with two steps: (1) assert copyright on the software, and (2) offer 29 | you this License which gives you legal permission to copy, distribute 30 | and/or modify the software. 31 | 32 | A secondary benefit of defending all users' freedom is that 33 | improvements made in alternate versions of the program, if they 34 | receive widespread use, become available for other developers to 35 | incorporate. Many developers of free software are heartened and 36 | encouraged by the resulting cooperation. However, in the case of 37 | software used on network servers, this result may fail to come about. 38 | The GNU General Public License permits making a modified version and 39 | letting the public access it on a server without ever releasing its 40 | source code to the public. 41 | 42 | The GNU Affero General Public License is designed specifically to 43 | ensure that, in such cases, the modified source code becomes available 44 | to the community. It requires the operator of a network server to 45 | provide the source code of the modified version running there to the 46 | users of that server. Therefore, public use of a modified version, on 47 | a publicly accessible server, gives the public access to the source 48 | code of the modified version. 49 | 50 | An older license, called the Affero General Public License and 51 | published by Affero, was designed to accomplish similar goals. This is 52 | a different license, not a version of the Affero GPL, but Affero has 53 | released a new version of the Affero GPL which permits relicensing under 54 | this license. 55 | 56 | The precise terms and conditions for copying, distribution and 57 | modification follow. 58 | 59 | TERMS AND CONDITIONS 60 | 61 | 0. Definitions. 62 | 63 | "This License" refers to version 3 of the GNU Affero General Public License. 64 | 65 | "Copyright" also means copyright-like laws that apply to other kinds of 66 | works, such as semiconductor masks. 67 | 68 | "The Program" refers to any copyrightable work licensed under this 69 | License. Each licensee is addressed as "you". "Licensees" and 70 | "recipients" may be individuals or organizations. 71 | 72 | To "modify" a work means to copy from or adapt all or part of the work 73 | in a fashion requiring copyright permission, other than the making of an 74 | exact copy. The resulting work is called a "modified version" of the 75 | earlier work or a work "based on" the earlier work. 76 | 77 | A "covered work" means either the unmodified Program or a work based 78 | on the Program. 79 | 80 | To "propagate" a work means to do anything with it that, without 81 | permission, would make you directly or secondarily liable for 82 | infringement under applicable copyright law, except executing it on a 83 | computer or modifying a private copy. Propagation includes copying, 84 | distribution (with or without modification), making available to the 85 | public, and in some countries other activities as well. 86 | 87 | To "convey" a work means any kind of propagation that enables other 88 | parties to make or receive copies. Mere interaction with a user through 89 | a computer network, with no transfer of a copy, is not conveying. 90 | 91 | An interactive user interface displays "Appropriate Legal Notices" 92 | to the extent that it includes a convenient and prominently visible 93 | feature that (1) displays an appropriate copyright notice, and (2) 94 | tells the user that there is no warranty for the work (except to the 95 | extent that warranties are provided), that licensees may convey the 96 | work under this License, and how to view a copy of this License. If 97 | the interface presents a list of user commands or options, such as a 98 | menu, a prominent item in the list meets this criterion. 99 | 100 | 1. Source Code. 101 | 102 | The "source code" for a work means the preferred form of the work 103 | for making modifications to it. "Object code" means any non-source 104 | form of a work. 105 | 106 | A "Standard Interface" means an interface that either is an official 107 | standard defined by a recognized standards body, or, in the case of 108 | interfaces specified for a particular programming language, one that 109 | is widely used among developers working in that language. 110 | 111 | The "System Libraries" of an executable work include anything, other 112 | than the work as a whole, that (a) is included in the normal form of 113 | packaging a Major Component, but which is not part of that Major 114 | Component, and (b) serves only to enable use of the work with that 115 | Major Component, or to implement a Standard Interface for which an 116 | implementation is available to the public in source code form. A 117 | "Major Component", in this context, means a major essential component 118 | (kernel, window system, and so on) of the specific operating system 119 | (if any) on which the executable work runs, or a compiler used to 120 | produce the work, or an object code interpreter used to run it. 121 | 122 | The "Corresponding Source" for a work in object code form means all 123 | the source code needed to generate, install, and (for an executable 124 | work) run the object code and to modify the work, including scripts to 125 | control those activities. However, it does not include the work's 126 | System Libraries, or general-purpose tools or generally available free 127 | programs which are used unmodified in performing those activities but 128 | which are not part of the work. For example, Corresponding Source 129 | includes interface definition files associated with source files for 130 | the work, and the source code for shared libraries and dynamically 131 | linked subprograms that the work is specifically designed to require, 132 | such as by intimate data communication or control flow between those 133 | subprograms and other parts of the work. 134 | 135 | The Corresponding Source need not include anything that users 136 | can regenerate automatically from other parts of the Corresponding 137 | Source. 138 | 139 | The Corresponding Source for a work in source code form is that 140 | same work. 141 | 142 | 2. Basic Permissions. 143 | 144 | All rights granted under this License are granted for the term of 145 | copyright on the Program, and are irrevocable provided the stated 146 | conditions are met. This License explicitly affirms your unlimited 147 | permission to run the unmodified Program. The output from running a 148 | covered work is covered by this License only if the output, given its 149 | content, constitutes a covered work. This License acknowledges your 150 | rights of fair use or other equivalent, as provided by copyright law. 151 | 152 | You may make, run and propagate covered works that you do not 153 | convey, without conditions so long as your license otherwise remains 154 | in force. You may convey covered works to others for the sole purpose 155 | of having them make modifications exclusively for you, or provide you 156 | with facilities for running those works, provided that you comply with 157 | the terms of this License in conveying all material for which you do 158 | not control copyright. Those thus making or running the covered works 159 | for you must do so exclusively on your behalf, under your direction 160 | and control, on terms that prohibit them from making any copies of 161 | your copyrighted material outside their relationship with you. 162 | 163 | Conveying under any other circumstances is permitted solely under 164 | the conditions stated below. Sublicensing is not allowed; section 10 165 | makes it unnecessary. 166 | 167 | 3. Protecting Users' Legal Rights From Anti-Circumvention Law. 168 | 169 | No covered work shall be deemed part of an effective technological 170 | measure under any applicable law fulfilling obligations under article 171 | 11 of the WIPO copyright treaty adopted on 20 December 1996, or 172 | similar laws prohibiting or restricting circumvention of such 173 | measures. 174 | 175 | When you convey a covered work, you waive any legal power to forbid 176 | circumvention of technological measures to the extent such circumvention 177 | is effected by exercising rights under this License with respect to 178 | the covered work, and you disclaim any intention to limit operation or 179 | modification of the work as a means of enforcing, against the work's 180 | users, your or third parties' legal rights to forbid circumvention of 181 | technological measures. 182 | 183 | 4. Conveying Verbatim Copies. 184 | 185 | You may convey verbatim copies of the Program's source code as you 186 | receive it, in any medium, provided that you conspicuously and 187 | appropriately publish on each copy an appropriate copyright notice; 188 | keep intact all notices stating that this License and any 189 | non-permissive terms added in accord with section 7 apply to the code; 190 | keep intact all notices of the absence of any warranty; and give all 191 | recipients a copy of this License along with the Program. 192 | 193 | You may charge any price or no price for each copy that you convey, 194 | and you may offer support or warranty protection for a fee. 195 | 196 | 5. Conveying Modified Source Versions. 197 | 198 | You may convey a work based on the Program, or the modifications to 199 | produce it from the Program, in the form of source code under the 200 | terms of section 4, provided that you also meet all of these conditions: 201 | 202 | a) The work must carry prominent notices stating that you modified 203 | it, and giving a relevant date. 204 | 205 | b) The work must carry prominent notices stating that it is 206 | released under this License and any conditions added under section 207 | 7. This requirement modifies the requirement in section 4 to 208 | "keep intact all notices". 209 | 210 | c) You must license the entire work, as a whole, under this 211 | License to anyone who comes into possession of a copy. This 212 | License will therefore apply, along with any applicable section 7 213 | additional terms, to the whole of the work, and all its parts, 214 | regardless of how they are packaged. This License gives no 215 | permission to license the work in any other way, but it does not 216 | invalidate such permission if you have separately received it. 217 | 218 | d) If the work has interactive user interfaces, each must display 219 | Appropriate Legal Notices; however, if the Program has interactive 220 | interfaces that do not display Appropriate Legal Notices, your 221 | work need not make them do so. 222 | 223 | A compilation of a covered work with other separate and independent 224 | works, which are not by their nature extensions of the covered work, 225 | and which are not combined with it such as to form a larger program, 226 | in or on a volume of a storage or distribution medium, is called an 227 | "aggregate" if the compilation and its resulting copyright are not 228 | used to limit the access or legal rights of the compilation's users 229 | beyond what the individual works permit. Inclusion of a covered work 230 | in an aggregate does not cause this License to apply to the other 231 | parts of the aggregate. 232 | 233 | 6. Conveying Non-Source Forms. 234 | 235 | You may convey a covered work in object code form under the terms 236 | of sections 4 and 5, provided that you also convey the 237 | machine-readable Corresponding Source under the terms of this License, 238 | in one of these ways: 239 | 240 | a) Convey the object code in, or embodied in, a physical product 241 | (including a physical distribution medium), accompanied by the 242 | Corresponding Source fixed on a durable physical medium 243 | customarily used for software interchange. 244 | 245 | b) Convey the object code in, or embodied in, a physical product 246 | (including a physical distribution medium), accompanied by a 247 | written offer, valid for at least three years and valid for as 248 | long as you offer spare parts or customer support for that product 249 | model, to give anyone who possesses the object code either (1) a 250 | copy of the Corresponding Source for all the software in the 251 | product that is covered by this License, on a durable physical 252 | medium customarily used for software interchange, for a price no 253 | more than your reasonable cost of physically performing this 254 | conveying of source, or (2) access to copy the 255 | Corresponding Source from a network server at no charge. 256 | 257 | c) Convey individual copies of the object code with a copy of the 258 | written offer to provide the Corresponding Source. This 259 | alternative is allowed only occasionally and noncommercially, and 260 | only if you received the object code with such an offer, in accord 261 | with subsection 6b. 262 | 263 | d) Convey the object code by offering access from a designated 264 | place (gratis or for a charge), and offer equivalent access to the 265 | Corresponding Source in the same way through the same place at no 266 | further charge. You need not require recipients to copy the 267 | Corresponding Source along with the object code. If the place to 268 | copy the object code is a network server, the Corresponding Source 269 | may be on a different server (operated by you or a third party) 270 | that supports equivalent copying facilities, provided you maintain 271 | clear directions next to the object code saying where to find the 272 | Corresponding Source. Regardless of what server hosts the 273 | Corresponding Source, you remain obligated to ensure that it is 274 | available for as long as needed to satisfy these requirements. 275 | 276 | e) Convey the object code using peer-to-peer transmission, provided 277 | you inform other peers where the object code and Corresponding 278 | Source of the work are being offered to the general public at no 279 | charge under subsection 6d. 280 | 281 | A separable portion of the object code, whose source code is excluded 282 | from the Corresponding Source as a System Library, need not be 283 | included in conveying the object code work. 284 | 285 | A "User Product" is either (1) a "consumer product", which means any 286 | tangible personal property which is normally used for personal, family, 287 | or household purposes, or (2) anything designed or sold for incorporation 288 | into a dwelling. In determining whether a product is a consumer product, 289 | doubtful cases shall be resolved in favor of coverage. For a particular 290 | product received by a particular user, "normally used" refers to a 291 | typical or common use of that class of product, regardless of the status 292 | of the particular user or of the way in which the particular user 293 | actually uses, or expects or is expected to use, the product. A product 294 | is a consumer product regardless of whether the product has substantial 295 | commercial, industrial or non-consumer uses, unless such uses represent 296 | the only significant mode of use of the product. 297 | 298 | "Installation Information" for a User Product means any methods, 299 | procedures, authorization keys, or other information required to install 300 | and execute modified versions of a covered work in that User Product from 301 | a modified version of its Corresponding Source. The information must 302 | suffice to ensure that the continued functioning of the modified object 303 | code is in no case prevented or interfered with solely because 304 | modification has been made. 305 | 306 | If you convey an object code work under this section in, or with, or 307 | specifically for use in, a User Product, and the conveying occurs as 308 | part of a transaction in which the right of possession and use of the 309 | User Product is transferred to the recipient in perpetuity or for a 310 | fixed term (regardless of how the transaction is characterized), the 311 | Corresponding Source conveyed under this section must be accompanied 312 | by the Installation Information. But this requirement does not apply 313 | if neither you nor any third party retains the ability to install 314 | modified object code on the User Product (for example, the work has 315 | been installed in ROM). 316 | 317 | The requirement to provide Installation Information does not include a 318 | requirement to continue to provide support service, warranty, or updates 319 | for a work that has been modified or installed by the recipient, or for 320 | the User Product in which it has been modified or installed. Access to a 321 | network may be denied when the modification itself materially and 322 | adversely affects the operation of the network or violates the rules and 323 | protocols for communication across the network. 324 | 325 | Corresponding Source conveyed, and Installation Information provided, 326 | in accord with this section must be in a format that is publicly 327 | documented (and with an implementation available to the public in 328 | source code form), and must require no special password or key for 329 | unpacking, reading or copying. 330 | 331 | 7. Additional Terms. 332 | 333 | "Additional permissions" are terms that supplement the terms of this 334 | License by making exceptions from one or more of its conditions. 335 | Additional permissions that are applicable to the entire Program shall 336 | be treated as though they were included in this License, to the extent 337 | that they are valid under applicable law. If additional permissions 338 | apply only to part of the Program, that part may be used separately 339 | under those permissions, but the entire Program remains governed by 340 | this License without regard to the additional permissions. 341 | 342 | When you convey a copy of a covered work, you may at your option 343 | remove any additional permissions from that copy, or from any part of 344 | it. (Additional permissions may be written to require their own 345 | removal in certain cases when you modify the work.) You may place 346 | additional permissions on material, added by you to a covered work, 347 | for which you have or can give appropriate copyright permission. 348 | 349 | Notwithstanding any other provision of this License, for material you 350 | add to a covered work, you may (if authorized by the copyright holders of 351 | that material) supplement the terms of this License with terms: 352 | 353 | a) Disclaiming warranty or limiting liability differently from the 354 | terms of sections 15 and 16 of this License; or 355 | 356 | b) Requiring preservation of specified reasonable legal notices or 357 | author attributions in that material or in the Appropriate Legal 358 | Notices displayed by works containing it; or 359 | 360 | c) Prohibiting misrepresentation of the origin of that material, or 361 | requiring that modified versions of such material be marked in 362 | reasonable ways as different from the original version; or 363 | 364 | d) Limiting the use for publicity purposes of names of licensors or 365 | authors of the material; or 366 | 367 | e) Declining to grant rights under trademark law for use of some 368 | trade names, trademarks, or service marks; or 369 | 370 | f) Requiring indemnification of licensors and authors of that 371 | material by anyone who conveys the material (or modified versions of 372 | it) with contractual assumptions of liability to the recipient, for 373 | any liability that these contractual assumptions directly impose on 374 | those licensors and authors. 375 | 376 | All other non-permissive additional terms are considered "further 377 | restrictions" within the meaning of section 10. If the Program as you 378 | received it, or any part of it, contains a notice stating that it is 379 | governed by this License along with a term that is a further 380 | restriction, you may remove that term. If a license document contains 381 | a further restriction but permits relicensing or conveying under this 382 | License, you may add to a covered work material governed by the terms 383 | of that license document, provided that the further restriction does 384 | not survive such relicensing or conveying. 385 | 386 | If you add terms to a covered work in accord with this section, you 387 | must place, in the relevant source files, a statement of the 388 | additional terms that apply to those files, or a notice indicating 389 | where to find the applicable terms. 390 | 391 | Additional terms, permissive or non-permissive, may be stated in the 392 | form of a separately written license, or stated as exceptions; 393 | the above requirements apply either way. 394 | 395 | 8. Termination. 396 | 397 | You may not propagate or modify a covered work except as expressly 398 | provided under this License. Any attempt otherwise to propagate or 399 | modify it is void, and will automatically terminate your rights under 400 | this License (including any patent licenses granted under the third 401 | paragraph of section 11). 402 | 403 | However, if you cease all violation of this License, then your 404 | license from a particular copyright holder is reinstated (a) 405 | provisionally, unless and until the copyright holder explicitly and 406 | finally terminates your license, and (b) permanently, if the copyright 407 | holder fails to notify you of the violation by some reasonable means 408 | prior to 60 days after the cessation. 409 | 410 | Moreover, your license from a particular copyright holder is 411 | reinstated permanently if the copyright holder notifies you of the 412 | violation by some reasonable means, this is the first time you have 413 | received notice of violation of this License (for any work) from that 414 | copyright holder, and you cure the violation prior to 30 days after 415 | your receipt of the notice. 416 | 417 | Termination of your rights under this section does not terminate the 418 | licenses of parties who have received copies or rights from you under 419 | this License. If your rights have been terminated and not permanently 420 | reinstated, you do not qualify to receive new licenses for the same 421 | material under section 10. 422 | 423 | 9. Acceptance Not Required for Having Copies. 424 | 425 | You are not required to accept this License in order to receive or 426 | run a copy of the Program. Ancillary propagation of a covered work 427 | occurring solely as a consequence of using peer-to-peer transmission 428 | to receive a copy likewise does not require acceptance. However, 429 | nothing other than this License grants you permission to propagate or 430 | modify any covered work. These actions infringe copyright if you do 431 | not accept this License. Therefore, by modifying or propagating a 432 | covered work, you indicate your acceptance of this License to do so. 433 | 434 | 10. Automatic Licensing of Downstream Recipients. 435 | 436 | Each time you convey a covered work, the recipient automatically 437 | receives a license from the original licensors, to run, modify and 438 | propagate that work, subject to this License. You are not responsible 439 | for enforcing compliance by third parties with this License. 440 | 441 | An "entity transaction" is a transaction transferring control of an 442 | organization, or substantially all assets of one, or subdividing an 443 | organization, or merging organizations. If propagation of a covered 444 | work results from an entity transaction, each party to that 445 | transaction who receives a copy of the work also receives whatever 446 | licenses to the work the party's predecessor in interest had or could 447 | give under the previous paragraph, plus a right to possession of the 448 | Corresponding Source of the work from the predecessor in interest, if 449 | the predecessor has it or can get it with reasonable efforts. 450 | 451 | You may not impose any further restrictions on the exercise of the 452 | rights granted or affirmed under this License. For example, you may 453 | not impose a license fee, royalty, or other charge for exercise of 454 | rights granted under this License, and you may not initiate litigation 455 | (including a cross-claim or counterclaim in a lawsuit) alleging that 456 | any patent claim is infringed by making, using, selling, offering for 457 | sale, or importing the Program or any portion of it. 458 | 459 | 11. Patents. 460 | 461 | A "contributor" is a copyright holder who authorizes use under this 462 | License of the Program or a work on which the Program is based. The 463 | work thus licensed is called the contributor's "contributor version". 464 | 465 | A contributor's "essential patent claims" are all patent claims 466 | owned or controlled by the contributor, whether already acquired or 467 | hereafter acquired, that would be infringed by some manner, permitted 468 | by this License, of making, using, or selling its contributor version, 469 | but do not include claims that would be infringed only as a 470 | consequence of further modification of the contributor version. For 471 | purposes of this definition, "control" includes the right to grant 472 | patent sublicenses in a manner consistent with the requirements of 473 | this License. 474 | 475 | Each contributor grants you a non-exclusive, worldwide, royalty-free 476 | patent license under the contributor's essential patent claims, to 477 | make, use, sell, offer for sale, import and otherwise run, modify and 478 | propagate the contents of its contributor version. 479 | 480 | In the following three paragraphs, a "patent license" is any express 481 | agreement or commitment, however denominated, not to enforce a patent 482 | (such as an express permission to practice a patent or covenant not to 483 | sue for patent infringement). To "grant" such a patent license to a 484 | party means to make such an agreement or commitment not to enforce a 485 | patent against the party. 486 | 487 | If you convey a covered work, knowingly relying on a patent license, 488 | and the Corresponding Source of the work is not available for anyone 489 | to copy, free of charge and under the terms of this License, through a 490 | publicly available network server or other readily accessible means, 491 | then you must either (1) cause the Corresponding Source to be so 492 | available, or (2) arrange to deprive yourself of the benefit of the 493 | patent license for this particular work, or (3) arrange, in a manner 494 | consistent with the requirements of this License, to extend the patent 495 | license to downstream recipients. "Knowingly relying" means you have 496 | actual knowledge that, but for the patent license, your conveying the 497 | covered work in a country, or your recipient's use of the covered work 498 | in a country, would infringe one or more identifiable patents in that 499 | country that you have reason to believe are valid. 500 | 501 | If, pursuant to or in connection with a single transaction or 502 | arrangement, you convey, or propagate by procuring conveyance of, a 503 | covered work, and grant a patent license to some of the parties 504 | receiving the covered work authorizing them to use, propagate, modify 505 | or convey a specific copy of the covered work, then the patent license 506 | you grant is automatically extended to all recipients of the covered 507 | work and works based on it. 508 | 509 | A patent license is "discriminatory" if it does not include within 510 | the scope of its coverage, prohibits the exercise of, or is 511 | conditioned on the non-exercise of one or more of the rights that are 512 | specifically granted under this License. You may not convey a covered 513 | work if you are a party to an arrangement with a third party that is 514 | in the business of distributing software, under which you make payment 515 | to the third party based on the extent of your activity of conveying 516 | the work, and under which the third party grants, to any of the 517 | parties who would receive the covered work from you, a discriminatory 518 | patent license (a) in connection with copies of the covered work 519 | conveyed by you (or copies made from those copies), or (b) primarily 520 | for and in connection with specific products or compilations that 521 | contain the covered work, unless you entered into that arrangement, 522 | or that patent license was granted, prior to 28 March 2007. 523 | 524 | Nothing in this License shall be construed as excluding or limiting 525 | any implied license or other defenses to infringement that may 526 | otherwise be available to you under applicable patent law. 527 | 528 | 12. No Surrender of Others' Freedom. 529 | 530 | If conditions are imposed on you (whether by court order, agreement or 531 | otherwise) that contradict the conditions of this License, they do not 532 | excuse you from the conditions of this License. If you cannot convey a 533 | covered work so as to satisfy simultaneously your obligations under this 534 | License and any other pertinent obligations, then as a consequence you may 535 | not convey it at all. For example, if you agree to terms that obligate you 536 | to collect a royalty for further conveying from those to whom you convey 537 | the Program, the only way you could satisfy both those terms and this 538 | License would be to refrain entirely from conveying the Program. 539 | 540 | 13. Remote Network Interaction; Use with the GNU General Public License. 541 | 542 | Notwithstanding any other provision of this License, if you modify the 543 | Program, your modified version must prominently offer all users 544 | interacting with it remotely through a computer network (if your version 545 | supports such interaction) an opportunity to receive the Corresponding 546 | Source of your version by providing access to the Corresponding Source 547 | from a network server at no charge, through some standard or customary 548 | means of facilitating copying of software. This Corresponding Source 549 | shall include the Corresponding Source for any work covered by version 3 550 | of the GNU General Public License that is incorporated pursuant to the 551 | following paragraph. 552 | 553 | Notwithstanding any other provision of this License, you have 554 | permission to link or combine any covered work with a work licensed 555 | under version 3 of the GNU General Public License into a single 556 | combined work, and to convey the resulting work. The terms of this 557 | License will continue to apply to the part which is the covered work, 558 | but the work with which it is combined will remain governed by version 559 | 3 of the GNU General Public License. 560 | 561 | 14. Revised Versions of this License. 562 | 563 | The Free Software Foundation may publish revised and/or new versions of 564 | the GNU Affero General Public License from time to time. Such new versions 565 | will be similar in spirit to the present version, but may differ in detail to 566 | address new problems or concerns. 567 | 568 | Each version is given a distinguishing version number. If the 569 | Program specifies that a certain numbered version of the GNU Affero General 570 | Public License "or any later version" applies to it, you have the 571 | option of following the terms and conditions either of that numbered 572 | version or of any later version published by the Free Software 573 | Foundation. If the Program does not specify a version number of the 574 | GNU Affero General Public License, you may choose any version ever published 575 | by the Free Software Foundation. 576 | 577 | If the Program specifies that a proxy can decide which future 578 | versions of the GNU Affero General Public License can be used, that proxy's 579 | public statement of acceptance of a version permanently authorizes you 580 | to choose that version for the Program. 581 | 582 | Later license versions may give you additional or different 583 | permissions. However, no additional obligations are imposed on any 584 | author or copyright holder as a result of your choosing to follow a 585 | later version. 586 | 587 | 15. Disclaimer of Warranty. 588 | 589 | THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY 590 | APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT 591 | HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY 592 | OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, 593 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 594 | PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM 595 | IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF 596 | ALL NECESSARY SERVICING, REPAIR OR CORRECTION. 597 | 598 | 16. Limitation of Liability. 599 | 600 | IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 601 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS 602 | THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY 603 | GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE 604 | USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF 605 | DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD 606 | PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), 607 | EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF 608 | SUCH DAMAGES. 609 | 610 | 17. Interpretation of Sections 15 and 16. 611 | 612 | If the disclaimer of warranty and limitation of liability provided 613 | above cannot be given local legal effect according to their terms, 614 | reviewing courts shall apply local law that most closely approximates 615 | an absolute waiver of all civil liability in connection with the 616 | Program, unless a warranty or assumption of liability accompanies a 617 | copy of the Program in return for a fee. 618 | 619 | END OF TERMS AND CONDITIONS 620 | 621 | How to Apply These Terms to Your New Programs 622 | 623 | If you develop a new program, and you want it to be of the greatest 624 | possible use to the public, the best way to achieve this is to make it 625 | free software which everyone can redistribute and change under these terms. 626 | 627 | To do so, attach the following notices to the program. It is safest 628 | to attach them to the start of each source file to most effectively 629 | state the exclusion of warranty; and each file should have at least 630 | the "copyright" line and a pointer to where the full notice is found. 631 | 632 | 633 | Copyright (C) 634 | 635 | This program is free software: you can redistribute it and/or modify 636 | it under the terms of the GNU Affero General Public License as published by 637 | the Free Software Foundation, either version 3 of the License, or 638 | (at your option) any later version. 639 | 640 | This program is distributed in the hope that it will be useful, 641 | but WITHOUT ANY WARRANTY; without even the implied warranty of 642 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 643 | GNU Affero General Public License for more details. 644 | 645 | You should have received a copy of the GNU Affero General Public License 646 | along with this program. If not, see . 647 | 648 | Also add information on how to contact you by electronic and paper mail. 649 | 650 | If your software can interact with users remotely through a computer 651 | network, you should also make sure that it provides a way for users to 652 | get its source. For example, if your program is a web application, its 653 | interface could display a "Source" link that leads users to an archive 654 | of the code. There are many ways you could offer source, and different 655 | solutions will be better for different programs; see section 13 for the 656 | specific requirements. 657 | 658 | You should also get your employer (if you work as a programmer) or school, 659 | if any, to sign a "copyright disclaimer" for the program, if necessary. 660 | For more information on this, and how to apply and follow the GNU AGPL, see 661 | . 662 | -------------------------------------------------------------------------------- /minimal.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Morphic! 5 | 6 | 20 | 21 | 22 | 23 |

Your browser doesn't support canvas.

24 | 25 | 26 | -------------------------------------------------------------------------------- /morphic.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Morphic! 5 | 6 | 44 | 45 | 46 | 47 | 48 |

Your browser doesn't support canvas.

49 | 50 | 51 | -------------------------------------------------------------------------------- /morphic.txt: -------------------------------------------------------------------------------- 1 | 2 | morphic.js 3 | 4 | a lively Web-GUI 5 | inspired by Squeak 6 | 7 | written by Jens Mönig 8 | jens@moenig.org 9 | 10 | Copyright (C) 2016 by Jens Mönig 11 | 12 | this documentation last changed: July 14, 2016 13 | 14 | This file is part of Snap!. 15 | 16 | Snap! is free software: you can redistribute it and/or modify 17 | it under the terms of the GNU Affero General Public License as 18 | published by the Free Software Foundation, either version 3 of 19 | the License, or (at your option) any later version. 20 | 21 | This program is distributed in the hope that it will be useful, 22 | but WITHOUT ANY WARRANTY; without even the implied warranty of 23 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 24 | GNU Affero General Public License for more details. 25 | 26 | You should have received a copy of the GNU Affero General Public License 27 | along with this program. If not, see . 28 | 29 | 30 | documentation contents 31 | ---------------------- 32 | I. inheritance hierarchy 33 | II. object definition toc 34 | III. yet to implement 35 | IV. open issues 36 | V. browser compatibility 37 | VI. the big picture 38 | VII. programming guide 39 | (1) setting up a web page 40 | (a) single world 41 | (b) multiple worlds 42 | (c) an application 43 | (2) manipulating morphs 44 | (3) events 45 | (a) mouse events 46 | (b) context menu 47 | (c) dragging 48 | (d) dropping 49 | (e) keyboard events 50 | (f) resize event 51 | (g) combined mouse-keyboard events 52 | (h) text editing events 53 | (4) stepping 54 | (5) creating new kinds of morphs 55 | (6) development and user modes 56 | (7) turtle graphics 57 | (8) damage list housekeeping 58 | (9) supporting high-resolution "retina" screens 59 | (10) minifying morphic.js 60 | VIII. acknowledgements 61 | IX. contributors 62 | 63 | 64 | I. hierarchy 65 | ------------- 66 | the following tree lists all constructors hierarchically, 67 | indentation indicating inheritance. Refer to this list to get a 68 | contextual overview: 69 | 70 | Color 71 | Node 72 | Morph 73 | BlinkerMorph 74 | CursorMorph 75 | BouncerMorph* 76 | BoxMorph 77 | InspectorMorph 78 | MenuMorph 79 | MouseSensorMorph* 80 | SpeechBubbleMorph 81 | CircleBoxMorph 82 | SliderButtonMorph 83 | SliderMorph 84 | ColorPaletteMorph 85 | GrayPaletteMorph 86 | ColorPickerMorph 87 | FrameMorph 88 | ScrollFrameMorph 89 | ListMorph 90 | StringFieldMorph 91 | WorldMorph 92 | HandleMorph 93 | HandMorph 94 | PenMorph 95 | ShadowMorph 96 | StringMorph 97 | TextMorph 98 | TriggerMorph 99 | MenuItemMorph 100 | Point 101 | Rectangle 102 | 103 | 104 | II. toc 105 | ------- 106 | the following list shows the order in which all constructors are 107 | defined. Use this list to locate code in this document: 108 | 109 | Global settings 110 | Global functions 111 | 112 | Color 113 | Point 114 | Rectangle 115 | Node 116 | Morph 117 | ShadowMorph 118 | HandleMorph 119 | PenMorph 120 | ColorPaletteMorph 121 | GrayPaletteMorph 122 | ColorPickerMorph 123 | BlinkerMorph 124 | CursorMorph 125 | BoxMorph 126 | SpeechBubbleMorph 127 | CircleBoxMorph 128 | SliderButtonMorph 129 | SliderMorph 130 | MouseSensorMorph* 131 | InspectorMorph 132 | MenuMorph 133 | StringMorph 134 | TextMorph 135 | TriggerMorph 136 | MenuItemMorph 137 | FrameMorph 138 | ScrollFrameMorph 139 | ListMorph 140 | StringFieldMorph 141 | BouncerMorph* 142 | HandMorph 143 | WorldMorph 144 | 145 | * included only for demo purposes 146 | 147 | 148 | III. yet to implement 149 | --------------------- 150 | - keyboard support for scroll frames and lists 151 | - full keyboard support for menus (partial support exists) 152 | - virtual keyboard support for Android and IE 153 | 154 | 155 | IV. open issues 156 | ---------------- 157 | - clipboard support (copy & paste) for non-textual data 158 | 159 | 160 | V. browser compatibility 161 | ------------------------ 162 | I have taken great care and considerable effort to make morphic.js 163 | runnable and appearing exactly the same on all current browsers 164 | available to me: 165 | 166 | - Firefox for Windows 167 | - Firefox for Mac 168 | - Firefox for Android 169 | - Chrome for Windows 170 | - Chrome for Mac 171 | - Chrome for Android 172 | - Safari for Windows (deprecated) 173 | - safari for Mac 174 | - Safari for iOS (mobile) 175 | - IE for Windows 176 | - Edge for Windows 177 | - Opera for Windows 178 | - Opera for Mac 179 | 180 | 181 | VI. the big picture 182 | ------------------- 183 | Morphic.js is completely based on Canvas and JavaScript, it is just 184 | Morphic, nothing else. Morphic.js is very basic and covers only the 185 | bare essentials: 186 | 187 | * a stepping mechanism (a time-sharing multiplexer for lively 188 | user interaction ontop of a single OS/browser thread) 189 | * progressive display updates (only dirty rectangles are 190 | redrawn in each display cycle) 191 | * a tree structure 192 | * a single World per Canvas element (although you can have 193 | multiple worlds in multiple Canvas elements on the same web 194 | page) 195 | * a single Hand per World (but you can support multi-touch 196 | events) 197 | * a single text entry focus per World 198 | 199 | In its current state morphic.js doesn't support Transforms (you 200 | cannot rotate Morphs), but with PenMorph there already is a simple 201 | LOGO-like turtle that you can use to draw onto any Morph it is 202 | attached to. I'm planning to add special Morphs that support these 203 | operations later on, but not for every Morph in the system. 204 | Therefore these additions ("sprites" etc.) are likely to be part of 205 | other libraries ("microworld.js") in separate files. 206 | 207 | the purpose of morphic.js is to provide a malleable framework that 208 | will let me experiment with lively GUIs for my hobby horse, which 209 | is drag-and-drop, blocks based programming languages. Those things 210 | (BYOB4 - http://byob.berkeley.edu) will be written using morphic.js 211 | as a library. 212 | 213 | 214 | VII. programming guide 215 | ---------------------- 216 | Morphic.js provides a library for lively GUIs inside single HTML 217 | Canvas elements. Each such canvas element functions as a "world" in 218 | which other visible shapes ("morphs") can be positioned and 219 | manipulated, often directly and interactively by the user. Morphs 220 | are tree nodes and may contain any number of submorphs ("children"). 221 | 222 | All things visible in a morphic World are morphs themselves, i.e. 223 | all text rendering, blinking cursors, entry fields, menus, buttons, 224 | sliders, windows and dialog boxes etc. are created with morphic.js 225 | rather than using HTML DOM elements, and as a consequence can be 226 | changed and adjusted by the programmer regardless of proprietary 227 | browser behavior. 228 | 229 | Each World has an - invisible - "Hand" resembling the mouse cursor 230 | (or the user's finger on touch screens) which handles mouse events, 231 | and may also have a keyboardReceiver to handle key events. 232 | 233 | The basic idea of Morphic is to continuously run display cycles and 234 | to incrementally update the screen by only redrawing those World 235 | regions which have been "dirtied" since the last redraw. Before 236 | each shape is processed for redisplay it gets the chance to perform 237 | a "step" procedure, thus allowing for an illusion of concurrency. 238 | 239 | 240 | (1) setting up a web page 241 | ------------------------- 242 | Setting up a web page for Morphic always involves three steps: 243 | adding one or more Canvas elements, defining one or more worlds, 244 | initializing and starting the main loop. 245 | 246 | 247 | (a) single world 248 | ----------------- 249 | Most commonly you will want your World to fill the browsers's whole 250 | client area. This default situation is easiest and most straight 251 | forward. 252 | 253 | example html file: 254 | 255 | 256 | 257 | 258 | Morphic! 259 | 260 | 274 | 275 | 276 | 277 |

Your browser doesn't support canvas.

278 | 279 | 280 | 281 | 282 | if you use ScrollFrames or otherwise plan to support mouse wheel 283 | scrolling events, you might also add the following inline-CSS 284 | attribute to the Canvas element: 285 | 286 | style="position: absolute;" 287 | 288 | which will prevent the World to be scrolled around instead of the 289 | elements inside of it in some browsers. 290 | 291 | 292 | (b) multiple worlds 293 | ------------------- 294 | If you wish to create a web page with more than one world, make 295 | sure to prevent each world from auto-filling the whole page and 296 | include it in the main loop. It's also a good idea to give each 297 | world its own tabindex: 298 | 299 | example html file: 300 | 301 | 302 | 303 | 304 | Morphic! 305 | 306 | 323 | 324 | 325 |

first world:

326 | 327 |

Your browser doesn't support canvas.

328 | 329 |

second world:

330 | 331 |

Your browser doesn't support canvas.

332 | 333 | 334 | 335 | 336 | 337 | (c) an application 338 | ------------------- 339 | Of course, most of the time you don't want to just plain use the 340 | standard Morphic World "as is" out of the box, but write your own 341 | application (something like Scratch!) in it. For such an 342 | application you'll create your own morph prototypes, perhaps 343 | assemble your own "window frame" and bring it all to life in a 344 | customized World state. the following example creates a simple 345 | snake-like mouse drawing game. 346 | 347 | example html file: 348 | 349 | 350 | 351 | 352 | touch me! 353 | 354 | 391 | 392 | 393 | 394 |

Your browser doesn't support canvas.

395 | 396 | 397 | 398 | 399 | To get an idea how you can craft your own custom morph prototypes 400 | I've included two examples which should give you an idea how to add 401 | properties, override inherited methods and use the stepping 402 | mechanism for "livelyness": 403 | 404 | BouncerMorph 405 | MouseSensorMorph 406 | 407 | For the sake of sharing a single file I've included those examples 408 | in morphic.js itself. Usually you'll define your additions in a 409 | separate file and keep morphic.js untouched. 410 | 411 | 412 | (2) manipulating morphs 413 | ----------------------- 414 | There are many methods to programmatically manipulate morphs. Among 415 | the most important and common ones among all morphs are the 416 | following nine: 417 | 418 | * hide() 419 | * show() 420 | 421 | * setPosition(aPoint) 422 | * setExtent(aPoint) 423 | * setColor(aColor) 424 | 425 | * add(submorph) - attaches submorph ontop 426 | * addBack(submorph) - attaches submorph underneath 427 | 428 | * fullCopy() - duplication 429 | * destroy() - deletion 430 | 431 | 432 | (3) events 433 | ---------- 434 | All user (and system) interaction is triggered by events, which are 435 | passed on from the root element - the World - to its submorphs. The 436 | World contains a list of system (browser) events it reacts to in its 437 | 438 | initEventListeners() 439 | 440 | method. Currently there are 441 | 442 | - mouse 443 | - drop 444 | - keyboard 445 | - (window) resize 446 | 447 | events. 448 | 449 | These system events are dispatched within the morphic World by the 450 | World's Hand and its keyboardReceiver (usually the active text 451 | cursor). 452 | 453 | 454 | (a) mouse events: 455 | ----------------- 456 | The Hand dispatches the following mouse events to relevant morphs: 457 | 458 | mouseDownLeft 459 | mouseDownRight 460 | mouseClickLeft 461 | mouseClickRight 462 | mouseDoubleClick 463 | mouseEnter 464 | mouseLeave 465 | mouseEnterDragging 466 | mouseLeaveDragging 467 | mouseMove 468 | mouseScroll 469 | 470 | If you wish your morph to react to any such event, simply add a 471 | method of the same name as the event, e.g: 472 | 473 | MyMorph.prototype.mouseMove = function(pos) {}; 474 | 475 | All of these methods have as optional parameter a Point object 476 | indicating the current position of the Hand inside the World's 477 | coordinate system. The 478 | 479 | mouseMove(pos, button) 480 | 481 | event method has an additional optional parameter indicating the 482 | currently pressed mouse button, which is either 'left' or 'right'. 483 | You can use this to let users interact with 3D environments. 484 | 485 | Events may be "bubbled" up a morph's owner chain by calling 486 | 487 | this.escalateEvent(functionName, arg) 488 | 489 | in the event handler method's code. 490 | 491 | Likewise, removing the event handler method will render your morph 492 | passive to the event in question. 493 | 494 | 495 | (b) context menu: 496 | ----------------- 497 | By default right-clicking (or single-finger tap-and-hold) on a morph 498 | also invokes its context menu (in addition to firing the 499 | mouseClickRight event). A morph's context menu can be customized by 500 | assigning a Menu instance to its 501 | 502 | customContextMenu 503 | 504 | property, or altogether suppressed by overriding its inherited 505 | 506 | contextMenu() 507 | 508 | method. 509 | 510 | 511 | (c) dragging: 512 | ------------- 513 | Dragging a morph is initiated when the left mouse button is pressed, 514 | held and the mouse is moved. 515 | 516 | You can control whether a morph is draggable by setting its 517 | 518 | isDraggable 519 | 520 | property either to false or true. If a morph isn't draggable itself 521 | it will pass the pick-up request up its owner chain. This lets you 522 | create draggable composite morphs like Windows, DialogBoxes, 523 | Sliders etc. 524 | 525 | Sometimes it is desireable to make "template" shapes which cannot be 526 | moved themselves, but from which instead duplicates can be peeled 527 | off. This is especially useful for building blocks in construction 528 | kits, e.g. the MIT-Scratch palette. Morphic.js lets you control this 529 | functionality by setting the 530 | 531 | isTemplate 532 | 533 | property flag to true for any morph whose "isDraggable" property is 534 | turned off. When dragging such a Morph the hand will instead grab 535 | a duplicate of the template whose "isDraggable" flag is true and 536 | whose "isTemplate" flag is false, in other words: a non-template. 537 | 538 | When creating a copy from a template, the copy's 539 | 540 | reactToTemplateCopy 541 | 542 | is invoked, if it is present. 543 | 544 | Dragging is indicated by adding a drop shadow to the morph in hand. 545 | If a morph follows the hand without displaying a drop shadow it is 546 | merely being moved about without changing its parent (owner morph), 547 | e.g. when "dragging" a morph handle to resize its owner, or when 548 | "dragging" a slider button. 549 | 550 | Right before a morph is picked up its 551 | 552 | prepareToBeGrabbed(handMorph) 553 | 554 | method is invoked, if it is present. Immediately after the pick-up 555 | the former parent's 556 | 557 | reactToGrabOf(grabbedMorph) 558 | 559 | method is called, again only if it exists. 560 | 561 | Similar to events, these methods are optional and don't exist by 562 | default. For a simple example of how they can be used to adjust 563 | scroll bars in a scroll frame please have a look at their 564 | implementation in FrameMorph. 565 | 566 | 567 | (d) dropping: 568 | ------------- 569 | Dropping is triggered when the left mouse button is either pressed 570 | or released while the Hand is dragging a morph. 571 | 572 | Dropping a morph causes it to become embedded in a new owner morph. 573 | You can control this embedding behavior by setting the prospective 574 | drop target's 575 | 576 | acceptsDrops 577 | 578 | property to either true or false, or by overriding its inherited 579 | 580 | wantsDropOf(aMorph) 581 | 582 | method. 583 | 584 | Right after a morph has been dropped its 585 | 586 | justDropped(handMorph) 587 | 588 | method is called, and its new parent's 589 | 590 | reactToDropOf(droppedMorph, handMorph) 591 | 592 | method is invoked, again only if each method exists. 593 | 594 | Similar to events, these methods are optional and by default are 595 | not present in morphs by default (watch out for inheritance, 596 | though!). For a simple example of how they can be used to adjust 597 | scroll bars in a scroll frame please have a look at their 598 | implementation in FrameMorph. 599 | 600 | Drops of image elements from outside the world canvas are dispatched as 601 | 602 | droppedImage(aCanvas, name) 603 | droppedSVG(anImage, name) 604 | 605 | events to interested Morphs at the mouse pointer. If you want you Morph 606 | to e.g. import outside images you can add the droppedImage() and / or the 607 | droppedSVG() methods to it. The parameter passed to the event handles is 608 | a new offscreen canvas element representing a copy of the original image 609 | element which can be directly used, e.g. by assigning it to another 610 | Morph's image property. In the case of a dropped SVG it is an image 611 | element (not a canvas), which has to be rasterized onto a canvas before 612 | it can be used. The benefit of handling SVGs as image elements is that 613 | rasterization can be deferred until the destination scale is known, taking 614 | advantage of SVG's ability for smooth scaling. If instead SVGs are to be 615 | rasterized right away, you can set the 616 | 617 | MorphicPreferences.rasterizeSVGs 618 | 619 | preference to . In this case dropped SVGs also trigger the 620 | droppedImage() event with a canvas containing a rasterized version of the 621 | SVG. 622 | 623 | The same applies to drops of audio or text files from outside the world 624 | canvas. 625 | 626 | Those are dispatched as 627 | 628 | droppedAudio(anAudio, name) 629 | droppedText(aString, name) 630 | 631 | events to interested Morphs at the mouse pointer. 632 | 633 | if none of the above content types can be determined, the file contents 634 | is dispatched as an ArrayBuffer to interested Morphs: 635 | 636 | droppedBinary(anArrayBuffer, name) 637 | 638 | 639 | (e) keyboard events 640 | ------------------- 641 | The World dispatches the following key events to its active 642 | keyboardReceiver: 643 | 644 | keypress 645 | keydown 646 | keyup 647 | 648 | Currently the only morph which acts as keyboard receiver is 649 | CursorMorph, the basic text editing widget. If you wish to add 650 | keyboard support to your morph you need to add event handling 651 | methods for 652 | 653 | processKeyPress(event) 654 | processKeyDown(event) 655 | processKeyUp(event) 656 | 657 | and activate them by assigning your morph to the World's 658 | 659 | keyboardReceiver 660 | 661 | property. 662 | 663 | Note that processKeyUp() is optional and doesn't have to be present 664 | if your morph doesn't require it. 665 | 666 | 667 | (f) resize event 668 | ---------------- 669 | The Window resize event is handled by the World and allows the 670 | World's extent to be adjusted so that it always completely fills 671 | the browser's visible page. You can turn off this default behavior 672 | by setting the World's 673 | 674 | useFillPage 675 | 676 | property to false. 677 | 678 | Alternatively you can also initialize the World with the 679 | useFillPage switch turned off from the beginning by passing the 680 | false value as second parameter to the World's constructor: 681 | 682 | world = new World(aCanvas, false); 683 | 684 | Use this when creating a web page with multiple Worlds. 685 | 686 | if "useFillPage" is turned on the World dispatches an 687 | 688 | reactToWorldResize(newBounds) 689 | 690 | events to all of its children (toplevel only), allowing each to 691 | adjust to the new World bounds by implementing a corresponding 692 | method, the passed argument being the World's new dimensions after 693 | completing the resize. By default, the "reactToWorldResize" Method 694 | does not exist. 695 | 696 | Example: 697 | 698 | Add the following method to your Morph to let it automatically 699 | fill the whole World, but leave a 10 pixel border uncovered: 700 | 701 | MyMorph.prototype.reactToWorldResize = function (rect) { 702 | this.changed(); 703 | this.bounds = rect.insetBy(10); 704 | this.drawNew(); 705 | this.changed(); 706 | }; 707 | 708 | 709 | (g) combined mouse-keyboard events 710 | ---------------------------------- 711 | Occasionally you'll want an object to react differently to a mouse 712 | click or to some other mouse event while the user holds down a key 713 | on the keyboard. Such "shift-click", "ctl-click", or "alt-click" 714 | events can be implemented by querying the World's 715 | 716 | currentKey 717 | 718 | property inside the function that reacts to the mouse event. This 719 | property stores the keyCode of the key that's currently pressed. 720 | Once the key is released by the user it reverts to null. 721 | 722 | 723 | (h) text editing events 724 | ----------------------- 725 | Much of Morphic's "liveliness" comes out of allowing text elements 726 | (instances of either single-lined StringMorph or multi-lined TextMorph) 727 | to be directly manipulated and edited by users. This requires other 728 | objects which may have an interest in the text element's state to react 729 | appropriately. Therefore text elements and their manipulators emit 730 | a stream of events, mostly by "bubbling" them up the text element's 731 | owner chain. Text elements' parents are notified about the following 732 | events: 733 | 734 | Whenever the user presses a key on the keyboard while a text element 735 | is being edited, a 736 | 737 | reactToKeystroke(event) 738 | 739 | is escalated up its parent chain, the "event" parameter being the 740 | original one received by the World. 741 | 742 | Once the user has completed the edit, the following events are 743 | dispatched: 744 | 745 | accept() - was pressed on a single line of text 746 | cancel() - was pressed on any text element 747 | 748 | Note that "accept" only gets triggered by single-line texte elements, 749 | as the key is used to insert line breaks in multi-line 750 | elements. Therefore, whenever a text edit is terminated by the user 751 | (accepted, cancelled or otherwise), 752 | 753 | reactToEdit(StringOrTextMorph) 754 | 755 | is triggered. 756 | 757 | If the MorphicPreference's 758 | 759 | useSliderForInput 760 | 761 | setting is turned on, a slider is popped up underneath the currently 762 | edited text element letting the user insert numbers out of the given 763 | slider range. Whenever this happens, i.e. whenever the slider is moved 764 | or while the slider button is pressed, a stream of 765 | 766 | reactToSliderEdit(StringOrTextMorph) 767 | 768 | events is dispatched, allowing for "Bret-Victor" style "live coding" 769 | applications. 770 | 771 | In addition to user-initiated events text elements also emit 772 | change notifications to their direct parents whenever their drawNew() 773 | method is invoked. That way complex Morphs containing text elements 774 | get a chance to react if something about the embedded text has been 775 | modified programmatically. These events are: 776 | 777 | layoutChanged() - sent from instances of TextMorph 778 | fixLayout() - sent from instances of StringMorph 779 | 780 | they are different so that Morphs which contain both multi-line and 781 | single-line text elements can hold them apart. 782 | 783 | 784 | (4) stepping 785 | ------------ 786 | Stepping is what makes Morphic "magical". Two properties control 787 | a morph's stepping behavior: the fps attribute and the step() 788 | method. 789 | 790 | By default the 791 | 792 | step() 793 | 794 | method does nothing. As you can see in the examples of BouncerMorph 795 | and MouseSensorMorph you can easily override this inherited method 796 | to suit your needs. 797 | 798 | By default the step() method is called once per display cycle. 799 | Depending on the number of actively stepping morphs and the 800 | complexity of your step() methods this can cause quite a strain on 801 | your CPU, and also result in your application behaving differently 802 | on slower computers than on fast ones. 803 | 804 | setting 805 | 806 | myMorph.fps 807 | 808 | to a number lower than the interval for the main loop lets you free 809 | system resources (albeit at the cost of a less responsive or slower 810 | behavior for this particular morph). 811 | 812 | 813 | (5) creating new kinds of morphs 814 | -------------------------------- 815 | The real fun begins when you start to create new kinds of morphs 816 | with customized shapes. Imagine, e.g. jigsaw puzzle pieces or 817 | musical notes. For this you have to override the default 818 | 819 | drawNew() 820 | 821 | method. 822 | 823 | This method creates a new offscreen Canvas and stores it in 824 | the morph's 825 | 826 | image 827 | 828 | property. 829 | 830 | Use the following template for a start: 831 | 832 | MyMorph.prototype.drawNew = function() { 833 | var context; 834 | this.image = newCanvas(this.extent()); 835 | context = this.image.getContext('2d'); 836 | // use context to paint stuff here 837 | }; 838 | 839 | If your new morph stores or references to other morphs outside of 840 | the submorph tree in other properties, be sure to also override the 841 | default 842 | 843 | updateReferences() 844 | 845 | method if you want it to support duplication. 846 | 847 | 848 | (6) development and user modes 849 | ------------------------------ 850 | When working with Squeak on Scratch or BYOB among the features I 851 | like the best and use the most is inspecting what's going on in 852 | the World while it is up and running. That's what development mode 853 | is for (you could also call it debug mode). In essence development 854 | mode controls which context menu shows up. In user mode right 855 | clicking (or double finger tapping) a morph invokes its 856 | 857 | customContextMenu 858 | 859 | property, whereas in development mode only the general 860 | 861 | developersMenu() 862 | 863 | method is called and the resulting menu invoked. The developers' 864 | menu features Gui-Builder-wise functionality to directly inspect, 865 | take apart, reassamble and otherwise manipulate morphs and their 866 | contents. 867 | 868 | Instead of using the "customContextMenu" property you can also 869 | assign a more dynamic contextMenu by overriding the general 870 | 871 | userMenu() 872 | 873 | method with a customized menu constructor. The difference between 874 | the customContextMenu property and the userMenu() method is that 875 | the former is also present in development mode and overrides the 876 | developersMenu() result. For an example of how to use the 877 | customContextMenu property have a look at TextMorph's evaluation 878 | menu, which is used for the Inspector's evaluation pane. 879 | 880 | When in development mode you can inspect every Morph's properties 881 | with the inspector, including all of its methods. The inspector 882 | also lets you add, remove and rename properties, and even edit 883 | their values at runtime. Like in a Smalltalk environment the inspect 884 | features an evaluation pane into which you can type in arbitrary 885 | JavaScript code and evaluate it in the context of the inspectee. 886 | 887 | Use switching between user and development modes while you are 888 | developing an application and disable switching to development once 889 | you're done and deploying, because generally you don't want to 890 | confuse end-users with inspectors and meta-level stuff. 891 | 892 | 893 | (7) turtle graphics 894 | ------------------- 895 | 896 | The basic Morphic kernel features a simple LOGO turtle constructor 897 | called 898 | 899 | PenMorph 900 | 901 | which you can use to draw onto its parent Morph. By default every 902 | Morph in the system (including the World) is able to act as turtle 903 | canvas and can display pen trails. Pen trails will be lost whenever 904 | the trails morph (the pen's parent) performs a "drawNew()" 905 | operation. If you want to create your own pen trails canvas, you 906 | may wish to modify its 907 | 908 | penTrails() 909 | 910 | property, so that it keeps a separate offscreen canvas for pen 911 | trails (and doesn't loose these on redraw). 912 | 913 | the following properties of PenMorph are relevant for turtle 914 | graphics: 915 | 916 | color - a Color 917 | size - line width of pen trails 918 | heading - degrees 919 | isDown - drawing state 920 | 921 | the following commands can be used to actually draw something: 922 | 923 | up() - lift the pen up, further movements leave no trails 924 | down() - set down, further movements leave trails 925 | clear() - remove all trails from the current parent 926 | forward(n) - move n steps in the current direction (heading) 927 | turn(n) - turn right n degrees 928 | 929 | Turtle graphics can best be explored interactively by creating a 930 | new PenMorph object and by manipulating it with the inspector 931 | widget. 932 | 933 | NOTE: PenMorph has a special optimization for recursive operations 934 | called 935 | 936 | warp(function) 937 | 938 | You can significantly speed up recursive ops and increase the depth 939 | of recursion that's displayable by wrapping WARP around your 940 | recursive function call: 941 | 942 | example: 943 | 944 | myPen.warp(function () { 945 | myPen.tree(12, 120, 20); 946 | }) 947 | 948 | will be much faster than just invoking the tree function, because it 949 | prevents the parent's parent from keeping track of every single line 950 | segment and instead redraws the outcome in a single pass. 951 | 952 | 953 | (8) damage list housekeeping 954 | ---------------------------- 955 | Morphic's progressive display update comes at the cost of having to 956 | cycle through a list of "broken rectangles" every display cycle. If 957 | this list gets very long working this damage list can lead to a 958 | seemingly dramatic slow-down of the Morphic system. Typically this 959 | occurs when updating the layout of complex Morphs with very many 960 | submorphs, e.g. when resizing an inspector window. 961 | 962 | An effective strategy to cope with this is to use the inherited 963 | 964 | trackChanges 965 | 966 | property of the Morph prototype for damage list housekeeping. 967 | 968 | The trackChanges property of the Morph prototype is a Boolean switch 969 | that determines whether the World's damage list ('broken' rectangles) 970 | tracks changes. By default the switch is always on. If set to false 971 | changes are not stored. This can be very useful for housekeeping of 972 | the damage list in situations where a large number of (sub-) morphs 973 | are changed more or less at once. Instead of keeping track of every 974 | single submorph's changes tremendous performance improvements can be 975 | achieved by setting the trackChanges flag to false before propagating 976 | the layout changes, setting it to true again and then storing the full 977 | bounds of the surrounding morph. As an example refer to the 978 | 979 | moveBy() 980 | 981 | method of HandMorph, and to the 982 | 983 | fixLayout() 984 | 985 | method of InspectorMorph, or the 986 | 987 | startLayout() 988 | endLayout() 989 | 990 | methods of SyntaxElementMorph in the Snap application. 991 | 992 | 993 | (9) supporting high-resolution "retina" screens 994 | ----------------------------------------------- 995 | By default retina support gets installed when Morphic.js loads. There 996 | are two global functions that let you test for retina availability: 997 | 998 | isRetinaSupported() - Bool, answers if retina support is available 999 | isRetinaEnabled() - Bool, answers if currently in retina mode 1000 | 1001 | and two more functions that let you control retina support if it is 1002 | available: 1003 | 1004 | enableRetinaSupport() 1005 | disableRetinaSupport() 1006 | 1007 | Both of these internally test whether retina is available, so they are 1008 | safe to call directly. For an example how to make retina support 1009 | user-specifiable refer to 1010 | 1011 | Snap! >> guis.js >> toggleRetina() 1012 | 1013 | Even when in retina mode it often makes sense to use normal-resolution 1014 | canvasses for simple shapes in order to save system resources and 1015 | optimize performance. Examples are costumes and backgrounds in Snap. 1016 | In Morphic you can create new canvas elements using 1017 | 1018 | newCanvas(extentPoint [, nonRetinaFlag]) 1019 | 1020 | If retina support is enabled such new canvasses will automatically be 1021 | high-resolution canvasses, unless the newCanvas() function is given an 1022 | otherwise optional second Boolean argument that explicitly makes 1023 | it a non-retina canvas. 1024 | 1025 | Not the whole canvas API is supported by Morphic's retina utilities. 1026 | Especially if your code uses putImageData() you will want to "downgrade" 1027 | a target high-resolution canvas to a normal-resolution ("non-retina") 1028 | one before using 1029 | 1030 | normalizeCanvas(aCanvas [, copyFlag]) 1031 | 1032 | This will change the target canvas' resolution in place (!). If you 1033 | pass in the optional second Boolean flag the function returns 1034 | a non-retina copy and leaves the target canvas unchanged. An example 1035 | of this normalize mechanism is converting the penTrails layer of Snap's 1036 | stage (high-resolution) into a sprite-costume (normal resolution). 1037 | 1038 | 1039 | (10) minifying morphic.js 1040 | ------------------------- 1041 | Coming from Smalltalk and being a Squeaker at heart I am a huge fan 1042 | of browsing the code itself to make sense of it. Therefore I have 1043 | included this documentation and (too little) inline comments so all 1044 | you need to get going is this very file. 1045 | 1046 | Nowadays with live streaming HD video even on mobile phones 250 KB 1047 | shouldn't be a big strain on bandwith, still minifying and even 1048 | compressing morphic.js down do about 100 KB may sometimes improve 1049 | performance in production use. 1050 | 1051 | Being an attorney-at-law myself you programmer folk keep harassing 1052 | me with rabulistic nitpickings about free software licenses. I'm 1053 | releasing morphic.js under an AGPL license. Therefore please make 1054 | sure to adhere to that license in any minified or compressed version. 1055 | 1056 | 1057 | VIII. acknowledgements 1058 | ---------------------- 1059 | The original Morphic was designed and written by Randy Smith and 1060 | John Maloney for the SELF programming language, and later ported to 1061 | Squeak (Smalltalk) by John Maloney and Dan Ingalls, who has also 1062 | ported it to JavaScript (the Lively Kernel), once again setting 1063 | a "Gold Standard" for self sustaining systems which morphic.js 1064 | cannot and does not aspire to meet. 1065 | 1066 | This Morphic implementation for JavaScript is not a direct port of 1067 | Squeak's Morphic, but still many individual functions have been 1068 | ported almost literally from Squeak, sometimes even including their 1069 | comments, e.g. the morph duplication mechanism fullCopy(). Squeak 1070 | has been a treasure trove, and if morphic.js looks, feels and 1071 | smells a lot like Squeak, I'll take it as a compliment. 1072 | 1073 | Evelyn Eastmond has inspired and encouraged me with her wonderful 1074 | implementation of DesignBlocksJS. Thanks for sharing code, ideas 1075 | and enthusiasm for programming. 1076 | 1077 | John Maloney has been my mentor and my source of inspiration for 1078 | these Morphic experiments. Thanks for the critique, the suggestions 1079 | and explanations for all things Morphic and for being my all time 1080 | programming hero. 1081 | 1082 | I have originally written morphic.js in Florian Balmer's Notepad2 1083 | editor for Windows, later switched to Apple's Dashcode and later 1084 | still to Apple's Xcode. I've also come to depend on both Douglas 1085 | Crockford's JSLint and later the JSHint project, as well as on 1086 | Mozilla's Firebug and Google's Chrome to get 1087 | it right. 1088 | 1089 | 1090 | IX. contributors 1091 | ---------------------- 1092 | Joe Otto found and fixed many early bugs and taught me some tricks. 1093 | Nathan Dinsmore contributed mouse wheel scrolling, cached 1094 | background texture handling, countless bug fixes and optimizations. 1095 | Ian Reynolds contributed backspace key handling for Chrome. 1096 | Davide Della Casa contributed performance optimizations for Firefox. 1097 | Jason N (@cyderize) contributed native copy & paste for text editing. 1098 | Bartosz Leper contributed retina display support. 1099 | 1100 | - Jens Mönig 1101 | -------------------------------------------------------------------------------- /multiple.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Morphic! 5 | 6 | 23 | 24 | 25 |

first world:

26 | 27 |

Your browser doesn't support canvas.

28 | 29 |

second world:

30 | 31 |

Your browser doesn't support canvas.

32 | 33 | 34 | --------------------------------------------------------------------------------