improved readme, always show freeze tools as long as we have an activ…

…e layer

README.md

@@ -14,6 +14,30 @@ ZX Spectrum Image Composer is a one page web application that allows the user to
 
 The application can be used in https://zxspectrumimagecomposer.solvalou.com/
 
+## How it works
+
+### Layers
+
+Like Adobe Photoshop, you have one or more image layers. Each layer is an individual sheet with its own settings (on the right side of the screen) and the final image is the composite of all the layers.
+
+### Each layer consist of four sub-layers
+
+Each layer consists of four sub-layers:
+1. Source image: You can have one source image (=any image you paste or upload) per layer and you can use various image adjustment settings to adjust brightness/contrast/etc. One important part of the adjustments is pixelation: how the image is adapted to ZX Spectrum resolution and color limitations. _You don't have to have a source image_ if you want to draw the layer's contents yourself.
+2. Mask: This layer does not actually _show_ anything. It is used to mask out part of the source image. Masked parts are invisible, unmasked parts are visible.
+3. Manually drawn pixels: This sub-layer allows you to manually set each pixel as ink, paper or transparent. If a pixel is set as ink or paper, that pixel will override the source image. If a pixel is set as transparent, the source image will "show through", unless the mask prevents it from being visible.
+4. Manually drawn attributes: This layer is the same as "manually drawn pixels", but instead of pixels, it deals with color attributes.
+
+### Example workflow using sub-layers effectively
+
+As brightness/contrast/etc adjustments don't affect manually drawn pixels or attributes, copying the dithered image to "manual pixels" and "manual attributes" -sub layers (using the leftmost icon in the Freeze-section of the top toolbar) will freeze the image from dithering algorithm. So what you can do to "spectrumize" a complex image requiring different dithering settings for different areas is to:
+
+1. Mask all of the image
+2. Unmask the part of it you're going to work on next
+3. Adjust image controls so that unmasked part is optimally dithered
+4. Freeze the unmasked part (copying the unmasked automatically dithered part to manual sub-layers as if you had drawn them manually - note, that, if you had made any manual changes beforehand, they will _not_ be lost)
+5. Repeat steps 2-4 until done
+
 ## Technical info
 
 ### Structure

src/components/Toolbar.tsx

@@ -338,11 +338,6 @@ export const Toolbar = () => {
     }
 
     const freeze = (freezePixels: boolean, freezeAttributes: boolean) => {
-        if (!activeLayer) {
-            alert("Select a layer first.")
-            return;
-        }
-
         const freezeWhatText = (freezePixels && freezeAttributes)
             ? 'both pixels and attributes'
             : freezePixels
@@ -647,7 +642,7 @@ export const Toolbar = () => {
             </>
             }
 
-            {(tools.tool === ToolType.nudge || tools.tool === ToolType.mask) && <>
+            {activeLayer && <>
                 <Group title="Freeze image" disableClose={true}>
                     <Button
                         icon="image"