update README

v11.1

COPYING

@@ -0,0 +1,675 @@
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU General Public License is a free, copyleft license for
+software and other kinds of works.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+the GNU General Public License is intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.  We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors.  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights.  Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received.  You must make sure that they, too, receive
+or can get the source code.  And you must show them these terms so they
+know their rights.
+
+  Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+  For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software.  For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+  Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so.  This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software.  The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable.  Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products.  If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+  Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary.  To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Use with the GNU Affero General Public License.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU Affero General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+
+    <program>  Copyright (C) <year>  <name of author>
+    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU GPL, see
+<http://www.gnu.org/licenses/>.
+
+  The GNU General Public License does not permit incorporating your program
+into proprietary programs.  If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.  But first, please read
+<http://www.gnu.org/philosophy/why-not-lgpl.html>.
+

LICENSE

@@ -1,339 +0,0 @@
-                    GNU GENERAL PUBLIC LICENSE
-                       Version 2, June 1991
-
- Copyright (C) 1989, 1991 Free Software Foundation, Inc., <http://fsf.org/>
- 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
- Everyone is permitted to copy and distribute verbatim copies
- of this license document, but changing it is not allowed.
-
-                            Preamble
-
-  The licenses for most software are designed to take away your
-freedom to share and change it.  By contrast, the GNU General Public
-License is intended to guarantee your freedom to share and change free
-software--to make sure the software is free for all its users.  This
-General Public License applies to most of the Free Software
-Foundation's software and to any other program whose authors commit to
-using it.  (Some other Free Software Foundation software is covered by
-the GNU Lesser General Public License instead.)  You can apply it to
-your programs, too.
-
-  When we speak of free software, we are referring to freedom, not
-price.  Our General Public Licenses are designed to make sure that you
-have the freedom to distribute copies of free software (and charge for
-this service if you wish), that you receive source code or can get it
-if you want it, that you can change the software or use pieces of it
-in new free programs; and that you know you can do these things.
-
-  To protect your rights, we need to make restrictions that forbid
-anyone to deny you these rights or to ask you to surrender the rights.
-These restrictions translate to certain responsibilities for you if you
-distribute copies of the software, or if you modify it.
-
-  For example, if you distribute copies of such a program, whether
-gratis or for a fee, you must give the recipients all the rights that
-you have.  You must make sure that they, too, receive or can get the
-source code.  And you must show them these terms so they know their
-rights.
-
-  We protect your rights with two steps: (1) copyright the software, and
-(2) offer you this license which gives you legal permission to copy,
-distribute and/or modify the software.
-
-  Also, for each author's protection and ours, we want to make certain
-that everyone understands that there is no warranty for this free
-software.  If the software is modified by someone else and passed on, we
-want its recipients to know that what they have is not the original, so
-that any problems introduced by others will not reflect on the original
-authors' reputations.
-
-  Finally, any free program is threatened constantly by software
-patents.  We wish to avoid the danger that redistributors of a free
-program will individually obtain patent licenses, in effect making the
-program proprietary.  To prevent this, we have made it clear that any
-patent must be licensed for everyone's free use or not licensed at all.
-
-  The precise terms and conditions for copying, distribution and
-modification follow.
-
-                    GNU GENERAL PUBLIC LICENSE
-   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
-
-  0. This License applies to any program or other work which contains
-a notice placed by the copyright holder saying it may be distributed
-under the terms of this General Public License.  The "Program", below,
-refers to any such program or work, and a "work based on the Program"
-means either the Program or any derivative work under copyright law:
-that is to say, a work containing the Program or a portion of it,
-either verbatim or with modifications and/or translated into another
-language.  (Hereinafter, translation is included without limitation in
-the term "modification".)  Each licensee is addressed as "you".
-
-Activities other than copying, distribution and modification are not
-covered by this License; they are outside its scope.  The act of
-running the Program is not restricted, and the output from the Program
-is covered only if its contents constitute a work based on the
-Program (independent of having been made by running the Program).
-Whether that is true depends on what the Program does.
-
-  1. You may copy and distribute verbatim copies of the Program's
-source code as you receive it, in any medium, provided that you
-conspicuously and appropriately publish on each copy an appropriate
-copyright notice and disclaimer of warranty; keep intact all the
-notices that refer to this License and to the absence of any warranty;
-and give any other recipients of the Program a copy of this License
-along with the Program.
-
-You may charge a fee for the physical act of transferring a copy, and
-you may at your option offer warranty protection in exchange for a fee.
-
-  2. You may modify your copy or copies of the Program or any portion
-of it, thus forming a work based on the Program, and copy and
-distribute such modifications or work under the terms of Section 1
-above, provided that you also meet all of these conditions:
-
-    a) You must cause the modified files to carry prominent notices
-    stating that you changed the files and the date of any change.
-
-    b) You must cause any work that you distribute or publish, that in
-    whole or in part contains or is derived from the Program or any
-    part thereof, to be licensed as a whole at no charge to all third
-    parties under the terms of this License.
-
-    c) If the modified program normally reads commands interactively
-    when run, you must cause it, when started running for such
-    interactive use in the most ordinary way, to print or display an
-    announcement including an appropriate copyright notice and a
-    notice that there is no warranty (or else, saying that you provide
-    a warranty) and that users may redistribute the program under
-    these conditions, and telling the user how to view a copy of this
-    License.  (Exception: if the Program itself is interactive but
-    does not normally print such an announcement, your work based on
-    the Program is not required to print an announcement.)
-
-These requirements apply to the modified work as a whole.  If
-identifiable sections of that work are not derived from the Program,
-and can be reasonably considered independent and separate works in
-themselves, then this License, and its terms, do not apply to those
-sections when you distribute them as separate works.  But when you
-distribute the same sections as part of a whole which is a work based
-on the Program, the distribution of the whole must be on the terms of
-this License, whose permissions for other licensees extend to the
-entire whole, and thus to each and every part regardless of who wrote it.
-
-Thus, it is not the intent of this section to claim rights or contest
-your rights to work written entirely by you; rather, the intent is to
-exercise the right to control the distribution of derivative or
-collective works based on the Program.
-
-In addition, mere aggregation of another work not based on the Program
-with the Program (or with a work based on the Program) on a volume of
-a storage or distribution medium does not bring the other work under
-the scope of this License.
-
-  3. You may copy and distribute the Program (or a work based on it,
-under Section 2) in object code or executable form under the terms of
-Sections 1 and 2 above provided that you also do one of the following:
-
-    a) Accompany it with the complete corresponding machine-readable
-    source code, which must be distributed under the terms of Sections
-    1 and 2 above on a medium customarily used for software interchange; or,
-
-    b) Accompany it with a written offer, valid for at least three
-    years, to give any third party, for a charge no more than your
-    cost of physically performing source distribution, a complete
-    machine-readable copy of the corresponding source code, to be
-    distributed under the terms of Sections 1 and 2 above on a medium
-    customarily used for software interchange; or,
-
-    c) Accompany it with the information you received as to the offer
-    to distribute corresponding source code.  (This alternative is
-    allowed only for noncommercial distribution and only if you
-    received the program in object code or executable form with such
-    an offer, in accord with Subsection b above.)
-
-The source code for a work means the preferred form of the work for
-making modifications to it.  For an executable work, complete source
-code means all the source code for all modules it contains, plus any
-associated interface definition files, plus the scripts used to
-control compilation and installation of the executable.  However, as a
-special exception, the source code distributed need not include
-anything that is normally distributed (in either source or binary
-form) with the major components (compiler, kernel, and so on) of the
-operating system on which the executable runs, unless that component
-itself accompanies the executable.
-
-If distribution of executable or object code is made by offering
-access to copy from a designated place, then offering equivalent
-access to copy the source code from the same place counts as
-distribution of the source code, even though third parties are not
-compelled to copy the source along with the object code.
-
-  4. You may not copy, modify, sublicense, or distribute the Program
-except as expressly provided under this License.  Any attempt
-otherwise to copy, modify, sublicense or distribute the Program is
-void, and will automatically terminate your rights under this License.
-However, parties who have received copies, or rights, from you under
-this License will not have their licenses terminated so long as such
-parties remain in full compliance.
-
-  5. You are not required to accept this License, since you have not
-signed it.  However, nothing else grants you permission to modify or
-distribute the Program or its derivative works.  These actions are
-prohibited by law if you do not accept this License.  Therefore, by
-modifying or distributing the Program (or any work based on the
-Program), you indicate your acceptance of this License to do so, and
-all its terms and conditions for copying, distributing or modifying
-the Program or works based on it.
-
-  6. Each time you redistribute the Program (or any work based on the
-Program), the recipient automatically receives a license from the
-original licensor to copy, distribute or modify the Program subject to
-these terms and conditions.  You may not impose any further
-restrictions on the recipients' exercise of the rights granted herein.
-You are not responsible for enforcing compliance by third parties to
-this License.
-
-  7. If, as a consequence of a court judgment or allegation of patent
-infringement or for any other reason (not limited to patent issues),
-conditions are imposed on you (whether by court order, agreement or
-otherwise) that contradict the conditions of this License, they do not
-excuse you from the conditions of this License.  If you cannot
-distribute so as to satisfy simultaneously your obligations under this
-License and any other pertinent obligations, then as a consequence you
-may not distribute the Program at all.  For example, if a patent
-license would not permit royalty-free redistribution of the Program by
-all those who receive copies directly or indirectly through you, then
-the only way you could satisfy both it and this License would be to
-refrain entirely from distribution of the Program.
-
-If any portion of this section is held invalid or unenforceable under
-any particular circumstance, the balance of the section is intended to
-apply and the section as a whole is intended to apply in other
-circumstances.
-
-It is not the purpose of this section to induce you to infringe any
-patents or other property right claims or to contest validity of any
-such claims; this section has the sole purpose of protecting the
-integrity of the free software distribution system, which is
-implemented by public license practices.  Many people have made
-generous contributions to the wide range of software distributed
-through that system in reliance on consistent application of that
-system; it is up to the author/donor to decide if he or she is willing
-to distribute software through any other system and a licensee cannot
-impose that choice.
-
-This section is intended to make thoroughly clear what is believed to
-be a consequence of the rest of this License.
-
-  8. If the distribution and/or use of the Program is restricted in
-certain countries either by patents or by copyrighted interfaces, the
-original copyright holder who places the Program under this License
-may add an explicit geographical distribution limitation excluding
-those countries, so that distribution is permitted only in or among
-countries not thus excluded.  In such case, this License incorporates
-the limitation as if written in the body of this License.
-
-  9. The Free Software Foundation may publish revised and/or new versions
-of the General Public License from time to time.  Such new versions will
-be similar in spirit to the present version, but may differ in detail to
-address new problems or concerns.
-
-Each version is given a distinguishing version number.  If the Program
-specifies a version number of this License which applies to it and "any
-later version", you have the option of following the terms and conditions
-either of that version or of any later version published by the Free
-Software Foundation.  If the Program does not specify a version number of
-this License, you may choose any version ever published by the Free Software
-Foundation.
-
-  10. If you wish to incorporate parts of the Program into other free
-programs whose distribution conditions are different, write to the author
-to ask for permission.  For software which is copyrighted by the Free
-Software Foundation, write to the Free Software Foundation; we sometimes
-make exceptions for this.  Our decision will be guided by the two goals
-of preserving the free status of all derivatives of our free software and
-of promoting the sharing and reuse of software generally.
-
-                            NO WARRANTY
-
-  11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
-FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW.  EXCEPT WHEN
-OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
-PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
-OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
-MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.  THE ENTIRE RISK AS
-TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU.  SHOULD THE
-PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
-REPAIR OR CORRECTION.
-
-  12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
-WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
-REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
-INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
-OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
-TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
-YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
-PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
-POSSIBILITY OF SUCH DAMAGES.
-
-                     END OF TERMS AND CONDITIONS
-
-            How to Apply These Terms to Your New Programs
-
-  If you develop a new program, and you want it to be of the greatest
-possible use to the public, the best way to achieve this is to make it
-free software which everyone can redistribute and change under these terms.
-
-  To do so, attach the following notices to the program.  It is safest
-to attach them to the start of each source file to most effectively
-convey the exclusion of warranty; and each file should have at least
-the "copyright" line and a pointer to where the full notice is found.
-
-    DrawOnYourScreen
-    Copyright (C) 2019  abakkk
-
-    This program is free software; you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
-    the Free Software Foundation; either version 2 of the License, or
-    (at your option) any later version.
-
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
-
-    You should have received a copy of the GNU General Public License along
-    with this program; if not, write to the Free Software Foundation, Inc.,
-    51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
-
-Also add information on how to contact you by electronic and paper mail.
-
-If the program is interactive, make it output a short notice like this
-when it starts in an interactive mode:
-
-    Gnomovision version 69, Copyright (C) year name of author
-    Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
-    This is free software, and you are welcome to redistribute it
-    under certain conditions; type `show c' for details.
-
-The hypothetical commands `show w' and `show c' should show the appropriate
-parts of the General Public License.  Of course, the commands you use may
-be called something other than `show w' and `show c'; they could even be
-mouse-clicks or menu items--whatever suits your program.
-
-You should also get your employer (if you work as a programmer) or your
-school, if any, to sign a "copyright disclaimer" for the program, if
-necessary.  Here is a sample; alter the names:
-
-  Yoyodyne, Inc., hereby disclaims all copyright interest in the program
-  `Gnomovision' (which makes passes at compilers) written by James Hacker.
-
-  {signature of Ty Coon}, 1 April 1989
-  Ty Coon, President of Vice
-
-This General Public License does not permit incorporating your program into
-proprietary programs.  If your program is a subroutine library, you may
-consider it more useful to permit linking proprietary applications with the
-library.  If this is what you want to do, use the GNU Lesser General
-Public License instead of this License.

NEWS

@@ -1,3 +1,57 @@
+v11.1 - April 2021
+==================
+
+* Not to erase the text when pressing "Escape" #60
+
+v11 - February 2021
+===================
+
+* GS 40 compatibility (40.beta)
+* Gtk4 port (preferences)
+* Toggle animations (background, grid and square area)
+* Multi-line text elements
+* Start a new line with "Enter" (text tool)
+* Add "centered" text alignment
+* Convenient marks for rotation and stretch transformations
+
+v10 - October 2020
+==================
+
+* Fix multi-monitor support #52
+
+v9 - October 2020
+=================
+
+* Split the drawing area in several layers (performance)
+* Start a new line with "Shift + Enter" (text tool)
+
+v8.1 - October 2020
+===================
+
+* Fix unsanitized GType names #46
+* Quick free drawings are smoother #45
+* Transformations are undoable/redoable
+
+v8 - September 2020
+===================
+
+Nothing.
+
+v7 - September 2020
+===================
+
+* Can import GIMP palettes.
+* Can color SVG images.
+* Integrate color picker (GS buit-in or Color Picker extension).
+
+v6.4 - September 2020
+=====================
+
+* Prepare GS 3.38 compatibility.
+* Add tooltips to sub-menu buttons also.
+* Fix drawing directory monitoring when it does not exist yet.
+* Fix text entry / ibus candidate popup position.
+
 v6.3 - September 2020
 =====================
 

README.md

@@ -3,7 +3,7 @@
 Start drawing with Super+Alt+D.
 Then save your beautiful work by taking a screenshot.
 
-![](https://framagit.org/abakkk/DrawOnYourScreen/raw/ressources/screenshot.jpg)
+![](https://codeberg.org/som/DrawOnYourScreen/raw/branch/media/screenshot.jpg)
 
 ## Features
 
@@ -18,31 +18,39 @@ Then save your beautiful work by taking a screenshot.
 ## Install
 
 1. Download and decompress or clone the repository
-2. Place the resulting directory in `~/.local/share/gnome-shell/extensions`
+2. Place the directory (the one that contains `metadata.json`) in `~/.local/share/gnome-shell/extensions`
-3. **Change the directory name** to `drawOnYourScreen@abakkk.framagit.org`
+3. **Change the directory name** to `draw-on-your-screen@som.codeberg.org`
 4. Xorg: type `alt + F2` and `r` to restart gnome-shell  
    Wayland: restart or re-login
-5. Enable the extension in gnome-tweaks or gnome-shell-extension-prefs
+5. Enable the extension with GNOME Extensions or GNOME Tweaks application
 6. `Super + Alt + D` to test
-7. [https://framagit.org/abakkk/DrawOnYourScreen/issues](https://framagit.org/abakkk/DrawOnYourScreen/issues) to say it doesn't work
+7. [https://codeberg.org/som/DrawOnYourScreen/issues](https://codeberg.org/som/DrawOnYourScreen/issues) to say it doesn't work
 
 ## Tips and tricks
 
+* Power is nothing without control:
+
+ The `Ctrl` key provides an extra functionality for each tool.
+
+ [Range of Ctrl key possibilities](https://codeberg.org/som/DrawOnYourScreen/src/branch/media/ctrl.webm)
+
 * Draw arrows:
 
  Intersect two lines and curve the second thanks to the `Ctrl` key.
 
- ![How to draw an arrow](https://framagit.org/abakkk/DrawOnYourScreen/uploads/af8f96d33cfeff49bb922a1ef9f4a4ce/arrow-screencast.webm)
+ [How to draw an arrow](https://codeberg.org/som/DrawOnYourScreen/src/branch/media/arrow.webm)
 
 * Duplicate an element:
 
  Hold the `Shift` key while starting moving.
  
- ![How to duplicate an element](https://framagit.org/abakkk/DrawOnYourScreen/-/raw/ressources/duplicate.webm)
+ [How to duplicate an element](https://codeberg.org/som/DrawOnYourScreen/src/branch/media/duplicate.webm)
 
 * Insertable images:
 
- You can insert images (jpeg, png, svg) in your drawings. By default images are sought in `~/.local/share/drawOnYourScreen/images/` but the location is configurable in the preferences. Another way is to copy-past the images from Nautilus or any clipboard source by using the usual `Ctrl + V` shortcut inside the drawing mode.
+ You can insert images (jpeg, png, svg) in your drawings. By default images are sought in `~/.local/share/draw-on-your-screen/images/` but the location is configurable in the preferences. Another way is to copy-past the images from Nautilus or any clipboard source by using the usual `Ctrl + V` shortcut inside the drawing mode.
+ 
+ [How to add images from Nautilus](https://codeberg.org/som/DrawOnYourScreen/src/branch/media/ctrl-plus-v.webm)
 
 * Eraser and SVG:
 
@@ -52,3 +60,9 @@ Then save your beautiful work by taking a screenshot.
 
  [Screenshot Tool](https://extensions.gnome.org/extension/1112/screenshot-tool/) is a convenient extension to “create, copy, store and upload screenshots”. In order to select a screenshoot area with your pointer while keeping the drawing in place, you need first to tell DrawOnYourScreen to ungrab the pointer (`Ctrl + Super + Alt + D`).
 
+* Color Picker extension:
+
+ If the GNOME Shell built-in color picker is too basic for you, have a look at the [Color Picker extension](https://extensions.gnome.org/extension/3396/color-picker), which let's you select the pixel accurately, preview the color and adjust its values. Once installed and enabled, it will be transparently integrated into DrawOnYourScreen.
+
+ ![Color Picker extension in action](https://codeberg.org/som/DrawOnYourScreen/raw/branch/media/color-picker-extension.jpg)
+

elements.js

@@ -1,15 +1,9 @@
-/* jslint esversion: 6 */
-/* exported Shapes, Transformations, getAllFontFamilies, DrawingElement */
-
 /*
  * Copyright 2019 Abakkk
  *
- * This file is part of DrawOnYourScreen, a drawing extension for GNOME Shell.
- * https://framagit.org/abakkk/DrawOnYourScreen
- *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 2 of the License, or
+ * the Free Software Foundation, either version 3 of the License, or
  * (at your option) any later version.
  *
  * This program is distributed in the hope that it will be useful,
@@ -19,16 +13,26 @@
  *
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * SPDX-FileCopyrightText: 2019 Abakkk
+ * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+/* jslint esversion: 6 */
+/* exported Shape, TextAlignment, Transformation, getAllFontFamilies, DrawingElement */
+
 const Cairo = imports.cairo;
 const Clutter = imports.gi.Clutter;
 const Lang = imports.lang;
 const Pango = imports.gi.Pango;
 const PangoCairo = imports.gi.PangoCairo;
 
-var Shapes = { NONE: 0, LINE: 1, ELLIPSE: 2, RECTANGLE: 3, TEXT: 4, POLYGON: 5, POLYLINE: 6, IMAGE: 7 };
+const Me = imports.misc.extensionUtils.getCurrentExtension();
-var Transformations = { TRANSLATION: 0, ROTATION: 1, SCALE_PRESERVE: 2, STRETCH: 3, REFLECTION: 4, INVERSION: 5 };
+const UUID = Me.uuid.replace(/@/gi, '_at_').replace(/[^a-z0-9+_-]/gi, '_');
+
+var Shape = { NONE: 0, LINE: 1, ELLIPSE: 2, RECTANGLE: 3, TEXT: 4, POLYGON: 5, POLYLINE: 6, IMAGE: 7 };
+var TextAlignment = { LEFT: 0, CENTER: 1, RIGHT: 2 };
+var Transformation = { TRANSLATION: 0, ROTATION: 1, SCALE_PRESERVE: 2, STRETCH: 3, REFLECTION: 4, INVERSION: 5, SMOOTH: 100 };
 
 var getAllFontFamilies = function() {
     return PangoCairo.font_map_get_default().list_families().map(fontFamily => fontFamily.get_name()).sort((a,b) => a.localeCompare(b));
@@ -59,10 +63,12 @@ const MIN_REFLECTION_LINE_LENGTH = 10;      // px
 const MIN_TRANSLATION_DISTANCE = 1;         // px
 const MIN_ROTATION_ANGLE = Math.PI / 1000;  // rad
 const MIN_DRAWING_SIZE = 3;                 // px
+const MIN_INTERMEDIATE_POINT_DISTANCE = 1;  // px, the higher it is, the fewer points there will be
+const MARK_COLOR = Clutter.Color.get_static(Clutter.StaticColor.BLUE);
 
 var DrawingElement = function(params) {
-    return params.shape == Shapes.TEXT ? new TextElement(params) :
+    return params.shape == Shape.TEXT ? new TextElement(params) :
-           params.shape == Shapes.IMAGE ? new ImageElement(params) :
+           params.shape == Shape.IMAGE ? new ImageElement(params) :
            new _DrawingElement(params);
 };
 
@@ -70,7 +76,7 @@ var DrawingElement = function(params) {
 // It can be converted into a cairo path as well as a svg element.
 // See DrawingArea._startDrawing() to know its params.
 const _DrawingElement = new Lang.Class({
-    Name: 'DrawOnYourScreenDrawingElement',
+    Name: `${UUID}-DrawingElement`,
     
     _init: function(params) {
         for (let key in params)
@@ -99,27 +105,33 @@ const _DrawingElement = new Lang.Class({
         if (params.transform && params.transform.center) {
             let angle = (params.transform.angle || 0) + (params.transform.startAngle || 0);
             if (angle)
-                this.transformations.push({ type: Transformations.ROTATION, angle: angle });
+                this.transformations.push({ type: Transformation.ROTATION, angle: angle });
         }
-        if (params.shape == Shapes.ELLIPSE && params.transform && params.transform.ratio && params.transform.ratio != 1 && params.points.length >= 2) {
+        if (params.shape == Shape.ELLIPSE && params.transform && params.transform.ratio && params.transform.ratio != 1 && params.points.length >= 2) {
             let [ratio, p0, p1] = [params.transform.ratio, params.points[0], params.points[1]];
             // Add a fake point that will give the right ellipse ratio when building the element.
             this.points.push([ratio * (p1[0] - p0[0]) + p0[0], ratio * (p1[1] - p0[1]) + p0[1]]);
         }
         delete this.transform;
+        
+        // v10-
+        if (this.textRightAligned)
+            this.textAlignment = TextAlignment.RIGHT;
+        delete this.textRightAligned;
     },
     
     // toJSON is called by JSON.stringify
     toJSON: function() {
         return {
             shape: this.shape,
-            color: this.color.toString(),
+            color: this.color,
             line: this.line,
             dash: this.dash,
             fill: this.fill,
             fillRule: this.fillRule,
             eraser: this.eraser,
-            transformations: this.transformations,
+            transformations: this.transformations.filter(transformation => transformation.type != Transformation.SMOOTH)
+                                                 .map(transformation => Object.assign({}, transformation, { undoable: undefined })),
             points: this.points.map((point) => [Math.round(point[0]*100)/100, Math.round(point[1]*100)/100])
         };
     },
@@ -128,18 +140,6 @@ const _DrawingElement = new Lang.Class({
         if (this.color)
             Clutter.cairo_set_source_color(cr, this.color);
         
-        if (this.showSymmetryElement) {
-            let transformation = this.lastTransformation;
-            setDummyStroke(cr);
-            if (transformation.type == Transformations.REFLECTION) {
-                cr.moveTo(transformation.startX, transformation.startY);
-                cr.lineTo(transformation.endX, transformation.endY);
-            } else {
-                cr.arc(transformation.endX, transformation.endY, INVERSION_CIRCLE_RADIUS, 0, 2 * Math.PI);
-            }
-            cr.stroke();
-        }
-        
         if (this.line) {
             cr.setLineCap(this.line.lineCap);
             cr.setLineJoin(this.line.lineJoin);
@@ -166,21 +166,21 @@ const _DrawingElement = new Lang.Class({
         }
         
         this.transformations.slice(0).reverse().forEach(transformation => {
-            if (transformation.type == Transformations.TRANSLATION) {
+            if (transformation.type == Transformation.TRANSLATION) {
                 cr.translate(transformation.slideX, transformation.slideY);
-            } else if (transformation.type == Transformations.ROTATION) {
+            } else if (transformation.type == Transformation.ROTATION) {
                 let center = this._getTransformedCenter(transformation);
                 cr.translate(center[0], center[1]);
                 cr.rotate(transformation.angle);
                 cr.translate(-center[0], -center[1]);
-            } else if (transformation.type == Transformations.SCALE_PRESERVE || transformation.type == Transformations.STRETCH) {
+            } else if (transformation.type == Transformation.SCALE_PRESERVE || transformation.type == Transformation.STRETCH) {
                 let center = this._getTransformedCenter(transformation);
                 cr.translate(center[0], center[1]);
                 cr.rotate(transformation.angle);
                 cr.scale(transformation.scaleX, transformation.scaleY);
                 cr.rotate(-transformation.angle);
                 cr.translate(-center[0], -center[1]);
-            } else if (transformation.type == Transformations.REFLECTION || transformation.type == Transformations.INVERSION) {
+            } else if (transformation.type == Transformation.REFLECTION || transformation.type == Transformation.INVERSION) {
                 cr.translate(transformation.slideX, transformation.slideY);
                 cr.rotate(transformation.angle);
                 cr.scale(transformation.scaleX, transformation.scaleY);
@@ -194,24 +194,61 @@ const _DrawingElement = new Lang.Class({
         cr.identityMatrix();
     },
     
+    _addMarks: function(cr) {
+        if (this.showSymmetryElement) {
+            setDummyStroke(cr);
+            Clutter.cairo_set_source_color(cr, MARK_COLOR);
+            
+            let transformation = this.lastTransformation;
+            if (transformation.type == Transformation.REFLECTION) {
+                cr.moveTo(transformation.startX, transformation.startY);
+                cr.lineTo(transformation.endX, transformation.endY);
+            } else {
+                cr.arc(transformation.endX, transformation.endY, INVERSION_CIRCLE_RADIUS, 0, 2 * Math.PI);
+            }
+            cr.stroke();
+        }
+        
+        if (this.showRotationCenter) {
+            setDummyStroke(cr);
+            Clutter.cairo_set_source_color(cr, MARK_COLOR);
+            
+            let center = this._getTransformedCenter(this.lastTransformation);
+            cr.arc(center[0], center[1], INVERSION_CIRCLE_RADIUS, 0, 2 * Math.PI);
+            cr.stroke();
+        }
+        
+        if (this.showStretchAxes) {
+            setDummyStroke(cr);
+            Clutter.cairo_set_source_color(cr, MARK_COLOR);
+            
+            let center = this._getTransformedCenter(this.lastTransformation);
+            for (let i = 0; i <=1; i++) {
+                cr.moveTo(center[0] - 1000 * Math.cos(i * Math.PI / 2), center[1] - 1000 * Math.sin(i * Math.PI / 2));
+                cr.lineTo(center[0] + 1000 * Math.cos(i * Math.PI / 2), center[1] + 1000 * Math.sin(i * Math.PI / 2));
+            }
+            cr.stroke();
+        }
+    },
+    
     _drawCairo: function(cr, params) {
         let [points, shape] = [this.points, this.shape];
         
-        if (shape == Shapes.LINE && points.length == 3) {
+        if (shape == Shape.LINE && points.length == 3) {
             cr.moveTo(points[0][0], points[0][1]);
             cr.curveTo(points[0][0], points[0][1], points[1][0], points[1][1], points[2][0], points[2][1]);
             
-        } else if (shape == Shapes.LINE && points.length == 4) {
+        } else if (shape == Shape.LINE && points.length == 4) {
             cr.moveTo(points[0][0], points[0][1]);
             cr.curveTo(points[1][0], points[1][1], points[2][0], points[2][1], points[3][0], points[3][1]);
             
-        } else if (shape == Shapes.NONE || shape == Shapes.LINE) {
+        } else if (shape == Shape.NONE || shape == Shape.LINE) {
             cr.moveTo(points[0][0], points[0][1]);
             for (let j = 1; j < points.length; j++) {
                 cr.lineTo(points[j][0], points[j][1]);
             }
             
-        } else if (shape == Shapes.ELLIPSE && points.length >= 2) {
+        } else if (shape == Shape.ELLIPSE && points.length >= 2) {
             let radius = Math.hypot(points[1][0] - points[0][0], points[1][1] - points[0][1]);
             let ratio = 1;
             
@@ -227,15 +264,15 @@ const _DrawingElement = new Lang.Class({
             } else
                 cr.arc(points[0][0], points[0][1], radius, 0, 2 * Math.PI);
             
-        } else if (shape == Shapes.RECTANGLE && points.length == 2) {
+        } else if (shape == Shape.RECTANGLE && points.length == 2) {
             cr.rectangle(points[0][0], points[0][1], points[1][0] - points[0][0], points[1][1] - points[0][1]);
         
-        } else if ((shape == Shapes.POLYGON || shape == Shapes.POLYLINE) && points.length >= 2) {
+        } else if ((shape == Shape.POLYGON || shape == Shape.POLYLINE) && points.length >= 2) {
             cr.moveTo(points[0][0], points[0][1]);
             for (let j = 1; j < points.length; j++) {
                 cr.lineTo(points[j][0], points[j][1]);
             }
-            if (shape == Shapes.POLYGON)
+            if (shape == Shape.POLYGON)
                 cr.closePath();
             
         }
@@ -257,19 +294,19 @@ const _DrawingElement = new Lang.Class({
         this.transformations.slice(0).reverse().forEach(transformation => {
             let center = this._getTransformedCenter(transformation);
             
-            if (transformation.type == Transformations.TRANSLATION) {
+            if (transformation.type == Transformation.TRANSLATION) {
                 transforms.push(['translate', transformation.slideX, transformation.slideY]);
-            } else if (transformation.type == Transformations.ROTATION) {
+            } else if (transformation.type == Transformation.ROTATION) {
                 transforms.push(['translate', center[0], center[1]]);
                 transforms.push(['rotate', transformation.angle * RADIAN]);
                 transforms.push(['translate', -center[0], -center[1]]);
-            } else if (transformation.type == Transformations.SCALE_PRESERVE || transformation.type == Transformations.STRETCH) {
+            } else if (transformation.type == Transformation.SCALE_PRESERVE || transformation.type == Transformation.STRETCH) {
                 transforms.push(['translate', center[0], center[1]]);
                 transforms.push(['rotate', transformation.angle * RADIAN]);
                 transforms.push(['scale', transformation.scaleX, transformation.scaleY]);
                 transforms.push(['rotate', -transformation.angle * RADIAN]);
                 transforms.push(['translate', -center[0], -center[1]]);
-            } else if (transformation.type == Transformations.REFLECTION || transformation.type == Transformations.INVERSION) {
+            } else if (transformation.type == Transformation.REFLECTION || transformation.type == Transformation.INVERSION) {
                 transforms.push(['translate', transformation.slideX, transformation.slideY]);
                 transforms.push(['rotate', transformation.angle * RADIAN]);
                 transforms.push(['scale', transformation.scaleX, transformation.scaleY]);
@@ -314,7 +351,7 @@ const _DrawingElement = new Lang.Class({
     _drawSvg: function(transAttribute, bgcolorString) {
         let row = "\n  ";
         let points = this.points.map((point) => [Math.round(point[0]*100)/100, Math.round(point[1]*100)/100]);
-        let color = this.eraser ? bgcolorString : this.color.toString();
+        let color = this.eraser ? bgcolorString : this.color.toJSON();
         let fill = this.fill && !this.isStraightLine;
         let attributes = this.eraser ? `class="eraser" ` : '';
         
@@ -337,45 +374,45 @@ const _DrawingElement = new Lang.Class({
                 attributes += ` stroke-dasharray="${this.dash.array[0]} ${this.dash.array[1]}" stroke-dashoffset="${this.dash.offset}"`;
         }
         
-        if (this.shape == Shapes.LINE && points.length == 4) {
+        if (this.shape == Shape.LINE && points.length == 4) {
             row += `<path ${attributes} d="M${points[0][0]} ${points[0][1]}`;
             row += ` C ${points[1][0]} ${points[1][1]}, ${points[2][0]} ${points[2][1]}, ${points[3][0]} ${points[3][1]}`;
             row += `${fill ? 'z' : ''}"${transAttribute}/>`;
             
