From f1a23bffedd2ca36bf71f64e5b6f76fd38e04d3c Mon Sep 17 00:00:00 2001
From: microud <gmicroud@gmail.com>
Date: Mon, 23 Mar 2020 22:50:16 +0800
Subject: [PATCH] =?UTF-8?q?update:=20=E5=A2=9E=E5=8A=A0=E5=AF=B9=E6=AD=A3?=
 =?UTF-8?q?=E5=88=99=20Flag=20=E7=9A=84=E5=8C=B9=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/diagram/index.ts                        | 33 ++++++++++++---------
 src/diagram/webview/components/Diagram.tsx  |  2 +-
 src/diagram/webview/views/RegexpDiagram.tsx |  2 +-
 3 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/diagram/index.ts b/src/diagram/index.ts
index a0f39a6..4a10da5 100644
--- a/src/diagram/index.ts
+++ b/src/diagram/index.ts
@@ -38,7 +38,7 @@ export default function useDiagram(context: ExtensionContext) {
     const position = editor?.selection.active;
     const line = editor?.document.lineAt(position?.line!);
     const text = editor?.document.getText(new Range(line?.range.start!, line?.range.end!));
-    const regex = /(?<!\\)\/(.+?)(?<!\\)\//g;
+    const regex = /(?<!\\)\/(.+?)(?<!\\)\/([gmiyus]{0,6})/g;
     const regexpList: string[] = []; // text?.match(/(?<!\\)\/(.+?)(?<!\\)\//g);
     let matches;
     while ((matches = regex.exec(text)) !== null) {
@@ -46,20 +46,25 @@ export default function useDiagram(context: ExtensionContext) {
       if (matches.index === regex.lastIndex) {
         regex.lastIndex++;
       }
+      console.log(matches);
       regexpList.push(matches[1]);
     }
-    const panel = window.createWebviewPanel(
-      'Diagram',
-      'Diagram',
-      ViewColumn.Two,
-      {
-        enableScripts: true,
-      }
-    );
-    panel.webview.html = getWebViewContent(context, 'out/diagram/index.html')
-      .replace('{{ inject-script }}', `<script src="${getExtensionFileVscodeResource(context, 'out/diagram/diagram.js')}"></script>`);
-    panel.webview.postMessage({
-      regexpGroups: regexpList,
-    });
+    if (regexpList.length) {
+      const panel = window.createWebviewPanel(
+        'Diagram',
+        'Diagram',
+        ViewColumn.Two,
+        {
+          enableScripts: true,
+        }
+      );
+      panel.webview.html = getWebViewContent(context, 'out/diagram/index.html')
+        .replace('{{ inject-script }}', `<script src="${getExtensionFileVscodeResource(context, 'out/diagram/diagram.js')}"></script>`);
+      panel.webview.postMessage({
+        regexpGroups: regexpList,
+      });
+    } else {
+      window.showWarningMessage('未找到正则表达式');
+    }
   });
 }
diff --git a/src/diagram/webview/components/Diagram.tsx b/src/diagram/webview/components/Diagram.tsx
index f5b8b1c..e4f3b3c 100644
--- a/src/diagram/webview/components/Diagram.tsx
+++ b/src/diagram/webview/components/Diagram.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { parse, visualize, Raphael } from 'regulex-cjs';
 import { useEffect } from 'react';
 
-interface IDiagramProps {
+interface IDiagramProps extends React.HTMLAttributes<HTMLDivElement> {
   regexp: string | RegExp;
 }
 
diff --git a/src/diagram/webview/views/RegexpDiagram.tsx b/src/diagram/webview/views/RegexpDiagram.tsx
index 7a88e48..b295208 100644
--- a/src/diagram/webview/views/RegexpDiagram.tsx
+++ b/src/diagram/webview/views/RegexpDiagram.tsx
@@ -8,7 +8,7 @@ export const RegexpDiagramView: React.FC = () => {
   return (
     <>
       <div>
-        {regexpGroups.map((regexp: string) => <RegExpDiagram regexp={new RegExp(regexp)} />)}
+        {regexpGroups.map((regexp: string) => <RegExpDiagram className="regexp-diagram" regexp={new RegExp(regexp)} />)}
       </div>
     </>
   );