feat(page-change): add the ability to change the page on selection

ph1p · May 1, 2020 · b01fe05 · b01fe05
1 parent 997e4c9
commit b01fe05
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 44 deletions.
diff --git a/src/code.ts b/src/code.ts
@@ -52,10 +52,15 @@ async function main() {
     figma.root.setPluginData('history', history);
   }
 
+  // Parse History
+  try {
+    history = typeof history === 'string' ? JSON.parse(history) : []
+  } catch { }
+
   return {
     roomName,
     secret,
-    history: typeof history === 'string' ? JSON.parse(history) : [],
+    history,
     instanceId,
   };
 }
@@ -71,7 +76,13 @@ const getSelectionIds = () => {
 };
 
 const sendSelection = () => {
-  postMessage('selection', getSelectionIds());
+  postMessage('selection', {
+    page: {
+      id: figma.currentPage.id,
+      name: figma.currentPage.name
+    },
+    nodes: getSelectionIds()
+  });
 };
 
 const sendRootData = async ({ roomName, secret, history, instanceId }) => {
@@ -100,6 +111,13 @@ const isValidShape = (node) =>
   node.type === 'INSTANCE' ||
   node.type === 'POLYGON';
 
+
+function goToPage(id) {
+  if (figma.getNodeById(id)) {
+    figma.currentPage = figma.getNodeById(id) as PageNode;
+  }
+}
+
 let previousSelection = figma.currentPage.selection || [];
 
 main().then(({ roomName, secret, history, instanceId }) => {
@@ -198,9 +216,19 @@ main().then(({ roomName, secret, history, instanceId }) => {
         }
         break;
       case 'focus-nodes':
+        let selectedNodes = [];
         triggerSelectionEvent = false;
+
+        // fallback for ids
+        if (message.payload.ids) {
+          selectedNodes = message.payload.ids
+        } else {
+          goToPage(message.payload?.page?.id);
+          selectedNodes = message.payload.nodes;
+        }
+
         const nodes = figma.currentPage.findAll(
-          (n) => message.payload.ids.indexOf(n.id) !== -1
+          (n) => selectedNodes.indexOf(n.id) !== -1
         );
 
         figma.currentPage.selection = nodes;
@@ -217,7 +245,13 @@ main().then(({ roomName, secret, history, instanceId }) => {
         if (isRelaunch && !alreadyAskedForRelaunchMessage) {
           alreadyAskedForRelaunchMessage = true;
           postMessage('relaunch-message', {
-            selection: getSelectionIds(),
+            selection: {
+              page: {
+                id: figma.currentPage.id,
+                name: figma.currentPage.name
+              },
+              nodes: getSelectionIds()
+            },
           });
         }
         break;

diff --git a/src/components/Chatbar.tsx b/src/components/Chatbar.tsx
@@ -1,10 +1,11 @@
 import React, { FunctionComponent, useState, useEffect, useRef } from 'react';
 import { useRouteMatch } from 'react-router-dom';
+import { observer } from 'mobx-react';
+import { autorun } from 'mobx';
 import styled from 'styled-components';
 import ColorPicker from './ColorPicker';
-import { ConnectionEnum } from '../shared/interfaces'; // store
-import { observer } from 'mobx-react';
 import { useStore } from '../store';
+import { ConnectionEnum } from '../shared/interfaces';
 
 interface ChatProps {
   sendMessage: (event: any) => void;
@@ -17,25 +18,16 @@ interface ChatProps {
 const ChatBar: FunctionComponent<ChatProps> = (props) => {
   const store = useStore();
   const isSettings = useRouteMatch('/settings');
-  const selection = store.selection.length;
-  const hasSelection = Boolean(selection);
-  const [show, setShow] = useState(hasSelection);
+  const [hasSelection, setHasSelection] = useState(false);
   const chatTextInput = useRef(null);
 
   const isFailed = store.status === ConnectionEnum.ERROR;
   const isConnected = store.status === ConnectionEnum.CONNECTED;
 
-  useEffect(() => {
-    if (hasSelection) {
-      setShow(true);
-    }
-  }, [hasSelection]);
-
-  const onAnimationEnd = () => {
-    if (!hasSelection) {
-      setShow(false);
-    }
-  };
+  useEffect(
+    () => autorun(() => setHasSelection(Boolean(store.selectionCount))),
+    []
+  );
 
   return (
     <ChatBarForm
@@ -46,13 +38,7 @@ const ChatBar: FunctionComponent<ChatProps> = (props) => {
       }}
     >
       <ConnectionInfo isConnected={isConnected}>
-        {isFailed ? (
-          <>
-            connection failed 🙈
-          </>
-        ) : (
-          'connecting...'
-        )}
+        {isFailed ? <>connection failed 🙈</> : 'connecting...'}
       </ConnectionInfo>
 
       <ChatInputWrapper isConnected={isConnected}>

diff --git a/src/components/Message.tsx b/src/components/Message.tsx
@@ -19,6 +19,9 @@ const Message: FunctionComponent<Props> = ({ data, instanceId }) => {
   const colorClass = colors[data.user.color] || 'blue';
   const selection = data?.message?.selection;
   const isSelf = data.id === instanceId;
+  const pageName = selection?.page?.name || '';
+
+  const selectionCount = selection?.length || selection?.nodes?.length || 0;
 
   return (
     <MessageFlex isSelf={isSelf}>
@@ -35,16 +38,31 @@ const Message: FunctionComponent<Props> = ({ data, instanceId }) => {
         )}
         {selection ? (
           <span
-            onClick={() =>
-              sendMainMessage('focus-nodes', {
-                ids: toJS(selection),
-              })
-            }
+            onClick={() => {
+              const messageSelection = toJS(selection);
+              let selectionData = null;
+
+              // fallback without page
+              if (messageSelection.length) {
+                selectionData = {
+                  ids: messageSelection,
+                };
+              } else {
+                selectionData = {
+                  ...messageSelection,
+                };
+              }
+
+              sendMainMessage('focus-nodes', selectionData);
+            }}
           >
-            {data.message.text}
+            {data.message.text && (
+              <div className="selection-text">{data.message.text}</div>
+            )}
             <button className="selection button button--secondary">
-              focus {selection.length} element
-              {selection.length > 1 ? 's' : ''}
+              {pageName ? pageName + ' - ' : ''}
+              focus {selectionCount} element
+              {selectionCount > 1 ? 's' : ''}
             </button>
           </span>
         ) : (
@@ -119,6 +137,14 @@ const MessageContainer = styled.div`
     background-color: transparent;
     border-color: #fff;
     color: #fff;
+    &:active {
+      border: 1px solid;
+      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  .selection-text {
+    margin-bottom: 10px;
   }
 
   &.lightblue header {
@@ -188,7 +214,7 @@ const MessageContainer = styled.div`
     color: #1c4856;
   }
   &.purple {
-    background-color: #7b61ff;
+    background-color: #5751ff;
     color: #ffffff;
   }
   &.green {

diff --git a/src/store/index.tsx b/src/store/index.tsx
@@ -40,7 +40,17 @@ class RootStore {
   disableAutoScroll = false;
 
   @observable
-  selection = [];
+  selection = undefined;
+
+  @computed
+  get selectionCount() {
+    // fallback
+    if (this.selection?.length) {
+      return this.selection.length;
+    }
+
+    return this.selection?.nodes?.length || 0;
+  }
 
   @action
   scrollToBottom() {

diff --git a/src/views/Chat.tsx b/src/views/Chat.tsx
@@ -59,7 +59,7 @@ const ChatView: FunctionComponent<ChatProps> = (props) => {
         date: new Date(),
       };
 
-      if (store.selection.length > 0) {
+      if (store.selectionCount > 0) {
         if (chatState.selectionIsChecked) {
           data = {
             ...data,
@@ -98,8 +98,10 @@ const ChatView: FunctionComponent<ChatProps> = (props) => {
     if (pmessage) {
       // set selection
       if (pmessage.type === 'selection') {
-        const hasSelection = pmessage.payload.length > 0;
-        store.selection = hasSelection ? pmessage.payload : [];
+        const hasSelection =
+          pmessage.payload?.length > 0 || pmessage.payload?.nodes?.length > 0;
+
+        store.selection = hasSelection ? pmessage.payload : {};
 
         if (!hasSelection) {
           chatState.selectionIsChecked = false;
@@ -111,7 +113,10 @@ const ChatView: FunctionComponent<ChatProps> = (props) => {
           roomName: dataRoomName = '',
           secret: dataSecret = '',
           history: messages = [],
-          selection = [],
+          selection = {
+            page: '',
+            nodes: [],
+          },
           settings = {},
           instanceId = '',
         } = {
@@ -135,9 +140,12 @@ const ChatView: FunctionComponent<ChatProps> = (props) => {
 
       if (pmessage.type === 'relaunch-message') {
         chatState.selectionIsChecked = true;
-        store.selection = pmessage.payload.selection || [];
 
-        if (store.selection.length) {
+        console.log(pmessage.payload.selection);
+
+        store.selection = pmessage.payload.selection || {};
+
+        if (store.selectionCount) {
           sendMessage();
           sendMainMessage('notify', 'Selection sent successfully');
         }
@@ -164,7 +172,7 @@ const ChatView: FunctionComponent<ChatProps> = (props) => {
     <>
       <Chat
         color={store.settings.color}
-        hasSelection={store.selection.length > 0}
+        hasSelection={store.selectionCount > 0}
       >
         {isConnected && (
           <FloatingButtonRight isSettings={isSettings}>