フローエディタの左パネル表示・非表示機能追加

frontend/.env

@@ -1,3 +1,3 @@
-#KAB_BACKEND_URL="https://kab-backend.azurewebsites.net/"
+KAB_BACKEND_URL="https://kab-backend.azurewebsites.net/"
-KAB_BACKEND_URL="http://127.0.0.1:8000/"
+#KAB_BACKEND_URL="http://127.0.0.1:8000/"
 

frontend/src/pages/FlowChart.vue

@@ -20,8 +20,12 @@
           </div>
         </q-drawer>
       </div>
-      <div class="q-pa-md q-gutter-sm">
+      <q-btn flat dense round
-        <div class="flowchart" v-if="store.currentFlow" style="padding-left: 300px;">
+              :icon="drawerLeft?'keyboard_double_arrow_left':'keyboard_double_arrow_right'"
+              :style="[drawerLeft?{'left':'300px'}:{'left':'0px'}]"
+              @click="drawerLeft=!drawerLeft" class="expand" />
+      <div class="q-pa-md q-gutter-sm" :style="{minWidth: minPanelWidth}">
+        <div class="flowchart" v-if="store.currentFlow" :style="[drawerLeft?{paddingLeft:'300px'}:{}]">
           <node-item v-if="rootNode!==undefined" :key="rootNode.id" :isSelected="rootNode === store.activeNode"
             :actionNode="rootNode" @addNode="addNode" @nodeSelected="onNodeSelected" @nodeEdit="onNodeEdit"
             @deleteNode="onDeleteNode" @deleteAllNextNodes="onDeleteAllNextNodes" @copyFlow="onCopyFlow"></node-item>
@@ -73,7 +77,15 @@ const addActionNode = (action: IActionNode) => {
 }
 const rootNode = computed(()=>{
   return store.currentFlow?.getRoot();
-})
+});
+const minPanelWidth=computed(()=>{
+  const root = store.currentFlow?.getRoot();
+  if(store.currentFlow && root){
+    return store.currentFlow?.getColumns(root) * 300 + 'px';
+  }else{
+    return "300px";
+  }
+});
 
 const addNode = (node: IActionNode, inputPoint: string) => {
   if (drawerRight.value) {
@@ -245,4 +257,10 @@ onMounted(() => {
   top: 50px;
   z-index: 999;
 }
+.expand{
+  position: fixed;
+  left: 0px;
+  top: 50%;
+  z-index: 9999;
+}
 </style>

plugin/kintone-addins/readme.md

@@ -78,9 +78,10 @@
 | 4   | フィールド選択     | FieldInput       | システムのフィールドを選択するための入力コンポーネントです。   |
 | 5   | 選択リスト        | SelectBox        | 複数のオプションから選択するためのドロップダウンリストです。   |
 | 6   | 条件式設定       | ConditionInput   | 条件式やロジックを入力するためのコンポーネントです。         |
-| 7   | 色選択       | ColorPicker   | 色を設定する（追加予定中）         |
+| 7   | イベント設定       |EventSetter    | ボタンイベント設定のコンポーネントです。         |
-| 8   | 他のアプリのフィールド選択       | AppFieldPicker   | 他のアプリのフィールドを選択する（追加予定中）         |
+| 8   | 色選択       | ColorPicker   | 色を設定する（追加予定中）         |
-| 9   |ユーザー選択       | UserPicker   | ユーザーを選択する（追加予定中）         |
+| 9   | 他のアプリのフィールド選択       | AppFieldPicker   | 他のアプリのフィールドを選択する（追加予定中）         |
+| 10  |ユーザー選択       | UserPicker   | ユーザーを選択する（追加予定中）         |
 
 ## 2.アクションアドインの開発
 
@@ -268,7 +269,10 @@ npm run build:dev
 3. **ローカルでプラグインをテストする**
 1. kintone-addinsをPreviewで起動する
 ```bash
+yarn build:dev
 yarn preview
+#またはyarn devは　yarn build:dev + yarn preview　と同じです
+yarn dev
 ```
 2. **ngrokをインストールする**
     1. [ngrok の公式ウェブサイト](https://ngrok.com/)にアクセスします。

plugin/kintone-addins/src/actions/condition-action.ts

@@ -0,0 +1,109 @@
+
+import { actionAddins } from ".";
+import {  IAction,IActionResult, IActionNode, IActionProperty, IContext } from "../types/ActionTypes";
+import { ConditionTree } from '../types/Conditions';
+/**
+ * アクションの属性定義
+ */
+interface ICondition{
+    condition:string;
+    verName:string;
+}
+/**
+ * 条件分岐アクション
+ */
+export class ConditionAction implements IAction{
+    name: string;
+    actionProps: IActionProperty[];
+    props:ICondition;
+    constructor(){
+        this.name="条件式";
+        this.actionProps=[];
+        this.props={
+            condition:'',
+            verName:''
+        }
+        //アクションを登録する
+        this.register();
+    }
+    /**
+     * アクションの実行を呼び出す
+     * @param actionNode 
+     * @param event 
+     * @returns 
+     */
+    async process(actionNode:IActionNode,event:any,context:IContext):Promise<IActionResult> {
+        let result={
+            canNext:true,
+            result:''
+        };
+        try{
+            //属性設定を取得する
+            this.actionProps=actionNode.actionProps;
+            if (!('condition' in actionNode.ActionValue) && !('verName' in actionNode.ActionValue)) {
+                return result
+            }
+            this.props = actionNode.ActionValue as ICondition;
+            //条件式の計算結果を取得
+            const conditionResult = this.getConditionResult(context);
+            console.log("条件計算結果:",conditionResult);
+            if(conditionResult){
+                result= {
+                    canNext:true,
+                    result:'はい'
+                  }
+            }else{
+                result= {
+                    canNext:true,
+                    result:'いいえ'
+                  }
+            }
+            if(this.props.verName){
+                context.variables[this.props.verName]=result.result;
+            }
+            return result;
+        }catch(error){
+            event.error=error;
+            console.error(error);
+            result.canNext=false;
+            return result;
+        }
+    }
+    /**
+     * 
+     * @param context 条件式を実行する
+     * @returns 
+     */
+    getConditionResult(context:any):boolean{
+        const tree =this.getCondition(this.props.condition);
+        if(!tree){
+            //条件を設定されていません
+            return true;
+        }
+        return tree.evaluate(tree.root,context);
+    }
+
+    /**
+     * @param condition 条件式ツリーを取得する
+     * @returns 
+     */
+    getCondition(condition:string):ConditionTree|null{
+        try{
+            const tree = new ConditionTree();
+            tree.fromJson(condition);
+            if(tree.getConditions(tree.root).length>0){
+                return tree;
+            }else{
+                return null; 
+            }
+        }catch(error){
+            return null;
+        }
+    }
+
+    register(): void {
+        actionAddins[this.name]=this;
+    }
+    
+}
+new ConditionAction();

plugin/kintone-addins/src/types/action-process.ts

@@ -5,6 +5,7 @@ import '../actions/auto-numbering';
 import '../actions/field-shown';
 import '../actions/error-show';
 import '../actions/button-add';
+import '../actions/condition-action';
 import { ActionFlow,IActionFlow, IActionResult,IContext } from "./ActionTypes";
 
 export class ActionProcess{