From 93e774691d626e18095773720aeca252374db240 Mon Sep 17 00:00:00 2001
From: Steve Ruiz <steveruizok@gmail.com>
Date: Sun, 26 Jun 2022 08:11:00 +0100
Subject: [PATCH] Add locked indicator

---
 packages/core/src/components/ShapeIndicator/ShapeIndicator.tsx | 1 +
 packages/core/src/hooks/useStyle.tsx                           | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/packages/core/src/components/ShapeIndicator/ShapeIndicator.tsx b/packages/core/src/components/ShapeIndicator/ShapeIndicator.tsx
index 841562194..56b5833e4 100644
--- a/packages/core/src/components/ShapeIndicator/ShapeIndicator.tsx
+++ b/packages/core/src/components/ShapeIndicator/ShapeIndicator.tsx
@@ -34,6 +34,7 @@ export const ShapeIndicator = observer(function ShapeIndicator<T extends TLShape
         'tl-absolute',
         isSelected && !user ? 'tl-selected' : 'tl-hovered',
         isEditing ? 'tl-editing' : '',
+        shape.isLocked ? 'tl-locked' : '',
       ].join(' ')}
     >
       <svg width="100%" height="100%">
diff --git a/packages/core/src/hooks/useStyle.tsx b/packages/core/src/hooks/useStyle.tsx
index 06052be7d..bf7ac46a2 100644
--- a/packages/core/src/hooks/useStyle.tsx
+++ b/packages/core/src/hooks/useStyle.tsx
@@ -264,6 +264,9 @@ export const TLCSS = css`
   .tl-selected {
     stroke: var(--tl-selectStroke);
   }
+  .tl-locked {
+    stroke-dasharray: calc(3px * var(--tl-scale)) calc(3px * var(--tl-scale));
+  }
   .tl-editing {
     stroke-width: calc(2.5px * min(5, var(--tl-scale)));
   }