fix: Move to layer page when selecting a layer

fix #89

resources/app/components/List/Tree/LayerNode.tsx

@@ -43,7 +43,7 @@ const LayerNode = ({
     const shouldCenterOnSelf: boolean = type === LayerType.artboard || type === LayerType.page;
     setSelectedLayer(id);
 
-    const idToCenterOn = shouldCenterOnSelf ? id : Object.entries(colors)
+    const idToCenterOn: string = shouldCenterOnSelf ? id : Object.entries(colors)
       .reduce((acc: any, keyValue: any) => ([...acc, ...keyValue[1]]), [])
       .find(innerLayer => innerLayer.id === id)
       .parents

resources/app/enums/layer-type.enum.ts

@@ -5,4 +5,5 @@ export enum LayerType {
     shapePath = 'ShapePath',
     text = 'Text',
     shape = 'Shape',
-}
+    document = 'Document',
+}

src/helpers/get-page.test.ts

@@ -0,0 +1,40 @@
+
+import { Layer } from 'sketch';
+import {getPage} from './get-page';
+import { LayerType } from '../../resources/app/enums/layer-type.enum';
+
+describe('getPage', () => {
+    test('should return the layer if is a page', () => {
+        const layer = {
+            type: LayerType.page
+        }
+
+        expect(getPage(layer as Layer)).toBe(layer);
+    });
+
+    test('should return the first parent page', () => {
+        const page = {
+            type: LayerType.page,
+            parent: {
+                type: LayerType.document
+            }
+        }
+        const layer = {
+            type: LayerType.shapePath,
+            parent: {
+                type: LayerType.artboard,
+                parent: page
+            }
+        }
+
+        expect(getPage(layer as Layer)).toBe(page);
+    });
+
+    test('should throw an error if the layer has no parent page', () => {
+        const layer = {
+            type: LayerType.shapePath
+        }
+
+        expect(() => getPage(layer as Layer)).toThrow()
+    })
+});

src/helpers/get-page.ts

@@ -0,0 +1,14 @@
+import { Page, Layer } from 'sketch';
+import { LayerType } from '../../resources/app/enums/layer-type.enum';
+
+export const getPage = (layer: Layer): Page => {
+    if (layer.type === LayerType.page) {
+        return layer;
+    }
+
+    if (!layer.parent) {
+        throw new Error(`Layer is not child on any page! ${JSON.stringify(layer, null, 2)}`);
+    }
+
+    return getPage(layer.parent as Layer);
+}

src/my-command.js

@@ -1,5 +1,6 @@
 import BrowserWindow from 'sketch-module-web-view';
 import sketch, { UI, Settings } from 'sketch'; // eslint-disable-line import/no-unresolved
+import { getPage } from './helpers/get-page';
 import { browserWindowSize } from '../constants.ts';
 import { replaceColorInLayers } from './helpers/replace-color-in-layers.ts';
 import getColors from './get-colors.ts';
@@ -38,6 +39,11 @@ export default function () {
 
     const sketchLayer = document.getLayerWithID(layerID);
     const layerToCenterOn = document.getLayerWithID(idToCenterOn);
+    const page = getPage(layerToCenterOn);
+
+    if (document.selectedPage !== page) {
+      document.selectedPage = page;
+    }
 
     document.centerOnLayer(layerToCenterOn);
     document.selectedLayers = [sketchLayer];