hide mask sources and identify them

Author: bobnik

src/components/LayerSelectOption.js

@@ -1,7 +1,7 @@
 /* global document */
 
 import React from "react"
-import { useSelector, useStore, shallowEqual } from "react-redux"
+import { useSelector, useStore, useDispatch, shallowEqual } from "react-redux"
 import Col from "react-bootstrap/Col"
 import Row from "react-bootstrap/Row"
 import Form from "react-bootstrap/Form"
@@ -10,12 +10,14 @@ import {
   selectLayerIds,
   selectLayerById,
   selectLayerVertices,
+  updateLayer,
 } from "@/features/layers/layersSlice"
 import { dimensions } from "@/common/geometry"
 import { getShape } from "@/features/shapes/shapeFactory"
 
 const LayerSelectOption = ({ options, optionKey, data, onChange, index }) => {
   const store = useStore()
+  const dispatch = useDispatch()
   const option = options[optionKey]
   const currentChoice = data[optionKey]
   const effectLayerId = data.layerId
@@ -43,9 +45,7 @@ const LayerSelectOption = ({ options, optionKey, data, onChange, index }) => {
     { value: "", label: "(none)" },
     ...layers.map((layer) => ({
       value: layer.id,
-      label:
-        (layer.name || `Layer ${layer.id.slice(0, 6)}`) +
-        (layer.visible ? "" : " (hidden)"),
+      label: layer.name || `Layer ${layer.id.slice(0, 6)}`,
     })),
   ]
 
@@ -71,6 +71,13 @@ const LayerSelectOption = ({ options, optionKey, data, onChange, index }) => {
       }
     }
 
+    if (currentChoice && currentChoice !== value) {
+      dispatch(updateLayer({ id: currentChoice, visible: true }))
+    }
+    if (value) {
+      dispatch(updateLayer({ id: value, visible: false }))
+    }
+
     if (option.onChange !== undefined) {
       attrs = option.onChange(null, attrs, data)
     }

src/features/effects/effectsSlice.js

@@ -151,3 +151,18 @@ export const selectEffectSelectionVertices = createCachedSelector(
     return instance.getSelectionVertices(effect)
   },
 )(cachedByIdDeepEqual)
+
+export const selectMaskSources = createSelector(
+  selectAllEffects,
+  (effects) => {
+    const map = new Map()
+
+    effects
+      .filter(
+        (e) => e.type === "mask" && e.maskMachine === "layer" && e.maskLayerId,
+      )
+      .forEach((e) => map.set(e.maskLayerId, e.layerId))
+
+    return map
+  },
+)

src/features/layers/LayerEditor.js

@@ -16,15 +16,25 @@ import {
 } from "react-icons/ai"
 import ModelOption from "@/components/ModelOption"
 import { getShapeSelectOptions } from "@/features/shapes/shapeFactory"
-import { updateLayer, changeModelType } from "./layersSlice"
+import {
+  updateLayer,
+  changeModelType,
+  selectSelectedLayer,
+  selectLayerById,
+} from "./layersSlice"
 import Layer from "./Layer"
 import EffectManager from "@/features/effects/EffectManager"