-        } else if (this.shape == Shapes.LINE && points.length == 3) {
+        } else if (this.shape == Shape.LINE && points.length == 3) {
             row += `<path ${attributes} d="M${points[0][0]} ${points[0][1]}`;
             row += ` C ${points[0][0]} ${points[0][1]}, ${points[1][0]} ${points[1][1]}, ${points[2][0]} ${points[2][1]}`;
             row += `${fill ? 'z' : ''}"${transAttribute}/>`;
             
-        } else if (this.shape == Shapes.LINE) {
+        } else if (this.shape == Shape.LINE) {
             row += `<line ${attributes} x1="${points[0][0]}" y1="${points[0][1]}" x2="${points[1][0]}" y2="${points[1][1]}"${transAttribute}/>`;
         
-        } else if (this.shape == Shapes.NONE) {
+        } else if (this.shape == Shape.NONE) {
             row += `<path ${attributes} d="M${points[0][0]} ${points[0][1]}`;
             for (let i = 1; i < points.length; i++)
                 row += ` L ${points[i][0]} ${points[i][1]}`;
             row += `${fill ? 'z' : ''}"${transAttribute}/>`;
             
-        } else if (this.shape == Shapes.ELLIPSE && points.length == 3) {
+        } else if (this.shape == Shape.ELLIPSE && points.length == 3) {
             let ry = Math.hypot(points[1][0] - points[0][0], points[1][1] - points[0][1]);
             let rx = Math.hypot(points[2][0] - points[0][0], points[2][1] - points[0][1]);
             row += `<ellipse ${attributes} cx="${points[0][0]}" cy="${points[0][1]}" rx="${rx}" ry="${ry}"${transAttribute}/>`;
             
-        } else if (this.shape == Shapes.ELLIPSE && points.length == 2) {
+        } else if (this.shape == Shape.ELLIPSE && points.length == 2) {
             let r = Math.hypot(points[1][0] - points[0][0], points[1][1] - points[0][1]);
             row += `<circle ${attributes} cx="${points[0][0]}" cy="${points[0][1]}" r="${r}"${transAttribute}/>`;
             
-        } else if (this.shape == Shapes.RECTANGLE && points.length == 2) {
+        } else if (this.shape == Shape.RECTANGLE && points.length == 2) {
             row += `<rect ${attributes} x="${Math.min(points[0][0], points[1][0])}" y="${Math.min(points[0][1], points[1][1])}" ` +
                    `width="${Math.abs(points[1][0] - points[0][0])}" height="${Math.abs(points[1][1] - points[0][1])}"${transAttribute}/>`;
                    
-        } else if (this.shape == Shapes.POLYGON && points.length >= 3) {
+        } else if (this.shape == Shape.POLYGON && points.length >= 3) {
             row += `<polygon ${attributes} points="`;
             for (let i = 0; i < points.length; i++)
                 row += ` ${points[i][0]},${points[i][1]}`;
             row += `"${transAttribute}/>`;
         
-        } else if (this.shape == Shapes.POLYLINE && points.length >= 2) {
+        } else if (this.shape == Shape.POLYLINE && points.length >= 2) {
             row += `<polyline ${attributes} points="`;
             for (let i = 0; i < points.length; i++)
                 row += ` ${points[i][0]},${points[i][1]}`;
@@ -394,22 +431,32 @@ const _DrawingElement = new Lang.Class({
     },
     
     get isStraightLine() {
-        return this.shape == Shapes.LINE && this.points.length == 2;
+        return this.shape == Shape.LINE && this.points.length == 2;
     },
     
     smoothAll: function() {
-        for (let i = 0; i < this.points.length; i++) {
+        let oldPoints = this.points.slice();
+        
+        for (let i = 0; i < this.points.length; i++)
             this._smooth(i);
-        }
+        
+        let newPoints = this.points.slice();
+        
+        this.transformations.push({ type: Transformation.SMOOTH, undoable: true,
+                                    undo: () => this.points = oldPoints,
+                                    redo: () => this.points = newPoints });
+        
+        if (this._undoneTransformations)
+            this._undoneTransformations = this._undoneTransformations.filter(transformation => transformation.type != Transformation.SMOOTH);
     },
     
     addPoint: function() {
-        if (this.shape == Shapes.POLYGON || this.shape == Shapes.POLYLINE) {
+        if (this.shape == Shape.POLYGON || this.shape == Shape.POLYLINE) {
             // copy last point
             let [lastPoint, secondToLastPoint] = [this.points[this.points.length - 1], this.points[this.points.length - 2]];
             if (!getNearness(secondToLastPoint, lastPoint, MIN_DRAWING_SIZE))
                 this.points.push([lastPoint[0], lastPoint[1]]);
-        } else if (this.shape == Shapes.LINE) {
+        } else if (this.shape == Shape.LINE) {
             if (this.points.length == 2) {
                 this.points[2] = this.points[1];
             } else if (this.points.length == 3) {
@@ -419,10 +466,21 @@ const _DrawingElement = new Lang.Class({
         }
     },
     
+    // For free drawing only.
+    addIntermediatePoint: function(x, y, transform) {
+        let points = this.points;
+        if (getNearness(points[points.length - 1], [x, y], MIN_INTERMEDIATE_POINT_DISTANCE))
+            return;
+        
+        points.push([x, y]);
+        if (transform)
+            this._smooth(points.length - 1);
+    },
+    
     startDrawing: function(startX, startY) {
         this.points.push([startX, startY]);
         
-        if (this.shape == Shapes.POLYGON || this.shape == Shapes.POLYLINE)
+        if (this.shape == Shape.POLYGON || this.shape == Shape.POLYLINE)
             this.points.push([startX, startY]);
     },
     
@@ -433,29 +491,29 @@ const _DrawingElement = new Lang.Class({
         
         transform = transform || this.transformations.length >= 1;
         
-        if (this.shape == Shapes.NONE) {
+        if (this.shape == Shape.NONE) {
             points.push([x, y]);
             if (transform)
                 this._smooth(points.length - 1);
             
-        } else if ((this.shape == Shapes.RECTANGLE || this.shape == Shapes.POLYGON || this.shape == Shapes.POLYLINE) && transform) {
+        } else if ((this.shape == Shape.RECTANGLE || this.shape == Shape.POLYGON || this.shape == Shape.POLYLINE) && transform) {
             if (points.length < 2)
                 return;
                 
             let center = this._getOriginalCenter();
-            this.transformations[0] = { type: Transformations.ROTATION,
+            this.transformations[0] = { type: Transformation.ROTATION,
                                         angle: getAngle(center[0], center[1], points[points.length - 1][0], points[points.length - 1][1], x, y) };
             
-        } else if (this.shape == Shapes.ELLIPSE && transform) {
+        } else if (this.shape == Shape.ELLIPSE && transform) {
             if (points.length < 2)
                 return;
             
             points[2] = [x, y];
             let center = this._getOriginalCenter();
-            this.transformations[0] = { type: Transformations.ROTATION,
+            this.transformations[0] = { type: Transformation.ROTATION,
                                         angle: getAngle(center[0], center[1], center[0] + 1, center[1], x, y) };
             
-        } else if (this.shape == Shapes.POLYGON || this.shape == Shapes.POLYLINE) {
+        } else if (this.shape == Shape.POLYGON || this.shape == Shape.POLYLINE) {
             points[points.length - 1] = [x, y];
             
         } else {
@@ -466,51 +524,55 @@ const _DrawingElement = new Lang.Class({
     
     stopDrawing: function() {
         // skip when the size is too small to be visible (3px) (except for free drawing)
-        if (this.shape != Shapes.NONE && this.points.length >= 2) {
+        if (this.shape != Shape.NONE && this.points.length >= 2) {
             let lastPoint = this.points[this.points.length - 1];
             let secondToLastPoint = this.points[this.points.length - 2];
             if (getNearness(secondToLastPoint, lastPoint, MIN_DRAWING_SIZE))
                 this.points.pop();
         }
         
-        if (this.transformations[0] && this.transformations[0].type == Transformations.ROTATION &&
+        if (this.transformations[0] && this.transformations[0].type == Transformation.ROTATION &&
                 Math.abs(this.transformations[0].angle) < MIN_ROTATION_ANGLE)
             this.transformations.shift();
     },
     
-    startTransformation: function(startX, startY, type) {
+    startTransformation: function(startX, startY, type, undoable) {
-        if (type == Transformations.TRANSLATION)
+        if (type == Transformation.TRANSLATION)
-            this.transformations.push({ startX: startX, startY: startY, type: type, slideX: 0, slideY: 0 });
+            this.transformations.push({ startX, startY, type, undoable, slideX: 0, slideY: 0 });
-        else if (type == Transformations.ROTATION)
+        else if (type == Transformation.ROTATION)
-            this.transformations.push({ startX: startX, startY: startY, type: type, angle: 0 });
+            this.transformations.push({ startX, startY, type, undoable, angle: 0 });
-        else if (type == Transformations.SCALE_PRESERVE || type == Transformations.STRETCH)
+        else if (type == Transformation.SCALE_PRESERVE || type == Transformation.STRETCH)
-            this.transformations.push({ startX: startX, startY: startY, type: type, scaleX: 1, scaleY: 1, angle: 0 });
+            this.transformations.push({ startX, startY, type, undoable, scaleX: 1, scaleY: 1, angle: 0 });
-        else if (type == Transformations.REFLECTION)
+        else if (type == Transformation.REFLECTION)
-            this.transformations.push({ startX: startX, startY: startY, endX: startX, endY: startY, type: type,
+            this.transformations.push({ startX, startY, endX: startX, endY: startY, type, undoable,
                                         scaleX:  1, scaleY:  1, slideX: 0, slideY: 0, angle: 0 });
-        else if (type == Transformations.INVERSION)
+        else if (type == Transformation.INVERSION)
-            this.transformations.push({ startX: startX, startY: startY, endX: startX, endY: startY, type: type,
+            this.transformations.push({ startX, startY, endX: startX, endY: startY, type, undoable,
                                         scaleX: -1, scaleY: -1, slideX: startX, slideY: startY,
                                         angle: Math.PI + Math.atan(startY / (startX || 1)) });
         
-        if (type == Transformations.REFLECTION || type == Transformations.INVERSION)
+        if (type == Transformation.REFLECTION || type == Transformation.INVERSION)
             this.showSymmetryElement = true;
+        else if (type == Transformation.ROTATION)
+            this.showRotationCenter = true;
+        else if (type == Transformation.STRETCH)
+            this.showStretchAxes = true;
     },
     
     updateTransformation: function(x, y) {
         let transformation = this.lastTransformation;
         
-        if (transformation.type == Transformations.TRANSLATION) {
+        if (transformation.type == Transformation.TRANSLATION) {
             transformation.slideX = x - transformation.startX;
             transformation.slideY = y - transformation.startY;
-        } else if (transformation.type == Transformations.ROTATION) {
+        } else if (transformation.type == Transformation.ROTATION) {
             let center = this._getTransformedCenter(transformation);
             transformation.angle = getAngle(center[0], center[1], transformation.startX, transformation.startY, x, y);
-        } else if (transformation.type == Transformations.SCALE_PRESERVE) {
+        } else if (transformation.type == Transformation.SCALE_PRESERVE) {
             let center = this._getTransformedCenter(transformation);
             let scale = Math.hypot(x - center[0], y - center[1]) / Math.hypot(transformation.startX - center[0], transformation.startY - center[1]) || 1;
             [transformation.scaleX, transformation.scaleY] = [scale, scale];
-        } else if (transformation.type == Transformations.STRETCH) {
+        } else if (transformation.type == Transformation.STRETCH) {
             let center = this._getTransformedCenter(transformation);
             let startAngle = getAngle(center[0], center[1], center[0] + 1, center[1], transformation.startX, transformation.startY);
             let vertical = Math.abs(Math.sin(startAngle)) >= Math.sin(Math.PI / 2 - STRETCH_TOLERANCE);
@@ -519,7 +581,7 @@ const _DrawingElement = new Lang.Class({
             transformation.scaleX = vertical ? 1 : scale;
             transformation.scaleY = !vertical ? 1 : scale;
             transformation.angle = vertical || horizontal ? 0 : getAngle(center[0], center[1], center[0] + 1, center[1], x, y);
-        } else if (transformation.type == Transformations.REFLECTION) {
+        } else if (transformation.type == Transformation.REFLECTION) {
             [transformation.endX, transformation.endY] = [x, y];
             if (getNearness([transformation.startX, transformation.startY], [x, y], MIN_REFLECTION_LINE_LENGTH)) {
                 // do nothing to avoid jumps (no transformation at starting and locked transformation after)
@@ -542,7 +604,7 @@ const _DrawingElement = new Lang.Class({
                 [transformation.slideX, transformation.slideY] = [transformation.startX - transformation.startY * tan, 0];
                 transformation.angle = Math.PI - Math.atan(tan);
             }
-        } else if (transformation.type == Transformations.INVERSION) {
+        } else if (transformation.type == Transformation.INVERSION) {
             [transformation.endX, transformation.endY] = [x, y];
             [transformation.scaleX, transformation.scaleY] = [-1, -1];
             [transformation.slideX, transformation.slideY] = [x, y];
@@ -551,16 +613,19 @@ const _DrawingElement = new Lang.Class({
     },
     
     stopTransformation: function() {
+        this.showSymmetryElement = false;
+        this.showRotationCenter = false;
+        this.showStretchAxes = false;
+        
         // Clean transformations
         let transformation = this.lastTransformation;
+        if (!transformation)
+            return;
         
-        if (transformation.type == Transformations.REFLECTION || transformation.type == Transformations.INVERSION)
+        if (transformation.type == Transformation.REFLECTION &&
-            this.showSymmetryElement = false;
-        
-        if (transformation.type == Transformations.REFLECTION &&
                 getNearness([transformation.startX, transformation.startY], [transformation.endX, transformation.endY], MIN_REFLECTION_LINE_LENGTH) ||
-            transformation.type == Transformations.TRANSLATION && Math.hypot(transformation.slideX, transformation.slideY) < MIN_TRANSLATION_DISTANCE ||
+            transformation.type == Transformation.TRANSLATION && Math.hypot(transformation.slideX, transformation.slideY) < MIN_TRANSLATION_DISTANCE ||
-            transformation.type == Transformations.ROTATION && Math.abs(transformation.angle) < MIN_ROTATION_ANGLE) {
+            transformation.type == Transformation.ROTATION && Math.abs(transformation.angle) < MIN_ROTATION_ANGLE) {
             
             this.transformations.pop();
         } else {
@@ -571,14 +636,59 @@ const _DrawingElement = new Lang.Class({
         }
     },
     
+    undoTransformation: function() {
+        if (this.transformations && this.transformations.length) {
+            // Do not undo initial transformations (transformations made during the drawing step).
+            if (!this.lastTransformation.undoable)
+                return false;
+            
+            if (!this._undoneTransformations)
+                this._undoneTransformations = [];
+            
+            let transformation = this.transformations.pop();
+            if (transformation.type == Transformation.SMOOTH)
+                transformation.undo();
+            
+            this._undoneTransformations.push(transformation);
+            
+            return true;
+        }
+        
+        return false;
+    },
+    
+    redoTransformation: function() {
+        if (this._undoneTransformations && this._undoneTransformations.length) {
+            if (!this.transformations)
+                this.transformations = [];
+            
+            let transformation = this._undoneTransformations.pop();
+            if (transformation.type == Transformation.SMOOTH)
+                transformation.redo();
+            
+            this.transformations.push(transformation);
+            
+            return true;
+        }
+        
+        return false;
+    },
+    
+    resetUndoneTransformations: function() {
+        delete this._undoneTransformations;
+    },
+    
+    get canUndo() {
+        return this._undoneTransformations && this._undoneTransformations.length ? true : false;
+    },
+    
     // The figure rotation center before transformations (original).
-    // this.textWidth is computed during Cairo building.
     _getOriginalCenter: function() {
         if (!this._originalCenter) {
             let points = this.points;
-            this._originalCenter = this.shape == Shapes.ELLIPSE ? [points[0][0], points[0][1]] :
+            this._originalCenter = this.shape == Shape.ELLIPSE ? [points[0][0], points[0][1]] :
-                                   this.shape == Shapes.LINE && points.length == 4 ? getCurveCenter(points[0], points[1], points[2], points[3]) :
+                                   this.shape == Shape.LINE && points.length == 4 ? getCurveCenter(points[0], points[1], points[2], points[3]) :
-                                   this.shape == Shapes.LINE && points.length == 3 ? getCurveCenter(points[0], points[0], points[1], points[2]) :
+                                   this.shape == Shape.LINE && points.length == 3 ? getCurveCenter(points[0], points[0], points[1], points[2]) :
                                    points.length >= 3 ? getCentroid(points) :
                                    getNaiveCenter(points);
         }
@@ -594,13 +704,13 @@ const _DrawingElement = new Lang.Class({
             // Apply transformations to the matrice in reverse order
             // because Pango multiply matrices by the left when applying a transformation
             this.transformations.slice(0, this.transformations.indexOf(transformation)).reverse().forEach(transformation => {
-                if (transformation.type == Transformations.TRANSLATION) {
+                if (transformation.type == Transformation.TRANSLATION) {
                     matrix.translate(transformation.slideX, transformation.slideY);
-                } else if (transformation.type == Transformations.ROTATION) {
+                } else if (transformation.type == Transformation.ROTATION) {
                     // nothing, the center position is preserved.
-                } else if (transformation.type == Transformations.SCALE_PRESERVE || transformation.type == Transformations.STRETCH) {
+                } else if (transformation.type == Transformation.SCALE_PRESERVE || transformation.type == Transformation.STRETCH) {
                     // nothing, the center position is preserved.
-                } else if (transformation.type == Transformations.REFLECTION || transformation.type == Transformations.INVERSION) {
+                } else if (transformation.type == Transformation.REFLECTION || transformation.type == Transformation.INVERSION) {
                     matrix.translate(transformation.slideX, transformation.slideY);
                     matrix.rotate(-transformation.angle * RADIAN);
                     matrix.scale(transformation.scaleX, transformation.scaleY);
@@ -624,7 +734,7 @@ const _DrawingElement = new Lang.Class({
 });
 
 const TextElement = new Lang.Class({
-    Name: 'DrawOnYourScreenTextElement',
+    Name: `${UUID}-TextElement`,
     Extends: _DrawingElement,
     
     toJSON: function() {
@@ -633,12 +743,11 @@ const TextElement = new Lang.Class({
         
         return {
             shape: this.shape,
-            color: this.color.toString(),
+            color: this.color,
             eraser: this.eraser,
             transformations: this.transformations,
             text: this.text,
-            lineIndex: this.lineIndex !== undefined ? this.lineIndex : undefined,
+            textAlignment: this.textAlignment,
-            textRightAligned: this.textRightAligned,
             font: this.font.to_string(),
             points: this.points.map((point) => [Math.round(point[0]*100)/100, Math.round(point[1]*100)/100])
         };
@@ -646,7 +755,11 @@ const TextElement = new Lang.Class({
     
     get x() {
         // this.textWidth is computed during Cairo building.
-        return this.points[1][0] - (this.textRightAligned ? this.textWidth : 0);
+        let offset = this.textAlignment == TextAlignment.RIGHT ? this.textWidth :
+                     this.textAlignment == TextAlignment.CENTER ? this.textWidth / 2 :
+                     0;
+        
+        return this.points[1][0] - offset;
     },
     
     get y() {
@@ -657,43 +770,55 @@ const TextElement = new Lang.Class({
         return Math.abs(this.points[1][1] - this.points[0][1]);
     },
     
-    // When rotating grouped lines, lineOffset is used to retrieve the rotation center of the first line.
+    // this.lineWidths is computed during Cairo building.
-    get lineOffset() {
+    _getLineX: function(index) {
-        return (this.lineIndex || 0) * this.height;
+        let offset = this.textAlignment == TextAlignment.RIGHT && this.lineWidths && this.lineWidths[index] ? this.lineWidths[index] :
+                     this.textAlignment == TextAlignment.CENTER && this.lineWidths && this.lineWidths[index] ? this.lineWidths[index] / 2 :
+                     0;
+        
+        return this.points[1][0] - offset;
     },
     
     _drawCairo: function(cr, params) {
-        if (this.points.length == 2) {
+        if (this.points.length != 2)
+            return;
+        
         let layout = PangoCairo.create_layout(cr);
         let fontSize = this.height * Pango.SCALE;
         this.font.set_absolute_size(fontSize);
         layout.set_font_description(this.font);
         layout.set_text(this.text, -1);
         this.textWidth = layout.get_pixel_size()[0];
-            cr.moveTo(this.x, this.y - layout.get_baseline() / Pango.SCALE);
+        this.lineWidths = layout.get_lines_readonly().map(layoutLine => layoutLine.get_pixel_extents()[1].width);
-            layout.set_text(this.text, -1);
-            PangoCairo.show_layout(cr, layout);
         
+        layout.get_lines_readonly().forEach((layoutLine, index) => {
+            cr.moveTo(this._getLineX(index), this.y + this.height * index);
+            PangoCairo.show_layout_line(cr, layoutLine);
+        });
+        
+        // Cannot use 'layout.index_to_line_x(cursorPosition, 0)' because character position != byte index
         if (params.showTextCursor) {
-                let cursorPosition = this.cursorPosition == -1 ? this.text.length : this.cursorPosition;
+            let layoutCopy = layout.copy();
-                layout.set_text(this.text.slice(0, cursorPosition), -1);
+            if (this.cursorPosition != -1)
-                let width = layout.get_pixel_size()[0];
+                layoutCopy.set_text(this.text.slice(0, this.cursorPosition), -1);
-                cr.rectangle(this.x + width, this.y,
+            
-                             this.height / 25, - this.height);
+            let cursorLineIndex = layoutCopy.get_line_count() - 1;
+            let cursorX = this._getLineX(cursorLineIndex) + layoutCopy.get_line_readonly(cursorLineIndex).get_pixel_extents()[1].width;
+            let cursorY = this.y + this.height * cursorLineIndex;
+            cr.rectangle(cursorX, cursorY, this.height / 25, - this.height);
             cr.fill();
         }
         
-            if (params.showTextRectangle) {
+        if (params.showElementBounds) {
-                cr.rectangle(this.x, this.y - this.lineOffset,
+            cr.rectangle(this.x, this.y - this.height,
-                             this.textWidth, - this.height);
+                         this.textWidth, this.height * layout.get_line_count());
             setDummyStroke(cr);
-            } else if (params.drawTextRectangle) {
+        } else if (params.drawElementBounds) {
-                cr.rectangle(this.x, this.y,
+            cr.rectangle(this.x, this.y - this.height,
-                             this.textWidth, - this.height);
+                         this.textWidth, this.height * layout.get_line_count());
             // Only draw the rectangle to find the element, not to show it.
             cr.setLineWidth(0);
         }
-        }
     },
     
     getContainsPoint: function(cr, x, y) {
@@ -701,12 +826,13 @@ const TextElement = new Lang.Class({
     },
     
     _drawSvg: function(transAttribute, bgcolorString) {
-        let row = "\n  ";
+        if (this.points.length != 2)
-        let [x, y, height] = [Math.round(this.x*100)/100, Math.round(this.y*100)/100, Math.round(this.height*100)/100];
+            return "";
-        let color = this.eraser ? bgcolorString : this.color.toString();
-        let attributes = this.eraser ? `class="eraser" ` : '';
         
-        if (this.points.length == 2) {
+        let row = "";
+        let height = Math.round(this.height * 100) / 100;
+        let color = this.eraser ? bgcolorString : this.color.toJSON();
+        let attributes = this.eraser ? `class="eraser" ` : '';
         attributes += `fill="${color}" ` +
                       `font-size="${height}" ` +
                       `font-family="${this.font.get_family()}"`;
@@ -723,10 +849,25 @@ const TextElement = new Lang.Class({
         });
         if (this.font.get_weight() != Pango.Weight.NORMAL)
             attributes += ` font-weight="${this.font.get_weight()}"`;
-            row += `<text ${attributes} x="${x}" `;
+        
-            row += `y="${y}"${transAttribute}>${this.text}</text>`;
+        // It is a fallback for thumbnails. The following layout is not the same than the Cairo one and
+        // layoutLine.get_pixel_extents does not return the correct value with non-latin fonts.
+        // An alternative would be to store this.lineWidths in the json.
+        if (this.textAlignment != TextAlignment.LEFT && !this.lineWidths) {
+            let clutterText = new Clutter.Text({ text: this.text });
+            let layout = clutterText.get_layout();
+            let fontSize = height * Pango.SCALE;
+            this.font.set_absolute_size(fontSize);
+            layout.set_font_description(this.font);
+            this.lineWidths = layout.get_lines_readonly().map(layoutLine => layoutLine.get_pixel_extents()[1].width);
         }
         
+        this.text.split(/\r\n|\r|\n/).forEach((text, index) => {
+            let x = Math.round(this._getLineX(index) * 100) / 100;
+            let y = Math.round((this.y + this.height * index) * 100) / 100;
+            row += `\n <text ${attributes} x="${x}" y="${y}"${transAttribute}>${text}</text>`;
+        });
+        
         return row;
     },
     
@@ -754,7 +895,7 @@ const TextElement = new Lang.Class({
     _getOriginalCenter: function() {
         if (!this._originalCenter) {
             let points = this.points;
-            this._originalCenter = this.textWidth ? [points[1][0], Math.max(points[0][1], points[1][1]) - this.lineOffset] :
+            this._originalCenter = points.length == 2 ? [points[1][0], Math.max(points[0][1], points[1][1])] :
                                    points.length >= 3 ? getCentroid(points) :
                                    getNaiveCenter(points);
         }
@@ -764,22 +905,16 @@ const TextElement = new Lang.Class({
 });
 
 const ImageElement = new Lang.Class({
-    Name: 'DrawOnYourScreenImageElement',
+    Name: `${UUID}-ImageElement`,
     Extends: _DrawingElement,
     
-    _init: function(params) {
-        params.fill = false;
-        this.parent(params);
-    },
-    
     toJSON: function() {
         return {
             shape: this.shape,
-            color: this.color.toString(),
+            color: this.color,
-            fill: this.fill,
+            colored: this.colored,
-            eraser: this.eraser,
             transformations: this.transformations,
-            image: this.image.toJson(),
+            image: this.image,
             preserveAspectRatio: this.preserveAspectRatio,
             points: this.points.map((point) => [Math.round(point[0]*100)/100, Math.round(point[1]*100)/100])
         };
@@ -797,15 +932,15 @@ const ImageElement = new Lang.Class({
             return;
         
         cr.save();
-        this.image.setCairoSource(cr, x, y, width, height, this.preserveAspectRatio);
+        this.image.setCairoSource(cr, x, y, width, height, this.preserveAspectRatio, this.colored ? this.color.toJSON() : null);
         cr.rectangle(x, y, width, height);
         cr.fill();
         cr.restore();
         
-        if (params.showTextRectangle) {
+        if (params.showElementBounds) {
             cr.rectangle(x, y, width, height);
             setDummyStroke(cr);
-        } else if (params.drawTextRectangle) {
+        } else if (params.drawElementBounds) {
             cr.rectangle(x, y, width, height);
             // Only draw the rectangle to find the element, not to show it.
             cr.setLineWidth(0);
@@ -819,14 +954,15 @@ const ImageElement = new Lang.Class({
     _drawSvg: function(transAttribute) {
         let points = this.points;
         let row = "\n  ";
-        let attributes = this.eraser ? `class="eraser" ` : '';
+        let attributes = '';
         
         if (points.length == 2) {
             attributes += `fill="none"`;
+            let base64 = this.image.getBase64ForColor(this.colored ? this.color.toJSON() : null);
             row += `<image ${attributes} x="${Math.min(points[0][0], points[1][0])}" y="${Math.min(points[0][1], points[1][1])}" ` +
                    `width="${Math.abs(points[1][0] - points[0][0])}" height="${Math.abs(points[1][1] - points[0][1])}"${transAttribute} ` +
                    `preserveAspectRatio="${this.preserveAspectRatio ? 'xMinYMin' : 'none'}" ` +
-                   `id="${this.image.displayName}" xlink:href="data:${this.image.contentType};base64,${this.image.base64}"/>`;
+                   `id="${this.image.displayName}" xlink:href="data:${this.image.contentType};base64,${base64}"/>`;
         }
         
         return row;

extension.js

@@ -1,15 +1,9 @@
-/* jslint esversion: 6 */
-/* exported init */
-
 /*
  * Copyright 2019 Abakkk
  *
- * This file is part of DrawOnYourScreen, a drawing extension for GNOME Shell.
- * https://framagit.org/abakkk/DrawOnYourScreen
- *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 2 of the License, or
+ * the Free Software Foundation, either version 3 of the License, or
  * (at your option) any later version.
  *
  * This program is distributed in the hope that it will be useful,
@@ -19,8 +13,14 @@
  *
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * SPDX-FileCopyrightText: 2019 Abakkk
+ * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+/* jslint esversion: 6 */
+/* exported init */
+
 const Lang = imports.lang;
 const Meta = imports.gi.Meta;
 const Shell = imports.gi.Shell;
@@ -41,6 +41,7 @@ const _ = imports.gettext.domain(Me.metadata['gettext-domain']).gettext;
 
 const GS_VERSION = Config.PACKAGE_VERSION;
 const HIDE_TIMEOUT_LONG = 2500; // ms, default is 1500 ms
+const UUID = Me.uuid.replace(/@/gi, '_at_').replace(/[^a-z0-9+_-]/gi, '_');
 
 // custom Shell.ActionMode, assuming that they are unused
 const DRAWING_ACTION_MODE = Math.pow(2,14);
@@ -53,7 +54,7 @@ function init() {
 }
 
 const Extension = new Lang.Class({
-    Name: 'DrawOnYourScreenExtension',
+    Name: `${UUID}-Extension`,
     
     _init: function() {
         Convenience.initTranslations();
@@ -81,7 +82,7 @@ const Extension = new Lang.Class({
 // distributes keybinding callbacks to the active area
 // and handles stylesheet and monitor changes.
 const AreaManager = new Lang.Class({
-    Name: 'DrawOnYourScreenAreaManager',
+    Name: `${UUID}-AreaManager`,
 
     _init: function() {
         this.areas = [];
@@ -130,9 +131,9 @@ const AreaManager = new Lang.Class({
     
     onDesktopSettingChanged: function() {
         if (this.onDesktop)
-            this.areas.forEach(area => area.get_parent().show());
+            this.areas.forEach(area => area.show());
         else
-            this.areas.forEach(area => area.get_parent().hide());
+            this.areas.forEach(area => area.hide());
     },
     
     onPersistentOverRestartsSettingChanged: function() {
@@ -166,22 +167,25 @@ const AreaManager = new Lang.Class({
         
         for (let i = 0; i < this.monitors.length; i++) {
             let monitor = this.monitors[i];
-            let container = new St.Widget({ name: 'drawOnYourSreenContainer' + i });
             let helper = new Helper.DrawingHelper({ name: 'drawOnYourSreenHelper' + i }, monitor);
             let loadPersistent = i == Main.layoutManager.primaryIndex && this.persistentOverRestarts;
-            let area = new Area.DrawingArea({ name: 'drawOnYourSreenArea' + i }, monitor, helper, loadPersistent);
+            // Some utils for the drawing area menus.
-            container.add_child(area);
+            let areaManagerUtils = {
-            container.add_child(helper);
+                getHiddenList: () => this.hiddenList || null,
+                togglePanelAndDockOpacity: this.togglePanelAndDockOpacity.bind(this),
+                openPreferences: this.openPreferences.bind(this)
+            };
+            let area = new Area.DrawingArea({ name: 'drawOnYourSreenArea' + i }, monitor, helper, areaManagerUtils, loadPersistent);
             
-            Main.layoutManager._backgroundGroup.insert_child_above(container, Main.layoutManager._bgManagers[i].backgroundActor);
+            Main.layoutManager._backgroundGroup.insert_child_above(area, Main.layoutManager._bgManagers[i].backgroundActor);
             if (!this.onDesktop)
-                container.hide();
+                area.hide();
             
-            container.set_position(monitor.x, monitor.y);
+            area.set_position(monitor.x, monitor.y);
-            container.set_size(monitor.width, monitor.height);
             area.set_size(monitor.width, monitor.height);
             area.leaveDrawingHandler = area.connect('leave-drawing-mode', this.toggleDrawing.bind(this));
             area.updateActionModeHandler = area.connect('update-action-mode', this.updateActionMode.bind(this));
+            area.pointerCursorChangedHandler = area.connect('pointer-cursor-changed', this.setCursor.bind(this));
             area.showOsdHandler = area.connect('show-osd', this.showOsd.bind(this));
             this.areas.push(area);
         }
@@ -206,17 +210,17 @@ const AreaManager = new Lang.Class({
             'switch-fill' : this.activeArea.switchFill.bind(this.activeArea),
             'switch-image-file' : this.activeArea.switchImageFile.bind(this.activeArea, false),
             'switch-image-file-reverse' : this.activeArea.switchImageFile.bind(this.activeArea, true),
-            'select-none-shape': () => this.activeArea.selectTool(Area.Tools.NONE),
+            'select-none-shape': () => this.activeArea.selectTool(Area.Tool.NONE),
-            'select-line-shape': () => this.activeArea.selectTool(Area.Tools.LINE),
+            'select-line-shape': () => this.activeArea.selectTool(Area.Tool.LINE),
-            'select-ellipse-shape': () => this.activeArea.selectTool(Area.Tools.ELLIPSE),
+            'select-ellipse-shape': () => this.activeArea.selectTool(Area.Tool.ELLIPSE),
-            'select-rectangle-shape': () => this.activeArea.selectTool(Area.Tools.RECTANGLE),
+            'select-rectangle-shape': () => this.activeArea.selectTool(Area.Tool.RECTANGLE),
-            'select-text-shape': () => this.activeArea.selectTool(Area.Tools.TEXT),
+            'select-text-shape': () => this.activeArea.selectTool(Area.Tool.TEXT),
-            'select-image-shape': () => this.activeArea.selectTool(Area.Tools.IMAGE),
+            'select-image-shape': () => this.activeArea.selectTool(Area.Tool.IMAGE),
-            'select-polygon-shape': () => this.activeArea.selectTool(Area.Tools.POLYGON),
+            'select-polygon-shape': () => this.activeArea.selectTool(Area.Tool.POLYGON),
-            'select-polyline-shape': () => this.activeArea.selectTool(Area.Tools.POLYLINE),
+            'select-polyline-shape': () => this.activeArea.selectTool(Area.Tool.POLYLINE),
-            'select-move-tool': () => this.activeArea.selectTool(Area.Tools.MOVE),
+            'select-move-tool': () => this.activeArea.selectTool(Area.Tool.MOVE),
-            'select-resize-tool': () => this.activeArea.selectTool(Area.Tools.RESIZE),
+            'select-resize-tool': () => this.activeArea.selectTool(Area.Tool.RESIZE),
-            'select-mirror-tool': () => this.activeArea.selectTool(Area.Tools.MIRROR)
+            'select-mirror-tool': () => this.activeArea.selectTool(Area.Tool.MIRROR)
         };
         
         // available when writing
@@ -225,6 +229,7 @@ const AreaManager = new Lang.Class({
             'save-as-json': this.activeArea.saveAsJson.bind(this.activeArea, true, null),
             'open-previous-json': this.activeArea.loadPreviousJson.bind(this.activeArea),
             'open-next-json': this.activeArea.loadNextJson.bind(this.activeArea),
+            'pick-color': this.activeArea.pickColor.bind(this.activeArea),
             'toggle-background': this.activeArea.toggleBackground.bind(this.activeArea),
             'toggle-grid': this.activeArea.toggleGrid.bind(this.activeArea),
             'toggle-square-area': this.activeArea.toggleSquareArea.bind(this.activeArea),
@@ -331,25 +336,24 @@ const AreaManager = new Lang.Class({
         }
     },
     
-    toggleContainer: function() {
+    toggleArea: function() {
         if (!this.activeArea)
             return;
         
-        let activeContainer = this.activeArea.get_parent();
         let activeIndex = this.areas.indexOf(this.activeArea);
         
-        if (activeContainer.get_parent() == Main.uiGroup) {
+        if (this.activeArea.get_parent() == Main.uiGroup) {
             Main.uiGroup.set_child_at_index(Main.layoutManager.keyboardBox, this.oldKeyboardIndex);
-            Main.uiGroup.remove_actor(activeContainer);
+            Main.uiGroup.remove_actor(this.activeArea);
-            Main.layoutManager._backgroundGroup.insert_child_above(activeContainer, Main.layoutManager._bgManagers[activeIndex].backgroundActor);
+            Main.layoutManager._backgroundGroup.insert_child_above(this.activeArea, Main.layoutManager._bgManagers[activeIndex].backgroundActor);
             if (!this.onDesktop)
-                activeContainer.hide();
+                this.activeArea.hide();
         } else {
-            Main.layoutManager._backgroundGroup.remove_actor(activeContainer);
+            Main.layoutManager._backgroundGroup.remove_actor(this.activeArea);
-            Main.uiGroup.add_child(activeContainer);
+            Main.uiGroup.add_child(this.activeArea);
             // move the keyboard above the area to make it available with text entries
             this.oldKeyboardIndex = Main.uiGroup.get_children().indexOf(Main.layoutManager.keyboardBox);
-            Main.uiGroup.set_child_above_sibling(Main.layoutManager.keyboardBox, activeContainer);
+            Main.uiGroup.set_child_above_sibling(Main.layoutManager.keyboardBox, this.activeArea);
         }
     },
     
@@ -364,7 +368,7 @@ const AreaManager = new Lang.Class({
             if (source && source == global.display)
                 // Translators: "released" as the opposite of "grabbed"
                 this.showOsd(null, Files.Icons.UNGRAB, _("Keyboard and pointer released"), null, null, false);
-            this.setCursor('DEFAULT');
+            this.setCursor(null, 'DEFAULT');
             this.activeArea.reactive = false;
             this.removeInternalKeybindings();
         } else {
@@ -395,23 +399,24 @@ const AreaManager = new Lang.Class({
             
             if (Main._findModal(this.activeArea) != -1)
                 this.toggleModal();
-            this.toggleContainer();
+            this.toggleArea();
             this.activeArea = null;
         } else {
             // avoid to deal with Meta changes (global.display/global.screen)
             let currentIndex = Main.layoutManager.monitors.indexOf(Main.layoutManager.currentMonitor);
             this.activeArea = this.areas[currentIndex];
-            this.toggleContainer();
+            this.toggleArea();
             if (!this.toggleModal()) {
-                this.toggleContainer();
+                this.toggleArea();
                 this.activeArea = null;
                 return;
             }
             
             this.activeArea.enterDrawingMode();
             this.osdDisabled = Me.settings.get_boolean('osd-disabled');
+            // <span size="medium"> is a clutter/mutter 3.38 bug workaround: https://gitlab.gnome.org/GNOME/mutter/-/issues/1467
             // Translators: %s is a key label
-            let label = "<small>" + _("Press <i>%s</i> for help").format(this.activeArea.helper.helpKeyLabel) + "</small>\n\n" + _("Entering drawing mode");
+            let label = `<small>${_("Press <i>%s</i> for help").format(this.activeArea.helper.helpKeyLabel)}</small>\n\n<span size="medium">${_("Entering drawing mode")}</span>`;
             this.showOsd(null, Files.Icons.ENTER, label, null, null, true);
         }
         
@@ -501,7 +506,7 @@ const AreaManager = new Lang.Class({
             OsdWindow.HIDE_TIMEOUT = hideTimeoutSave;
     },
     
-    setCursor: function(cursorName) {
+    setCursor: function(sourceActor_, cursorName) {
         // check display or screen (API changes)
         if (global.display.set_cursor)
             global.display.set_cursor(Meta.Cursor[cursorName]);
@@ -515,9 +520,7 @@ const AreaManager = new Lang.Class({
             area.disconnect(area.leaveDrawingHandler);
             area.disconnect(area.updateActionModeHandler);
             area.disconnect(area.showOsdHandler);
-            let container = area.get_parent();
+            area.destroy();
-            container.get_parent().remove_actor(container);
-            container.destroy();
         }
         this.areas = [];
     },
@@ -559,7 +562,7 @@ const AreaManager = new Lang.Class({
 
 // The same as the original, without forcing a ratio of 1.
 const OsdWindowConstraint = new Lang.Class({
-    Name: 'DrawOnYourScreenOsdWindowConstraint',
+    Name: `${UUID}-OsdWindowConstraint`,
     Extends: OsdWindow.OsdWindowConstraint,
 
     vfunc_update_allocation: function(actor, actorBox) {
@@ -581,7 +584,7 @@ const OsdWindowConstraint = new Lang.Class({
 });
 
 const DrawingIndicator = new Lang.Class({
-    Name: 'DrawOnYourScreenIndicator',
+    Name: `${UUID}-Indicator`,
 
     _init: function() {
         let [menuAlignment, dontCreateMenu] = [0, true];

files.js

@@ -1,15 +1,9 @@
-/* jslint esversion: 6 */
-/* exported Icons, Image, Images, Json, Jsons, getDateString, saveSvg */
-
 /*
  * Copyright 2019 Abakkk
  *
- * This file is part of DrawOnYourScreen, a drawing extension for GNOME Shell.
- * https://framagit.org/abakkk/DrawOnYourScreen
- *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 2 of the License, or
+ * the Free Software Foundation, either version 3 of the License, or
  * (at your option) any later version.
  *
  * This program is distributed in the hope that it will be useful,
@@ -19,8 +13,14 @@
  *
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * SPDX-FileCopyrightText: 2019 Abakkk
+ * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+/* jslint esversion: 6 */
+/* exported Icons, Image, Images, Json, Jsons, getDateString, saveSvg */
+
 const ByteArray = imports.byteArray;
 const Gdk = imports.gi.Gdk;
 const GdkPixbuf = imports.gi.GdkPixbuf;
@@ -31,6 +31,7 @@ const St = imports.gi.St;
 
 const ExtensionUtils = imports.misc.extensionUtils;
 const Me = ExtensionUtils.getCurrentExtension();
+const UUID = Me.uuid.replace(/@/gi, '_at_').replace(/[^a-z0-9+_-]/gi, '_');
 const EXAMPLE_IMAGE_DIRECTORY = Me.dir.get_child('data').get_child('images');
 const DEFAULT_USER_IMAGE_LOCATION = GLib.build_filenamev([GLib.get_user_data_dir(), Me.metadata['data-dir'], 'images']);
 const Clipboard = St.Clipboard.get_default();
@@ -40,16 +41,26 @@ const ICON_NAMES = [
     'arc', 'color', 'dashed-line', 'document-export', 'fillrule-evenodd', 'fillrule-nonzero', 'fill', 'full-line', 'linecap', 'linejoin', 'palette', 'smooth', 'stroke',
     'tool-ellipse', 'tool-line', 'tool-mirror', 'tool-move', 'tool-none', 'tool-polygon', 'tool-polyline', 'tool-rectangle', 'tool-resize',
 ];
-const ThemedIconNames = {
+const ThemedIconName = {
+    COLOR_PICKER: 'color-select-symbolic',
     ENTER: 'applications-graphics', LEAVE: 'application-exit',
     GRAB: 'input-touchpad', UNGRAB: 'touchpad-disabled',
     OPEN: 'document-open', SAVE: 'document-save',
     FONT_FAMILY: 'font-x-generic', FONT_STYLE: 'format-text-italic', FONT_WEIGHT:'format-text-bold',
-    LEFT_ALIGNED: 'format-justify-left', RIGHT_ALIGNED: 'format-justify-right',
+    LEFT_ALIGNED: 'format-justify-left', CENTERED: 'format-justify-center',RIGHT_ALIGNED: 'format-justify-right',
     TOOL_IMAGE: 'insert-image', TOOL_TEXT: 'insert-text',
 };
 
-var Icons = {};
+var Icons = {
+    get FAKE() {
+        if (!this._fake) {
+            let bytes = new GLib.Bytes('<svg/>');
+            this._fake = Gio.BytesIcon.new(bytes);
+        }
+        
+        return this._fake;
+    }
+};
 
 ICON_NAMES.forEach(name => {
     Object.defineProperty(Icons, name.toUpperCase().replace(/-/gi, '_'), {
@@ -63,20 +74,32 @@ ICON_NAMES.forEach(name => {
     });
 });
 
-Object.keys(ThemedIconNames).forEach(key => {
+Object.keys(ThemedIconName).forEach(key => {
     Object.defineProperty(Icons, key, {
         get: function() {
             if (!this[`_${key}`])
-                this[`_${key}`] = new Gio.ThemedIcon({ name: `${ThemedIconNames[key]}-symbolic` });
+                this[`_${key}`] = new Gio.ThemedIcon({ name: `${ThemedIconName[key]}-symbolic` });
             return this[`_${key}`];
         }
     });
 });
 
+const replaceColor = function (contents, color) {
+    if (contents instanceof Uint8Array)
+        contents = ByteArray.toString(contents);
+    else
+        contents = contents.toString();
+    
+    return contents.replace(/fill(?=="transparent"|="none"|:transparent|:none)/gi, 'filll')
+                   .replace(/fill="[^"]+"/gi, `fill="${color}"`)
+                   .replace(/fill:[^";]+/gi, `fill:${color};`)
+                   .replace(/filll/gi, 'fill');
+};
+
 // Wrapper around image data. If not subclassed, it is used when loading in the area an image element for a drawing file (.json)
 // and it takes { displayName, contentType, base64, hash } as params.
 var Image = new Lang.Class({
-    Name: 'DrawOnYourScreenImage',
+    Name: `${UUID}-Image`,
     
     _init: function(params) {
         for (let key in params)
@@ -87,7 +110,7 @@ var Image = new Lang.Class({
         return this.displayName;
     },
     
-    toJson: function() {
+    toJSON: function() {
         return {
             displayName: this.displayName,
             contentType: this.contentType,
@@ -112,6 +135,14 @@ var Image = new Lang.Class({
         this._base64 = base64;
     },
     
+    getBase64ForColor: function(color) {
+        if (!color || this.contentType != 'image/svg+xml')
+            return this.base64;
+        
+        let contents = GLib.base64_decode(this.base64);
+        return GLib.base64_encode(replaceColor(contents, color));
+    },
+    
     // hash is not used
     get hash() {
         if (!this._hash)
@@ -123,7 +154,22 @@ var Image = new Lang.Class({
         this._hash = hash;
     },
     
-    get pixbuf() {
+    getBytesForColor: function(color) {
+        if (!color || this.contentType != 'image/svg+xml')
+            return this.bytes;
+        
+        let contents = this.bytes.get_data();
+        return new GLib.Bytes(replaceColor(contents, color));
+    },
+    
+    getPixbuf: function(color) {
+        if (color) {
+            let stream = Gio.MemoryInputStream.new_from_bytes(this.getBytesForColor(color));
+            let pixbuf = GdkPixbuf.Pixbuf.new_from_stream(stream, null);
+            stream.close(null);
+            return pixbuf;
+        }
+        
         if (!this._pixbuf) {
             let stream = Gio.MemoryInputStream.new_from_bytes(this.bytes);
             this._pixbuf = GdkPixbuf.Pixbuf.new_from_stream(stream, null);
@@ -132,23 +178,23 @@ var Image = new Lang.Class({
         return this._pixbuf;
     },
     
-    getPixbufAtScale: function(width, height) {
+    getPixbufAtScale: function(width, height, color) {
-        let stream = Gio.MemoryInputStream.new_from_bytes(this.bytes);
+        let stream = Gio.MemoryInputStream.new_from_bytes(this.getBytesForColor(color));
         let pixbuf = GdkPixbuf.Pixbuf.new_from_stream_at_scale(stream, width, height, true, null);
         stream.close(null);
         return pixbuf;
     },
     
-    setCairoSource: function(cr, x, y, width, height, preserveAspectRatio) {
+    setCairoSource: function(cr, x, y, width, height, preserveAspectRatio, color) {
-        let pixbuf = preserveAspectRatio ? this.getPixbufAtScale(width, height)
+        let pixbuf = preserveAspectRatio ? this.getPixbufAtScale(width, height, color)
-                                         : this.pixbuf.scale_simple(width, height, GdkPixbuf.InterpType.BILINEAR);
+                                         : this.getPixbuf(color).scale_simple(width, height, GdkPixbuf.InterpType.BILINEAR);
         Gdk.cairo_set_source_pixbuf(cr, pixbuf, x, y);
     }
 });
 
 // Add a gicon generator to Image. It is used with image files and it takes { file, info } as params.
 const ImageWithGicon = new Lang.Class({
-    Name: 'DrawOnYourScreenImageWithGicon',
+    Name: `${UUID}-ImageWithGicon`,
     Extends: Image,
     
     get displayName() {
@@ -202,7 +248,7 @@ const ImageWithGicon = new Lang.Class({
 
 // It is directly generated from a Json object, without an image file. It takes { bytes, displayName, gicon } as params.
 const ImageFromJson = new Lang.Class({
-    Name: 'DrawOnYourScreenImageFromJson',
+    Name: `${UUID}-ImageFromJson`,
     Extends: Image,
     contentType: 'image/svg+xml',
     
@@ -318,11 +364,12 @@ var Images = {
     },
     
     addImagesFromClipboard: function(callback) {
-        Clipboard.get_text(CLIPBOARD_TYPE, (clipBoard, text) => {
+        Clipboard.get_text(CLIPBOARD_TYPE, (clipboard, text) => {
             if (!text)
                 return;
             
-            let lines = text.split('\n');
+            // Since 3.38 there is a line terminator character, that has to be removed with .trim().
+            let lines = text.split('\n').map(line => line.trim());
             if (lines[0] == 'x-special/nautilus-clipboard')
                 lines = lines.slice(2);
             
@@ -348,7 +395,7 @@ var Images = {
 
 // Wrapper around a json file (drawing saves).
 var Json = new Lang.Class({
-    Name: 'DrawOnYourScreenJson',
+    Name: `${UUID}-Json`,
     
     _init: function(params) {
         for (let key in params)
@@ -443,7 +490,9 @@ var Jsons = {
             return;
         
         let directory = Gio.File.new_for_path(GLib.build_filenamev([GLib.get_user_data_dir(), Me.metadata['data-dir']]));
-        this._monitor = directory.monitor(Gio.FileMonitorFlags.NONE, null);
+        // It is important to specify that the file to monitor is a directory because maybe the directory does not exist yet
+        // and remove events would not be monitored.
+        this._monitor = directory.monitor_directory(Gio.FileMonitorFlags.NONE, null);
         this._monitorHandler = this._monitor.connect('changed', (monitor, file) => {
             if (file.get_basename() != `${Me.metadata['persistent-file-name']}.json` && file.get_basename().indexOf('.goutputstream'))
                 this.reset();
@@ -539,7 +588,7 @@ var Jsons = {
 
 var getDateString = function() {
     let date = GLib.DateTime.new_now_local();
-    return `${date.format("%F")} ${date.format("%X")}`;
+    return `${date.format("%F")} ${date.format("%T")}`;
 };
 
 var saveSvg = function(content) {

gimpPaletteParser.js

@@ -0,0 +1,95 @@
+/*
+ * Copyright 2019 Abakkk
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * SPDX-FileCopyrightText: 2019 Abakkk
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+/* jslint esversion: 6 */
+/* exported parseFile */
+
+const ByteArray = imports.byteArray;
+
+/*
+ * [
+ *   [
+ *     'palette name 1', // a palette for each column
+ *     [
+ *       'rgb(...)',
+ *       'rgb(...):color display name', // the optional name separated with ':'
+ *       ...
+ *     ]
+ *   ],
+ *   [
+ *     'palette name 2',
+ *     [...]
+ *   ],
+ *   ...
+ * ]
+*/
+
+function parse(contents) {
+    let lines = contents.split('\n');
+    let line, name, columnNumber;
+
+    line = lines.shift();
+    if (!line || !line.startsWith('GIMP Palette'))
+        log("Missing magic header");
+
+    line = lines.shift();
+    if (line.startsWith('Name:')) {
+        name = line.slice(5).trim() || file.get_basename();
+        line = lines.shift();
+    }
+    if (line.startsWith('Columns:')) {
+        columnNumber = Number(line.slice(8).trim()) || 1;
+        line = lines.shift();
+    }
+
+    let columns = (new Array(columnNumber)).fill(null).map(() => []);
+
+    lines.forEach((line, index) => {
+        if (!line || line.startsWith('#'))
+            return;
+        
+        line = line.split('#')[0].trim();
+        
+        let [, color, displayName] = line.split(/(^[\d\s]+)/);
+        
+        let values = color.trim().split(/\D+/gi).filter(value => value >= 0 && value <= 255);
+        if (values.length < 3)
+            return;
+        
+        let string = `rgb(${values[0]},${values[1]},${values[2]})`;
+        if (displayName.trim())
+            string += `:${displayName.trim()}`;
+        
+        columns[index % columns.length].push(string);
+    });
+
+    return columns.map((column, index) => [columnNumber > 1 ? `${name} ${index + 1}` : name, column]);
+}
+
+function parseFile(file) {
+    if (!file.query_exists(null))
+        return [];
+    
+    let [, contents] = file.load_contents(null);
+    if (contents instanceof Uint8Array)
+        contents = ByteArray.toString(contents);
+    
+    return parse(contents);
+}

helper.js

@@ -1,15 +1,9 @@
-/* jslint esversion: 6 */
-/* exported DrawingHelper */
-
 /*
  * Copyright 2019 Abakkk
  *
- * This file is part of DrawOnYourScreen, a drawing extension for GNOME Shell.
- * https://framagit.org/abakkk/DrawOnYourScreen
- *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 2 of the License, or
+ * the Free Software Foundation, either version 3 of the License, or
  * (at your option) any later version.
  *
  * This program is distributed in the hope that it will be useful,
@@ -19,15 +13,21 @@
  *
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * SPDX-FileCopyrightText: 2019 Abakkk
+ * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+/* jslint esversion: 6 */
+/* exported DrawingHelper */
+
+const Clutter = imports.gi.Clutter;
 const Gtk = imports.gi.Gtk;
 const Lang = imports.lang;
 const St = imports.gi.St;
 
 const Config = imports.misc.config;
 const ExtensionUtils = imports.misc.extensionUtils;
-const Tweener = imports.ui.tweener;
 
 const Me = ExtensionUtils.getCurrentExtension();
 const Convenience = ExtensionUtils.getSettings ? ExtensionUtils : Me.imports.convenience;
@@ -35,15 +35,17 @@ const Shortcuts = Me.imports.shortcuts;
 const _ = imports.gettext.domain(Me.metadata['gettext-domain']).gettext;
 
 const GS_VERSION = Config.PACKAGE_VERSION;
+const Tweener = GS_VERSION < '3.33.0' ? imports.ui.tweener : null;
 
 const HELPER_ANIMATION_TIME = 0.25;
 const MEDIA_KEYS_SCHEMA = 'org.gnome.settings-daemon.plugins.media-keys';
 const MEDIA_KEYS_KEYS = ['screenshot', 'screenshot-clip', 'area-screenshot', 'area-screenshot-clip'];
+const UUID = Me.uuid.replace(/@/gi, '_at_').replace(/[^a-z0-9+_-]/gi, '_');
 
 // DrawingHelper provides the "help osd" (Ctrl + F1)
 // It uses the same texts as in prefs
 var DrawingHelper = new Lang.Class({
-    Name: 'DrawOnYourScreenDrawingHelper',
+    Name: `${UUID}-DrawingHelper`,
     Extends: St.ScrollView,
     
     _init: function(params, monitor) {
@@ -71,8 +73,13 @@ var DrawingHelper = new Lang.Class({
     },
     
     _updateHelpKeyLabel: function() {
+        try {
             let [keyval, mods] = Gtk.accelerator_parse(Me.internalShortcutSettings.get_strv('toggle-help')[0] || '');
             this._helpKeyLabel = Gtk.accelerator_get_label(keyval, mods);
+        } catch(e) {
+            logError(e);
+            this._helpKeyLabel = " ";
+        }
     },
     
     get helpKeyLabel() {
@@ -170,25 +177,39 @@ var DrawingHelper = new Lang.Class({
         this.set_position(Math.floor(this.monitor.width / 2 - this.width / 2),
                           Math.floor(this.monitor.height / 2 - this.height / 2));
                           
+        // St.PolicyType: GS 3.32+
         if (this.height == maxHeight)
-            this.vscrollbar_policy = Gtk.PolicyType.ALWAYS;
+            this.vscrollbar_policy = St.PolicyType ? St.PolicyType.ALWAYS : Gtk.PolicyType.ALWAYS;
         else
-            this.vscrollbar_policy = Gtk.PolicyType.NEVER;
+            this.vscrollbar_policy = St.PolicyType ? St.PolicyType.NEVER : Gtk.PolicyType.NEVER;
         
+        if (Tweener) {
             Tweener.removeTweens(this);
             Tweener.addTween(this, { opacity: 255,
                                      time: HELPER_ANIMATION_TIME,
-                                 transition: 'easeOutQuad',
+                                     transition: 'easeOutQuad' });
-                                 onComplete: null });
+        } else {
+            this.remove_all_transitions();
+            this.ease({ opacity: 255,
+                        duration: HELPER_ANIMATION_TIME * 1000,
+                        transition: Clutter.AnimationMode.EASE_OUT_QUAD });
+        }
     },
     
     hideHelp: function() {
+        if (Tweener) {
             Tweener.removeTweens(this);
             Tweener.addTween(this, { opacity: 0,
                                      time: HELPER_ANIMATION_TIME,
                                      transition: 'easeOutQuad',
                                      onComplete: this.hide.bind(this) });
-        
+        } else {
+            this.remove_all_transitions();
+            this.ease({ opacity: 0,
+                        duration: HELPER_ANIMATION_TIME * 1000,
+                        transition: Clutter.AnimationMode.EASE_OUT_QUAD,
+                        onComplete: this.hide.bind(this) });
+        }
     }
 });
 

locale/POTFILES.in

@@ -1,4 +1,4 @@
-# xgettext --from-code=UTF-8 --add-comments="Translators: " --no-location --package-name="Draw On Your Screen" --msgid-bugs-address="https://framagit.org/abakkk/DrawOnYourScreen/issues" -f locale/POTFILES.in
+# xgettext --from-code=UTF-8 --add-comments="Translators: " --no-location --package-name="Draw On Your Screen" --msgid-bugs-address="https://codeberg.org/som/DrawOnYourScreen/issues" -f locale/POTFILES.in
 area.js
 extension.js
 helper.js

locale/de/LC_MESSAGES/draw-on-your-screen.po

@@ -0,0 +1,741 @@
+# <language> translations for Draw On Your Screen.
+# Copyright (C) 2019 Listed translators
+#
+# This file is distributed under the same license as Draw On Your Screen.
+# Onno Giesmann <nutzer3105@gmail.com>, 2020-2021.
+#
+# Some words refer to SVG attributes (font, line, fill rule ...).
+# You are free to translate them or not.
+msgid ""
+msgstr ""
+"Project-Id-Version: Draw On Your Screen\n"
+"Report-Msgid-Bugs-To: https://codeberg.org/som/DrawOnYourScreen/issues\n"
+"POT-Creation-Date: 2021-02-17 14:14+0100\n"
+"PO-Revision-Date: 2021-03-04 08:21+0100\n"
+"Last-Translator: Onno Giesmann <nutzer3105@gmail.com>\n"
+"Language-Team: \n"
+"Language: de\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: Poedit 2.4.2\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+#. Translators: %s is a key label
+#, javascript-format
+msgid ""
+"Press <i>%s</i> to get\n"
+"a fourth control point"
+msgstr ""
+"<i>%s</i> drücken, um einen\n"
+"vierten Kontrollpunkt zu erhalten"
+
+msgid "Mark a point of symmetry"
+msgstr "Symmetriepunkt markieren"
+
+msgid "Draw a line of symmetry"
+msgstr "Symmetrielinie zeichnen"
+
+#. Translators: initial content of the text area
+msgctxt "text-area-content"
+msgid "Text"
+msgstr "Text"
+
+#. Translators: %s is a key label
+#, javascript-format
+msgid "Press <i>%s</i> to mark vertices"
+msgstr ""
+"<i>%s</i> drücken, um\n"
+"Scheitelpunkte zu markieren"
+
+#. Translators: %s is a key label
+#, javascript-format
+msgid ""
+"Press <i>%s</i>\n"
+"to start a new line"
+msgstr ""
+"<i>%s</i> drücken, um\n"
+"neue Zeile zu beginnen"
+
+#. Translators: It is displayed in an OSD notification to ask the user to start picking, so it should use the imperative mood.
+msgctxt "osd-notification"
+msgid "Pick a color"
+msgstr "Wählen Sie eine Farbe"
+
+#. Translators: "released" as the opposite of "grabbed"
+msgid "Keyboard and pointer released"
+msgstr "Tastatur und Zeiger losgelöst"
+
+msgid "Keyboard and pointer grabbed"
+msgstr "Tastatur und Zeiger gekoppelt"
+
+msgid "Leaving drawing mode"
+msgstr "Verlasse Zeichnungsmodus"
+
+#. Translators: %s is a key label
+#, javascript-format
+msgid "Press <i>%s</i> for help"
+msgstr "Für Hilfe <i>%s</i> drücken"
+
+msgid "Entering drawing mode"
+msgstr "Beginne Zeichnungsmodus"
+
+msgid "Global"
+msgstr "Global"
+
+msgid "Internal"
+msgstr "Intern"
+
+msgid "System"
+msgstr "System"
+
+msgid "Dashed line"
+msgstr "Gestrichelte Linie"
+
+#. Translators: as the alternative to "Dashed line"
+msgid "Full line"
+msgstr "Volle Linie"
+
+msgid "Fill"
+msgstr "Füllen"
+
+#. Translators: as the alternative to "Fill"
+msgid "Outline"
+msgstr "Außenlinie"
+
+#. Translators: fill-rule SVG attribute
+msgid "Nonzero"
+msgstr "Nonzero"
+
+msgid "Evenodd"
+msgstr "Evenodd"
+
+#. Translators: generic font-family SVG attribute
+msgctxt "font-family"
+msgid "Sans-Serif"
+msgstr "Sans-Serif"
+
+msgctxt "font-family"
+msgid "Serif"
+msgstr "Serif"
+
+msgctxt "font-family"
+msgid "Monospace"
+msgstr "Monospace"
+
+msgctxt "font-family"
+msgid "Cursive"
+msgstr "Cursive"
+
+msgctxt "font-family"
+msgid "Fantasy"
+msgstr "Fantasy"
+
+#. Translators: font-style SVG attribute
+msgctxt "font-style"
+msgid "Normal"
+msgstr "Normal"
+
+msgctxt "font-style"
+msgid "Oblique"
+msgstr "Schräg"
+
+msgctxt "font-style"
+msgid "Italic"
+msgstr "Kursiv"
+
+#. Translators: font-weight SVG attribute
+msgctxt "font-weight"
+msgid "Thin"
+msgstr "Fein"
+
+msgctxt "font-weight"
+msgid "Ultra Light"
+msgstr "Ultraleicht"
+
+msgctxt "font-weight"
+msgid "Light"
+msgstr "Leicht"
+
+msgctxt "font-weight"
+msgid "Semi Light"
+msgstr "Halbleicht"
+
+msgctxt "font-weight"
+msgid "Book"
+msgstr "Buch"
+
+msgctxt "font-weight"
+msgid "Normal"
+msgstr "Normal"
+
+msgctxt "font-weight"
+msgid "Medium"
+msgstr "Medium"
+
+msgctxt "font-weight"
+msgid "Semi Bold"
+msgstr "Halbfett"
+
+msgctxt "font-weight"
+msgid "Bold"
+msgstr "Fett"
+
+msgctxt "font-weight"
+msgid "Ultra Bold"
+msgstr "Ultrafett"
+
+msgctxt "font-weight"
+msgid "Heavy"
+msgstr "Kräftig"
+
+msgctxt "font-weight"
+msgid "Ultra Heavy"
+msgstr "Ultrakräftig"
+
+#. Translators: stroke-linecap SVG attribute
+msgctxt "stroke-linecap"
+msgid "Butt"
+msgstr "Rechtwinkeliges Ende"
+
+msgctxt "stroke-linecap"
+msgid "Round"
+msgstr "Ende mit Halbkreis"
+
+msgctxt "stroke-linecap"
+msgid "Square"
+msgstr "Ende mit Rechteck"
+
+#. Translators: stroke-linejoin SVG attribute
+msgctxt "stroke-linejoin"
+msgid "Miter"
+msgstr "Ecken mit Gehrung"
+
+msgctxt "stroke-linejoin"
+msgid "Round"
+msgstr "Abgerundete Ecken"
+
+msgctxt "stroke-linejoin"
+msgid "Bevel"
+msgstr "Abgeschrägte Ecken"
+
+#. Translators: value in pixel unit (e.g. "5 px")
+#, javascript-format
+msgid "%f px"
+msgstr "%f px"
+
+msgid "Left aligned"
+msgstr "Linksbündig"
+
+msgid "Centered"
+msgstr "Zentriert"
+
+msgid "Right aligned"
+msgstr "Rechtsbündig"
+
+msgctxt "drawing-tool"
+msgid "Free drawing"
+msgstr "Freies Zeichnen"
+
+msgctxt "drawing-tool"
+msgid "Line"
+msgstr "Linie"
+
+msgctxt "drawing-tool"
+msgid "Ellipse"
+msgstr "Ellipse"
+
+msgctxt "drawing-tool"
+msgid "Rectangle"
+msgstr "Rechteck"
+
+msgctxt "drawing-tool"
+msgid "Text"
+msgstr "Text"
+
+msgctxt "drawing-tool"
+msgid "Polygon"
+msgstr "Vieleck"
+
+msgctxt "drawing-tool"
+msgid "Polyline"
+msgstr "Linienzug"
+
+msgctxt "drawing-tool"
+msgid "Image"
+msgstr "Bild"
+
+msgctxt "drawing-tool"
+msgid "Move"
+msgstr "Verschieben"
+
+msgctxt "drawing-tool"
+msgid "Resize"
+msgstr "Größenänderung"
+
+msgctxt "drawing-tool"
+msgid "Mirror"
+msgstr "Spiegeln"
+
+msgid "Erase"
+msgstr "Entfernen"
+
+msgid "Smooth"
+msgstr "Glätten"
+
+msgid "Open drawing"
+msgstr "Zeichnung öffnen"
+
+msgid "Save drawing as…"
+msgstr "Zeichnung speichern als…"
+
+msgid "Palette"
+msgstr "Farbpalette"
+
+msgid "Color"
+msgstr "Farbe"
+
+#. Translators: It is displayed in a menu button tooltip or as a shortcut action description, so it should NOT use the imperative mood.
+msgid "Pick a color"
+msgstr "Auswählen einer Farbe"
+
+msgid "Add to images"
+msgstr "Zu Bildern hinzufügen"
+
+msgid "Delete"
+msgstr "Löschen"
+
+msgid "Type a name"
+msgstr "Namen eingeben"
+
+#. Translators: "Preferences" page in preferences
+msgid "Preferences"
+msgstr "Einstellungen"
+
+#. Translators: "Drawing" page in preferences
+msgid "Drawing"
+msgstr "Zeichnung"
+
+#. Translators: "About" page in preferences
+msgid "About"
+msgstr "Info"
+
+#. Translators: you are free to translate the extension name, that is displayed in About page, or not
+msgid "Draw On You Screen"
+msgstr "Zeichnungen auf Ihrem Bildschirm"
+
+#. Translators: version number in "About" page
+#, javascript-format
+msgid "Version %f"
+msgstr "Version %f"
+
+#. Translators: you are free to translate the extension description, that is displayed in About page, or not
+msgid ""
+"Start drawing with Super+Alt+D and save your beautiful work by taking a "
+"screenshot"
+msgstr ""
+"Beginnen Sie mit dem Zeichnen durch Drücken von Super+Alt+D.\n"
+"Sie können Ihr Werk danach auch in einem Bildschirmfoto festhalten"
+
+#. Translators: add your name here or keep it empty, it will be displayed in about page, e.g.
+#. msgstr ""
+#. "translator1\n"
+#. "<a href=\"mailto:translator2@mail.org\">translator2</a>\n"
+#. "<a href=\"https://...\">translator3</a>"
+msgid "translator-credits"
+msgstr "Onno Giesmann, Oktober 2020"
+
+msgid "Palettes"
+msgstr "Farbpaletten"
+
+msgid "Add a new palette"
+msgstr "Neue Farbpalette hinzufügen"
+
+msgid "Area"
+msgstr "Bereich"
+
+msgid "Auto"
+msgstr "Auto"
+
+msgid "Grid overlay line"
+msgstr "Gitterlinien anzeigen"
+
+msgid "Tools"
+msgstr "Werkzeuge"
+
+msgid "Dash array"
+msgstr "Strichdichte"
+
+msgid "Reset settings"
+msgstr "Einstellungen zurücksetzen"
+
+msgid "Rename the palette"
+msgstr "Farbpalette umbenennen"
+
+msgid "Remove the palette"
+msgstr "Farbpalette entfernen"
+
+#. Translators: default name of a new palette
+msgid "New palette"
+msgstr "Neue Farbpalette"
+
+msgid "In drawing mode"
+msgstr "Im Zeichnungsmodus"
+
+msgid "Draw"
+msgstr "Zeichnen"
+
+msgid "Left click"
+msgstr "Linksklick"
+
+msgid "Menu"
+msgstr "Menü"
+
+msgid "Right click"
+msgstr "Rechtsklick"
+
+msgid "Center click"
+msgstr "Mittelklick"
+
+msgid "Increment/decrement line width"
+msgstr "Breitere/schwächere Linienstärke"
+
+msgid "Scroll"
+msgstr "Scrollen"
+
+#. Translators: %s are key labels (Ctrl+F1 and Ctrl+F9)
+msgid "Select color"
+msgstr "Farbe wählen"
+
+#, javascript-format
+msgid "%s … %s"
+msgstr "%s … %s"
+
+#. Translators: %s is a key label
+msgid "Ignore pointer movement"
+msgstr "Zeigerbewegung ignorieren"
+
+#, javascript-format
+msgid "%s held"
+msgstr "%s festhalten"
+
+msgid "Leave"
+msgstr "Beenden"
+
+msgid "Select eraser <span alpha=\"50%\">(while starting drawing)</span>"
+msgstr ""
+"Radierer auswählen <span alpha=\"50%\">(während dem Beginnen mit Zeichnen)</"
+"span>"
+
+msgid "Duplicate <span alpha=\"50%\">(while starting handling)</span>"
+msgstr "Duplizieren <span alpha=\"50%\">(beim Starten der Handhabung)</span>"
+
+msgid "Rotate rectangle, polygon, polyline"
+msgstr "Drehen von Rechteck, Vieleck, Linienzug"
+
+msgid "Extend circle to ellipse"
+msgstr "Kreis zur Ellipse erweitern"
+
+msgid "Curve line"
+msgstr "Kurvenlinie"
+
+msgid "Smooth free drawing outline"
+msgstr "Glatte freie Zeichnungskontur"
+
+msgid "Do not preserve image ratio"
+msgstr "Bildverhältnis nicht beibehalten"
+
+msgid "Rotate <span alpha=\"50%\">(while moving)</span>"
+msgstr "Drehen <span alpha=\"50%\">(während der Bewegung)</span>"
+
+msgid "Stretch <span alpha=\"50%\">(while resizing)</span>"
+msgstr "Dehnen <span alpha=\"50%\">(während der Veränderung)</span>"
+
+msgid "Inverse <span alpha=\"50%\">(while mirroring)</span>"
+msgstr "Umkehren <span alpha=\"50%\">(während dem Spiegeln)</span>"
+
+msgid "Drawing on the desktop"
+msgstr "Zeichnen auf dem Schreibtisch"
+
+msgid "<i>Draw On Your Screen</i> becomes <i>Draw On Your Desktop</i>"
+msgstr ""
+"<i>Zeichnungen auf Ihrem Bildschirm</i> wird zu <i>Zeichnungen auf Ihrem "
+"Schreibtisch</i>"
+
+msgid "Erase all drawings"
+msgstr "Alle Zeichnungen löschen"
+
+msgid "Disable panel indicator"
+msgstr "Symbol in der Leiste deaktivieren"
+
+msgid "Disable on-screen notifications"
+msgstr "Meldungen auf dem Bildschirm abschalten"
+
+msgid "Persistent over toggles"
+msgstr "Nach Umschalten beibehalten"
+
+msgid "Drawing remains when toggling drawing mode"
+msgstr ""
+"Die Zeichnung bleibt erhalten, wenn der Zeichnungsmodus an- oder "
+"ausgeschaltet wird"
+
+msgid "Persistent over restarts"
+msgstr "Nach Neustarts beibehalten"
+
+msgid "Drawing is automatically saved to a file"
+msgstr "Die Zeichnung wird automatisch in eine Datei gespeichert"
+
+msgid "Enter/leave drawing mode"
+msgstr "Zeichnungsmodus starten/beenden"
+
+#. Translators: there is a similar text in GNOME Boxes (https://gitlab.gnome.org/GNOME/gnome-boxes/tree/master/po)
+msgid "Grab/ungrab keyboard and pointer"
+msgstr "Tastatur und Zeiger ankoppeln/loslösen"
+
+msgid "Background color"
+msgstr "Hintergrundfarbe"
+
+msgid "The color of the drawing area background"
+msgstr "Hintergrundfarbe der Zeichenfläche"
+
+msgid "Automatic dash array"
+msgstr "Automatische Strichdichte"
+
+msgid "Compute the lengths from the line width"
+msgstr "Längen aus der Linienbreite berechnen"
+
+msgid "Dash array on"
+msgstr "Strichdichte aktiv"
+
+msgid "The dash length in pixels"
+msgstr "Strichlänge in Pixel"
+
+msgid "Dash array off"
+msgstr "Strichdichte nicht aktiv"
+
+msgid "The gap between the dashes in pixels"
+msgstr "Abstand zwischen den Strichen (in Pixel)"
+
+msgid "Dash offset"
+msgstr "Strich-Versatz"
+
+msgid "The dash offset in pixels"
+msgstr "Versatz der Striche (in Pixel)"
+
+msgid "Grid overlay color"
+msgstr "Farbe der Gitterlinien"
+
+msgid "The color of the lines"
+msgstr "Die Farbe der Linien"
+
+msgid "Automatic grid overlay line"
+msgstr "Automatische Gitternetzlinien"
+
+msgid "Compute the lengths from the screen size"
+msgstr "Längen aus der Bildschirmgröße berechnen"
+
+msgid "Grid overlay line spacing"
+msgstr "Freiraum zwischen den Gitternetzlinien"
+
+msgid "The gap between lines in pixels"
+msgstr "Abstand zwischen den Linien (in Pixel)"
+
+msgid "Grid overlay line width"
+msgstr "Stärke der Gitternetzlinien"
+
+msgid "The line width in pixels"
+msgstr "Linienbreite in Pixel"
+
+msgid "Image location"
+msgstr "Ort der Bilder"
+
+msgid "The location of the directory in which the image tool picks"
+msgstr ""
+"Verzeichnis mit Bildern, die für das Werkzeug \"Bild\" verwendet werden"
+
+msgid "Color palettes"
+msgstr "Farbpaletten"
+
+msgid "The palettes of drawing colors"
+msgstr "Paletten mit Zeichenfarben"
+
+msgid "Automatic square area size"
+msgstr "Automatische Flächengröße des Rechtecks"
+
+msgid "Compute the area size from the screen size"
+msgstr "Flächengröße anhand der Bildschirmgröße berechnen"
+
+msgid "Square area size"
+msgstr "Rechteck-Flächengröße"
+
+msgid "The size of the area in pixels"
+msgstr "Größe der Fläche (in Pixel)"
+
+msgid "Decrement line width"
+msgstr "Linienstärke verringern"
+
+msgid "Decrement line width even more"
+msgstr "Linienstärke noch mehr verringern"
+
+msgid "Erase last brushstroke"
+msgstr "Letzten Pinselstrich entfernen"
+
+msgid "Export drawing to a SVG file"
+msgstr "Zeichnung als SVG-Datei exportieren"
+
+msgid "Increment line width"
+msgstr "Linienstärke erhöhen"
+
+msgid "Increment line width even more"
+msgstr "Linienstärke noch mehr erhöhen"
+
+msgid "Open next drawing"
+msgstr "Nächste Zeichnung öffnen"
+
+msgid "Open preferences"
+msgstr "Einstellungen öffnen"
+
+msgid "Open previous drawing"
+msgstr "Vorige Zeichnung öffnen"
+
+msgid "Add images from the clipboard"
+msgstr "Bilder aus der Zwischenablage einfügen"
+
+msgid "Redo"
+msgstr "Wiederherstellen"
+
+msgid "Save drawing"
+msgstr "Zeichnung speichern"
+
+msgid "Select color 1"
+msgstr "Farbe 1 auswählen"
+
+msgid "Select color 2"
+msgstr "Farbe 2 auswählen"
+
+msgid "Select color 3"
+msgstr "Farbe 3 auswählen"
+
+msgid "Select color 4"
+msgstr "Farbe 4 auswählen"
+
+msgid "Select color 5"
+msgstr "Farbe 5 auswählen"
+
+msgid "Select color 6"
+msgstr "Farbe 6 auswählen"
+
+msgid "Select color 7"
+msgstr "Farbe 7 auswählen"
+
+msgid "Select color 8"
+msgstr "Farbe 8 auswählen"
+
+msgid "Select color 9"
+msgstr "Farbe 9 auswählen"
+
+msgid "Select ellipse tool"
+msgstr "Werkzeug Ellipse auswählen"
+
+msgid "Select image tool"
+msgstr "Werkzeug Bild auswählen"
+
+msgid "Select line tool"
+msgstr "Werkzeug Linie auswählen"
+
+msgid "Select mirror tool"
+msgstr "Werkzeug Spiegeln auswählen"
+
+msgid "Select move tool"
+msgstr "Werkzeug Verschieben auswählen"
+
+msgid "Select free drawing"
+msgstr "Werkzeug Freies Zeichnen auswählen"
+
+msgid "Select polygon tool"
+msgstr "Werkzeug Vieleck auswählen"
+
+msgid "Select polyline tool"
+msgstr "Werkzeug Linienzug auswählen"
+
+msgid "Select rectangle tool"
+msgstr "Werkzeug Rechteck auswählen"
+
+msgid "Select resize tool"
+msgstr "Werkzeug Größenänderung auswählen"
+
+msgid "Select text tool"
+msgstr "Werkzeug Text auswählen"
+
+msgid "Smooth last brushstroke"
+msgstr "Letzten Pinselstrich glätten"
+
+msgid "Change color palette"
+msgstr "Farbpalette wechseln"
+
+msgid "Change color palette (reverse)"
+msgstr "Farbpalette wechseln (rückwärts)"
+
+msgid "Toggle fill/outline"
+msgstr "Füllen/Außenlinie umschalten"
+
+msgid "Toggle fill rule"
+msgstr "Füll-Regel umschalten"
+
+msgid "Change font family"
+msgstr "Schriftenfamilie ändern"
+
+msgid "Change font family (reverse)"
+msgstr "Schriftenfamilie ändern (rückwärts)"
+
+msgid "Change font style"
+msgstr "Schriftart ändern"
+
+msgid "Change font weight"
+msgstr "Schriftgröße ändern"
+
+msgid "Change image"
+msgstr "Bild ändern"
+
+msgid "Change image (reverse)"
+msgstr "Bild ändern (rückwärts)"
+
+msgid "Change linecap"
+msgstr "Linien-Kappenstil ändern"
+
+msgid "Change linejoin"
+msgstr "Linienverbindung ändern"
+
+msgid "Change text alignment"
+msgstr "Textausrichtung ändern"
+
+msgid "Add a drawing background"
+msgstr "Zeichnungshintergrund hinzufügen"
+
+msgid "Add a grid overlay"
+msgstr "Gitternetz hinzufügen"
+
+msgid "Show help"
+msgstr "Hilfe anzeigen"
+
+msgid "Hide panel and dock"
+msgstr "Leiste und Dock ausblenden"
+
+#. Translators: It is an action: "Make the drawing area a square"
+msgid "Square drawing area"
+msgstr "Rechteckigen Zeichnungsbereich erstellen"
+
+msgid "Undo"
+msgstr "Rückgängig"
+
+#, javascript-format
+#~ msgid "Type your text and press <i>%s</i>"
+#~ msgstr ""
+#~ "Text eingeben\n"
+#~ "Danach <i>%s</i> drücken"
+
+#~ msgid "Redo last brushstroke"
+#~ msgstr "Letzten Pinselstrich wiederherstellen"
+
+#~ msgid "Undo last brushstroke"
+#~ msgstr "Letzten Pinselstrich wieder entfernen"

locale/draw-on-your-screen.pot

@@ -9,8 +9,8 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Draw On Your Screen\n"
-"Report-Msgid-Bugs-To: https://framagit.org/abakkk/DrawOnYourScreen/issues\n"
+"Report-Msgid-Bugs-To: https://codeberg.org/som/DrawOnYourScreen/issues\n"
-"POT-Creation-Date: 2020-09-17 22:27+0200\n"
+"POT-Creation-Date: 2021-02-17 14:14+0100\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -44,7 +44,14 @@ msgstr ""
 
 #. Translators: %s is a key label
 #, javascript-format
-msgid "Type your text and press <i>%s</i>"
+msgid ""
+"Press <i>%s</i>\n"
+"to start a new line"
+msgstr ""
+
+#. Translators: It is displayed in an OSD notification to ask the user to start picking, so it should use the imperative mood.
+msgctxt "osd-notification"
+msgid "Pick a color"
 msgstr ""
 
 #. Translators: "released" as the opposite of "grabbed"
@@ -209,11 +216,13 @@ msgstr ""
 msgid "%f px"
 msgstr ""
 
-#. Translators: text alignment
+msgid "Left aligned"
-msgid "Right aligned"
 msgstr ""
 
-msgid "Left aligned"
+msgid "Centered"
+msgstr ""
+
+msgid "Right aligned"
 msgstr ""
 
 msgctxt "drawing-tool"
@@ -260,12 +269,6 @@ msgctxt "drawing-tool"
 msgid "Mirror"
 msgstr ""
 
-msgid "Undo"
-msgstr ""
-
-msgid "Redo"
-msgstr ""
-
 msgid "Erase"
 msgstr ""
 
@@ -284,6 +287,16 @@ msgstr ""
 msgid "Color"
 msgstr ""
 
+#. Translators: It is displayed in a menu button tooltip or as a shortcut action description, so it should NOT use the imperative mood.
+msgid "Pick a color"
+msgstr ""
+
+msgid "Add to images"
+msgstr ""
+
+msgid "Delete"
+msgstr ""
+
 msgid "Type a name"
 msgstr ""
 
@@ -417,7 +430,7 @@ msgstr ""
 msgid "Smooth free drawing outline"
 msgstr ""
 
-msgid "Unlock image ratio"
+msgid "Do not preserve image ratio"
 msgstr ""
 
 msgid "Rotate <span alpha=\"50%\">(while moving)</span>"
@@ -571,7 +584,7 @@ msgstr ""
 msgid "Add images from the clipboard"
 msgstr ""
 
-msgid "Redo last brushstroke"
+msgid "Redo"
 msgstr ""
 
 msgid "Save drawing"
@@ -676,7 +689,7 @@ msgstr ""
 msgid "Change linejoin"
 msgstr ""
 
-msgid "Toggle text alignment"
+msgid "Change text alignment"
 msgstr ""
 
 msgid "Add a drawing background"
@@ -695,5 +708,5 @@ msgstr ""
 msgid "Square drawing area"
 msgstr ""
 
-msgid "Undo last brushstroke"
+msgid "Undo"
 msgstr ""

locale/it_IT/LC_MESSAGES/draw-on-your-screen.po

@@ -7,7 +7,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Draw On Your Desktop\n"
-"Report-Msgid-Bugs-To: https://framagit.org/abakkk/DrawOnYourScreen/issues\n"
+"Report-Msgid-Bugs-To: https://codeberg.org/som/DrawOnYourScreen/issues\n"
 "POT-Creation-Date: 2020-03-06 18:46+0100\n"
 "PO-Revision-Date: 2020-03-06 19:05+0100\n"
 "Language-Team: Albano Battistella <albano_battistella@hotmail.com>\n"

locale/ru/LC_MESSAGES/draw-on-your-screen.po

@@ -7,7 +7,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Draw On Your Screen VERSION\n"
-"Report-Msgid-Bugs-To: https://framagit.org/abakkk/DrawOnYourScreen/issues\n"
+"Report-Msgid-Bugs-To: https://codeberg.org/som/DrawOnYourScreen/issues\n"
 "POT-Creation-Date: 2019-03-04 16:40+0100\n"
 "PO-Revision-Date: 2019-10-17 17:54+0300\n"
 "Language-Team: \n"

menu.js

@@ -1,15 +1,9 @@
-/* jslint esversion: 6 */
-/* exported DisplayStrings, DrawingMenu */
-
 /*
  * Copyright 2019 Abakkk
  *
- * This file is part of DrawOnYourScreen, a drawing extension for GNOME Shell.
- * https://framagit.org/abakkk/DrawOnYourScreen
- *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 2 of the License, or
+ * the Free Software Foundation, either version 3 of the License, or
  * (at your option) any later version.
  *
  * This program is distributed in the hope that it will be useful,
@@ -19,8 +13,14 @@
  *
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * SPDX-FileCopyrightText: 2019 Abakkk
+ * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+/* jslint esversion: 6 */
+/* exported DisplayStrings, DrawingMenu */
+
 const Clutter = imports.gi.Clutter;
 const GLib = imports.gi.GLib;
 const GObject = imports.gi.GObject;
@@ -46,6 +46,8 @@ const GS_VERSION = Config.PACKAGE_VERSION;
 const FONT_FAMILY_STYLE = true;
 // use 'login-dialog-message-warning' class in order to get GS theme warning color (default: #f57900)
 const WARNING_COLOR_STYLE_CLASS_NAME = 'login-dialog-message-warning';
+const UUID = Me.uuid.replace(/@/gi, '_at_').replace(/[^a-z0-9+_-]/gi, '_');
+const TextAlignmentIcon = { 0: Files.Icons.LEFT_ALIGNED, 1: Files.Icons.CENTERED, 2: Files.Icons.RIGHT_ALIGNED };
 
 const getActor = function(object) {
     return GS_VERSION < '3.33.0' ? object.actor : object;
@@ -70,52 +72,52 @@ var DisplayStrings = {
     },
     
     get FillRule() {
-        if (!this._fillRules)
+        if (!this._FillRule)
             // Translators: fill-rule SVG attribute
-            this._fillRules = { 0: _("Nonzero"), 1: _("Evenodd") };
+            this._FillRule = { 0: _("Nonzero"), 1: _("Evenodd") };
-        return this._fillRules;
+        return this._FillRule;
     },
     
     getFontFamily: function(family) {
-        if (!this._fontGenericFamilies)
+        if (!this._FontGenericFamily)
             // Translators: generic font-family SVG attribute
-            this._fontGenericFamilies = { 'Sans-Serif': pgettext("font-family", "Sans-Serif"), 'Serif': pgettext("font-family", "Serif"),
+            this._FontGenericFamily = { 'Sans-Serif': pgettext("font-family", "Sans-Serif"), 'Serif': pgettext("font-family", "Serif"),
                                         'Monospace': pgettext("font-family", "Monospace"), 'Cursive': pgettext("font-family", "Cursive"),
                                         'Fantasy': pgettext("font-family", "Fantasy") };
-        return this._fontGenericFamilies[family] || family;
+        return this._FontGenericFamily[family] || family;
     },
     
     get FontStyle() {
-        if (!this._fontStyles)
+        if (!this._FontStyle)
             // Translators: font-style SVG attribute
-            this._fontStyles = { 0: pgettext("font-style", "Normal"), 1: pgettext("font-style", "Oblique"), 2: pgettext("font-style", "Italic") };
+            this._FontStyle = { 0: pgettext("font-style", "Normal"), 1: pgettext("font-style", "Oblique"), 2: pgettext("font-style", "Italic") };
-        return this._fontStyles;
+        return this._FontStyle;
     },
     
     FontStyleMarkup: { 0: 'normal', 1: 'oblique', 2: 'italic' },
     
     get FontWeight() {
-        if (!this._fontWeights)
+        if (!this._FontWeight)
             // Translators: font-weight SVG attribute
-            this._fontWeights = { 100: pgettext("font-weight", "Thin"), 200: pgettext("font-weight", "Ultra Light"), 300: pgettext("font-weight", "Light"),
+            this._FontWeight = { 100: pgettext("font-weight", "Thin"), 200: pgettext("font-weight", "Ultra Light"), 300: pgettext("font-weight", "Light"),
                                  350: pgettext("font-weight", "Semi Light"), 380: pgettext("font-weight", "Book"), 400: pgettext("font-weight", "Normal"),
                                  500: pgettext("font-weight", "Medium"), 600: pgettext("font-weight", "Semi Bold"), 700: pgettext("font-weight", "Bold"),
                                  800: pgettext("font-weight", "Ultra Bold"), 900: pgettext("font-weight", "Heavy"), 1000: pgettext("font-weight", "Ultra Heavy") };
-        return this._fontWeights;
+        return this._FontWeight;
     },
     
     get LineCap() {
-        if (!this._lineCaps)
+        if (!this._LineCap)
             // Translators: stroke-linecap SVG attribute
-            this._lineCaps = { 0: pgettext("stroke-linecap", "Butt"), 1: pgettext("stroke-linecap", "Round"), 2: pgettext("stroke-linecap", "Square") };
+            this._LineCap = { 0: pgettext("stroke-linecap", "Butt"), 1: pgettext("stroke-linecap", "Round"), 2: pgettext("stroke-linecap", "Square") };
-        return this._lineCaps;
+        return this._LineCap;
     },
     
     get LineJoin() {
-        if (!this._lineJoins)
+        if (!this._LineJoin)
             // Translators: stroke-linejoin SVG attribute
-            this._lineJoins = { 0: pgettext("stroke-linejoin", "Miter"), 1: pgettext("stroke-linejoin", "Round"), 2: pgettext("stroke-linejoin", "Bevel") };
+            this._LineJoin = { 0: pgettext("stroke-linejoin", "Miter"), 1: pgettext("stroke-linejoin", "Round"), 2: pgettext("stroke-linejoin", "Bevel") };
-        return this._lineJoins;
+        return this._LineJoin;
     },
     
     getPixels(value) {
@@ -123,27 +125,32 @@ var DisplayStrings = {
         return _("%f px").format(value);
     },
     
-    getTextAlignment: function(rightAligned) {
+    get TextAlignment() {
         // Translators: text alignment
-        return rightAligned ? _("Right aligned") : _("Left aligned");
+        if (!this._TextAlignment)
+            this._TextAlignment = { 0: _("Left aligned"), 1: _("Centered"), 2: _("Right aligned") };
+        
+        return this._TextAlignment;
     },
     
     get Tool() {
-        if (!this._tools)
+        if (!this._Tool)
-            this._tools = { 0: pgettext("drawing-tool", "Free drawing"), 1: pgettext("drawing-tool", "Line"), 2: pgettext("drawing-tool", "Ellipse"),
+            this._Tool = { 0: pgettext("drawing-tool", "Free drawing"), 1: pgettext("drawing-tool", "Line"), 2: pgettext("drawing-tool", "Ellipse"),
                            3: pgettext("drawing-tool", "Rectangle"), 4: pgettext("drawing-tool", "Text"), 5: pgettext("drawing-tool", "Polygon"),
                            6: pgettext("drawing-tool", "Polyline"), 7: pgettext("drawing-tool", "Image"),
                            100: pgettext("drawing-tool", "Move"), 101: pgettext("drawing-tool", "Resize"), 102: pgettext("drawing-tool", "Mirror") };
-        return this._tools;
+        return this._Tool;
     }
 };
 
 var DrawingMenu = new Lang.Class({
-    Name: 'DrawOnYourScreenDrawingMenu',
+    Name: `${UUID}-DrawingMenu`,
     
-    _init: function(area, monitor, drawingTools) {
+    _init: function(area, monitor, DrawingTool, areaManagerUtils) {
         this.area = area;
-        this.drawingTools = drawingTools;
+        this.monitor = monitor;
+        this.DrawingTool = DrawingTool;
+        this.areaManagerUtils = areaManagerUtils;
         
         let side = Clutter.get_default_text_direction() == Clutter.TextDirection.RTL ? St.Side.RIGHT : St.Side.LEFT;
         this.menu = new PopupMenu.PopupMenu(Main.layoutManager.dummyCursor, 0.25, side);
@@ -151,8 +158,8 @@ var DrawingMenu = new Lang.Class({
         this.menuManager.addMenu(this.menu);
         
         Main.layoutManager.uiGroup.add_actor(this.menu.actor);
+        
         this.menu.actor.add_style_class_name('background-menu draw-on-your-screen-menu');
-        this.menu.actor.set_style('max-height:' + monitor.height + 'px;');
         this.menu.actor.hide();
         this.hasSeparators = monitor.height >= 750;
         
@@ -175,7 +182,8 @@ var DrawingMenu = new Lang.Class({
     
     disable: function() {
         delete this.area;
-        delete this.drawingTools;
+        delete this.DrawingTool;
+        delete this.areaManagerUtils;
         this.menuManager.removeMenu(this.menu);
         Main.layoutManager.uiGroup.remove_actor(this.menu.actor);
         this.menu.destroy();
@@ -190,6 +198,11 @@ var DrawingMenu = new Lang.Class({
             this.area.updateActionMode();
             this.area.grab_key_focus();
         }
+        
+        let workArea = Main.layoutManager.getWorkAreaForMonitor(this.monitor.index);
+        let scaleFactor = St.ThemeContext.get_for_stage(global.stage).scale_factor;
+        let maxHeight = Math.round(workArea.height / scaleFactor);
+        this.menu.actor.set_style(`max-height:${maxHeight}px;`);
     },
     
     popup: function() {
@@ -223,12 +236,11 @@ var DrawingMenu = new Lang.Class({
         this.menu.removeAll();
         
         let groupItem = new PopupMenu.PopupBaseMenuItem({ reactive: false, can_focus: false, style_class: 'draw-on-your-screen-menu-group-item' });
-        this.undoButton = new ActionButton(_("Undo"), 'edit-undo-symbolic', this.area.undo.bind(this.area), this._updateActionSensitivity.bind(this));
+        this.undoButton = new ActionButton(getSummary('undo'), 'edit-undo-symbolic', this.area.undo.bind(this.area), this._updateActionSensitivity.bind(this));
-        this.redoButton = new ActionButton(_("Redo"), 'edit-redo-symbolic', this.area.redo.bind(this.area), this._updateActionSensitivity.bind(this));
+        this.redoButton = new ActionButton(getSummary('redo'), 'edit-redo-symbolic', this.area.redo.bind(this.area), this._updateActionSensitivity.bind(this));
         this.eraseButton = new ActionButton(_("Erase"), 'edit-clear-all-symbolic', this.area.deleteLastElement.bind(this.area), this._updateActionSensitivity.bind(this));
         this.smoothButton = new ActionButton(_("Smooth"), Files.Icons.SMOOTH, this.area.smoothLastElement.bind(this.area), this._updateActionSensitivity.bind(this));
         this.eraseButton.child.add_style_class_name('draw-on-your-screen-menu-destructive-button');
-        this.smoothButton.child.add_style_class_name('draw-on-your-screen-menu-destructive-button');
         getActor(groupItem).add_child(this.undoButton);
         getActor(groupItem).add_child(this.redoButton);
         getActor(groupItem).add_child(this.eraseButton);
@@ -260,7 +272,7 @@ var DrawingMenu = new Lang.Class({
         this._addFontFamilySubMenuItem(fontSection, Files.Icons.FONT_FAMILY);
         this._addSubMenuItem(fontSection, Files.Icons.FONT_WEIGHT, DisplayStrings.FontWeight, this.area, 'currentFontWeight');
         this._addSubMenuItem(fontSection, Files.Icons.FONT_STYLE, DisplayStrings.FontStyle, this.area, 'currentFontStyle');
-        this._addSwitchItem(fontSection, DisplayStrings.getTextAlignment(true), Files.Icons.LEFT_ALIGNED, Files.Icons.RIGHT_ALIGNED, this.area, 'currentTextRightAligned');
+        this._addTextAlignmentSubMenuItem(fontSection);
         this._addSeparator(fontSection);
         this.menu.addMenuItem(fontSection);
         fontSection.itemActivated = () => {};
@@ -273,8 +285,7 @@ var DrawingMenu = new Lang.Class({
         imageSection.itemActivated = () => {};
         this.imageSection = imageSection;
         
-        let areaManager = Me.stateObj.areaManager;
+        this._addSimpleSwitchItem(this.menu, getSummary('toggle-panel-and-dock-visibility'), !!this.areaManagerUtils.getHiddenList(), this.areaManagerUtils.togglePanelAndDockOpacity);
-        this._addSimpleSwitchItem(this.menu, getSummary('toggle-panel-and-dock-visibility'), !!areaManager.hiddenList, areaManager.togglePanelAndDockOpacity.bind(areaManager));
         this._addSimpleSwitchItem(this.menu, getSummary('toggle-background'), this.area.hasBackground, this.area.toggleBackground.bind(this.area));
         this._addSimpleSwitchItem(this.menu, getSummary('toggle-grid'), this.area.hasGrid, this.area.toggleGrid.bind(this.area));
         this._addSimpleSwitchItem(this.menu, getSummary('toggle-square-area'), this.area.isSquareArea, this.area.toggleSquareArea.bind(this.area));
@@ -288,7 +299,7 @@ var DrawingMenu = new Lang.Class({
         groupItem = new PopupMenu.PopupBaseMenuItem({ reactive: false, can_focus: false, style_class: 'draw-on-your-screen-menu-group-item' });
         this.saveButton = new ActionButton(getSummary('save-as-json'), 'document-save-symbolic', this.area.saveAsJson.bind(this.area, false, this._onDrawingSaved.bind(this)), null);
         this.svgButton = new ActionButton(getSummary('export-to-svg'), Files.Icons.DOCUMENT_EXPORT, this.area.exportToSvg.bind(this.area), null);
-        this.prefsButton = new ActionButton(getSummary('open-preferences'), 'document-page-setup-symbolic', areaManager.openPreferences.bind(areaManager), null);
+        this.prefsButton = new ActionButton(getSummary('open-preferences'), 'document-page-setup-symbolic', this.areaManagerUtils.openPreferences, null);
         this.helpButton = new ActionButton(getSummary('toggle-help'), 'preferences-desktop-keyboard-shortcuts-symbolic', () => { this.close(); this.area.toggleHelp(); }, null);
         getActor(groupItem).add_child(this.saveButton);
         getActor(groupItem).add_child(this.svgButton);
@@ -302,21 +313,19 @@ var DrawingMenu = new Lang.Class({
     
     _updateActionSensitivity: function() {
         this.undoButton.child.reactive = this.area.elements.length > 0;
-        this.redoButton.child.reactive = this.area.undoneElements.length > 0;
+        this.redoButton.child.reactive = this.area.undoneElements.length > 0 || (this.area.elements.length && this.area.elements[this.area.elements.length - 1].canUndo);
         this.eraseButton.child.reactive = this.area.elements.length > 0;
-        this.smoothButton.child.reactive = this.area.elements.length > 0 && this.area.elements[this.area.elements.length - 1].shape == this.drawingTools.NONE;
+        this.smoothButton.child.reactive = this.area.elements.length > 0 && this.area.elements[this.area.elements.length - 1].shape == this.DrawingTool.NONE;
         this.saveButton.child.reactive = this.area.elements.length > 0;
         this.svgButton.child.reactive = this.area.elements.length > 0;
         this.saveDrawingSubMenuItem.setSensitive(this.area.elements.length > 0);
     },
     
     _updateSectionVisibility: function() {
-        let [isText, isImage] = [this.area.currentTool == this.drawingTools.TEXT, this.area.currentTool == this.drawingTools.IMAGE];
+        let [isText, isImage] = [this.area.currentTool == this.DrawingTool.TEXT, this.area.currentTool == this.DrawingTool.IMAGE];
         this.lineSection.actor.visible = !isText && !isImage;
         this.fontSection.actor.visible = isText;
         this.imageSection.actor.visible = isImage;
-        this.colorItem.setSensitive(!isImage);
-        this.paletteItem.setSensitive(!isImage);
         this.fillItem.setSensitive(!isText && !isImage);
         this.fillSection.setSensitive(!isText && !isImage);
         
@@ -416,7 +425,7 @@ var DrawingMenu = new Lang.Class({
         let item = new PopupMenu.PopupSubMenuMenuItem('', true);
         item.update = () => {
             item.label.set_text(DisplayStrings.Tool[this.area.currentTool]);
-            let toolName = this.drawingTools.getNameOf(this.area.currentTool);
+            let toolName = this.DrawingTool.getNameOf(this.area.currentTool);
             item.icon.set_gicon(Files.Icons[`TOOL_${toolName}`]);
         };
         item.update();
@@ -426,7 +435,7 @@ var DrawingMenu = new Lang.Class({
         GLib.idle_add(GLib.PRIORITY_DEFAULT_IDLE, () => {
             Object.keys(DisplayStrings.Tool).forEach(key => {
                 let text = DisplayStrings.Tool[key];
-                let toolName = this.drawingTools.getNameOf(key);
+                let toolName = this.DrawingTool.getNameOf(key);
                 let subItemIcon = Files.Icons[`TOOL_${toolName}`];
                 let subItem = item.menu.addAction(text, () => {
                     this.area.currentTool = Number(key);
@@ -438,10 +447,10 @@ var DrawingMenu = new Lang.Class({
                 getActor(subItem).connect('key-focus-in', updateSubMenuAdjustment);
                 
                 // change the display order of tools
-                if (key == this.drawingTools.POLYGON)
+                if (key == this.DrawingTool.POLYGON)
-                    item.menu.moveMenuItem(subItem, Number(this.drawingTools.TEXT));
+                    item.menu.moveMenuItem(subItem, Number(this.DrawingTool.TEXT));
-                else if (key == this.drawingTools.POLYLINE)
+                else if (key == this.DrawingTool.POLYLINE)
-                    item.menu.moveMenuItem(subItem, Number(this.drawingTools.TEXT) + 1);
+                    item.menu.moveMenuItem(subItem, Number(this.DrawingTool.TEXT) + 1);
             });
             return GLib.SOURCE_REMOVE;
         });
@@ -483,6 +492,17 @@ var DrawingMenu = new Lang.Class({
         item.icon.set_gicon(icon);
         item.icon.set_style(`color:${this.area.currentColor.to_string().slice(0, 7)};`);
         
+        if (GS_VERSION >= '3.30') {
+            let colorPickerCallback = () => {
+                this.close();
+                this.area.pickColor();
+            };
+            // Translators: It is displayed in a menu button tooltip or as a shortcut action description, so it should NOT use the imperative mood.
+            let colorPickerButton = new ActionButton(_("Pick a color"), Files.Icons.COLOR_PICKER, colorPickerCallback, null, true);
+            let index = getActor(item).get_children().length - 1;
+            getActor(item).insert_child_at_index(colorPickerButton, index);
+        }
+        
         item.menu.itemActivated = item.menu.close;
         
         this._populateColorSubMenu();
@@ -512,6 +532,7 @@ var DrawingMenu = new Lang.Class({
         item.icon.set_gicon(icon);
         
         item.menu.itemActivated = item.menu.close;
+        item.menu.actor.add_style_class_name('draw-on-your-screen-menu-ellipsized');
         
         item.menu.openOld = item.menu.open;
         item.menu.open = (animate) => {
@@ -521,8 +542,12 @@ var DrawingMenu = new Lang.Class({
                         item.label.set_text(DisplayStrings.getFontFamily(family));
                         this.area.currentFontFamily = family;
                     });
+                    
                     if (FONT_FAMILY_STYLE)
+                        GLib.idle_add(GLib.PRIORITY_DEFAULT_IDLE, () => {
                             subItem.label.set_style(`font-family:${family}`);
+                        });
+                    
                     getActor(subItem).connect('key-focus-in', updateSubMenuAdjustment);
                 });
             }
@@ -532,6 +557,28 @@ var DrawingMenu = new Lang.Class({
         menu.addMenuItem(item);
     },
     
+    _addTextAlignmentSubMenuItem: function(menu) {
+        let item = new PopupMenu.PopupSubMenuMenuItem(DisplayStrings.TextAlignment[this.area.currentTextAlignment], true);
+        item.icon.set_gicon(TextAlignmentIcon[this.area.currentTextAlignment]);
+        
+        item.menu.itemActivated = item.menu.close;
+        
+        GLib.idle_add(GLib.PRIORITY_DEFAULT_IDLE, () => {
+            Object.keys(TextAlignmentIcon).forEach(key => {
+                let subItem = item.menu.addAction(DisplayStrings.TextAlignment[key], () => {
+                    item.label.set_text(DisplayStrings.TextAlignment[key]);
+                    this.area.currentTextAlignment = key;
+                    item.icon.set_gicon(TextAlignmentIcon[key]);
+                });
+                
+                getActor(subItem).connect('key-focus-in', updateSubMenuAdjustment);
+            });
+            return GLib.SOURCE_REMOVE;
+        });
+        
+        menu.addMenuItem(item);
+    },
+    
     _addImageSubMenuItem: function(menu, images) {
         let item = new PopupMenu.PopupSubMenuMenuItem('', true);
         item.update = () => {
@@ -541,6 +588,7 @@ var DrawingMenu = new Lang.Class({
         item.update();
         
         item.menu.itemActivated = item.menu.close;
+        item.menu.actor.add_style_class_name('draw-on-your-screen-menu-ellipsized');
         
         item.menu.openOld = item.menu.open;
         item.menu.open = (animate) => {
@@ -549,7 +597,13 @@ var DrawingMenu = new Lang.Class({
                     let subItem = item.menu.addAction(image.toString(), () => {
                         this.area.currentImage = image;
                         item.update();
-                    }, image.thumbnailGicon || undefined);
+                    }, Files.Icons.FAKE);
+                    
+                    GLib.idle_add(GLib.PRIORITY_DEFAULT_IDLE, () => {
+                        if (subItem.setIcon && image.thumbnailGicon)
+                            subItem.setIcon(image.thumbnailGicon);
+                    });
+                    
                     getActor(subItem).connect('key-focus-in', updateSubMenuAdjustment);
                 });
             }
@@ -563,6 +617,7 @@ var DrawingMenu = new Lang.Class({
     _addDrawingNameItem: function(menu) {
         this.drawingNameMenuItem = new PopupMenu.PopupMenuItem('', { reactive: false, activate: false });
         this.drawingNameMenuItem.setSensitive(false);
+        getActor(this.drawingNameMenuItem).add_style_class_name('draw-on-your-screen-menu-ellipsized');
         menu.addMenuItem(this.drawingNameMenuItem);
         this._updateDrawingNameMenuItem();
     },
@@ -584,6 +639,7 @@ var DrawingMenu = new Lang.Class({
         item.icon.set_icon_name(icon);
         
         item.menu.itemActivated = item.menu.close;
+        item.menu.actor.add_style_class_name('draw-on-your-screen-menu-ellipsized');
         
         item.menu.openOld = item.menu.open;
         item.menu.open = (animate) => {
@@ -605,7 +661,12 @@ var DrawingMenu = new Lang.Class({
                 this.area.loadJson(json);
                 this._updateDrawingNameMenuItem();
                 this._updateActionSensitivity();
-            }, json.gicon);
+            }, Files.Icons.FAKE);
+            
+            GLib.idle_add(GLib.PRIORITY_DEFAULT_IDLE, () => {
+                if (subItem.setIcon)
+                    subItem.setIcon(json.gicon);
+            });
             
             subItem.label.get_clutter_text().set_use_markup(true);
             getActor(subItem).connect('key-focus-in', updateSubMenuAdjustment);
@@ -616,29 +677,24 @@ var DrawingMenu = new Lang.Class({
             });
             getActor(subItem).add_child(expander);
             
-            let insertButton = new St.Button({ style_class: 'button draw-on-your-screen-menu-inline-button',
+            let insertCallback = () => {
-                                               child: new St.Icon({ icon_name: 'insert-image-symbolic',
-                                                                    style_class: 'popup-menu-icon' }) });
-            getActor(subItem).add_child(insertButton);
-            
-            insertButton.connect('clicked', () => {
                 this.area.currentImage = json.image;
                 this.imageItem.update();
-                this.area.currentTool = this.drawingTools.IMAGE;
+                this.area.currentTool = this.DrawingTool.IMAGE;
                 this.toolItem.update();
                 this._updateSectionVisibility();
-            });
+            };
+            let insertButton = new ActionButton(_("Add to images"), 'insert-image-symbolic', insertCallback, null, true);
+            getActor(subItem).add_child(insertButton);
             
-            let deleteButton = new St.Button({ style_class: 'button draw-on-your-screen-menu-inline-button draw-on-your-screen-menu-destructive-button',
+            let deleteCallback = () => {
-                                               child: new St.Icon({ icon_name: 'edit-delete-symbolic',
-                                                                    style_class: 'popup-menu-icon' }) });
-            getActor(subItem).add_child(deleteButton);
-            
-            deleteButton.connect('clicked', () => {
                 json.delete();
                 subItem.destroy();
                 this.openDrawingSubMenuItem.setSensitive(!this.openDrawingSubMenu.isEmpty());
-            });
+            };
+            let deleteButton = new ActionButton(_("Delete"), 'edit-delete-symbolic', deleteCallback, null, true);
+            deleteButton.child.add_style_class_name('draw-on-your-screen-menu-destructive-button');
+            getActor(subItem).add_child(deleteButton);
         });
         
         this.openDrawingSubMenuItem.setSensitive(!this.openDrawingSubMenu.isEmpty());
@@ -713,7 +769,7 @@ const updateSubMenuAdjustment = function(itemActor) {
 
 // An action button that uses upstream dash item tooltips.
 const ActionButton = new Lang.Class({
-    Name: 'DrawOnYourScreenDrawingMenuActionButton',
+    Name: `${UUID}-DrawingMenuActionButton`,
     Extends: St.Bin,
     _labelShowing: false,
     _resetHoverTimeoutId: 0,
@@ -722,16 +778,18 @@ const ActionButton = new Lang.Class({
     hideLabel: Dash.DashItemContainer.prototype.hideLabel,
     _syncLabel: Dash.Dash.prototype._syncLabel,
     
-    _init: function(name, icon, callback, callbackAfter) {
+    _init: function(name, icon, callback, callbackAfter, inline) {
         this._labelText = name;
         
         let button = new St.Button({ track_hover: true,
                                      x_align: Clutter.ActorAlign.CENTER,
                                      accessible_name: name,
-                                     // use 'popup-menu' and 'popup-menu-item' style classes to provide theme colors
+                                     style_class: `button draw-on-your-screen-menu-${inline ? 'inline' : 'action'}-button` });
-                                     //style_class: 'system-menu-action popup-menu-item popup-menu' });
+        
-                                     style_class: 'button draw-on-your-screen-menu-action-button' });
         button.child = new St.Icon(typeof icon == 'string' ? { icon_name: icon } : { gicon: icon });
+        if (inline)
+            button.child.add_style_class_name('popup-menu-icon');
+        
         button.connect('clicked', () => {
             callback();
             if (callbackAfter)
@@ -740,7 +798,7 @@ const ActionButton = new Lang.Class({
         button.bind_property('reactive', button, 'can_focus', GObject.BindingFlags.DEFAULT);
         button.connect('notify::hover', () => this._syncLabel(this));
         
-        this.parent({ child: button, x_expand: true });
+        this.parent({ child: button, x_expand: inline ? false : true });
     },
     
     get label() {
@@ -756,7 +814,7 @@ const ActionButton = new Lang.Class({
 
 // based on searchItem.js, https://github.com/leonardo-bartoli/gnome-shell-extension-Recents
 const Entry = new Lang.Class({
-    Name: 'DrawOnYourScreenDrawingMenuEntry',
+    Name: `${UUID}-DrawingMenuEntry`,
     
     _init: function(params) {
         this.params = params;

metadata.json

@@ -1,11 +1,11 @@
 {
     "name": "Draw On You Screen",
     "description": "Start drawing with Super+Alt+D and save your beautiful work by taking a screenshot",
-    "uuid": "drawOnYourScreen@abakkk.framagit.org",
+    "uuid": "draw-on-your-screen@som.codeberg.org",
-    "url": "https://framagit.org/abakkk/DrawOnYourScreen",
+    "url": "https://codeberg.org/som/DrawOnYourScreen",
     "settings-schema": "org.gnome.shell.extensions.draw-on-your-screen",
     "gettext-domain": "draw-on-your-screen",
-    "data-dir": "drawOnYourScreen",
+    "data-dir": "draw-on-your-screen",
     "persistent-file-name": "persistent",
     "svg-file-name": "DrawOnYourScreen",
     "shell-version": [
@@ -15,7 +15,9 @@
         "3.30",
         "3.32",
         "3.34",
-        "3.36"
+        "3.36",
+        "3.38",
+        "40"
     ],
-    "version": 6.3
+    "version": 11.1
 }

prefs.js

@@ -1,15 +1,9 @@
-/* jslint esversion: 6 */
-/* exported init, buildPrefsWidget */
-
 /*
  * Copyright 2019 Abakkk
  *
- * This file is part of DrawOnYourScreen, a drawing extension for GNOME Shell.
- * https://framagit.org/abakkk/DrawOnYourScreen
- *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 2 of the License, or
+ * the Free Software Foundation, either version 3 of the License, or
  * (at your option) any later version.
  *
  * This program is distributed in the hope that it will be useful,
@@ -19,18 +13,25 @@
  *
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * SPDX-FileCopyrightText: 2019 Abakkk
+ * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-const Atk = imports.gi.Atk;
+/* jslint esversion: 6 */
+/* exported init, buildPrefsWidget */
+
 const Gdk = imports.gi.Gdk;
 const Gio = imports.gi.Gio;
 const GLib = imports.gi.GLib;
 const GObject = imports.gi.GObject;
 const Gtk = imports.gi.Gtk;
+const IS_GTK3 = Gtk.get_major_version() == 3;
 
 const ExtensionUtils = imports.misc.extensionUtils;
 const Me = ExtensionUtils.getCurrentExtension();
 const Convenience = ExtensionUtils.getSettings && ExtensionUtils.initTranslations ? ExtensionUtils : Me.imports.convenience;
+const GimpPaletteParser = Me.imports.gimpPaletteParser;
 const Shortcuts = Me.imports.shortcuts;
 const gettext = imports.gettext.domain(Me.metadata['gettext-domain']).gettext;
 const _ = function(string) {
@@ -38,10 +39,37 @@ const _ = function(string) {
         return "";
     return gettext(string);
 };
-const _GTK = imports.gettext.domain('gtk30').gettext;
+const _GTK = imports.gettext.domain(IS_GTK3 ? 'gtk30' : 'gtk40').gettext;
 
 const MARGIN = 10;
-const ROWBOX_MARGIN_PARAMS = { margin_top: MARGIN / 2, margin_bottom: MARGIN / 2, margin_left: MARGIN, margin_right: MARGIN };
+const ROWBOX_MARGIN_PARAMS = { margin_top: MARGIN / 2, margin_bottom: MARGIN / 2, margin_start: MARGIN, margin_end: MARGIN, spacing: 4 };
+const UUID = Me.uuid.replace(/@/gi, '_at_').replace(/[^a-z0-9+_-]/gi, '_');
+
+if (IS_GTK3) {
+    Gtk.Container.prototype.append = Gtk.Container.prototype.add;
+    Gtk.Bin.prototype.set_child = Gtk.Container.prototype.add;
+}
+
+const setAccessibleLabel = function(widget, label) {
+    if (IS_GTK3)
+        widget.get_accessible().set_name(label);
+    else
+        widget.update_property([Gtk.AccessibleProperty.LABEL], [label]);
+};
+
+const setAccessibleDescription = function(widget, description) {
+    if (IS_GTK3)
+        widget.get_accessible().set_description(description);
+    else
+        widget.update_property([Gtk.AccessibleProperty.DESCRIPTION], [description]);
+};
+
+const getChildrenOf = function(widget) {
+    if (IS_GTK3)
+        return widget.get_children();
+    else
+        return [...widget];
+};
 
 function init() {
     Convenience.initTranslations();
@@ -50,24 +78,28 @@ function init() {
 function buildPrefsWidget() {
     let topStack = new TopStack();
     let switcher = new Gtk.StackSwitcher({ halign: Gtk.Align.CENTER, visible: true, stack: topStack });
+    
     GLib.idle_add(GLib.PRIORITY_DEFAULT_IDLE, () => {
-        let window = topStack.get_toplevel();
+        if (IS_GTK3)
-        let headerBar = window.get_titlebar();
+            topStack.get_toplevel().get_titlebar().set_custom_title(switcher);
-        headerBar.custom_title = switcher;
+        else
-        return false;
+            topStack.get_root().get_titlebar().set_title_widget(switcher);
+        
+        return GLib.SOURCE_REMOVE;
     });
     
+    if (IS_GTK3)
         topStack.show_all();
     return topStack;
 }
 
 const TopStack = new GObject.Class({
-    Name: 'DrawOnYourScreenTopStack',
+    Name: `${UUID}-TopStack`,
-    GTypeName: 'DrawOnYourScreenTopStack',
     Extends: Gtk.Stack,
     
     _init: function(params) {
-        this.parent({ transition_type: 1, transition_duration: 500, expand: true });
+        this.parent({ transition_type: Gtk.StackTransitionType.CROSSFADE, transition_duration: 500, hexpand: true, vexpand: true });
+        
         this.prefsPage = new PrefsPage();
         // Translators: "Preferences" page in preferences
         this.add_titled(this.prefsPage, 'prefs', _("Preferences"));
@@ -81,15 +113,14 @@ const TopStack = new GObject.Class({
 });
 
 const AboutPage = new GObject.Class({
-    Name: 'DrawOnYourScreenAboutPage',
+    Name: `${UUID}-AboutPage`,
-    GTypeName: 'DrawOnYourScreenAboutPage',
     Extends: Gtk.ScrolledWindow,
 
     _init: function(params) {
         this.parent({ hscrollbar_policy: Gtk.PolicyType.NEVER });
 
-        let vbox= new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL, margin: MARGIN * 3 });
+        let vbox = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL, margin_top: 3 * MARGIN, margin_bottom: 3 * MARGIN, margin_start: 3 * MARGIN, margin_end: 3 * MARGIN });
-        this.add(vbox);
+        this.set_child(vbox);
         
         // Translators: you are free to translate the extension name, that is displayed in About page, or not
         let name = "<b> " + _("Draw On You Screen") + "</b>";
@@ -98,25 +129,25 @@ const AboutPage = new GObject.Class({
         // Translators: you are free to translate the extension description, that is displayed in About page, or not
         let description = _("Start drawing with Super+Alt+D and save your beautiful work by taking a screenshot");
         let link = "<span><a href=\"" + Me.metadata.url + "\">" + Me.metadata.url + "</a></span>";
-        let licenceName = _GTK("GNU General Public License, version 2 or later");
+        let licenseName = _GTK("GNU General Public License, version 3 or later");
-        let licenceLink = "https://www.gnu.org/licenses/old-licenses/gpl-2.0.html";
+        let licenseLink = "https://www.gnu.org/licenses/gpl-3.0.html";
-        let licence = "<small>" + _GTK("This program comes with absolutely no warranty.\nSee the <a href=\"%s\">%s</a> for details.").format(licenceLink, licenceName) + "</small>";
+        let license = "<small>" + _GTK("This program comes with absolutely no warranty.\nSee the <a href=\"%s\">%s</a> for details.").format(licenseLink, licenseName) + "</small>";
         
-        let aboutLabel = new Gtk.Label({ wrap: true, justify: 2, use_markup: true, label:
+        let aboutLabel = new Gtk.Label({ wrap: true, justify: Gtk.Justification.CENTER, use_markup: true, label:
-            name + "\n\n" + version + "\n\n" + description + "\n\n" + link + "\n\n" + licence + "\n" });
+            name + "\n\n" + version + "\n\n" + description + "\n\n" + link + "\n\n" + license + "\n" });
         
-        vbox.add(aboutLabel);
+        vbox.append(aboutLabel);
         
-        let creditBox = new Gtk.Box({ orientation: Gtk.Orientation.HORIZONTAL, margin: 2 * MARGIN });
+        let creditBox = new Gtk.Box({ orientation: Gtk.Orientation.HORIZONTAL, margin_top: 2 * MARGIN, margin_bottom: 2 * MARGIN, margin_start: 2 * MARGIN, margin_end: 2 * MARGIN, spacing: 5 });
-        let leftBox = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL });
+        let leftBox = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL, hexpand: true });
-        let rightBox = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL });
+        let rightBox = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL, hexpand: true });
-        let leftLabel = new Gtk.Label({ wrap: true, valign: 1, halign: 2, justify: 1, use_markup: true, label: "<small>" + _GTK("Created by") + "</small>" });
+        leftBox.append(new Gtk.Label({ wrap: true, valign: Gtk.Align.START, halign: Gtk.Align.END, justify: Gtk.Justification.RIGHT,
-        let rightLabel = new Gtk.Label({ wrap: true, valign: 1, halign: 1, justify: 0, use_markup: true, label: "<small><a href=\"https://framagit.org/abakkk\">Abakkk</a></small>" });
+                                       use_markup: true, label: "<small>" + _GTK("Created by") + "</small>" }));
-        leftBox.pack_start(leftLabel, false, false, 0);
+        rightBox.append(new Gtk.Label({ wrap: true, valign: Gtk.Align.START, halign: Gtk.Align.START, justify: Gtk.Justification.LEFT,
-        rightBox.pack_start(rightLabel, false, false, 0);
+                                        use_markup: true, label: "<small><a href=\"https://codeber.org/abak\">Abakkk</a></small>" }));
-        creditBox.pack_start(leftBox, true, true, 5);
+        creditBox.append(leftBox);
-        creditBox.pack_start(rightBox, true, true, 5);
+        creditBox.append(rightBox);
-        vbox.add(creditBox);
+        vbox.append(creditBox);
         
         // Translators: add your name here or keep it empty, it will be displayed in about page, e.g.
         // msgstr ""
@@ -124,19 +155,16 @@ const AboutPage = new GObject.Class({
         // "<a href=\"mailto:translator2@mail.org\">translator2</a>\n"
         // "<a href=\"https://...\">translator3</a>"
         if (_("translator-credits") != "translator-credits" && _("translator-credits") != "") {
-            leftBox.pack_start(new Gtk.Label(), false, false, 0);
+            leftBox.append(new Gtk.Label());
-            rightBox.pack_start(new Gtk.Label(), false, false, 0);
+            rightBox.append(new Gtk.Label());
-            leftLabel = new Gtk.Label({ wrap: true, valign: 1, halign: 2, justify: 1, use_markup: true, label: "<small>" + _GTK("Translated by") + "</small>" });
+            leftBox.append(new Gtk.Label({ wrap: true, valign: Gtk.Align.START, halign: Gtk.Align.END, justify: 1, use_markup: true, label: "<small>" + _GTK("Translated by") + "</small>" }));
-            rightLabel = new Gtk.Label({ wrap: true, valign: 1, halign: 1, justify: 0, use_markup: true, label: "<small>" + _("translator-credits") + "</small>" });
+            rightBox.append(new Gtk.Label({ wrap: true, valign: Gtk.Align.START, halign: Gtk.Align.START, justify: 0, use_markup: true, label: "<small>" + _("translator-credits") + "</small>" }));
-            leftBox.pack_start(leftLabel, false, false, 0);
-            rightBox.pack_start(rightLabel, false, false, 0);
         }
     }
 });
 
 const DrawingPage = new GObject.Class({
-    Name: 'DrawOnYourScreenDrawingPage',
+    Name: `${UUID}-DrawingPage`,
-    GTypeName: 'DrawOnYourScreenDrawingPage',
     Extends: Gtk.ScrolledWindow,
 
     _init: function(params) {
@@ -145,38 +173,46 @@ const DrawingPage = new GObject.Class({
         this.settings = Convenience.getSettings(Me.metadata['settings-schema'] + '.drawing');
         this.schema = this.settings.settings_schema;
         
-        let box = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL, margin: 3 * MARGIN, spacing: 3 * MARGIN });
+        let box = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL, margin_top: 3 * MARGIN, margin_bottom: 3 * MARGIN, margin_start: 3 * MARGIN, margin_end: 3 * MARGIN, spacing: 3 * MARGIN });
-        this.add(box);
+        this.set_child(box);
         
         let palettesFrame = new Frame({ label: _("Palettes") });
-        box.add(palettesFrame);
+        box.append(palettesFrame);
+        let palettesFrameBox = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL });
+        palettesFrame.set_child(palettesFrameBox);
         
-        let palettesScrolledWindow = new Gtk.ScrolledWindow({ vscrollbar_policy: Gtk.PolicyType.NEVER, margin_top: MARGIN / 2, margin_bottom: MARGIN / 2 });
+        let palettesScrolledWindow = new Gtk.ScrolledWindow({ vscrollbar_policy: Gtk.PolicyType.NEVER });
-        palettesFrame.add(palettesScrolledWindow);
+        palettesFrameBox.append(palettesScrolledWindow);
         this.palettesListBox = new Gtk.ListBox({ selection_mode: 0, hexpand: true });
         this.palettesListBox.get_style_context().add_class('background');
-        this.palettesListBox.get_accessible().set_name(this.schema.get_key('palettes').get_summary());
+        setAccessibleLabel(this.palettesListBox, this.schema.get_key('palettes').get_summary());
-        this.palettesListBox.get_accessible().set_description(this.schema.get_key('palettes').get_description());
+        setAccessibleDescription(this.palettesListBox, this.schema.get_key('palettes').get_description());
-        palettesScrolledWindow.add(this.palettesListBox);
+        palettesScrolledWindow.set_child(this.palettesListBox);
+        palettesScrolledWindow.get_child().set_margin_top(MARGIN / 2);
+        palettesScrolledWindow.get_child().set_margin_bottom(MARGIN / 2);
         
         this.settings.connect('changed::palettes', this._updatePalettes.bind(this));
         this._updatePalettes();
         
-        this.addBox = new Gtk.Box(ROWBOX_MARGIN_PARAMS);
+        let addBox = new Gtk.Box(ROWBOX_MARGIN_PARAMS);
-        this.addBox.margin_bottom = MARGIN; // add space for the scrollbar
+        let addButton = IS_GTK3 ? Gtk.Button.new_from_icon_name('list-add-symbolic', Gtk.IconSize.BUTTON) : Gtk.Button.new_from_icon_name('list-add-symbolic');
-        let addButton = Gtk.Button.new_from_icon_name('list-add-symbolic', Gtk.IconSize.BUTTON);
         addButton.set_tooltip_text(_("Add a new palette"));
-        this.addBox.pack_start(addButton, true, true, 4);
+        addButton.set_hexpand(true);
+        addBox.append(addButton);
         addButton.connect('clicked', this._addNewPalette.bind(this));
-        this.palettesListBox.add(this.addBox);
+        let importButton = IS_GTK3 ?  Gtk.Button.new_from_icon_name('document-open-symbolic', Gtk.IconSize.BUTTON) : Gtk.Button.new_from_icon_name('document-open-symbolic');
-        this.addBox.get_parent().set_activatable(false);
+        importButton.set_tooltip_text(_GTK("Select a File"));
+        importButton.set_hexpand(true);
+        addBox.append(importButton);
+        importButton.connect('clicked', this._importPalette.bind(this));
+        palettesFrameBox.append(addBox);
         
         let areaFrame = new Frame({ label: _("Area") });
-        box.add(areaFrame);
+        box.append(areaFrame);
         
         let areaListBox = new Gtk.ListBox({ selection_mode: 0, hexpand: true, margin_top: MARGIN / 2, margin_bottom: MARGIN / 2 });
         areaListBox.get_style_context().add_class('background');
-        areaFrame.add(areaListBox);
+        areaFrame.set_child(areaListBox);
         
         let squareAreaRow = new PrefRow({ label: this.schema.get_key('square-area-size').get_summary() });
         let squareAreaAutoButton = new Gtk.CheckButton({ label: _("Auto"),
@@ -191,7 +227,7 @@ const DrawingPage = new GObject.Class({
         squareAreaAutoButton.bind_property('active', squareAreaSizeButton, 'sensitive', GObject.BindingFlags.SYNC_CREATE | GObject.BindingFlags.INVERT_BOOLEAN);
         squareAreaRow.addWidget(squareAreaAutoButton);
         squareAreaRow.addWidget(squareAreaSizeButton);
-        areaListBox.add(squareAreaRow);
+        areaListBox.insert(squareAreaRow, -1);
         
         let backgroundColorRow = new PrefRow({ label: this.schema.get_key('background-color').get_summary() });
         let backgroundColorButton = new ColorStringButton({ use_alpha: true, show_editor: true,
@@ -199,7 +235,7 @@ const DrawingPage = new GObject.Class({
                                                             tooltip_text: this.schema.get_key('background-color').get_description() });
         this.settings.bind('background-color', backgroundColorButton, 'color-string', 0);
         backgroundColorRow.addWidget(backgroundColorButton);
-        areaListBox.add(backgroundColorRow);
+        areaListBox.insert(backgroundColorRow, -1);
         
         let gridLineRow = new PrefRow({ label: _("Grid overlay line") });
         let gridLineAutoButton = new Gtk.CheckButton({ label: _("Auto"),
@@ -221,7 +257,7 @@ const DrawingPage = new GObject.Class({
         gridLineRow.addWidget(gridLineAutoButton);
         gridLineRow.addWidget(gridLineWidthButton);
         gridLineRow.addWidget(gridLineSpacingButton);
-        areaListBox.add(gridLineRow);
+        areaListBox.insert(gridLineRow, -1);
         
         let gridColorRow = new PrefRow({ label: this.schema.get_key('grid-color').get_summary() });
         let gridColorButton = new ColorStringButton({ use_alpha: true, show_editor: true,
@@ -229,14 +265,14 @@ const DrawingPage = new GObject.Class({
                                                       tooltip_text: this.schema.get_key('grid-color').get_description() });
         this.settings.bind('grid-color', gridColorButton, 'color-string', 0);
         gridColorRow.addWidget(gridColorButton);
-        areaListBox.add(gridColorRow);
+        areaListBox.insert(gridColorRow, -1);
         
         let toolsFrame = new Frame({ label: _("Tools") });
-        box.add(toolsFrame);
+        box.append(toolsFrame);
         
         let toolsListBox = new Gtk.ListBox({ selection_mode: 0, hexpand: true, margin_top: MARGIN / 2, margin_bottom: MARGIN / 2 });
         toolsListBox.get_style_context().add_class('background');
-        toolsFrame.add(toolsListBox);
+        toolsFrame.set_child(toolsListBox);
         
         let dashArrayRow = new PrefRow({ label: _("Dash array") });
         let dashArrayAutoButton = new Gtk.CheckButton({ label: _("Auto"),
@@ -258,7 +294,7 @@ const DrawingPage = new GObject.Class({
         dashArrayRow.addWidget(dashArrayAutoButton);
         dashArrayRow.addWidget(dashArrayOnButton);
         dashArrayRow.addWidget(dashArrayOffButton);
-        toolsListBox.add(dashArrayRow);
+        toolsListBox.insert(dashArrayRow, -1);
         
         let dashOffsetRow = new PrefRow({ label: this.schema.get_key('dash-offset').get_summary() });
         let dashOffsetButton = new PixelSpinButton({ width_chars: 5, digits: 1, step: 0.1,
@@ -267,7 +303,7 @@ const DrawingPage = new GObject.Class({
                                                      tooltip_text: this.schema.get_key('dash-offset').get_description() });
         this.settings.bind('dash-offset', dashOffsetButton, 'value', 0);
         dashOffsetRow.addWidget(dashOffsetButton);
-        toolsListBox.add(dashOffsetRow);
+        toolsListBox.insert(dashOffsetRow, -1);
         
         let imageLocationRow = new PrefRow({ label: this.schema.get_key('image-location').get_summary() });
         let imageLocationButton = new FileChooserButton({ action: Gtk.FileChooserAction.SELECT_FOLDER,
@@ -275,20 +311,19 @@ const DrawingPage = new GObject.Class({
                                                           tooltip_text: this.schema.get_key('image-location').get_description() });
         this.settings.bind('image-location', imageLocationButton, 'location', 0);
         imageLocationRow.addWidget(imageLocationButton);
-        toolsListBox.add(imageLocationRow);
+        toolsListBox.insert(imageLocationRow, -1);
         
         let resetButton = new Gtk.Button({ label: _("Reset settings"), halign: Gtk.Align.CENTER });
         resetButton.get_style_context().add_class('destructive-action');
         resetButton.connect('clicked', () => this.schema.list_keys().forEach(key => this.settings.reset(key)));
-        box.add(resetButton);
+        box.append(resetButton);
     },
     
     _updatePalettes: function() {
         this.palettes = this.settings.get_value('palettes').deep_unpack();
-        this.palettesListBox.get_children().filter(row=> row.get_child() != this.addBox)
+        getChildrenOf(this.palettesListBox).slice(this.palettes.length)
-                                           .slice(this.palettes.length)
                                            .forEach(row => this.palettesListBox.remove(row));
-        let paletteBoxes = this.palettesListBox.get_children().map(row => row.get_child()).filter(child => child != this.addBox);
+        let paletteBoxes = getChildrenOf(this.palettesListBox).map(row => row.get_child());
         
         this.palettes.forEach((palette, paletteIndex) => {
             let [name, colors] = palette;
@@ -296,42 +331,48 @@ const DrawingPage = new GObject.Class({
             
             if (paletteBoxes[paletteIndex]) {
                 paletteBox = paletteBoxes[paletteIndex];
-                let nameEntry = paletteBox.get_children()[0];
+                let nameEntry = getChildrenOf(paletteBox)[0];
                 if (nameEntry.get_text() !== _(name)) {
                     GObject.signal_handler_block(nameEntry, nameEntry.paletteNameChangedHandler);
                     nameEntry.set_text(_(name));
                     GObject.signal_handler_unblock(nameEntry, nameEntry.paletteNameChangedHandler);
                 }
             } else {
-                let nameEntry = new Gtk.Entry({ text: name, halign: Gtk.Align.START, tooltip_text: _("Rename the palette") });
+                let nameEntry = new Gtk.Entry({ text: name, halign: Gtk.Align.START, tooltip_text: _("Rename the palette"), hexpand: true });
                 nameEntry.paletteNameChangedHandler = nameEntry.connect('changed', this._onPaletteNameChanged.bind(this, paletteIndex));
-                let removeButton = Gtk.Button.new_from_icon_name('list-remove-symbolic', Gtk.IconSize.BUTTON);
+                // Minimum size, for Gtk4
+                nameEntry.set_size_request(nameEntry.get_preferred_size()[1].width, -1);
+                let removeButton = IS_GTK3 ? Gtk.Button.new_from_icon_name('list-remove-symbolic', Gtk.IconSize.BUTTON) : Gtk.Button.new_from_icon_name('list-remove-symbolic');
                 removeButton.set_tooltip_text(_("Remove the palette")); 
                 removeButton.connect('clicked', this._removePalette.bind(this, paletteIndex));
                 paletteBox = new Gtk.Box(ROWBOX_MARGIN_PARAMS);
-                paletteBox.pack_start(nameEntry, true, true, 4);
+                paletteBox.append(nameEntry);
-                paletteBox.pack_start(new Gtk.Box({ spacing: 4 }), false, false, 4);
+                paletteBox.append(new Gtk.Box({ spacing: 4 }));
-                paletteBox.pack_start(removeButton, false, false, 4);
+                paletteBox.append(removeButton);
                 this.palettesListBox.insert(paletteBox, paletteIndex);
                 paletteBox.get_parent().set_activatable(false);
             }
             
-            colors.splice(9);
             while (colors.length < 9)
                 colors.push('transparent');
             
-            let colorsBox = paletteBox.get_children()[1];
+            let colorsBox = getChildrenOf(paletteBox)[1];
-            let colorButtons = colorsBox.get_children();
+            let colorButtons = getChildrenOf(colorsBox);
             colors.forEach((color, colorIndex) => {
+                let [colorString, displayName] = color.split(':');
                 if (colorButtons[colorIndex]) {
-                    colorButtons[colorIndex].color_string = color;
+                    colorButtons[colorIndex].color_string = colorString;
+                    colorButtons[colorIndex].tooltip_text = displayName || null;
                 } else {
-                    let colorButton = new ColorStringButton({ color_string: color, use_alpha: true, show_editor: true, halign: Gtk.Align.START, hexpand: false });
+                    let colorButton = new ColorStringButton({ color_string: colorString, tooltip_text: displayName || null,
+                                                              use_alpha: true, show_editor: true,
+                                                              halign: Gtk.Align.START, hexpand: false });
                     colorButton.connect('notify::color-string', this._onPaletteColorChanged.bind(this, paletteIndex, colorIndex));
-                    colorsBox.add(colorButton);
+                    colorsBox.append(colorButton);
                 }
             });
             
+            if (IS_GTK3)
                 paletteBox.show_all();
         });
     },
@@ -347,6 +388,8 @@ const DrawingPage = new GObject.Class({
     
     _onPaletteColorChanged: function(paletteIndex, colorIndex, colorButton) {
         this.palettes[paletteIndex][1][colorIndex] = colorButton.get_rgba().to_string();
+        if (colorButton.tooltip_text)
+            this.palettes[paletteIndex][1][colorIndex] += `:${colorButton.tooltip_text}`;
         this._savePalettes();
     },
     
@@ -357,6 +400,34 @@ const DrawingPage = new GObject.Class({
         this._savePalettes();
     },
     
+    _importPalette: function() {
+        let dialog = new Gtk.FileChooserDialog({
+            title: _GTK("Select a File"),
+            action: Gtk.FileChooserAction.OPEN,
+            modal: true,
+            transient_for: IS_GTK3 ? this.get_toplevel() : this.get_root(),
+        });
+        dialog.add_button(_GTK("_Cancel"), Gtk.ResponseType.CANCEL);
+        dialog.add_button(_GTK("_Open"), Gtk.ResponseType.ACCEPT);
+        
+        let filter = new Gtk.FileFilter();
+        filter.set_name("GIMP Palette (*.gpl)");
+        filter.add_pattern('*.gpl');
+        dialog.add_filter(filter);
+        
+        dialog.connect('response', (dialog, response) => {
+            if (response == Gtk.ResponseType.ACCEPT) {
+                let file = dialog.get_file();
+                let palettes = GimpPaletteParser.parseFile(file);
+                palettes.forEach(palette => this.palettes.push(palette));
+                this._savePalettes();
+            }
+            dialog.destroy();
+        });
+        
+        dialog.show();
+    },
+    
     _removePalette: function(paletteIndex) {
         this.palettes.splice(paletteIndex, 1);
         this._savePalettes();
@@ -364,8 +435,7 @@ const DrawingPage = new GObject.Class({
 });
 
 const PrefsPage = new GObject.Class({
-    Name: 'DrawOnYourScreenPrefsPage',
+    Name: `${UUID}-PrefsPage`,
-    GTypeName: 'DrawOnYourScreenPrefsPage',
     Extends: Gtk.ScrolledWindow,
 
     _init: function(params) {
@@ -375,24 +445,24 @@ const PrefsPage = new GObject.Class({
         let schema = settings.settings_schema;
         let internalShortcutSettings = Convenience.getSettings(Me.metadata['settings-schema'] + '.internal-shortcuts');
         
-        let box = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL, margin: MARGIN * 3, spacing: 3 * MARGIN });
+        let box = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL, margin_top: 3 * MARGIN, margin_bottom: 3 * MARGIN, margin_start: 3 * MARGIN, margin_end: 3 * MARGIN, spacing: 3 * MARGIN });
-        this.add(box);
+        this.set_child(box);
         
         let globalFrame = new Frame({ label: _("Global") });
-        box.add(globalFrame);
+        box.append(globalFrame);
         
         let listBox = new Gtk.ListBox({ selection_mode: 0, hexpand: true, margin_top: MARGIN, margin_bottom: MARGIN / 2 });
         listBox.get_style_context().add_class('background');
-        globalFrame.add(listBox);
+        globalFrame.set_child(listBox);
         
         Shortcuts.GLOBAL_KEYBINDINGS.forEach((settingKeys, index) => {
             if (index)
-                listBox.add(new Gtk.Box(ROWBOX_MARGIN_PARAMS));
+                listBox.insert(new Gtk.Box(ROWBOX_MARGIN_PARAMS), -1);
             
             let globalKeybindingsRow = new Gtk.ListBoxRow({ activatable: false });
             let globalKeybindingsWidget = new KeybindingsWidget(settingKeys, settings);
-            globalKeybindingsRow.add(globalKeybindingsWidget);
+            globalKeybindingsRow.set_child(globalKeybindingsWidget);
-            listBox.add(globalKeybindingsRow);
+            listBox.insert(globalKeybindingsRow, -1);
         });
         
         let persistentOverTogglesKey = schema.get_key('persistent-over-toggles');
@@ -400,7 +470,7 @@ const PrefsPage = new GObject.Class({
         let persistentOverTogglesSwitch = new Gtk.Switch();
         settings.bind('persistent-over-toggles', persistentOverTogglesSwitch, 'active', 0);
         persistentOverTogglesRow.addWidget(persistentOverTogglesSwitch, true);
-        listBox.add(persistentOverTogglesRow);
+        listBox.insert(persistentOverTogglesRow, -1);
         
         let persistentOverRestartsKey = schema.get_key('persistent-over-restarts');
         let persistentOverRestartsRow = new PrefRow({ label: persistentOverRestartsKey.get_summary(), desc: persistentOverRestartsKey.get_description() });
@@ -408,7 +478,7 @@ const PrefsPage = new GObject.Class({
         settings.bind('persistent-over-restarts', persistentOverRestartsSwitch, 'active', 0);
         persistentOverRestartsRow.addWidget(persistentOverRestartsSwitch, true);
         persistentOverTogglesSwitch.bind_property('active', persistentOverRestartsSwitch, 'sensitive', GObject.BindingFlags.SYNC_CREATE);
-        listBox.add(persistentOverRestartsRow);
+        listBox.insert(persistentOverRestartsRow, -1);
         
         let desktopKey = schema.get_key('drawing-on-desktop');
         let desktopRow = new PrefRow({ label: desktopKey.get_summary(), desc: desktopKey.get_description() });
@@ -416,56 +486,53 @@ const PrefsPage = new GObject.Class({
         settings.bind('drawing-on-desktop', desktopSwitch, 'active', 0);
         desktopRow.addWidget(desktopSwitch, true);
         persistentOverTogglesSwitch.bind_property('active', desktopSwitch, 'sensitive', GObject.BindingFlags.SYNC_CREATE);
-        listBox.add(desktopRow);
+        listBox.insert(desktopRow, -1);
         
         let osdKey = schema.get_key('osd-disabled');
         let osdRow = new PrefRow({ label: osdKey.get_summary(), desc: osdKey.get_description() });
         let osdSwitch = new Gtk.Switch();
         settings.bind('osd-disabled', osdSwitch, 'active', 0);
         osdRow.addWidget(osdSwitch, true);
-        listBox.add(osdRow);
+        listBox.insert(osdRow, -1);
         
         let indicatorKey = schema.get_key('indicator-disabled');
         let indicatorRow = new PrefRow({ label: indicatorKey.get_summary(), desc: indicatorKey.get_description() });
         let indicatorSwitch = new Gtk.Switch();
         settings.bind('indicator-disabled', indicatorSwitch, 'active', 0);
         indicatorRow.addWidget(indicatorSwitch, true);
-        listBox.add(indicatorRow);
+        listBox.insert(indicatorRow, -1);
         
         let internalFrame = new Frame({ label: _("Internal"), desc: _("In drawing mode") });
-        box.add(internalFrame);
+        box.append(internalFrame);
         
         listBox = new Gtk.ListBox({ selection_mode: 0, hexpand: true, margin_top: MARGIN, margin_bottom: MARGIN });
         listBox.get_style_context().add_class('background');
-        internalFrame.add(listBox);
+        internalFrame.set_child(listBox);
         
         Shortcuts.OTHERS.forEach((pairs, index) => {
             if (index)
-                listBox.add(new Gtk.Box(ROWBOX_MARGIN_PARAMS));
+                listBox.insert(new Gtk.Box(ROWBOX_MARGIN_PARAMS), -1);
             
             pairs.forEach(pair => {
                 let [action, shortcut] = pair;
-                let otherBox = new Gtk.Box({ margin_left: MARGIN, margin_right: MARGIN });
+                let otherBox = new Gtk.Box({ margin_start: MARGIN, margin_end: MARGIN, spacing: 4 });
-                let otherLabel = new Gtk.Label({ label: action, use_markup: true });
+                otherBox.append(new Gtk.Label({ label: action, use_markup: true, halign: Gtk.Align.START, hexpand: true }));
-                otherLabel.set_halign(1);
+                otherBox.append(new Gtk.Label({ label: shortcut }));
-                let otherLabel2 = new Gtk.Label({ label: shortcut });
+                listBox.insert(otherBox, -1);
-                otherBox.pack_start(otherLabel, true, true, 4);
-                otherBox.pack_start(otherLabel2, false, false, 4);
-                listBox.add(otherBox);
             });
         });
         
-        listBox.add(new Gtk.Box(ROWBOX_MARGIN_PARAMS));
+        listBox.insert(new Gtk.Box(ROWBOX_MARGIN_PARAMS), -1);
         
         Shortcuts.INTERNAL_KEYBINDINGS.forEach((settingKeys, index) => {
             if (index)
-                listBox.add(new Gtk.Box(ROWBOX_MARGIN_PARAMS));
+                listBox.insert(new Gtk.Box(ROWBOX_MARGIN_PARAMS), -1);
             
             let internalKeybindingsWidget = new KeybindingsWidget(settingKeys, internalShortcutSettings);
-            listBox.add(internalKeybindingsWidget);
+            listBox.insert(internalKeybindingsWidget, -1);
         });
         
-        listBox.get_children().forEach(row => row.set_activatable(false));
+        getChildrenOf(listBox).forEach(row => row.set_activatable(false));
         
         let resetButton = new Gtk.Button({ label: _("Reset settings"), halign: Gtk.Align.CENTER });
         resetButton.get_style_context().add_class('destructive-action');
@@ -473,74 +540,71 @@ const PrefsPage = new GObject.Class({
             internalShortcutSettings.settings_schema.list_keys().forEach(key => internalShortcutSettings.reset(key));
             settings.settings_schema.list_keys().forEach(key => settings.reset(key));
         });
-        box.add(resetButton);
+        box.append(resetButton);
     }
 });
 
 const Frame = new GObject.Class({
-    Name: 'DrawOnYourScreenFrame',
+    Name: `${UUID}-Frame`,
-    GTypeName: 'DrawOnYourScreenFrame',
     Extends: Gtk.Frame,
 
     _init: function(params) {
-        let labelWidget = new Gtk.Label({ margin_bottom: MARGIN / 2, use_markup: true, label: `<b><big>${params.label}</big></b>` });
+        let labelWidget = new Gtk.Label({ use_markup: true, label: `<b><big>${params.label}</big></b>` });
-        this.parent({ label_yalign: 1.0, label_widget: labelWidget });
+        this.parent({ label_widget: labelWidget });
         
         if (params.desc) {
             labelWidget.set_tooltip_text(params.desc);
-            this.get_accessible().set_description(params.desc);
+            setAccessibleDescription(this, params.desc);
         }
     }
 });
 
 const PrefRow = new GObject.Class({
-    Name: 'DrawOnYourScreenPrefRow',
+    Name: `${UUID}-PrefRow`,
-    GTypeName: 'DrawOnYourScreenPrefRow',
     Extends: Gtk.ListBoxRow,
 
     _init: function(params) {
         this.parent({ activatable: false });
         
         let hbox = new Gtk.Box(ROWBOX_MARGIN_PARAMS);
-        this.add(hbox);
+        this.set_child(hbox);
         
-        let labelBox = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL });
+        let labelBox = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL, hexpand: true });
-        hbox.pack_start(labelBox, true, true, 4);
+        hbox.append(labelBox);
         
         this.widgetBox = new Gtk.Box({ spacing: 4 });
-        hbox.pack_start(this.widgetBox, false, false, 4);
+        hbox.append(this.widgetBox);
         
-        this.label = new Gtk.Label({ use_markup: true, label: params.label, halign: Gtk.Align.START });
+        this.label = new Gtk.Label({ use_markup: true, label: params.label, halign: Gtk.Align.START, vexpand: true });
-        labelBox.pack_start(this.label, true, true, 0);
+        labelBox.append(this.label);
         if (params.desc) {
-            this.desc = new Gtk.Label({ use_markup: true, label: `<small>${params.desc}</small>`, halign: Gtk.Align.START, wrap: true, xalign: 0 });
+            this.desc = new Gtk.Label({ use_markup: true, label: `<small>${params.desc}</small>`, halign: Gtk.Align.START, wrap: true, xalign: 0, vexpand: true });
             this.desc.get_style_context().add_class('dim-label');
-            labelBox.pack_start(this.desc, true, true, 0);
+            labelBox.append(this.desc);
             this.widgetBox.set_valign(Gtk.Align.START);
         }
     },
     
     addWidget: function(widget, setRelationship) {
-        this.widgetBox.add(widget);
+        this.widgetBox.append(widget);
         
         if (widget.name)
-            widget.get_accessible().set_name(widget.name);
+            setAccessibleLabel(widget, widget.name);
         
-        if (setRelationship) {
+        if (setRelationship && IS_GTK3) {
-            this.label.get_accessible().add_relationship(Atk.RelationType.LABEL_FOR, widget.get_accessible());
+            this.label.get_accessible().add_relationship(imports.gi.Atk.RelationType.LABEL_FOR, widget.get_accessible());
-            widget.get_accessible().add_relationship(Atk.RelationType.LABELLED_BY, this.label.get_accessible());
+            widget.get_accessible().add_relationship(imports.gi.Atk.RelationType.LABELLED_BY, this.label.get_accessible());
             
             if (this.desc) {
-                this.desc.get_accessible().add_relationship(Atk.RelationType.DESCRIPTION_FOR, widget.get_accessible());
+                this.desc.get_accessible().add_relationship(imports.gi.Atk.RelationType.DESCRIPTION_FOR, widget.get_accessible());
-                widget.get_accessible().add_relationship(Atk.RelationType.DESCRIBED_BY, this.desc.get_accessible());
+                widget.get_accessible().add_relationship(imports.gi.Atk.RelationType.DESCRIBED_BY, this.desc.get_accessible());
             }
         }
     }
 });
 
 const PixelSpinButton = new GObject.Class({
-    Name: 'DrawOnYourScreenPixelSpinButton',
+    Name: `${UUID}-PixelSpinButton`,
-    GTypeName: 'DrawOnYourScreenPixelSpinButton',
     Extends: Gtk.SpinButton,
     Properties: {
         'range': GObject.param_spec_variant('range', 'range', 'GSettings range',
@@ -565,22 +629,28 @@ const PixelSpinButton = new GObject.Class({
         this.adjustment.set_page_increment(step * 10);
     },
     
-    // Add 'px' unit.
+    on_output: function() {
-    vfunc_output: function() {
         this.text = _("%f px").format(Number(this.value).toFixed(2));
         return true;
     },
     
-    // Prevent accidental scrolling.
+    // Prevent accidental scrolling (GTK 3).
-    vfunc_scroll_event: function(event) {
+    on_scroll_event: function(event) {
-        return this.has_focus ? this.parent(event) : Gdk.EVENT_PROPAGATE;
+        if (this.has_focus) {
+            try {
+                GObject.signal_chain_from_overridden([this, event], false);
+            } catch(e) { }
+            
+            return Gdk.EVENT_STOP;
+        }
+        
+        return Gdk.EVENT_PROPAGATE;
     }
 });
 
 // A color button that can be easily bound with a color string setting.
 const ColorStringButton = new GObject.Class({
-    Name: 'DrawOnYourScreenColorStringButton',
+    Name: `${UUID}-ColorStringButton`,
-    GTypeName: 'DrawOnYourScreenColorStringButton',
     Extends: Gtk.ColorButton,
     Properties: {
         'color-string': GObject.ParamSpec.string('color-string', 'colorString', 'A string that describes the color',
@@ -599,11 +669,11 @@ const ColorStringButton = new GObject.Class({
         this.set_rgba(newRgba);
     },
     
-    // Do nothing if the new color is equivalent to the old color (e.g. "black" and "rgb(0,0,0)").
+    on_color_set: function() {
-    vfunc_color_set(args) {
         let oldRgba = new Gdk.RGBA();
         oldRgba.parse(this.color_string);
         
+        // Do nothing if the new color is equivalent to the old color (e.g. "black" and "rgb(0,0,0)").
         if (!this.rgba.equal(oldRgba)) {
             this._color_string = this.rgba.to_string();
             this.notify('color-string');
@@ -612,40 +682,59 @@ const ColorStringButton = new GObject.Class({
 });
 
 const FileChooserButton = new GObject.Class({
-    Name: 'DrawOnYourScreenFileChooserButton',
+    Name: `${UUID}-FileChooserButton`,
-    GTypeName: 'DrawOnYourScreenFileChooserButton',
+    Extends: Gtk.Button,
-    Extends: Gtk.FileChooserButton,
     Properties: {
+        'action': GObject.ParamSpec.enum('action', 'action', 'action',
+                                         GObject.ParamFlags.READWRITE,
+                                         Gtk.FileChooserAction.$gtype,
+                                         Gtk.FileChooserAction.SELECT_FOLDER),
+        
         'location': GObject.ParamSpec.string('location', 'location', 'location',
                                              GObject.ParamFlags.READWRITE, '')
     },
     
     get location() {
-        return this.get_file().get_path();
+        return this._location || "";
     },
     
     set location(location) {
-        if (!location) {
+        if (!this._location || this._location != location) {
-            this.unselect_all();
+            this._location = location;
-            if (this.get_file())
+            this.label = location ?
-                this.set_file(Gio.File.new_for_path('aFileThatDoesNotExist'));
+                         Gio.File.new_for_commandline_arg(location).query_info('standard::display-name', Gio.FileQueryInfoFlags.NONE, null).get_display_name() :
-            return;
+                         _GTK("(None)");
-        }
             
-        let file = Gio.File.new_for_commandline_arg(location);
+            this.notify('location');
-        if (file.query_exists(null))
+        }
-            this.set_file(file);
     },
     
-    vfunc_file_set: function(args) {
+    vfunc_clicked: function() {
-        this.notify('location');
+        let dialog = new Gtk.FileChooserDialog({
+            title: _(this.name),
+            action: this.action,
+            modal: true,
+            transient_for: IS_GTK3 ? this.get_toplevel() : this.get_root(),
+        });
+        dialog.add_button(_GTK("_Cancel"), Gtk.ResponseType.CANCEL);
+        dialog.add_button(_GTK("_Select"), Gtk.ResponseType.ACCEPT);
+        
+        if (this.location)
+            dialog.set_file(Gio.File.new_for_commandline_arg(this.location));
+        
+        dialog.connect('response', (dialog, response) => {
+            if (response == Gtk.ResponseType.ACCEPT)
+                    this.location = dialog.get_file().get_path();
+            dialog.destroy();
+        });
+        
+        dialog.show();
     }
 });
 
-// this code comes from Sticky Notes View by Sam Bull, https://extensions.gnome.org/extension/568/notes/
+// From Sticky Notes View by Sam Bull, https://extensions.gnome.org/extension/568/notes/
 const KeybindingsWidget = new GObject.Class({
-    Name: 'DrawOnYourScreenKeybindings.Widget',
+    Name: `${UUID}-KeybindingsWidget`,
-    GTypeName: 'DrawOnYourScreenKeybindingsWidget',
     Extends: Gtk.Box,
 
     _init: function(settingKeys, settings) {
@@ -729,7 +818,7 @@ const KeybindingsWidget = new GObject.Class({
         this._tree_view.columns_autosize();
         this._tree_view.set_headers_visible(false);
 
-        this.add(this._tree_view);
+        this.append(this._tree_view);
         this.keybinding_column = keybinding_column;
         this.action_column = action_column;
 
@@ -752,9 +841,11 @@ const KeybindingsWidget = new GObject.Class({
         this._store.clear();
 
         this._settingKeys.forEach(settingKey => {
-            let [key, mods] = Gtk.accelerator_parse(
+            let success_, key, mods;
-                this._settings.get_strv(settingKey)[0] || ''
+            if (IS_GTK3)
-            );
+                [key, mods] = Gtk.accelerator_parse(this._settings.get_strv(settingKey)[0] || '');
+            else
+                [success_, key, mods] = Gtk.accelerator_parse(this._settings.get_strv(settingKey)[0] || '');
 
             let iter = this._store.append();
             this._store.set(iter,

schemas/org.gnome.shell.extensions.draw-on-your-screen.gschema.xml

@@ -100,12 +100,12 @@
     <key type="a(sas)" name="palettes">
       <default>
         [
-          ("Palette", ["HotPink","Cyan","yellow","Orangered","Chartreuse","DarkViolet","White","Gray","Black"]),
+          ('Palette', ['HotPink', 'Cyan', 'yellow', 'Orangered', 'Chartreuse', 'DarkViolet', 'White', 'Gray', 'Black']),
-          ("GNOME HIG lighter", ["rgb(153,193,241)","rgb(143,240,164)","rgb(249,240,107)","rgb(255,190,111)","rgb(246,97,81)","rgb(220,138,221)","rgb(205,171,143)","rgb(255,255,255)","rgb(119,118,123)"]),
+          ('GNOME HIG lighter', ['rgb(153,193,241):Blue 1', 'rgb(143,240,164):Green 1', 'rgb(249,240,107):Yellow 1', 'rgb(255,190,111):Orange 1', 'rgb(246,97,81):Red 1', 'rgb(220,138,221):Purple 1', 'rgb(205,171,143):Brown 1', 'rgb(255,255,255):Light 1', 'rgb(119,118,123):Dark 1']),
-          ("GNOME HIG light", ["rgb(98,160,241)","rgb(87,227,137)","rgb(248,228,92)","rgb(255,163,72)","rgb(237,51,59)","rgb(192,97,203)","rgb(181,131,90)","rgb(246,245,244)","rgb(94,92,100)"]),
+          ('GNOME HIG light', ['rgb(98,160,234):Blue 2', 'rgb(87,227,137):Green 2', 'rgb(248,228,92):Yellow 2', 'rgb(255,163,72):Orange 2', 'rgb(237,51,59):Red 2', 'rgb(192,97,203):Purple 2', 'rgb(181,131,90):Brown 2', 'rgb(246,245,244):Light 2', 'rgb(94,92,100):Dark 2']),
-          ("GNOME HIG normal", ["rgb(53,132,228)","rgb(51,209,122)","rgb(246,211,45)","rgb(255,120,0)","rgb(224,27,36)","rgb(145,65,172)","rgb(152,106,68)","rgb(222,221,218)","rgb(61,56,70)"]),
+          ('GNOME HIG normal', ['rgb(53,132,228):Blue 3', 'rgb(51,209,122):Green 3', 'rgb(246,211,45):Yellow 3', 'rgb(255,120,0):Orange 3', 'rgb(224,27,36):Red 3', 'rgb(145,65,172):Purple 3', 'rgb(152,106,68):Brown 3', 'rgb(222,221,218):Light 3', 'rgb(61,56,70):Dark 3']),
-          ("GNOME HIG dark", ["rgb(28,113,216)","rgb(46,194,126)","rgb(245,194,17)","rgb(230,97,0)","rgb(192,28,40)","rgb(129,61,156)","rgb(134,94,60)","rgb(192,191,188)","rgb(36,31,49)"]),
+          ('GNOME HIG dark', ['rgb(28,113,216):Blue 4', 'rgb(46,194,126):Green 4', 'rgb(245,194,17):Yellow 4', 'rgb(230,97,0):Orange 4', 'rgb(192,28,40):Red 4', 'rgb(129,61,156):Purple 4', 'rgb(134,94,60):Brown 4', 'rgb(192,191,188):Light 4', 'rgb(36,31,49):Dark 4']),
-          ("GNOME HIG darker", ["rgb(26,095,180)","rgb(38,162,105)","rgb(229,165,10)","rgb(198,70,0)","rgb(165,29,45)","rgb(97,53,131)","rgb(99,69,44)","rgb(154,153,150)","rgb(0,0,0)"])
+          ('GNOME HIG darker', ['rgb(26,95,180):Blue 5', 'rgb(38,162,105):Green 5', 'rgb(229,165,10):Yellow 5', 'rgb(198,70,0):Orange 5', 'rgb(165,29,45):Red 5', 'rgb(97,53,131):Purple 5', 'rgb(99,69,44):Brown 5', 'rgb(154,153,150):Light 5', 'rgb(0,0,0):Dark 5'])
         ]
       </default>
       <summary>Color palettes</summary>
@@ -164,9 +164,13 @@
       <default>["&lt;Primary&gt;v"]</default>
       <summary>Add images from the clipboard</summary>
     </key>
+    <key type="as" name="pick-color">
+      <default><![CDATA[['<Primary>KP_0','<Primary>0']]]></default>
+      <summary>Pick a color</summary>
+    </key>
     <key type="as" name="redo">
       <default>["&lt;Primary&gt;&lt;Shift&gt;z"]</default>
-      <summary>Redo last brushstroke</summary>
+      <summary>Redo</summary>
     </key>
     <key type="as" name="save-as-json">
       <default>["&lt;Primary&gt;s"]</default>
@@ -311,7 +315,7 @@
     </key>
     <key type="as" name="switch-text-alignment">
       <default>["&lt;Primary&gt;&lt;Alt&gt;a"]</default>
-      <summary>Toggle text alignment</summary>
+      <summary>Change text alignment</summary>
     </key>
     <key type="as" name="toggle-background">
       <default>["&lt;Primary&gt;b"]</default>
@@ -336,7 +340,7 @@
     </key>
     <key type="as" name="undo">
       <default>["&lt;Primary&gt;z"]</default>
-      <summary>Undo last brushstroke</summary>
+      <summary>Undo</summary>
     </key>
   </schema>
 </schemalist>

shortcuts.js

@@ -1,15 +1,9 @@
-/* jslint esversion: 6 */
-/* exported GLOBAL_KEYBINDINGS, INTERNAL_KEYBINDINGS, OTHERS */
-
 /*
  * Copyright 2019 Abakkk
  *
- * This file is part of DrawOnYourScreen, a drawing extension for GNOME Shell.
- * https://framagit.org/abakkk/DrawOnYourScreen
- *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 2 of the License, or
+ * the Free Software Foundation, either version 3 of the License, or
  * (at your option) any later version.
  *
  * This program is distributed in the hope that it will be useful,
@@ -19,9 +13,16 @@
  *
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * SPDX-FileCopyrightText: 2019 Abakkk
+ * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+/* jslint esversion: 6 */
+/* exported GLOBAL_KEYBINDINGS, INTERNAL_KEYBINDINGS, OTHERS */
+
 const Gtk = imports.gi.Gtk;
+const IS_GTK3 = Gtk.get_major_version() == 3;
 
 const GS_VERSION = imports.misc.config.PACKAGE_VERSION;
 const ExtensionUtils = imports.misc.extensionUtils;
@@ -32,7 +33,11 @@ const _ = imports.gettext.domain(Me.metadata['gettext-domain']).gettext;
 const internalShortcutsSchema = Convenience.getSettings(Me.metadata['settings-schema'] + '.internal-shortcuts').settings_schema;
 
 const getKeyLabel = function(accel) {
-    let [keyval, mods] = Gtk.accelerator_parse(accel);
+    let success_, keyval, mods;
+    if (IS_GTK3)
+        [keyval, mods] = Gtk.accelerator_parse(accel);
+    else
+        [success_, keyval, mods] = Gtk.accelerator_parse(accel);
     return Gtk.accelerator_get_label(keyval, mods);
 };
 
@@ -46,7 +51,7 @@ var INTERNAL_KEYBINDINGS = [
     ['undo', 'redo', 'delete-last-element', 'smooth-last-element'],
     ['select-none-shape', 'select-line-shape', 'select-ellipse-shape', 'select-rectangle-shape', 'select-polygon-shape', 'select-polyline-shape',
      'select-text-shape', 'select-image-shape', 'select-move-tool', 'select-resize-tool', 'select-mirror-tool'],
-    ['switch-fill', 'switch-fill-rule', 'switch-color-palette', 'switch-color-palette-reverse'],
+    ['switch-fill', 'switch-fill-rule', 'switch-color-palette', 'switch-color-palette-reverse', 'pick-color'],
     ['increment-line-width', 'increment-line-width-more', 'decrement-line-width', 'decrement-line-width-more',
      'switch-linejoin', 'switch-linecap', 'switch-dash'],
     ['switch-font-family', 'switch-font-family-reverse', 'switch-font-weight', 'switch-font-style', 'switch-text-alignment'],
@@ -55,6 +60,15 @@ var INTERNAL_KEYBINDINGS = [
     ['open-next-json', 'open-previous-json', 'save-as-json', 'export-to-svg', 'open-preferences', 'toggle-help'],
 ];
 
+if (GS_VERSION < '3.30') {
+    // Remove 'pick-color' keybinding.
+    INTERNAL_KEYBINDINGS.forEach(settingKeys => {
+        let index = settingKeys.indexOf('pick-color');
+        if (index != -1)
+           settingKeys.splice(index, 1);
+    });
+}
+
 if (GS_VERSION < '3.36') {
     // Remove 'open-preferences' keybinding.
     INTERNAL_KEYBINDINGS.forEach(settingKeys => {
@@ -83,7 +97,7 @@ const getOthers = function() {
             [_("Extend circle to ellipse"), getKeyLabel('<Primary>')],
             [_("Curve line"), getKeyLabel('<Primary>')],
             [_("Smooth free drawing outline"), getKeyLabel('<Primary>')],
-            [_("Unlock image ratio"), getKeyLabel('<Primary>')],
+            [_("Do not preserve image ratio"), getKeyLabel('<Primary>')],
             [_("Rotate <span alpha=\"50%\">(while moving)</span>"), getKeyLabel('<Primary>')],
             [_("Stretch <span alpha=\"50%\">(while resizing)</span>"), getKeyLabel('<Primary>')],
             [_("Inverse <span alpha=\"50%\">(while mirroring)</span>"), getKeyLabel('<Primary>')],

stylesheet.css

@@ -1,10 +1,10 @@
 /* square area */
 
-.draw-on-your-screen-square-area {
+.draw-on-your-screen .draw-on-your-screen-square-area {
     outline: 2px solid rgba(255, 0, 0, 0.7);
 }
 
-.draw-on-your-screen-square-area:insensitive {
+.draw-on-your-screen:insensitive .draw-on-your-screen-square-area {
     outline: none;
 }
 
@@ -37,6 +37,7 @@
 
 .draw-on-your-screen-menu {
    font-size: 0.97em; /* default: 1em */
+   min-width: 21em; /* like the aggregate menu */
 }
 
 .draw-on-your-screen-menu .popup-menu-item {
@@ -49,6 +50,11 @@
     padding-top: 0.03em;
 }
 
+/* max size for uncontrolled contents (font, image and drawing names) */
+.draw-on-your-screen-menu-ellipsized {
+    max-width: 21em;
+}
+
 .draw-on-your-screen-menu .toggle-switch {
     height: 1.35em; /* default: 22px */
 }