-import { selectSelectedLayer } from "./layersSlice"
+import { selectMaskSources } from "@/features/effects/effectsSlice"
 
 const LayerEditor = () => {
   const { t } = useTranslation()
   const dispatch = useDispatch()
   const layer = useSelector(selectSelectedLayer)
+  const maskSources = useSelector(selectMaskSources)
+  const targetLayerId = maskSources.get(layer.id)
+  const targetLayer = useSelector((state) =>
+    targetLayerId ? selectLayerById(state, targetLayerId) : null,
+  )
   const instance = new Layer(layer.type)
   const model = instance.model
   const layerOptions = instance.getOptions()
@@ -139,11 +149,19 @@ const LayerEditor = () => {
 
   return (
     <div className="overflow-visible flex-grow-1">
-      <div className="px-3 pt-3 border-top border-secondary">
-        {renderOption({ optionKey: "name" })}
-        {renderedModelSelection}
-        {renderedModelOptions}
-        {renderOption({ optionKey: "connectionMethod" })}
+      <div className="border-top border-secondary">
+        {targetLayer && (
+          <div className="alert alert-warning mb-0">
+            {t("Mask source for")} the <span className="fst-italic">{targetLayer.name}</span> layer (hidden)
+          </div>
+        )}
+
+        <div className="pt-3 px-3">
+          {renderOption({ optionKey: "name" })}
+          {renderedModelSelection}
+          {renderedModelOptions}
+          {renderOption({ optionKey: "connectionMethod" })}
+        </div>
       </div>
       {model.canTransform(layer) && (
         <div className="px-3 py-2">
@@ -230,7 +248,7 @@ const LayerEditor = () => {
         </div>
       )}
 
-      <div className="border-top border-secondary px-3 pt-1">
+      <div className="border-top border-secondary px-3 pt-1 pb-4">
         <EffectManager />
       </div>
 

src/features/layers/LayerList.js

@@ -3,8 +3,8 @@ import { useTranslation } from "react-i18next"
 import Button from "react-bootstrap/Button"
 import ListGroup from "react-bootstrap/ListGroup"
 import { Tooltip } from "react-tooltip"
-import { FaEye, FaEyeSlash } from "react-icons/fa"
-import { useSelector, useDispatch } from "react-redux"
+import { FaEye, FaEyeSlash, FaMask } from "react-icons/fa"
+import { useSelector, useDispatch, useStore } from "react-redux"
 import { DndContext, useSensor, useSensors, PointerSensor } from "@dnd-kit/core"
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers"
 import {
@@ -20,18 +20,26 @@ import {
   selectSelectedLayer,
   selectNumLayers,
   selectAllLayers,
+  selectLayerIds,
   updateLayer,
 } from "@/features/layers/layersSlice"
+import {
+  selectMaskSources,
+  selectAllEffects,
+  updateEffect,
+} from "@/features/effects/effectsSlice"
 
 const LayerRow = React.memo(function LayerRow({
   current,
   selected,
   numLayers,
   layer,
+  maskTargetName,
   handleLayerSelected,
   handleToggleLayerVisible,
   t,
 }) {
+  const usedAsMask = !!maskTargetName
   const { name, id, visible } = layer
   const activeClass = current ? "active" : selected ? "selected" : ""
   const dragClass = numLayers > 1 ? "cursor-move" : ""
@@ -63,23 +71,30 @@ const LayerRow = React.memo(function LayerRow({
         onClick={handleLayerSelected}
       >
         <div className="layer-left">
-          <Button
-            className="layer-button"
-            variant="light"
-            data-id={id}
-            data-tooltip-content={visible ? t("Hide layer") : t("Show layer")}
-            data-tooltip-id={tooltipId}
-            data-tooltip-place="top-end"
-            onClick={(e) => {
-              handleToggleLayerVisible(id, layer.visible)
-            }}
-          >
-            {visible ? <FaEye size="0.8em" /> : <FaEyeSlash size="0.8em" />}
-          </Button>
+          {usedAsMask ? (
+            <span className="layer-icon">
+              <FaMask />
+            </span>
+          ) : (
+            <Button
+              className="layer-button"
+              variant="light"
+              data-id={id}
+              data-tooltip-content={visible ? t("Hide layer") : t("Show layer")}
+              data-tooltip-id={tooltipId}
+              data-tooltip-place="top-end"
+              onClick={(e) => {
+                handleToggleLayerVisible(id, layer.visible)
+              }}
+            >
+              {visible ? <FaEye size="0.8em" /> : <FaEyeSlash size="0.8em" />}
+            </Button>
+          )}
         </div>
 
         <div className="d-flex no-select flex-grow-1 align-items-center">
-          <div className="flex-grow-1">{name}</div>
+          <div>{name}</div>
+          <div className="flex-grow-1" />
           <span
             className="me-2"
             style={{ fontSize: "80%" }}
@@ -94,6 +109,7 @@ const LayerRow = React.memo(function LayerRow({
 
 const LayerList = () => {
   const { t } = useTranslation()
+  const store = useStore()
   // row has to be dragged 3 pixels before dragging starts; this allows the buttons
   // on the row to work properly.
   const sensors = useSensors(
@@ -108,6 +124,9 @@ const LayerList = () => {
   const selectedLayer = useSelector(selectSelectedLayer)
   const numLayers = useSelector(selectNumLayers)
   const layers = useSelector(selectAllLayers)
+  const maskSources = useSelector(selectMaskSources)
+
+  const layersById = Object.fromEntries(layers.map((l) => [l.id, l]))
 
   const handleLayerSelected = useCallback(
     (event) => {
@@ -139,9 +158,28 @@ const LayerList = () => {
         const oldIndex = layers.findIndex((layer) => layer.id === active.id)
         const newIndex = layers.findIndex((layer) => layer.id === over.id)
         dispatch(moveLayer({ oldIndex, newIndex }))
+
+        const state = store.getState()
+        const newLayerIds = selectLayerIds(state)
+        const effects = selectAllEffects(state)
+
+        effects
+          .filter(
+            (e) =>
+              e.type === "mask" && e.maskMachine === "layer" && e.maskLayerId,
+          )
+          .forEach((effect) => {
+            const targetIdx = newLayerIds.indexOf(effect.layerId)
+            const sourceIdx = newLayerIds.indexOf(effect.maskLayerId)
+
+            if (sourceIdx === -1 || sourceIdx >= targetIdx) {
+              dispatch(updateLayer({ id: effect.maskLayerId, visible: true }))
+              dispatch(updateEffect({ id: effect.id, maskLayerId: null }))
+            }
+          })
       }
     },
-    [dispatch, layers],
+    [dispatch, layers, store],
   )
 
   return (
@@ -161,20 +199,26 @@ const LayerList = () => {
             id="layers"
             style={{ maxHeight: "200px" }}
           >
-            {layers.map((layer, index) => (
-              <LayerRow
-                id={layer.id}
-                key={layer.id}
-                current={currentLayerId === layer.id}
-                selected={selectedLayer.id === layer.id}
-                numLayers={numLayers}
-                layer={layer}
-                handleLayerSelected={handleLayerSelected}
-                handleToggleLayerVisible={handleToggleLayerVisible}
-                index={index}
-                t={t}
-              />
-            ))}
+            {layers.map((layer, index) => {
+              const targetLayerId = maskSources.get(layer.id)
+              const targetLayer = targetLayerId && layersById[targetLayerId]
+
+              return (
+                <LayerRow
+                  id={layer.id}
+                  key={layer.id}
+                  current={currentLayerId === layer.id}
+                  selected={selectedLayer.id === layer.id}
+                  numLayers={numLayers}
+                  layer={layer}
+                  maskTargetName={targetLayer?.name}
+                  handleLayerSelected={handleLayerSelected}
+                  handleToggleLayerVisible={handleToggleLayerVisible}
+                  index={index}
+                  t={t}
+                />
+              )
+            })}
           </ListGroup>
         </div>
       </SortableContext>

src/features/layers/LayerManager.scss

@@ -5,7 +5,7 @@
   padding-right: 0.5rem !important;
 
   .active.list-group-item & {
-    color: white;
+    color: white !important;
     background-color: inherit;
   }
 
@@ -14,12 +14,34 @@
   }
 }
 
+.layer-icon {
+  color: #6c757d;
+  padding: 0.5rem 0.5rem;
+  display: inline-flex;
+  align-items: center;
+
+  > svg {
+    width: 16px;
+    height: 26px;
+  }
+
+  .active.list-group-item & {
+    color: white;
+  }
+}
+
 .cursor-move {
   cursor: move;
 }
 
 #layers {
   .list-group-item {
     padding: 0.5rem 0.25rem;
+
+    &.layer-hidden {
+      > div {
+        opacity: 0.7;
+      }
+    }
   }
 }