@operato/board 0.2.49 → 0.3.1

package/custom-elements.json

@@ -7,6 +7,22 @@
       "path": "src/index.ts",
       "declarations": [],
       "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./types"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "registerDefaultGroups",
+          "declaration": {
+            "name": "registerDefaultGroups",
+            "module": "./component/register-default-groups"
+          }
+        },
         {
           "kind": "js",
           "name": "*",
@@ -30,6 +46,249 @@
             "name": "*",
             "package": "./ox-board-modeller"
           }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./ox-board-list"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/ox-board-list.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "BoardList",
+          "members": [
+            {
+              "kind": "field",
+              "name": "creatable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "creatable"
+            },
+            {
+              "kind": "field",
+              "name": "config",
+              "type": {
+                "text": "any"
+              },
+              "attribute": "config"
+            },
+            {
+              "kind": "field",
+              "name": "data",
+              "type": {
+                "text": "any"
+              },
+              "attribute": "data"
+            },
+            {
+              "kind": "field",
+              "name": "mode",
+              "type": {
+                "text": "'GRID' | 'LIST' | 'CARD'"
+              },
+              "default": "'CARD'",
+              "attribute": "mode"
+            },
+            {
+              "kind": "field",
+              "name": "groupId",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "groupId"
+            },
+            {
+              "kind": "field",
+              "name": "groups",
+              "type": {
+                "text": "any[]"
+              },
+              "default": "[]",
+              "attribute": "groups"
+            },
+            {
+              "kind": "field",
+              "name": "favorites",
+              "type": {
+                "text": "any[]"
+              },
+              "default": "[]",
+              "attribute": "favorites"
+            },
+            {
+              "kind": "field",
+              "name": "_showSpinner",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "grist",
+              "type": {
+                "text": "DataGrist"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "fetchHandler",
+              "parameters": [
+                {
+                  "name": "{ page, limit, sorters = [] }",
+                  "type": {
+                    "text": "{ page: number; limit: number; sorters: SortersConfig }"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "gristConfig"
+            },
+            {
+              "kind": "method",
+              "name": "refresh"
+            },
+            {
+              "kind": "method",
+              "name": "getBoards",
+              "parameters": [
+                {
+                  "name": "{\n    page = 1,\n    limit = 30,\n    sorters = []\n  }",
+                  "default": "{}",
+                  "type": {
+                    "text": "{ page?: number; limit?: number; sorters?: SortersConfig }"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "getFavoriteBoards",
+              "parameters": [
+                {
+                  "name": "{ page = 1, limit = 30 }",
+                  "default": "{}"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "refreshBoards"
+            },
+            {
+              "kind": "method",
+              "name": "onCreateBoard"
+            },
+            {
+              "kind": "method",
+              "name": "notify",
+              "parameters": [
+                {
+                  "name": "level",
+                  "type": {
+                    "text": "'warn' | 'error' | 'info'"
+                  }
+                },
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "any"
+                  }
+                },
+                {
+                  "name": "ex",
+                  "optional": true,
+                  "type": {
+                    "text": "Error"
+                  }
+                }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "name": "creatable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "creatable"
+            },
+            {
+              "name": "config",
+              "type": {
+                "text": "any"
+              },
+              "fieldName": "config"
+            },
+            {
+              "name": "data",
+              "type": {
+                "text": "any"
+              },
+              "fieldName": "data"
+            },
+            {
+              "name": "mode",
+              "type": {
+                "text": "'GRID' | 'LIST' | 'CARD'"
+              },
+              "default": "'CARD'",
+              "fieldName": "mode"
+            },
+            {
+              "name": "groupId",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "groupId"
+            },
+            {
+              "name": "groups",
+              "type": {
+                "text": "any[]"
+              },
+              "default": "[]",
+              "fieldName": "groups"
+            },
+            {
+              "name": "favorites",
+              "type": {
+                "text": "any[]"
+              },
+              "default": "[]",
+              "fieldName": "favorites"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "ox-board-list",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "ox-board-list",
+          "declaration": {
+            "name": "BoardList",
+            "module": "src/ox-board-list.ts"
+          }
         }
       ]
     },
@@ -42,6 +301,58 @@
           "description": "",
           "name": "BoardModeller",
           "members": [
+            {
+              "kind": "method",
+              "name": "registerGroup",
+              "static": true,
+              "parameters": [
+                {
+                  "name": "group",
+                  "type": {
+                    "text": "ComponentGroup"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "registerTemplate",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "templates",
+                  "type": {
+                    "text": "ComponentTemplate[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "groups",
+              "type": {
+                "text": "ComponentGroup[]"
+              },
+              "static": true
+            },
+            {
+              "kind": "method",
+              "name": "getGroup",
+              "static": true,
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "boardName",
@@ -1109,21 +1420,849 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/modeller/edit-toolbar-style.ts",
+      "path": "src/graphql/board.ts",
       "declarations": [
         {
-          "kind": "variable",
-          "name": "style",
-          "default": "css`\n  :host {\n    background-color: var(--edit-toolbar-background-color, #394e64);\n\n    overflow-x: hidden;\n  }\n\n  [tools] {\n    display: flex;\n    align-items: center;\n    overflow: none;\n    padding: 0px 10px;\n  }\n\n  [tools] > * {\n    padding: 0px;\n  }\n\n  [tools] > span[button] {\n    min-width: 30px;\n  }\n\n  [tools] > span[padding] {\n    flex: 1;\n  }\n\n  [tools] > .vline {\n    display: block;\n    flex: none;\n    border-left: 1px solid rgba(255, 255, 255, 0.2);\n    border-right: 1px solid rgba(0, 0, 0, 0.15);\n    width: 0px;\n    height: 18px;\n    margin: 0 3px;\n  }\n\n  span[button] {\n    min-height: 35px;\n\n    background: url('/assets/images/icon-htoolbar.png') no-repeat;\n    background-position-x: 50%;\n    opacity: 0.8;\n  }\n  span[button]:hover {\n    opacity: 1;\n    background-color: rgba(0, 0, 0, 0.1);\n    cursor: pointer;\n  }\n\n  #fullscreen,\n  #toggle-property {\n    flex: none;\n  }\n\n  #align-left {\n    background-position-y: 8px;\n  }\n\n  #align-center {\n    background-position-y: -42px;\n  }\n\n  #align-right {\n    background-position-y: -92px;\n  }\n\n  #align-top {\n    background-position-y: -142px;\n  }\n\n  #align-middle {\n    background-position-y: -192px;\n  }\n\n  #align-bottom {\n    background-position-y: -242px;\n  }\n\n  #undo {\n    background-position-y: -592px;\n  }\n\n  #redo {\n    background-position-y: -642px;\n  }\n\n  #front {\n    background-position-y: -292px;\n  }\n\n  #back {\n    background-position-y: -342px;\n  }\n\n  #forward {\n    background-position-y: -392px;\n  }\n\n  #backward {\n    background-position-y: -442px;\n  }\n\n  #symmetry-x {\n    background-position-y: -492px;\n  }\n\n  #symmetry-y {\n    background-position-y: -542px;\n  }\n\n  #group {\n    background-position-y: -492px;\n  }\n\n  #ungroup {\n    background-position-y: -542px;\n  }\n\n  #fullscreen {\n    background-position-y: -692px;\n  }\n\n  #toggle-property {\n    background-position-y: -692px;\n    float: right;\n  }\n\n  #zoomin {\n    background-position-y: -742px;\n  }\n\n  #zoomout {\n    background-position-y: -792px;\n  }\n\n  #fit-scene {\n    background-position-y: -1492px;\n  }\n\n  #cut {\n    background-position-y: -842px;\n  }\n\n  #copy {\n    background-position-y: -892px;\n  }\n\n  #paste {\n    background-position-y: -942px;\n  }\n\n  #delete {\n    background-position-y: -992px;\n  }\n\n  #font-increase {\n    background-position-y: -1042px;\n  }\n\n  #font-decrease {\n    background-position-y: -1092px;\n  }\n\n  #style-copy {\n    background-position-y: -1142px;\n  }\n\n  #context-menu {\n    background-position-y: -692px;\n  }\n\n  #symmetry-x {\n    background-position-y: -1192px;\n  }\n\n  #symmetry-y {\n    background-position-y: -1242px;\n  }\n\n  #rotate-cw {\n    background-position-y: -1292px;\n  }\n\n  #rotate-ccw {\n    background-position-y: -1342px;\n  }\n\n  #distribute-horizontal {\n    background-position-y: -1542px;\n  }\n\n  #distribute-vertical {\n    background-position-y: -1593px;\n  }\n\n  #toggle-property {\n    background-position-y: -1392px;\n  }\n\n  #preview {\n    background-position-y: -1640px;\n  }\n\n  /* bigger buttons */\n  #fullscreen {\n    background: url('/assets/images/icon-fullscreen.png') 50% 10px no-repeat;\n    width: var(--edit-toolbar-bigger-icon-size);\n    height: var(--edit-toolbar-bigger-icon-size);\n    border-left: var(--edit-toolbar-bigger-icon-line);\n  }\n\n  #toggle-property {\n    background: url('/assets/images/icon-collapse.png') 80% 10px no-repeat;\n    width: var(--edit-toolbar-bigger-icon-size);\n    height: var(--edit-toolbar-bigger-icon-size);\n    border-left: var(--edit-toolbar-bigger-icon-line);\n  }\n\n  #toggle-property[active] {\n    background: url(/assets/images/icon-collapse-active.png) 80% 10px no-repeat;\n  }\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "style",
-          "declaration": {
-            "name": "style",
-            "module": "src/modeller/edit-toolbar-style.ts"
+          "kind": "function",
+          "name": "fetchBoardList",
+          "parameters": [
+            {
+              "name": "listParam",
+              "default": "{}"
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "fetchBoard",
+          "parameters": [
+            {
+              "name": "id",
+              "type": {
+                "text": "string"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "createBoard",
+          "parameters": [
+            {
+              "name": "board",
+              "type": {
+                "text": "Board"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "updateBoard",
+          "parameters": [
+            {
+              "name": "board",
+              "type": {
+                "text": "Board"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "deleteBoard",
+          "parameters": [
+            {
+              "name": "id",
+              "type": {
+                "text": "string"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "fetchBoardList",
+          "declaration": {
+            "name": "fetchBoardList",
+            "module": "src/graphql/board.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "fetchBoard",
+          "declaration": {
+            "name": "fetchBoard",
+            "module": "src/graphql/board.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "createBoard",
+          "declaration": {
+            "name": "createBoard",
+            "module": "src/graphql/board.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "updateBoard",
+          "declaration": {
+            "name": "updateBoard",
+            "module": "src/graphql/board.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "deleteBoard",
+          "declaration": {
+            "name": "deleteBoard",
+            "module": "src/graphql/board.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/graphql/favorite-board.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "fetchFavoriteBoardList",
+          "parameters": [
+            {
+              "name": "listParam",
+              "default": "{}"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "fetchFavoriteBoardList",
+          "declaration": {
+            "name": "fetchFavoriteBoardList",
+            "module": "src/graphql/favorite-board.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/graphql/group.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "fetchGroup",
+          "parameters": [
+            {
+              "name": "id",
+              "type": {
+                "text": "string"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "updateGroup",
+          "parameters": [
+            {
+              "name": "group",
+              "type": {
+                "text": "BoardGroup"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "deleteGroup",
+          "parameters": [
+            {
+              "name": "id",
+              "type": {
+                "text": "string"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "fetchGroupList"
+        },
+        {
+          "kind": "function",
+          "name": "createGroup",
+          "parameters": [
+            {
+              "name": "group",
+              "type": {
+                "text": "BoardGroup"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "joinGroup",
+          "parameters": [
+            {
+              "name": "boardId",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "groupId",
+              "type": {
+                "text": "string"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "fetchGroup",
+          "declaration": {
+            "name": "fetchGroup",
+            "module": "src/graphql/group.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "updateGroup",
+          "declaration": {
+            "name": "updateGroup",
+            "module": "src/graphql/group.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "deleteGroup",
+          "declaration": {
+            "name": "deleteGroup",
+            "module": "src/graphql/group.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "fetchGroupList",
+          "declaration": {
+            "name": "fetchGroupList",
+            "module": "src/graphql/group.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "createGroup",
+          "declaration": {
+            "name": "createGroup",
+            "module": "src/graphql/group.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "joinGroup",
+          "declaration": {
+            "name": "joinGroup",
+            "module": "src/graphql/group.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/graphql/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./board"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./group"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./play-group"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./favorite-board"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/graphql/play-group.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "fetchPlayGroupList"
+        },
+        {
+          "kind": "function",
+          "name": "fetchPlayGroup",
+          "parameters": [
+            {
+              "name": "groupId",
+              "type": {
+                "text": "string"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "createPlayGroup",
+          "parameters": [
+            {
+              "name": "group",
+              "type": {
+                "text": "PlayGroup"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "updatePlayGroup",
+          "parameters": [
+            {
+              "name": "group",
+              "type": {
+                "text": "PlayGroup"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "deletePlayGroup",
+          "parameters": [
+            {
+              "name": "id",
+              "type": {
+                "text": "string"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "joinPlayGroup",
+          "parameters": [
+            {
+              "name": "boardId",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "group",
+              "type": {
+                "text": "PlayGroup"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "leavePlayGroup",
+          "parameters": [
+            {
+              "name": "boardId",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "groupId",
+              "type": {
+                "text": "string"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "fetchPlayGroupList",
+          "declaration": {
+            "name": "fetchPlayGroupList",
+            "module": "src/graphql/play-group.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "fetchPlayGroup",
+          "declaration": {
+            "name": "fetchPlayGroup",
+            "module": "src/graphql/play-group.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "createPlayGroup",
+          "declaration": {
+            "name": "createPlayGroup",
+            "module": "src/graphql/play-group.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "updatePlayGroup",
+          "declaration": {
+            "name": "updatePlayGroup",
+            "module": "src/graphql/play-group.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "deletePlayGroup",
+          "declaration": {
+            "name": "deletePlayGroup",
+            "module": "src/graphql/play-group.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "joinPlayGroup",
+          "declaration": {
+            "name": "joinPlayGroup",
+            "module": "src/graphql/play-group.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "leavePlayGroup",
+          "declaration": {
+            "name": "leavePlayGroup",
+            "module": "src/graphql/play-group.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/player/ox-board-player-carousel.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "BoardPlayerCarousel",
+          "members": [
+            {
+              "kind": "field",
+              "name": "axis",
+              "type": {
+                "text": "string"
+              },
+              "default": "'y'",
+              "attribute": "axis"
+            },
+            {
+              "kind": "field",
+              "name": "rows",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "attribute": "rows"
+            },
+            {
+              "kind": "field",
+              "name": "columns",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "attribute": "columns"
+            },
+            {
+              "kind": "field",
+              "name": "_slotObserver",
+              "type": {
+                "text": "MutationObserver | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_boundResize",
+              "type": {
+                "text": "() => void | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_rotation",
+              "type": {
+                "text": "number"
+              },
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "_theta",
+              "type": {
+                "text": "number"
+              },
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "_radius",
+              "type": {
+                "text": "number"
+              },
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "_rotateFn",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_panelCount",
+              "type": {
+                "text": "number"
+              },
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "_panelSize",
+              "type": {
+                "text": "number"
+              },
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "_isHorizontal",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true"
+            },
+            {
+              "kind": "field",
+              "name": "_slot",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_carousel",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "build"
+            },
+            {
+              "kind": "method",
+              "name": "start"
+            },
+            {
+              "kind": "method",
+              "name": "stop"
+            },
+            {
+              "kind": "method",
+              "name": "_onAxisChanged"
+            },
+            {
+              "kind": "method",
+              "name": "_transform"
+            },
+            {
+              "kind": "method",
+              "name": "previous"
+            },
+            {
+              "kind": "method",
+              "name": "next"
+            }
+          ],
+          "events": [
+            {
+              "name": "transform",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "axis",
+              "type": {
+                "text": "string"
+              },
+              "default": "'y'",
+              "fieldName": "axis"
+            },
+            {
+              "name": "rows",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "fieldName": "rows"
+            },
+            {
+              "name": "columns",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "fieldName": "columns"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "ox-board-player-carousel",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "ox-board-player-carousel",
+          "declaration": {
+            "name": "BoardPlayerCarousel",
+            "module": "src/player/ox-board-player-carousel.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/player/ox-board-player-grid.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "자식 컴포넌트들을 그리드형태로 화면에 배치하여 한꺼번에 디스플레이해주는 컴포넌트.\nExample:\n <ox-board-player-grid rows=\"3\" columns=\"3\" tabindex=\"0\" focus>\n   <div page>A</div>\n   <div page>B</div>\n   <div page>C</div>\n   <div page>D</div>\n </ox-board-player-grid>",
+          "name": "BoardPlayerGrid",
+          "members": [
+            {
+              "kind": "field",
+              "name": "rows",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "attribute": "rows"
+            },
+            {
+              "kind": "field",
+              "name": "columns",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "attribute": "columns"
+            },
+            {
+              "kind": "field",
+              "name": "_slotObserver",
+              "type": {
+                "text": "MutationObserver | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_slot",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "start"
+            },
+            {
+              "kind": "method",
+              "name": "stop"
+            },
+            {
+              "kind": "method",
+              "name": "next"
+            },
+            {
+              "kind": "method",
+              "name": "previous"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "rows",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "fieldName": "rows"
+            },
+            {
+              "name": "columns",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "fieldName": "columns"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "ox-board-player-grid",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "ox-board-player-grid",
+          "declaration": {
+            "name": "BoardPlayerGrid",
+            "module": "src/player/ox-board-player-grid.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/player/ox-board-wrapper.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "BoardWrapper",
+          "members": [
+            {
+              "kind": "field",
+              "name": "sceneId",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "sceneId"
+            },
+            {
+              "kind": "field",
+              "name": "provider",
+              "type": {
+                "text": "any"
+              },
+              "attribute": "provider"
+            },
+            {
+              "kind": "field",
+              "name": "_scene",
+              "type": {
+                "text": "any"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_targetEl",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_releaseRef"
+            },
+            {
+              "kind": "method",
+              "name": "_onSceneIdChanged"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "sceneId",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "sceneId"
+            },
+            {
+              "name": "provider",
+              "type": {
+                "text": "any"
+              },
+              "fieldName": "provider"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "ox-board-wrapper",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "ox-board-wrapper",
+          "declaration": {
+            "name": "BoardWrapper",
+            "module": "src/player/ox-board-wrapper.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/modeller/edit-toolbar-style.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "style",
+          "default": "css`\n  :host {\n    background-color: var(--edit-toolbar-background-color, #394e64);\n\n    overflow-x: hidden;\n  }\n\n  [tools] {\n    display: flex;\n    align-items: center;\n    overflow: none;\n    padding: 0px 10px;\n  }\n\n  [tools] > * {\n    padding: 0px;\n  }\n\n  [tools] > span[button] {\n    min-width: 30px;\n  }\n\n  [tools] > span[padding] {\n    flex: 1;\n  }\n\n  [tools] > .vline {\n    display: block;\n    flex: none;\n    border-left: 1px solid rgba(255, 255, 255, 0.2);\n    border-right: 1px solid rgba(0, 0, 0, 0.15);\n    width: 0px;\n    height: 18px;\n    margin: 0 3px;\n  }\n\n  span[button] {\n    min-height: 35px;\n\n    background: url('/assets/images/icon-htoolbar.png') no-repeat;\n    background-position-x: 50%;\n    opacity: 0.8;\n  }\n  span[button]:hover {\n    opacity: 1;\n    background-color: rgba(0, 0, 0, 0.1);\n    cursor: pointer;\n  }\n\n  #fullscreen,\n  #toggle-property {\n    flex: none;\n  }\n\n  #align-left {\n    background-position-y: 8px;\n  }\n\n  #align-center {\n    background-position-y: -42px;\n  }\n\n  #align-right {\n    background-position-y: -92px;\n  }\n\n  #align-top {\n    background-position-y: -142px;\n  }\n\n  #align-middle {\n    background-position-y: -192px;\n  }\n\n  #align-bottom {\n    background-position-y: -242px;\n  }\n\n  #undo {\n    background-position-y: -592px;\n  }\n\n  #redo {\n    background-position-y: -642px;\n  }\n\n  #front {\n    background-position-y: -292px;\n  }\n\n  #back {\n    background-position-y: -342px;\n  }\n\n  #forward {\n    background-position-y: -392px;\n  }\n\n  #backward {\n    background-position-y: -442px;\n  }\n\n  #symmetry-x {\n    background-position-y: -492px;\n  }\n\n  #symmetry-y {\n    background-position-y: -542px;\n  }\n\n  #group {\n    background-position-y: -492px;\n  }\n\n  #ungroup {\n    background-position-y: -542px;\n  }\n\n  #fullscreen {\n    background-position-y: -692px;\n  }\n\n  #toggle-property {\n    background-position-y: -692px;\n    float: right;\n  }\n\n  #zoomin {\n    background-position-y: -742px;\n  }\n\n  #zoomout {\n    background-position-y: -792px;\n  }\n\n  #fit-scene {\n    background-position-y: -1492px;\n  }\n\n  #cut {\n    background-position-y: -842px;\n  }\n\n  #copy {\n    background-position-y: -892px;\n  }\n\n  #paste {\n    background-position-y: -942px;\n  }\n\n  #delete {\n    background-position-y: -992px;\n  }\n\n  #font-increase {\n    background-position-y: -1042px;\n  }\n\n  #font-decrease {\n    background-position-y: -1092px;\n  }\n\n  #style-copy {\n    background-position-y: -1142px;\n  }\n\n  #context-menu {\n    background-position-y: -692px;\n  }\n\n  #symmetry-x {\n    background-position-y: -1192px;\n  }\n\n  #symmetry-y {\n    background-position-y: -1242px;\n  }\n\n  #rotate-cw {\n    background-position-y: -1292px;\n  }\n\n  #rotate-ccw {\n    background-position-y: -1342px;\n  }\n\n  #distribute-horizontal {\n    background-position-y: -1542px;\n  }\n\n  #distribute-vertical {\n    background-position-y: -1593px;\n  }\n\n  #toggle-property {\n    background-position-y: -1392px;\n  }\n\n  #preview {\n    background-position-y: -1640px;\n  }\n\n  /* bigger buttons */\n  #fullscreen {\n    background: url('/assets/images/icon-fullscreen.png') 50% 10px no-repeat;\n    width: var(--edit-toolbar-bigger-icon-size);\n    height: var(--edit-toolbar-bigger-icon-size);\n    border-left: var(--edit-toolbar-bigger-icon-line);\n  }\n\n  #toggle-property {\n    background: url('/assets/images/icon-collapse.png') 80% 10px no-repeat;\n    width: var(--edit-toolbar-bigger-icon-size);\n    height: var(--edit-toolbar-bigger-icon-size);\n    border-left: var(--edit-toolbar-bigger-icon-line);\n  }\n\n  #toggle-property[active] {\n    background: url(/assets/images/icon-collapse-active.png) 80% 10px no-repeat;\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "style",
+          "declaration": {
+            "name": "style",
+            "module": "src/modeller/edit-toolbar-style.ts"
           }
         }
       ]
@@ -1502,296 +2641,88 @@
                   "name": "e",
                   "type": {
                     "text": "TouchEvent | string"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "onTapSymmetryX"
-            },
-            {
-              "kind": "method",
-              "name": "onTapSymmetryY"
-            },
-            {
-              "kind": "method",
-              "name": "onTapRotateCW"
-            },
-            {
-              "kind": "method",
-              "name": "onTapRotateCCW"
-            },
-            {
-              "kind": "method",
-              "name": "onTapGroup"
-            },
-            {
-              "kind": "method",
-              "name": "onTapUngroup"
-            },
-            {
-              "kind": "method",
-              "name": "onTapFullscreen"
-            },
-            {
-              "kind": "method",
-              "name": "onTapToggle"
-            },
-            {
-              "kind": "method",
-              "name": "onTapFitScene"
-            },
-            {
-              "kind": "method",
-              "name": "onTapPreview"
-            },
-            {
-              "kind": "method",
-              "name": "onTapDownloadModel"
-            },
-            {
-              "kind": "method",
-              "name": "onTapDistribute",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "TouchEvent | string"
-                  }
-                }
-              ]
-            }
-          ],
-          "events": [
-            {
-              "name": "modeller-fullscreen",
-              "type": {
-                "text": "CustomEvent"
-              }
-            },
-            {
-              "name": "hide-property-changed",
-              "type": {
-                "text": "CustomEvent"
-              }
-            },
-            {
-              "name": "open-preview",
-              "type": {
-                "text": "CustomEvent"
-              }
-            },
-            {
-              "name": "download-model",
-              "type": {
-                "text": "CustomEvent"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "scene",
-              "type": {
-                "text": "Scene | undefined"
-              },
-              "fieldName": "scene"
-            },
-            {
-              "name": "selected",
-              "type": {
-                "text": "any[]"
-              },
-              "default": "[]",
-              "fieldName": "selected"
-            },
-            {
-              "name": "hideProperty",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "hideProperty"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "edit-toolbar",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "EditToolbar",
-          "declaration": {
-            "name": "EditToolbar",
-            "module": "src/modeller/edit-toolbar.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "edit-toolbar",
-          "declaration": {
-            "name": "EditToolbar",
-            "module": "src/modeller/edit-toolbar.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/player/ox-board-player-carousel.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "BoardPlayerCarousel",
-          "members": [
-            {
-              "kind": "field",
-              "name": "axis",
-              "type": {
-                "text": "string"
-              },
-              "default": "'y'",
-              "attribute": "axis"
-            },
-            {
-              "kind": "field",
-              "name": "rows",
-              "type": {
-                "text": "number"
-              },
-              "default": "1",
-              "attribute": "rows"
-            },
-            {
-              "kind": "field",
-              "name": "columns",
-              "type": {
-                "text": "number"
-              },
-              "default": "1",
-              "attribute": "columns"
-            },
-            {
-              "kind": "field",
-              "name": "_slotObserver",
-              "type": {
-                "text": "MutationObserver | undefined"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_boundResize",
-              "type": {
-                "text": "() => void | undefined"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_rotation",
-              "type": {
-                "text": "number"
-              },
-              "default": "0"
-            },
-            {
-              "kind": "field",
-              "name": "_theta",
-              "type": {
-                "text": "number"
-              },
-              "default": "0"
-            },
-            {
-              "kind": "field",
-              "name": "_radius",
-              "type": {
-                "text": "number"
-              },
-              "default": "0"
-            },
-            {
-              "kind": "field",
-              "name": "_rotateFn",
-              "type": {
-                "text": "string | undefined"
-              }
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "_panelCount",
-              "type": {
-                "text": "number"
-              },
-              "default": "0"
+              "kind": "method",
+              "name": "onTapSymmetryX"
             },
             {
-              "kind": "field",
-              "name": "_panelSize",
-              "type": {
-                "text": "number"
-              },
-              "default": "0"
+              "kind": "method",
+              "name": "onTapSymmetryY"
             },
             {
-              "kind": "field",
-              "name": "_isHorizontal",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true"
+              "kind": "method",
+              "name": "onTapRotateCW"
             },
             {
-              "kind": "field",
-              "name": "_slot",
-              "type": {
-                "text": "HTMLSlotElement"
-              }
+              "kind": "method",
+              "name": "onTapRotateCCW"
             },
             {
-              "kind": "field",
-              "name": "_carousel",
-              "type": {
-                "text": "HTMLElement"
-              }
+              "kind": "method",
+              "name": "onTapGroup"
             },
             {
               "kind": "method",
-              "name": "build"
+              "name": "onTapUngroup"
             },
             {
               "kind": "method",
-              "name": "start"
+              "name": "onTapFullscreen"
             },
             {
               "kind": "method",
-              "name": "stop"
+              "name": "onTapToggle"
             },
             {
               "kind": "method",
-              "name": "_onAxisChanged"
+              "name": "onTapFitScene"
             },
             {
               "kind": "method",
-              "name": "_transform"
+              "name": "onTapPreview"
             },
             {
               "kind": "method",
-              "name": "previous"
+              "name": "onTapDownloadModel"
             },
             {
               "kind": "method",
-              "name": "next"
+              "name": "onTapDistribute",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "TouchEvent | string"
+                  }
+                }
+              ]
             }
           ],
           "events": [
             {
-              "name": "transform",
+              "name": "modeller-fullscreen",
+              "type": {
+                "text": "CustomEvent"
+              }
+            },
+            {
+              "name": "hide-property-changed",
+              "type": {
+                "text": "CustomEvent"
+              }
+            },
+            {
+              "name": "open-preview",
+              "type": {
+                "text": "CustomEvent"
+              }
+            },
+            {
+              "name": "download-model",
               "type": {
                 "text": "CustomEvent"
               }
@@ -1799,223 +2730,463 @@
           ],
           "attributes": [
             {
-              "name": "axis",
+              "name": "scene",
               "type": {
-                "text": "string"
+                "text": "Scene | undefined"
               },
-              "default": "'y'",
-              "fieldName": "axis"
+              "fieldName": "scene"
             },
             {
-              "name": "rows",
+              "name": "selected",
               "type": {
-                "text": "number"
+                "text": "any[]"
               },
-              "default": "1",
-              "fieldName": "rows"
+              "default": "[]",
+              "fieldName": "selected"
             },
             {
-              "name": "columns",
+              "name": "hideProperty",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "1",
-              "fieldName": "columns"
+              "default": "false",
+              "fieldName": "hideProperty"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "ox-board-player-carousel",
-          "customElement": true
+          "tagName": "edit-toolbar",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "EditToolbar",
+          "declaration": {
+            "name": "EditToolbar",
+            "module": "src/modeller/edit-toolbar.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "edit-toolbar",
+          "declaration": {
+            "name": "EditToolbar",
+            "module": "src/modeller/edit-toolbar.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/component/3d.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "threed",
+          "type": {
+            "text": "ComponentGroup"
+          },
+          "default": "{\n  name: '3D',\n  description: 'a group of various 3D base components',\n  icon,\n  templates: []\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "threed",
+          "declaration": {
+            "name": "threed",
+            "module": "src/component/3d.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/component/chart-and-gauge.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "chartAndGauge",
+          "type": {
+            "text": "ComponentGroup"
+          },
+          "default": "{\n  name: 'chartAndGauge',\n  description: 'a group of various charts and gauges',\n  icon,\n  templates: []\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "chartAndGauge",
+          "declaration": {
+            "name": "chartAndGauge",
+            "module": "src/component/chart-and-gauge.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/component/container.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "container",
+          "type": {
+            "text": "ComponentGroup"
+          },
+          "default": "{\n  name: 'container',\n  description: 'a group of various containers',\n  icon,\n  templates: [\n    {\n      type: 'container',\n      description: 'general container',\n      icon: iconContainer,\n      group: 'container',\n      model: {\n        type: 'container',\n        left: 100,\n        top: 100,\n        width: 100,\n        height: 100,\n        fillStyle: '#fff',\n        strokeStyle: '#999',\n        alpha: 1,\n        hidden: false,\n        lineWidth: 1,\n        lineDash: 'solid',\n        lineCap: 'butt'\n      }\n    },\n    {\n      type: 'popup',\n      description: 'popup window',\n      icon: popup,\n      group: 'container',\n      model: {\n        type: 'popup',\n        left: 100,\n        top: 100,\n        width: 100,\n        height: 100,\n        fillStyle: '#fff',\n        strokeStyle: 'DarkGoldenRod',\n        hidden: true\n      }\n    }\n  ]\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "container",
+          "declaration": {
+            "name": "container",
+            "module": "src/component/container.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/component/data-source.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "dataSource",
+          "type": {
+            "text": "ComponentGroup"
+          },
+          "default": "{\n  name: 'dataSource',\n  description: 'a group of various data sources',\n  icon,\n  templates: []\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "dataSource",
+          "declaration": {
+            "name": "dataSource",
+            "module": "src/component/data-source.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/component/etc.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "etc",
+          "type": {
+            "text": "ComponentGroup"
+          },
+          "default": "{\n  name: 'etc',\n  description: 'a group of components that have not yet been defined.',\n  icon,\n  templates: [\n    {\n      type: 'info-window',\n      description: 'information window',\n      icon: infoWindow,\n      group: 'etc',\n      model: {\n        type: 'info-window',\n        left: 10,\n        top: 10,\n        width: 50,\n        height: 50,\n        fillStyle: '#fff',\n        strokeStyle: 'DarkGoldenRod',\n        hidden: true,\n        frontSideTemplate:\n          \"<h2 id='xxx'>\\n\\t<%= text %>\\n</h2>\\n<img src='https://www.tutorialspoint.com/images/html.gif' alt='HTML Tutorial' height='150' width='140' />\",\n        backSideTemplate:\n          \"<h2 id='yyy'>\\n\\t<%= text %>\\n</h2>\\n<img src='https://www.tutorialspoint.com/images/html.gif' alt='HTML Tutorial' height='150' width='140' />\",\n        style:\n          '#yyy {\\n\\tbackground-color:navy;\\n\\tcolor:white\\n}\\n#xxx, #yyy {\\n\\twhite-space:nowrap;\\n\\tmin-width:200px;\\n}'\n      }\n    },\n    {\n      type: 'local reference',\n      description: 'local reference',\n      icon: localReference,\n      group: 'etc',\n      model: {\n        type: 'local-ref',\n        left: 100,\n        top: 100,\n        width: 100,\n        height: 100,\n        fillStyle: '#fff',\n        strokeStyle: '#000',\n        alpha: 1,\n        hidden: false,\n        lineWidth: 1,\n        lineDash: 'solid',\n        lineCap: 'butt'\n      }\n    },\n    {\n      type: 'global reference',\n      description: 'global reference',\n      icon: globalReference,\n      group: 'etc',\n      model: {\n        type: 'global-ref',\n        left: 100,\n        top: 100,\n        width: 100,\n        height: 100,\n        fillStyle: '#fff',\n        strokeStyle: '#000',\n        alpha: 1,\n        hidden: false,\n        lineWidth: 1,\n        lineDash: 'solid',\n        lineCap: 'butt'\n      }\n    }\n  ]\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "etc",
+          "declaration": {
+            "name": "etc",
+            "module": "src/component/etc.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/component/form.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "form",
+          "type": {
+            "text": "ComponentGroup"
+          },
+          "default": "{\n  name: 'form',\n  description: 'a group of various input components that make up a data entry form',\n  icon,\n  templates: []\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "form",
+          "declaration": {
+            "name": "form",
+            "module": "src/component/form.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/component/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./shape"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./line"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./text-and-media"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./chart-and-gauge"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./table"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./data-source"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./3d"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./iot"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./form"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./warehouse"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./container"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./etc"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/component/iot.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "iot",
+          "type": {
+            "text": "ComponentGroup"
+          },
+          "default": "{\n  name: 'IoT',\n  description: 'a group of various IoT protocols',\n  icon,\n  templates: []\n}"
         }
       ],
       "exports": [
         {
-          "kind": "custom-element-definition",
-          "name": "ox-board-player-carousel",
+          "kind": "js",
+          "name": "iot",
           "declaration": {
-            "name": "BoardPlayerCarousel",
-            "module": "src/player/ox-board-player-carousel.ts"
+            "name": "iot",
+            "module": "src/component/iot.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/player/ox-board-player-grid.ts",
+      "path": "src/component/line.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "자식 컴포넌트들을 그리드형태로 화면에 배치하여 한꺼번에 디스플레이해주는 컴포넌트.\nExample:\n <ox-board-player-grid rows=\"3\" columns=\"3\" tabindex=\"0\" focus>\n   <div page>A</div>\n   <div page>B</div>\n   <div page>C</div>\n   <div page>D</div>\n </ox-board-player-grid>",
-          "name": "BoardPlayerGrid",
-          "members": [
-            {
-              "kind": "field",
-              "name": "rows",
-              "type": {
-                "text": "number"
-              },
-              "default": "1",
-              "attribute": "rows"
-            },
-            {
-              "kind": "field",
-              "name": "columns",
-              "type": {
-                "text": "number"
-              },
-              "default": "1",
-              "attribute": "columns"
-            },
-            {
-              "kind": "field",
-              "name": "_slotObserver",
-              "type": {
-                "text": "MutationObserver | undefined"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_slot",
-              "type": {
-                "text": "HTMLSlotElement"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "start"
-            },
-            {
-              "kind": "method",
-              "name": "stop"
-            },
-            {
-              "kind": "method",
-              "name": "next"
-            },
-            {
-              "kind": "method",
-              "name": "previous"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "rows",
-              "type": {
-                "text": "number"
-              },
-              "default": "1",
-              "fieldName": "rows"
-            },
-            {
-              "name": "columns",
-              "type": {
-                "text": "number"
-              },
-              "default": "1",
-              "fieldName": "columns"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
+          "kind": "variable",
+          "name": "line",
+          "type": {
+            "text": "ComponentGroup"
           },
-          "tagName": "ox-board-player-grid",
-          "customElement": true
+          "default": "{\n  name: 'line',\n  description: 'a group of various lines',\n  icon,\n  templates: [\n    {\n      type: 'line',\n      description: 'simple line',\n      icon: lineIcon,\n      group: 'line',\n      model: {\n        type: 'line',\n        x1: 100,\n        y1: 100,\n        x2: 200,\n        y2: 200,\n        fillStyle: '#fff',\n        strokeStyle: '#000',\n        alpha: 1,\n        hidden: false,\n        lineWidth: 3,\n        lineDash: 'solid',\n        lineCap: 'butt'\n      }\n    },\n    {\n      type: 'dash',\n      description: 'dash line',\n      icon: dash,\n      group: 'line',\n      model: {\n        type: 'line',\n        x1: 100,\n        y1: 100,\n        x2: 200,\n        y2: 200,\n        fillStyle: '#fff',\n        strokeStyle: '#000',\n        alpha: 1,\n        hidden: false,\n        lineWidth: 3,\n        lineDash: 'round-dot',\n        lineCap: 'butt'\n      }\n    },\n    {\n      type: 'single arrow',\n      description: 'single arrow tip line',\n      icon: singleArrow,\n      group: 'line',\n      model: {\n        type: 'line',\n        x1: 100,\n        y1: 100,\n        x2: 200,\n        y2: 200,\n        fillStyle: '#fff',\n        strokeStyle: '#000',\n        alpha: 3,\n        hidden: false,\n        lineWidth: 3,\n        lineDash: 'solid',\n        begin: 'arrow',\n        lineCap: 'butt'\n      }\n    },\n    {\n      type: 'both arrow',\n      description: 'both arrow tip line',\n      icon: bothArrow,\n      group: 'line',\n      model: {\n        type: 'line',\n        x1: 100,\n        y1: 100,\n        x2: 200,\n        y2: 200,\n        fillStyle: '#fff',\n        strokeStyle: '#000',\n        alpha: 1,\n        hidden: false,\n        lineWidth: 3,\n        lineDash: 'solid',\n        begin: 'arrow',\n        end: 'arrow',\n        lineCap: 'butt'\n      }\n    },\n    {\n      type: 'polyline',\n      description: 'polyline',\n      icon: polyline,\n      group: 'line',\n      model: {\n        type: 'polyline',\n        path: [\n          { x: 100, y: 100 },\n          { x: 200, y: 100 },\n          { x: 200, y: 200 },\n          { x: 100, y: 200 }\n        ],\n        fillStyle: '#fff',\n        strokeStyle: '#000',\n        alpha: 1,\n        hidden: false,\n        lineWidth: 1,\n        lineDash: 'solid',\n        lineCap: 'butt'\n      }\n    }\n  ]\n}"
         }
       ],
       "exports": [
         {
-          "kind": "custom-element-definition",
-          "name": "ox-board-player-grid",
+          "kind": "js",
+          "name": "line",
           "declaration": {
-            "name": "BoardPlayerGrid",
-            "module": "src/player/ox-board-player-grid.ts"
+            "name": "line",
+            "module": "src/component/line.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/player/ox-board-wrapper.ts",
+      "path": "src/component/register-default-groups.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "",
-          "name": "BoardWrapper",
-          "members": [
-            {
-              "kind": "field",
-              "name": "sceneId",
-              "type": {
-                "text": "string"
-              },
-              "attribute": "sceneId"
-            },
-            {
-              "kind": "field",
-              "name": "provider",
-              "type": {
-                "text": "any"
-              },
-              "attribute": "provider"
-            },
-            {
-              "kind": "field",
-              "name": "_scene",
-              "type": {
-                "text": "any"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_targetEl",
-              "type": {
-                "text": "HTMLElement"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "_releaseRef"
-            },
-            {
-              "kind": "method",
-              "name": "_onSceneIdChanged"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "sceneId",
-              "type": {
-                "text": "string"
-              },
-              "fieldName": "sceneId"
-            },
-            {
-              "name": "provider",
-              "type": {
-                "text": "any"
-              },
-              "fieldName": "provider"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
+          "kind": "function",
+          "name": "registerDefaultGroups"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "registerDefaultGroups",
+          "declaration": {
+            "name": "registerDefaultGroups",
+            "module": "src/component/register-default-groups.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/component/shape.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "shape",
+          "type": {
+            "text": "ComponentGroup"
+          },
+          "default": "{\n  name: 'shape',\n  description: 'a group of simple basic shapes',\n  icon,\n  templates: [\n    {\n      type: 'rect',\n      description: 'rectangle shape',\n      icon: rect,\n      group: 'shape',\n      model: {\n        type: 'rect',\n        left: 100,\n        top: 100,\n        width: 100,\n        height: 100,\n        fillStyle: '#fff',\n        strokeStyle: '#000',\n        alpha: 1,\n        hidden: false,\n        lineWidth: 1,\n        lineDash: 'solid',\n        lineCap: 'butt'\n      }\n    },\n    {\n      type: 'ellipse',\n      description: 'ellipse shape',\n      icon: ellipse,\n      group: 'shape',\n      model: {\n        type: 'ellipse',\n        rx: 50,\n        ry: 50,\n        cx: 150,\n        cy: 150,\n        fillStyle: '#fff',\n        strokeStyle: '#000',\n        alpha: 1,\n        hidden: false,\n        lineWidth: 1,\n        lineDash: 'solid',\n        lineCap: 'butt'\n      }\n    },\n    {\n      type: 'donut',\n      description: 'donut shape',\n      icon: donut,\n      group: 'shape',\n      model: {\n        type: 'donut',\n        rx: 50,\n        ry: 50,\n        cx: 150,\n        cy: 150,\n        ratio: 30,\n        fillStyle: '#fff',\n        strokeStyle: '#000',\n        alpha: 1,\n        hidden: false,\n        lineWidth: 1,\n        lineDash: 'solid',\n        lineCap: 'butt'\n      }\n    },\n    {\n      type: 'triangle',\n      description: 'triangle shape',\n      icon: triangle,\n      group: 'shape',\n      model: {\n        type: 'triangle',\n        x1: 150,\n        y1: 100,\n        x2: 100,\n        y2: 200,\n        x3: 200,\n        y3: 200,\n        fillStyle: '#fff',\n        strokeStyle: '#000',\n        alpha: 1,\n        hidden: false,\n        lineWidth: 1,\n        lineDash: 'solid',\n        lineCap: 'butt'\n      }\n    },\n    {\n      type: 'polygon',\n      description: 'polygon shape',\n      icon: polygon,\n      group: 'shape',\n      model: {\n        type: 'polygon',\n        path: [\n          { x: 100, y: 100 },\n          { x: 200, y: 100 },\n          { x: 200, y: 200 },\n          { x: 100, y: 200 }\n        ],\n        fillStyle: '#fff',\n        strokeStyle: '#000',\n        alpha: 1,\n        hidden: false,\n        lineWidth: 1,\n        lineDash: 'solid',\n        lineCap: 'butt'\n      }\n    },\n    {\n      type: 'star',\n      description: 'star shape',\n      icon: star,\n      group: 'shape',\n      model: {\n        type: 'star',\n        rx: 50,\n        ry: 50,\n        cx: 150,\n        cy: 150,\n        ratio: 30,\n        wing: 5,\n        fillStyle: '#fff',\n        strokeStyle: '#000',\n        alpha: 1,\n        hidden: false,\n        lineWidth: 1,\n        lineDash: 'solid',\n        lineCap: 'butt'\n      }\n    }\n  ]\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "shape",
+          "declaration": {
+            "name": "shape",
+            "module": "src/component/shape.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/component/table.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "table",
+          "type": {
+            "text": "ComponentGroup"
+          },
+          "default": "{\n  name: 'table',\n  description: 'a group of various tables',\n  icon,\n  templates: []\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "table",
+          "declaration": {
+            "name": "table",
+            "module": "src/component/table.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/component/text-and-media.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "textAndMedia",
+          "type": {
+            "text": "ComponentGroup"
           },
-          "tagName": "ox-board-wrapper",
-          "customElement": true
+          "default": "{\n  name: 'textAndMedia',\n  description: 'a group of text and various media components',\n  icon,\n  templates: [\n    {\n      type: 'text',\n      description: 'text',\n      icon: text,\n      group: 'textAndMedia',\n      model: {\n        type: 'text',\n        left: 100,\n        top: 100,\n        width: 200,\n        height: 50,\n        text: 'Text',\n        fillStyle: '#fff',\n        strokeStyle: '#000',\n        alpha: 1,\n        hidden: false,\n        lineWidth: 5,\n        lineDash: 'solid',\n        lineCap: 'butt',\n        textAlign: 'left',\n        textBaseline: 'top',\n        textWrap: false,\n        fontFamily: 'serif',\n        fontSize: 30\n      }\n    },\n    {\n      type: 'color image',\n      description: 'color image',\n      icon: colorImage,\n      group: 'textAndMedia',\n      model: {\n        type: 'image-view',\n        left: 100,\n        top: 100,\n        width: 100,\n        height: 100,\n        isGray: false,\n        fillStyle: '#fff',\n        strokeStyle: '#000',\n        alpha: 1,\n        hidden: false,\n        lineWidth: 1,\n        lineDash: 'solid',\n        lineCap: 'butt'\n      }\n    },\n    {\n      type: 'gray image',\n      description: 'gray image',\n      icon: grayImage,\n      group: 'textAndMedia',\n      model: {\n        type: 'image-view',\n        left: 100,\n        top: 100,\n        width: 100,\n        height: 100,\n        isGray: true,\n        fillStyle: '#fff',\n        strokeStyle: '#000',\n        alpha: 1,\n        hidden: false,\n        lineWidth: 1,\n        lineDash: 'solid',\n        lineCap: 'butt'\n      }\n    },\n    {\n      type: 'gif image',\n      description: 'gif image',\n      icon: gifImage,\n      group: 'textAndMedia',\n      model: {\n        type: 'gif-view',\n        left: 100,\n        top: 100,\n        width: 100,\n        height: 100\n      }\n    },\n    {\n      type: 'audio',\n      description: 'audio',\n      icon: audio,\n      group: 'textAndMedia',\n      model: {\n        type: 'audio',\n        left: 100,\n        top: 100,\n        width: 100,\n        height: 100\n      }\n    }\n  ]\n}"
         }
       ],
       "exports": [
         {
-          "kind": "custom-element-definition",
-          "name": "ox-board-wrapper",
+          "kind": "js",
+          "name": "textAndMedia",
           "declaration": {
-            "name": "BoardWrapper",
-            "module": "src/player/ox-board-wrapper.ts"
+            "name": "textAndMedia",
+            "module": "src/component/text-and-media.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/component/warehouse.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "warehouse",
+          "type": {
+            "text": "ComponentGroup"
+          },
+          "default": "{\n  name: 'warehouse',\n  description: 'a group of various components used in a warehouse depiction',\n  icon,\n  templates: []\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "warehouse",
+          "declaration": {
+            "name": "warehouse",
+            "module": "src/component/warehouse.ts"
           }
         }
       ]
@@ -2448,7 +3619,7 @@
               "kind": "field",
               "name": "componentGroupList",
               "type": {
-                "text": "any[]"
+                "text": "ComponentGroup[]"
               },
               "default": "[]",
               "attribute": "componentGroupList"
@@ -2477,6 +3648,13 @@
               },
               "attribute": "mode"
             },
+            {
+              "kind": "field",
+              "name": "shift",
+              "type": {
+                "text": "HTMLImageElement"
+              }
+            },
             {
               "kind": "field",
               "name": "menu",
@@ -2490,7 +3668,41 @@
               "name": "groups",
               "type": {
                 "text": "NodeListOf<HTMLElement>"
-              }
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "icons",
+              "type": {
+                "text": "{ [name: string]: string }"
+              },
+              "privacy": "private",
+              "default": "{}"
+            },
+            {
+              "kind": "method",
+              "name": "_setMode",
+              "parameters": [
+                {
+                  "name": "mode",
+                  "type": {
+                    "text": "SCENE_MODE"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onClickShift",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
@@ -2505,11 +3717,19 @@
               ]
             }
           ],
+          "events": [
+            {
+              "name": "mode-changed",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
           "attributes": [
             {
               "name": "componentGroupList",
               "type": {
-                "text": "any[]"
+                "text": "ComponentGroup[]"
               },
               "default": "[]",
               "fieldName": "componentGroupList"
@@ -2555,6 +3775,40 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/modeller/component-toolbar/mode-icons.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "ICON_EDIT_MODE",
+          "default": "`\n  <svg\n    version=\"1.1\"\n    id=\"Layer_1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 30 30\"\n    style=\"enable-background:new 0 0 30 30;\"\n    xml:space=\"preserve\"\n  >\n    <style type=\"text/css\">\n      .st0 {\n        fill: {{strokeColor}};\n      }\n      .st1 {\n        fill: none;\n        stroke: {{strokeColor}};\n        stroke-width: 0.75;\n        stroke-linejoin: round;\n        stroke-miterlimit: 10;\n      }\n    </style>\n    <g>\n      <polygon class=\"st0\" points=\"2.7,3.9 2.7,22.8 7.8,17.2 16.1,16.9 \t\" />\n      <path\n        class=\"st1\"\n        d=\"M27.7,20.1L26.1,19c-0.1,0-0.2,0-0.2,0c0,0.1,0,0.2,0,0.2l1.2,0.9h-4.9v-5l0.9,1.2c0,0,0.1,0.1,0.1,0.1\n      c0,0,0.1,0,0.1,0c0.1,0,0.1-0.1,0-0.2l-1.1-1.6c-0.1-0.1-0.2-0.1-0.2,0L20.8,16c0,0.1,0,0.2,0,0.2s0.2,0,0.2,0l0.9-1.2v5h-5\n      l1.2-0.9c0.1,0,0.1-0.1,0-0.2c0-0.1-0.1-0.1-0.2,0l-1.6,1.1c0,0-0.1,0.1-0.1,0.1c0,0,0,0.1,0.1,0.1l1.6,1.1c0,0,0.1,0,0.1,0\n      c0,0,0.1,0,0.1-0.1c0-0.1,0-0.2,0-0.2l-1.2-0.9h5v5L21,24.2c0-0.1-0.1-0.1-0.2,0c-0.1,0-0.1,0.1,0,0.2l1.1,1.6c0,0,0.1,0.1,0.1,0.1\n      s0.1,0,0.1-0.1l1.1-1.6c0-0.1,0-0.2,0-0.2c-0.1,0-0.2,0-0.2,0l-0.9,1.2v-5h4.9l-1.2,0.9c-0.1,0-0.1,0.1,0,0.2c0,0,0.1,0.1,0.1,0.1\n      c0,0,0.1,0,0.1,0l1.6-1.1c0,0,0.1-0.1,0.1-0.1C27.7,20.2,27.7,20.1,27.7,20.1z\"\n      />\n    </g>\n  </svg>\n`"
+        },
+        {
+          "kind": "variable",
+          "name": "ICON_SHIFT_MODE",
+          "default": "`\n  <svg\n    version=\"1.1\"\n    id=\"Layer_1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 30 30\"\n    style=\"enable-background:new 0 0 30 30;\"\n    xml:space=\"preserve\"\n  >\n    <style type=\"text/css\">\n      .st0 {\n        fill-rule: evenodd;\n        clip-rule: evenodd;\n      }\n      .st1 {\n        fill: {{strokeColor}};\n        stroke: {{strokeColor}};\n        stroke-width: 0.75;\n        stroke-linejoin: round;\n        stroke-miterlimit: 10;\n      }\n    </style>\n    <g>\n      <path\n        class=\"st0\"\n        d=\"M7.8,23.2c1.6,0,3.8,0,5.7,0c0.8,0,1.3-0.3,1.6-1.2c0.4-2.9,1.5-4.9,2.4-6.9s1.4-2.5,1.6-3.4\n      c0.1-0.5,0.2-1.6-0.4-1.9c-0.6-0.3-1.2,0.1-1.9,1.3c-0.8,1.6-1,2-1.4,2c-0.3,0-0.1-4,0-5.4c0.1-1.3-0.6-1.8-1.3-1.8\n      c-0.8-0.1-1.5,0.4-1.5,1.5c0,1.5-0.2,5.2-0.7,5.2c-0.4,0-0.3-4.3-0.6-6.7c-0.1-1-0.6-1.8-1.5-1.8C9.1,4.2,8.4,4.7,8.3,5.8\n      c-0.1,1.3,1,6.7,0.5,6.7c-0.4,0-1.4-3.3-2.3-5.1C6,6.5,5.6,6,4.6,6.4C3.9,6.7,3.5,7.6,3.8,8.5c0.5,1.2,2.7,6.8,2.2,6.8\n      c-0.4,0-1.4-1.4-2.7-2.1c-1.1-0.6-1.8-0.4-2.1-0.1c-0.4,0.3-0.7,1,0.9,2.8c0.6,0.6,3.1,2.3,3.7,3.2c0.7,1.3,0.6,1,0.8,2.8\n      C6.7,22.7,7,23.2,7.8,23.2z\"\n      />\n      <path\n        class=\"st1\"\n        d=\"M28.7,20.1L27.1,19c-0.1,0-0.2,0-0.2,0c0,0.1,0,0.2,0,0.2l1.2,0.9h-4.9v-5l0.9,1.2c0,0,0.1,0.1,0.1,0.1\n      c0,0,0.1,0,0.1,0c0.1,0,0.1-0.1,0-0.2l-1.1-1.6c-0.1-0.1-0.2-0.1-0.2,0L21.8,16c0,0.1,0,0.2,0,0.2s0.2,0,0.2,0l0.9-1.2v5h-5\n      l1.2-0.9c0.1,0,0.1-0.1,0-0.2c0-0.1-0.1-0.1-0.2,0l-1.6,1.1c0,0-0.1,0.1-0.1,0.1c0,0,0,0.1,0.1,0.1l1.6,1.1c0,0,0.1,0,0.1,0\n      c0,0,0.1,0,0.1-0.1c0-0.1,0-0.2,0-0.2l-1.2-0.9h5v5L22,24.2c0-0.1-0.1-0.1-0.2,0c-0.1,0-0.1,0.1,0,0.2l1.1,1.6c0,0,0.1,0.1,0.1,0.1\n      s0.1,0,0.1-0.1l1.1-1.6c0-0.1,0-0.2,0-0.2c-0.1,0-0.2,0-0.2,0l-0.9,1.2v-5h4.9l-1.2,0.9c-0.1,0-0.1,0.1,0,0.2c0,0,0.1,0.1,0.1,0.1\n      c0,0,0.1,0,0.1,0l1.6-1.1c0,0,0.1-0.1,0.1-0.1C28.7,20.2,28.7,20.1,28.7,20.1z\"\n      />\n    </g>\n  </svg>\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ICON_EDIT_MODE",
+          "declaration": {
+            "name": "ICON_EDIT_MODE",
+            "module": "src/modeller/component-toolbar/mode-icons.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ICON_SHIFT_MODE",
+          "declaration": {
+            "name": "ICON_SHIFT_MODE",
+            "module": "src/modeller/component-toolbar/mode-icons.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/modeller/property-sidebar/abstract-property.ts",
@@ -3743,168 +4997,30 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/effects/effects-shared-style.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "EffectsSharedStyle",
-          "default": "css`\n  :host {\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    grid-gap: 5px;\n    grid-auto-rows: minmax(24px, auto);\n\n    align-items: center;\n  }\n\n  * {\n    align-self: stretch;\n  }\n\n  label {\n    grid-column: span 3;\n    text-align: right;\n    text-transform: capitalize;\n\n    align-self: center;\n  }\n\n  input,\n  select,\n  ox-input-angle,\n  things-editor-color,\n  [custom-editor] {\n    grid-column: span 7;\n  }\n\n  input,\n  select,\n  ox-input-angle input,\n  things-editor-color input,\n  [custom-editor] input {\n    border: var(--property-sidebar-fieldset-border);\n  }\n\n  input[type='checkbox'] {\n    grid-column: 4 / 5;\n    align-self: center;\n  }\n\n  label.checkbox-label {\n    grid-column: span 6;\n    text-align: left;\n  }\n\n  [fullwidth] {\n    grid-column: 1 / -1;\n  }\n`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "EffectsSharedStyle",
-          "declaration": {
-            "name": "EffectsSharedStyle",
-            "module": "src/modeller/property-sidebar/effects/effects-shared-style.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/effects/effects.ts",
+      "path": "src/modeller/property-sidebar/data-binding/data-binding-mapper.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "PropertyEffects",
+          "description": "element for mapping data value editing\n\nExample:\n\n<data-binding-mapper mapping=${mapping}>\n</data-binding-mapper>",
+          "name": "DataBindingMapper",
           "members": [
             {
               "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "Properties | undefined"
-              },
-              "attribute": "value"
-            },
-            {
-              "kind": "field",
-              "name": "scene",
-              "type": {
-                "text": "Scene | undefined"
-              },
-              "attribute": "scene"
-            },
-            {
-              "kind": "method",
-              "name": "_onValueChange",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "AbstractProperty",
-                "module": "src/modeller/property-sidebar/abstract-property.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "_getValueFromEventTarget",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "AbstractProperty",
-                "module": "src/modeller/property-sidebar/abstract-property.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "_onAfterValueChange",
-              "parameters": [
-                {
-                  "name": "key",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "any"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "AbstractProperty",
-                "module": "src/modeller/property-sidebar/abstract-property.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "value",
-              "type": {
-                "text": "Properties | undefined"
-              },
-              "fieldName": "value"
-            },
-            {
-              "name": "scene",
-              "type": {
-                "text": "Scene | undefined"
-              },
-              "fieldName": "scene"
-            }
-          ],
-          "superclass": {
-            "name": "AbstractProperty",
-            "module": "/src/modeller/property-sidebar/abstract-property"
-          },
-          "tagName": "property-effect",
-          "customElement": true,
-          "events": [
-            {
-              "name": "property-change",
+              "name": "mapping",
               "type": {
-                "text": "CustomEvent"
-              },
-              "inheritedFrom": {
-                "name": "AbstractProperty",
-                "module": "src/modeller/property-sidebar/abstract-property.ts"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "property-effect",
-          "declaration": {
-            "name": "PropertyEffects",
-            "module": "src/modeller/property-sidebar/effects/effects.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/effects/property-animation.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "컴포넌트의 animation 속성을 편집하는 element\n\nExample:\n\n <property-animation .value=${animation}>\n </property-animation>",
-          "name": "PropertyAnimation",
-          "members": [
+                "text": "Mapping"
+              },
+              "default": "{\n    rule: 'value'\n  }",
+              "attribute": "mapping"
+            },
             {
               "kind": "field",
-              "name": "value",
+              "name": "rule",
               "type": {
-                "text": "Properties | undefined"
+                "text": "Rule"
               },
-              "attribute": "value"
+              "default": "{}",
+              "attribute": "rule"
             },
             {
               "kind": "field",
@@ -3914,9 +5030,76 @@
               },
               "attribute": "scene"
             },
+            {
+              "kind": "field",
+              "name": "_valueTypes",
+              "type": {
+                "text": "any"
+              },
+              "default": "{\n    play: 'boolean',\n    hidden: 'boolean',\n    started: 'boolean',\n\n    rotation: 'number',\n    value: 'number',\n\n    fillStyle: 'color',\n    strokeStyle: 'color',\n    fontColor: 'color',\n\n    data: 'object',\n    source: 'object',\n    location: 'object',\n    dimension: 'object',\n\n    text: 'string',\n    ref: 'string'\n  }"
+            },
+            {
+              "kind": "field",
+              "name": "_componentIds",
+              "type": {
+                "text": "any[]"
+              },
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "editor",
+              "type": {
+                "text": "HTMLInputElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "target",
+              "type": {
+                "text": "HTMLInputElement"
+              }
+            },
             {
               "kind": "method",
-              "name": "_onValueChange",
+              "name": "_valuetype",
+              "parameters": [
+                {
+                  "name": "property",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "_keep_saved_rule_params",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "_onChangedMapping"
+            },
+            {
+              "kind": "method",
+              "name": "_onChangeRule",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onChange",
               "parameters": [
                 {
                   "name": "e",
@@ -3929,7 +5112,7 @@
           ],
           "events": [
             {
-              "name": "change",
+              "name": "value-change",
               "type": {
                 "text": "CustomEvent"
               }
@@ -3937,11 +5120,28 @@
           ],
           "attributes": [
             {
-              "name": "value",
+              "name": "mapping",
               "type": {
-                "text": "Properties | undefined"
+                "text": "Mapping"
               },
-              "fieldName": "value"
+              "default": "{\n    rule: 'value'\n  }",
+              "fieldName": "mapping"
+            },
+            {
+              "name": "rule",
+              "type": {
+                "text": "Rule"
+              },
+              "default": "{}",
+              "fieldName": "rule"
+            },
+            {
+              "name": "properties",
+              "type": {
+                "text": "Properties[]"
+              },
+              "default": "[]",
+              "fieldName": "properties"
             },
             {
               "name": "scene",
@@ -3955,7 +5155,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "property-animation",
+          "tagName": "data-binding-mapper",
           "customElement": true
         }
       ],
@@ -3964,28 +5164,28 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "PropertyAnimation",
-            "module": "src/modeller/property-sidebar/effects/property-animation.ts"
+            "name": "DataBindingMapper",
+            "module": "src/modeller/property-sidebar/data-binding/data-binding-mapper.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "property-animation",
+          "name": "data-binding-mapper",
           "declaration": {
-            "name": "PropertyAnimation",
-            "module": "src/modeller/property-sidebar/effects/property-animation.ts"
+            "name": "DataBindingMapper",
+            "module": "src/modeller/property-sidebar/data-binding/data-binding-mapper.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/effects/property-animations.ts",
+      "path": "src/modeller/property-sidebar/data-binding/data-binding.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "PropertyAnimations",
+          "name": "PropertyDataBinding",
           "members": [
             {
               "kind": "field",
@@ -3999,36 +5199,187 @@
               "kind": "field",
               "name": "scene",
               "type": {
-                "text": "Scene"
+                "text": "Scene | undefined"
               },
               "attribute": "scene"
             },
             {
               "kind": "field",
-              "name": "_expanded",
+              "name": "mappingIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "_afterRender",
+              "type": {
+                "text": "Function | null | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_dataExpanded",
               "type": {
                 "text": "boolean"
               },
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "tabs",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "tabNavLeftButton",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "tabNavRightButton",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "mapping",
+              "type": {
+                "text": "Properties"
+              },
+              "privacy": "private",
+              "default": "{}"
+            },
+            {
+              "kind": "field",
+              "name": "mappings"
+            },
+            {
+              "kind": "method",
+              "name": "_setMappingIndex",
+              "parameters": [
+                {
+                  "name": "idx",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_clearDataBindingMapper"
+            },
+            {
+              "kind": "method",
+              "name": "_copyDataBindingMapper"
+            },
+            {
+              "kind": "method",
+              "name": "_pasteDataBindingMapper"
+            },
+            {
+              "kind": "method",
+              "name": "_onValueChanged"
+            },
+            {
+              "kind": "method",
+              "name": "_onValueChange",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "AbstractProperty",
+                "module": "src/modeller/property-sidebar/abstract-property.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "tabContainer"
+            },
+            {
+              "kind": "method",
+              "name": "_onMappingChanged",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "CustomEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onTabScroll"
+            },
+            {
+              "kind": "method",
+              "name": "_onTabScrollNavLeft"
+            },
+            {
+              "kind": "method",
+              "name": "_onTabScrollNavRight"
+            },
+            {
+              "kind": "method",
+              "name": "_getValueFromEventTarget",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "AbstractProperty",
+                "module": "src/modeller/property-sidebar/abstract-property.ts"
+              }
+            },
             {
               "kind": "method",
-              "name": "_onValueChange",
+              "name": "_onAfterValueChange",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "key",
                   "type": {
-                    "text": "Event"
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "any"
                   }
                 }
-              ]
+              ],
+              "inheritedFrom": {
+                "name": "AbstractProperty",
+                "module": "src/modeller/property-sidebar/abstract-property.ts"
+              }
             }
           ],
           "events": [
             {
-              "name": "change",
+              "name": "property-change",
               "type": {
                 "text": "CustomEvent"
+              },
+              "inheritedFrom": {
+                "name": "AbstractProperty",
+                "module": "src/modeller/property-sidebar/abstract-property.ts"
               }
             }
           ],
@@ -4043,294 +5394,197 @@
             {
               "name": "scene",
               "type": {
-                "text": "Scene"
+                "text": "Scene | undefined"
               },
               "fieldName": "scene"
             }
           ],
           "superclass": {
-            "name": "LitElement",
-            "package": "lit"
+            "name": "AbstractProperty",
+            "module": "/src/modeller/property-sidebar/abstract-property"
           },
-          "tagName": "property-animations",
+          "tagName": "property-data-binding",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "custom-element-definition",
-          "name": "property-animations",
+          "name": "property-data-binding",
           "declaration": {
-            "name": "PropertyAnimations",
-            "module": "src/modeller/property-sidebar/effects/property-animations.ts"
+            "name": "PropertyDataBinding",
+            "module": "src/modeller/property-sidebar/data-binding/data-binding.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/effects/property-event-hover.ts",
+      "path": "src/modeller/property-sidebar/inspector/inspector.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "PropertyEventHover",
+          "name": "SceneInspector",
           "members": [
             {
               "kind": "field",
-              "name": "value",
+              "name": "scene",
               "type": {
-                "text": "Properties | undefined"
+                "text": "Scene | undefined"
               },
-              "attribute": "value"
+              "attribute": "scene"
             },
             {
               "kind": "field",
-              "name": "scene",
+              "name": "_extendedMap",
               "type": {
-                "text": "Scene | undefined"
+                "text": "any"
               },
-              "attribute": "scene"
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "show",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "sortableConfig",
+              "type": {
+                "text": "Sortable.Options"
+              },
+              "default": "{\n    group: 'inspector',\n    animation: 150,\n    draggable: '.component',\n    swapThreshold: 1,\n    onSort: this.onSort.bind(this)\n  }"
             },
             {
               "kind": "method",
-              "name": "_getPlaceHoder",
+              "name": "onSort",
               "parameters": [
                 {
-                  "name": "action",
+                  "name": "e",
                   "type": {
-                    "text": "string"
+                    "text": "Sortable.SortableEvent"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_getTargetList",
+              "name": "_onclick",
               "parameters": [
                 {
-                  "name": "action",
+                  "name": "e",
                   "type": {
-                    "text": "string"
+                    "text": "MouseEvent"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_onValueChange",
+              "name": "_ondblclick",
               "parameters": [
                 {
                   "name": "e",
                   "type": {
-                    "text": "Event"
+                    "text": "MouseEvent"
                   }
                 }
               ]
-            }
-          ],
-          "events": [
-            {
-              "name": "change",
-              "type": {
-                "text": "CustomEvent"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "value",
-              "type": {
-                "text": "Properties | undefined"
-              },
-              "fieldName": "value"
-            },
-            {
-              "name": "scene",
-              "type": {
-                "text": "Scene | undefined"
-              },
-              "fieldName": "scene"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "property-event-hover",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "property-event-hover",
-          "declaration": {
-            "name": "PropertyEventHover",
-            "module": "src/modeller/property-sidebar/effects/property-event-hover.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/effects/property-event-tap.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "PropertyEventTap",
-          "members": [
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "Properties | undefined"
-              },
-              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "scene",
-              "type": {
-                "text": "Scene | undefined"
-              },
-              "attribute": "scene"
+              "name": "extendedMap"
             },
             {
               "kind": "method",
-              "name": "_getPlaceHoder",
+              "name": "getNodeHandleClass",
               "parameters": [
                 {
-                  "name": "action",
+                  "name": "component",
                   "type": {
-                    "text": "string"
+                    "text": "Component"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_getTargetList",
+              "name": "isExtended",
               "parameters": [
                 {
-                  "name": "action",
+                  "name": "component",
                   "type": {
-                    "text": "string"
+                    "text": "Component"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_onValueChange",
+              "name": "toggleExtended",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "component",
                   "type": {
-                    "text": "Event"
+                    "text": "Component"
                   }
                 }
               ]
-            }
-          ],
-          "events": [
-            {
-              "name": "change",
-              "type": {
-                "text": "CustomEvent"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "value",
-              "type": {
-                "text": "Properties | undefined"
-              },
-              "fieldName": "value"
             },
             {
-              "name": "scene",
-              "type": {
-                "text": "Scene | undefined"
-              },
-              "fieldName": "scene"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "property-event-tap",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "property-event-tap",
-          "declaration": {
-            "name": "PropertyEventTap",
-            "module": "src/modeller/property-sidebar/effects/property-event-tap.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/effects/property-event.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "PropertyEvent",
-          "members": [
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "Properties | undefined"
-              },
-              "attribute": "value"
+              "kind": "method",
+              "name": "toggleHidden",
+              "parameters": [
+                {
+                  "name": "component",
+                  "type": {
+                    "text": "Component"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "scene",
-              "type": {
-                "text": "Scene | undefined"
-              },
-              "attribute": "scene"
+              "kind": "method",
+              "name": "selectComponent",
+              "parameters": [
+                {
+                  "name": "component",
+                  "type": {
+                    "text": "Component"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "_onValueChange",
+              "name": "renderComponent",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              },
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "component",
                   "type": {
-                    "text": "Event"
+                    "text": "Component"
+                  }
+                },
+                {
+                  "name": "depth",
+                  "type": {
+                    "text": "number"
                   }
                 }
               ]
             }
           ],
-          "events": [
-            {
-              "name": "change",
-              "type": {
-                "text": "CustomEvent"
-              }
-            }
-          ],
           "attributes": [
-            {
-              "name": "value",
-              "type": {
-                "text": "Properties | undefined"
-              },
-              "fieldName": "value"
-            },
             {
               "name": "scene",
               "type": {
@@ -4343,29 +5597,58 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "property-event",
+          "tagName": "scene-inspector",
           "customElement": true
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SceneInspector",
+            "module": "src/modeller/property-sidebar/inspector/inspector.ts"
+          }
+        },
         {
           "kind": "custom-element-definition",
-          "name": "property-event",
+          "name": "scene-inspector",
           "declaration": {
-            "name": "PropertyEvent",
-            "module": "src/modeller/property-sidebar/effects/property-event.ts"
+            "name": "SceneInspector",
+            "module": "src/modeller/property-sidebar/inspector/inspector.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/effects/property-shadow.ts",
+      "path": "src/modeller/property-sidebar/effects/effects-shared-style.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "EffectsSharedStyle",
+          "default": "css`\n  :host {\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    grid-gap: 5px;\n    grid-auto-rows: minmax(24px, auto);\n\n    align-items: center;\n  }\n\n  * {\n    align-self: stretch;\n  }\n\n  label {\n    grid-column: span 3;\n    text-align: right;\n    text-transform: capitalize;\n\n    align-self: center;\n  }\n\n  input,\n  select,\n  ox-input-angle,\n  things-editor-color,\n  [custom-editor] {\n    grid-column: span 7;\n  }\n\n  input,\n  select,\n  ox-input-angle input,\n  things-editor-color input,\n  [custom-editor] input {\n    border: var(--property-sidebar-fieldset-border);\n  }\n\n  input[type='checkbox'] {\n    grid-column: 4 / 5;\n    align-self: center;\n  }\n\n  label.checkbox-label {\n    grid-column: span 6;\n    text-align: left;\n  }\n\n  [fullwidth] {\n    grid-column: 1 / -1;\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "EffectsSharedStyle",
+          "declaration": {
+            "name": "EffectsSharedStyle",
+            "module": "src/modeller/property-sidebar/effects/effects-shared-style.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/modeller/property-sidebar/effects/effects.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "컴포넌트의 그림자 속성을 편집하는 element\n\nExample:\n <property-shadow",
-          "name": "PropertyShadow",
+          "description": "",
+          "name": "PropertyEffects",
           "members": [
             {
               "kind": "field",
@@ -4375,6 +5658,14 @@
               },
               "attribute": "value"
             },
+            {
+              "kind": "field",
+              "name": "scene",
+              "type": {
+                "text": "Scene | undefined"
+              },
+              "attribute": "scene"
+            },
             {
               "kind": "method",
               "name": "_onValueChange",
@@ -4385,14 +5676,48 @@
                     "text": "Event"
                   }
                 }
-              ]
-            }
-          ],
-          "events": [
+              ],
+              "inheritedFrom": {
+                "name": "AbstractProperty",
+                "module": "src/modeller/property-sidebar/abstract-property.ts"
+              }
+            },
             {
-              "name": "change",
-              "type": {
-                "text": "CustomEvent"
+              "kind": "method",
+              "name": "_getValueFromEventTarget",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "AbstractProperty",
+                "module": "src/modeller/property-sidebar/abstract-property.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_onAfterValueChange",
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "any"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "AbstractProperty",
+                "module": "src/modeller/property-sidebar/abstract-property.ts"
               }
             }
           ],
@@ -4403,47 +5728,30 @@
                 "text": "Properties | undefined"
               },
               "fieldName": "value"
+            },
+            {
+              "name": "scene",
+              "type": {
+                "text": "Scene | undefined"
+              },
+              "fieldName": "scene"
             }
           ],
           "superclass": {
-            "name": "LitElement",
-            "package": "lit"
+            "name": "AbstractProperty",
+            "module": "/src/modeller/property-sidebar/abstract-property"
           },
-          "tagName": "property-shadow",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "PropertyShadow",
-            "module": "src/modeller/property-sidebar/effects/property-shadow.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "property-shadow",
-          "declaration": {
-            "name": "PropertyShadow",
-            "module": "src/modeller/property-sidebar/effects/property-shadow.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/effects/value-converter.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "convert",
-          "parameters": [
+          "tagName": "property-effect",
+          "customElement": true,
+          "events": [
             {
-              "name": "element",
+              "name": "property-change",
               "type": {
-                "text": "any"
+                "text": "CustomEvent"
+              },
+              "inheritedFrom": {
+                "name": "AbstractProperty",
+                "module": "src/modeller/property-sidebar/abstract-property.ts"
               }
             }
           ]
@@ -4451,120 +5759,43 @@
       ],
       "exports": [
         {
-          "kind": "js",
-          "name": "convert",
+          "kind": "custom-element-definition",
+          "name": "property-effect",
           "declaration": {
-            "name": "convert",
-            "module": "src/modeller/property-sidebar/effects/value-converter.ts"
+            "name": "PropertyEffects",
+            "module": "src/modeller/property-sidebar/effects/effects.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/data-binding/data-binding-mapper.ts",
+      "path": "src/modeller/property-sidebar/effects/property-animation.ts",
       "declarations": [
-        {
-          "kind": "class",
-          "description": "element for mapping data value editing\n\nExample:\n\n<data-binding-mapper mapping=${mapping}>\n</data-binding-mapper>",
-          "name": "DataBindingMapper",
-          "members": [
-            {
-              "kind": "field",
-              "name": "mapping",
-              "type": {
-                "text": "Mapping"
-              },
-              "default": "{\n    rule: 'value'\n  }",
-              "attribute": "mapping"
-            },
-            {
-              "kind": "field",
-              "name": "rule",
-              "type": {
-                "text": "Rule"
-              },
-              "default": "{}",
-              "attribute": "rule"
-            },
-            {
-              "kind": "field",
-              "name": "scene",
-              "type": {
-                "text": "Scene | undefined"
-              },
-              "attribute": "scene"
-            },
-            {
-              "kind": "field",
-              "name": "_valueTypes",
-              "type": {
-                "text": "any"
-              },
-              "default": "{\n    play: 'boolean',\n    hidden: 'boolean',\n    started: 'boolean',\n\n    rotation: 'number',\n    value: 'number',\n\n    fillStyle: 'color',\n    strokeStyle: 'color',\n    fontColor: 'color',\n\n    data: 'object',\n    source: 'object',\n    location: 'object',\n    dimension: 'object',\n\n    text: 'string',\n    ref: 'string'\n  }"
-            },
-            {
-              "kind": "field",
-              "name": "_componentIds",
-              "type": {
-                "text": "any[]"
-              },
-              "default": "[]"
-            },
-            {
-              "kind": "field",
-              "name": "editor",
-              "type": {
-                "text": "HTMLInputElement"
-              }
-            },
+        {
+          "kind": "class",
+          "description": "컴포넌트의 animation 속성을 편집하는 element\n\nExample:\n\n <property-animation .value=${animation}>\n </property-animation>",
+          "name": "PropertyAnimation",
+          "members": [
             {
               "kind": "field",
-              "name": "target",
+              "name": "value",
               "type": {
-                "text": "HTMLInputElement"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "_valuetype",
-              "parameters": [
-                {
-                  "name": "property",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+                "text": "Properties | undefined"
+              },
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "_keep_saved_rule_params",
+              "name": "scene",
               "type": {
-                "text": "boolean"
+                "text": "Scene | undefined"
               },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "method",
-              "name": "_onChangedMapping"
-            },
-            {
-              "kind": "method",
-              "name": "_onChangeRule",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "attribute": "scene"
             },
             {
               "kind": "method",
-              "name": "_onChange",
+              "name": "_onValueChange",
               "parameters": [
                 {
                   "name": "e",
@@ -4577,7 +5808,7 @@
           ],
           "events": [
             {
-              "name": "value-change",
+              "name": "change",
               "type": {
                 "text": "CustomEvent"
               }
@@ -4585,28 +5816,11 @@
           ],
           "attributes": [
             {
-              "name": "mapping",
-              "type": {
-                "text": "Mapping"
-              },
-              "default": "{\n    rule: 'value'\n  }",
-              "fieldName": "mapping"
-            },
-            {
-              "name": "rule",
-              "type": {
-                "text": "Rule"
-              },
-              "default": "{}",
-              "fieldName": "rule"
-            },
-            {
-              "name": "properties",
+              "name": "value",
               "type": {
-                "text": "Properties[]"
+                "text": "Properties | undefined"
               },
-              "default": "[]",
-              "fieldName": "properties"
+              "fieldName": "value"
             },
             {
               "name": "scene",
@@ -4620,7 +5834,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "data-binding-mapper",
+          "tagName": "property-animation",
           "customElement": true
         }
       ],
@@ -4629,28 +5843,28 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "DataBindingMapper",
-            "module": "src/modeller/property-sidebar/data-binding/data-binding-mapper.ts"
+            "name": "PropertyAnimation",
+            "module": "src/modeller/property-sidebar/effects/property-animation.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "data-binding-mapper",
+          "name": "property-animation",
           "declaration": {
-            "name": "DataBindingMapper",
-            "module": "src/modeller/property-sidebar/data-binding/data-binding-mapper.ts"
+            "name": "PropertyAnimation",
+            "module": "src/modeller/property-sidebar/effects/property-animation.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/data-binding/data-binding.ts",
+      "path": "src/modeller/property-sidebar/effects/property-animations.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "PropertyDataBinding",
+          "name": "PropertyAnimations",
           "members": [
             {
               "kind": "field",
@@ -4664,187 +5878,141 @@
               "kind": "field",
               "name": "scene",
               "type": {
-                "text": "Scene | undefined"
+                "text": "Scene"
               },
               "attribute": "scene"
             },
             {
               "kind": "field",
-              "name": "mappingIndex",
-              "type": {
-                "text": "number"
-              },
-              "default": "0"
-            },
-            {
-              "kind": "field",
-              "name": "_afterRender",
-              "type": {
-                "text": "Function | null | undefined"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_dataExpanded",
+              "name": "_expanded",
               "type": {
                 "text": "boolean"
               },
               "default": "false"
             },
-            {
-              "kind": "field",
-              "name": "tabs",
-              "type": {
-                "text": "HTMLElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "tabNavLeftButton",
-              "type": {
-                "text": "HTMLElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "tabNavRightButton",
-              "type": {
-                "text": "HTMLElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "mapping",
-              "type": {
-                "text": "Properties"
-              },
-              "privacy": "private",
-              "default": "{}"
-            },
-            {
-              "kind": "field",
-              "name": "mappings"
-            },
             {
               "kind": "method",
-              "name": "_setMappingIndex",
+              "name": "_onValueChange",
               "parameters": [
                 {
-                  "name": "idx",
+                  "name": "e",
                   "type": {
-                    "text": "number"
+                    "text": "Event"
                   }
                 }
               ]
-            },
-            {
-              "kind": "method",
-              "name": "_clearDataBindingMapper"
-            },
+            }
+          ],
+          "events": [
             {
-              "kind": "method",
-              "name": "_copyDataBindingMapper"
-            },
+              "name": "change",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
             {
-              "kind": "method",
-              "name": "_pasteDataBindingMapper"
+              "name": "value",
+              "type": {
+                "text": "Properties | undefined"
+              },
+              "fieldName": "value"
             },
             {
-              "kind": "method",
-              "name": "_onValueChanged"
-            },
+              "name": "scene",
+              "type": {
+                "text": "Scene"
+              },
+              "fieldName": "scene"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "property-animations",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "property-animations",
+          "declaration": {
+            "name": "PropertyAnimations",
+            "module": "src/modeller/property-sidebar/effects/property-animations.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/modeller/property-sidebar/effects/property-event-hover.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "PropertyEventHover",
+          "members": [
             {
-              "kind": "method",
-              "name": "_onValueChange",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "AbstractProperty",
-                "module": "src/modeller/property-sidebar/abstract-property.ts"
-              }
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "Properties | undefined"
+              },
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "tabContainer"
+              "name": "scene",
+              "type": {
+                "text": "Scene | undefined"
+              },
+              "attribute": "scene"
             },
             {
               "kind": "method",
-              "name": "_onMappingChanged",
+              "name": "_getPlaceHoder",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "action",
                   "type": {
-                    "text": "CustomEvent"
+                    "text": "string"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_onTabScroll"
-            },
-            {
-              "kind": "method",
-              "name": "_onTabScrollNavLeft"
-            },
-            {
-              "kind": "method",
-              "name": "_onTabScrollNavRight"
-            },
-            {
-              "kind": "method",
-              "name": "_getValueFromEventTarget",
+              "name": "_getTargetList",
               "parameters": [
                 {
-                  "name": "element",
+                  "name": "action",
                   "type": {
-                    "text": "HTMLElement"
+                    "text": "string"
                   }
                 }
-              ],
-              "inheritedFrom": {
-                "name": "AbstractProperty",
-                "module": "src/modeller/property-sidebar/abstract-property.ts"
-              }
+              ]
             },
             {
               "kind": "method",
-              "name": "_onAfterValueChange",
+              "name": "_onValueChange",
               "parameters": [
                 {
-                  "name": "key",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "value",
+                  "name": "e",
                   "type": {
-                    "text": "any"
+                    "text": "Event"
                   }
                 }
-              ],
-              "inheritedFrom": {
-                "name": "AbstractProperty",
-                "module": "src/modeller/property-sidebar/abstract-property.ts"
-              }
+              ]
             }
           ],
           "events": [
             {
-              "name": "property-change",
+              "name": "change",
               "type": {
                 "text": "CustomEvent"
-              },
-              "inheritedFrom": {
-                "name": "AbstractProperty",
-                "module": "src/modeller/property-sidebar/abstract-property.ts"
               }
             }
           ],
@@ -4865,204 +6033,262 @@
             }
           ],
           "superclass": {
-            "name": "AbstractProperty",
-            "module": "/src/modeller/property-sidebar/abstract-property"
+            "name": "LitElement",
+            "package": "lit"
           },
-          "tagName": "property-data-binding",
+          "tagName": "property-event-hover",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "custom-element-definition",
-          "name": "property-data-binding",
+          "name": "property-event-hover",
           "declaration": {
-            "name": "PropertyDataBinding",
-            "module": "src/modeller/property-sidebar/data-binding/data-binding.ts"
+            "name": "PropertyEventHover",
+            "module": "src/modeller/property-sidebar/effects/property-event-hover.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/inspector/inspector.ts",
+      "path": "src/modeller/property-sidebar/effects/property-event-tap.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SceneInspector",
+          "name": "PropertyEventTap",
           "members": [
             {
               "kind": "field",
-              "name": "scene",
-              "type": {
-                "text": "Scene | undefined"
-              },
-              "attribute": "scene"
-            },
-            {
-              "kind": "field",
-              "name": "_extendedMap",
-              "type": {
-                "text": "any"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "show",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "Properties | undefined"
               },
-              "privacy": "private",
-              "default": "false"
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "sortableConfig",
+              "name": "scene",
               "type": {
-                "text": "Sortable.Options"
+                "text": "Scene | undefined"
               },
-              "default": "{\n    group: 'inspector',\n    animation: 150,\n    draggable: '.component',\n    swapThreshold: 1,\n    onSort: this.onSort.bind(this)\n  }"
+              "attribute": "scene"
             },
             {
               "kind": "method",
-              "name": "onSort",
+              "name": "_getPlaceHoder",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "action",
                   "type": {
-                    "text": "Sortable.SortableEvent"
+                    "text": "string"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_onclick",
+              "name": "_getTargetList",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "action",
                   "type": {
-                    "text": "MouseEvent"
+                    "text": "string"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_ondblclick",
+              "name": "_onValueChange",
               "parameters": [
                 {
                   "name": "e",
                   "type": {
-                    "text": "MouseEvent"
+                    "text": "Event"
                   }
                 }
               ]
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "Properties | undefined"
+              },
+              "fieldName": "value"
             },
+            {
+              "name": "scene",
+              "type": {
+                "text": "Scene | undefined"
+              },
+              "fieldName": "scene"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "property-event-tap",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "property-event-tap",
+          "declaration": {
+            "name": "PropertyEventTap",
+            "module": "src/modeller/property-sidebar/effects/property-event-tap.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/modeller/property-sidebar/effects/property-event.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "PropertyEvent",
+          "members": [
             {
               "kind": "field",
-              "name": "extendedMap"
+              "name": "value",
+              "type": {
+                "text": "Properties | undefined"
+              },
+              "attribute": "value"
             },
             {
-              "kind": "method",
-              "name": "getNodeHandleClass",
-              "parameters": [
-                {
-                  "name": "component",
-                  "type": {
-                    "text": "Component"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "scene",
+              "type": {
+                "text": "Scene | undefined"
+              },
+              "attribute": "scene"
             },
             {
               "kind": "method",
-              "name": "isExtended",
+              "name": "_onValueChange",
               "parameters": [
                 {
-                  "name": "component",
+                  "name": "e",
                   "type": {
-                    "text": "Component"
+                    "text": "Event"
                   }
                 }
               ]
-            },
+            }
+          ],
+          "events": [
             {
-              "kind": "method",
-              "name": "toggleExtended",
-              "parameters": [
-                {
-                  "name": "component",
-                  "type": {
-                    "text": "Component"
-                  }
-                }
-              ]
+              "name": "change",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "Properties | undefined"
+              },
+              "fieldName": "value"
             },
             {
-              "kind": "method",
-              "name": "toggleHidden",
-              "parameters": [
-                {
-                  "name": "component",
-                  "type": {
-                    "text": "Component"
-                  }
-                }
-              ]
+              "name": "scene",
+              "type": {
+                "text": "Scene | undefined"
+              },
+              "fieldName": "scene"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "property-event",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "property-event",
+          "declaration": {
+            "name": "PropertyEvent",
+            "module": "src/modeller/property-sidebar/effects/property-event.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/modeller/property-sidebar/effects/property-shadow.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "컴포넌트의 그림자 속성을 편집하는 element\n\nExample:\n <property-shadow",
+          "name": "PropertyShadow",
+          "members": [
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "Properties | undefined"
+              },
+              "attribute": "value"
             },
             {
               "kind": "method",
-              "name": "selectComponent",
+              "name": "_onValueChange",
               "parameters": [
                 {
-                  "name": "component",
+                  "name": "e",
                   "type": {
-                    "text": "Component"
+                    "text": "Event"
                   }
                 }
               ]
-            },
+            }
+          ],
+          "events": [
             {
-              "kind": "method",
-              "name": "renderComponent",
-              "return": {
-                "type": {
-                  "text": "TemplateResult"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "component",
-                  "type": {
-                    "text": "Component"
-                  }
-                },
-                {
-                  "name": "depth",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
+              "name": "change",
+              "type": {
+                "text": "CustomEvent"
+              }
             }
           ],
           "attributes": [
             {
-              "name": "scene",
+              "name": "value",
               "type": {
-                "text": "Scene | undefined"
+                "text": "Properties | undefined"
               },
-              "fieldName": "scene"
+              "fieldName": "value"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "scene-inspector",
+          "tagName": "property-shadow",
           "customElement": true
         }
       ],
@@ -5071,16 +6297,44 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SceneInspector",
-            "module": "src/modeller/property-sidebar/inspector/inspector.ts"
+            "name": "PropertyShadow",
+            "module": "src/modeller/property-sidebar/effects/property-shadow.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "scene-inspector",
+          "name": "property-shadow",
           "declaration": {
-            "name": "SceneInspector",
-            "module": "src/modeller/property-sidebar/inspector/inspector.ts"
+            "name": "PropertyShadow",
+            "module": "src/modeller/property-sidebar/effects/property-shadow.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/modeller/property-sidebar/effects/value-converter.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "convert",
+          "parameters": [
+            {
+              "name": "element",
+              "type": {
+                "text": "any"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "convert",
+          "declaration": {
+            "name": "convert",
+            "module": "src/modeller/property-sidebar/effects/value-converter.ts"
           }
         }
       ]
@@ -5191,189 +6445,28 @@
               ]
             },
             {
-              "kind": "method",
-              "name": "_isIdentifiable",
-              "parameters": [
-                {
-                  "name": "selected",
-                  "type": {
-                    "text": "Component[]"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_isClassIdentifiable",
-              "parameters": [
-                {
-                  "name": "selected",
-                  "type": {
-                    "text": "Component[]"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_isLine",
-              "parameters": [
-                {
-                  "name": "selected",
-                  "type": {
-                    "text": "Component[]"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_is3dish",
-              "parameters": [
-                {
-                  "name": "selected",
-                  "type": {
-                    "text": "Component[]"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_getValueFromEventTarget",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "AbstractProperty",
-                "module": "src/modeller/property-sidebar/abstract-property.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "_onAfterValueChange",
-              "parameters": [
-                {
-                  "name": "key",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "any"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "AbstractProperty",
-                "module": "src/modeller/property-sidebar/abstract-property.ts"
-              }
-            }
-          ],
-          "events": [
-            {
-              "name": "bounds-change",
-              "type": {
-                "text": "CustomEvent"
-              }
-            },
-            {
-              "name": "property-change",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "inheritedFrom": {
-                "name": "AbstractProperty",
-                "module": "src/modeller/property-sidebar/abstract-property.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "value",
-              "type": {
-                "text": "Properties | undefined"
-              },
-              "fieldName": "value"
-            },
-            {
-              "name": "bounds",
-              "type": {
-                "text": "BOUNDS | null"
-              },
-              "default": "null",
-              "fieldName": "bounds"
-            },
-            {
-              "name": "selected",
-              "type": {
-                "text": "Component[]"
-              },
-              "default": "[]",
-              "fieldName": "selected"
-            }
-          ],
-          "superclass": {
-            "name": "AbstractProperty",
-            "module": "/src/modeller/property-sidebar/abstract-property"
-          },
-          "tagName": "property-shape",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "property-shape",
-          "declaration": {
-            "name": "PropertyShapes",
-            "module": "src/modeller/property-sidebar/shapes/shapes.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/modeller/property-sidebar/styles/styles.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "PropertyStyles",
-          "members": [
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "any"
-              },
-              "default": "{}",
-              "attribute": "value"
-            },
-            {
-              "kind": "field",
-              "name": "selected",
-              "type": {
-                "text": "Component[]"
-              },
-              "default": "[]",
-              "attribute": "selected"
+              "kind": "method",
+              "name": "_isIdentifiable",
+              "parameters": [
+                {
+                  "name": "selected",
+                  "type": {
+                    "text": "Component[]"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "fonts",
-              "type": {
-                "text": "any[]"
-              },
-              "default": "[]",
-              "attribute": "fonts"
+              "kind": "method",
+              "name": "_isClassIdentifiable",
+              "parameters": [
+                {
+                  "name": "selected",
+                  "type": {
+                    "text": "Component[]"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
@@ -5389,19 +6482,15 @@
             },
             {
               "kind": "method",
-              "name": "_onValueChange",
+              "name": "_is3dish",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "selected",
                   "type": {
-                    "text": "Event"
+                    "text": "Component[]"
                   }
                 }
-              ],
-              "inheritedFrom": {
-                "name": "AbstractProperty",
-                "module": "src/modeller/property-sidebar/abstract-property.ts"
-              }
+              ]
             },
             {
               "kind": "method",
@@ -5442,59 +6531,64 @@
               }
             }
           ],
+          "events": [
+            {
+              "name": "bounds-change",
+              "type": {
+                "text": "CustomEvent"
+              }
+            },
+            {
+              "name": "property-change",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "inheritedFrom": {
+                "name": "AbstractProperty",
+                "module": "src/modeller/property-sidebar/abstract-property.ts"
+              }
+            }
+          ],
           "attributes": [
             {
               "name": "value",
               "type": {
-                "text": "any"
+                "text": "Properties | undefined"
               },
-              "default": "{}",
               "fieldName": "value"
             },
             {
-              "name": "selected",
+              "name": "bounds",
               "type": {
-                "text": "Component[]"
+                "text": "BOUNDS | null"
               },
-              "default": "[]",
-              "fieldName": "selected"
+              "default": "null",
+              "fieldName": "bounds"
             },
             {
-              "name": "fonts",
+              "name": "selected",
               "type": {
-                "text": "any[]"
+                "text": "Component[]"
               },
               "default": "[]",
-              "fieldName": "fonts"
+              "fieldName": "selected"
             }
           ],
           "superclass": {
             "name": "AbstractProperty",
             "module": "/src/modeller/property-sidebar/abstract-property"
           },
-          "tagName": "property-style",
-          "customElement": true,
-          "events": [
-            {
-              "name": "property-change",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "inheritedFrom": {
-                "name": "AbstractProperty",
-                "module": "src/modeller/property-sidebar/abstract-property.ts"
-              }
-            }
-          ]
+          "tagName": "property-shape",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "custom-element-definition",
-          "name": "property-style",
+          "name": "property-shape",
           "declaration": {
-            "name": "PropertyStyles",
-            "module": "src/modeller/property-sidebar/styles/styles.ts"
+            "name": "PropertyShapes",
+            "module": "src/modeller/property-sidebar/shapes/shapes.ts"
           }
         }
       ]
@@ -5746,6 +6840,166 @@
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/modeller/property-sidebar/styles/styles.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "PropertyStyles",
+          "members": [
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "any"
+              },
+              "default": "{}",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "Component[]"
+              },
+              "default": "[]",
+              "attribute": "selected"
+            },
+            {
+              "kind": "field",
+              "name": "fonts",
+              "type": {
+                "text": "any[]"
+              },
+              "default": "[]",
+              "attribute": "fonts"
+            },
+            {
+              "kind": "method",
+              "name": "_isLine",
+              "parameters": [
+                {
+                  "name": "selected",
+                  "type": {
+                    "text": "Component[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onValueChange",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "AbstractProperty",
+                "module": "src/modeller/property-sidebar/abstract-property.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_getValueFromEventTarget",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "AbstractProperty",
+                "module": "src/modeller/property-sidebar/abstract-property.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_onAfterValueChange",
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "any"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "AbstractProperty",
+                "module": "src/modeller/property-sidebar/abstract-property.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "any"
+              },
+              "default": "{}",
+              "fieldName": "value"
+            },
+            {
+              "name": "selected",
+              "type": {
+                "text": "Component[]"
+              },
+              "default": "[]",
+              "fieldName": "selected"
+            },
+            {
+              "name": "fonts",
+              "type": {
+                "text": "any[]"
+              },
+              "default": "[]",
+              "fieldName": "fonts"
+            }
+          ],
+          "superclass": {
+            "name": "AbstractProperty",
+            "module": "/src/modeller/property-sidebar/abstract-property"
+          },
+          "tagName": "property-style",
+          "customElement": true,
+          "events": [
+            {
+              "name": "property-change",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "inheritedFrom": {
+                "name": "AbstractProperty",
+                "module": "src/modeller/property-sidebar/abstract-property.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "property-style",
+          "declaration": {
+            "name": "PropertyStyles",
+            "module": "src/modeller/property-sidebar/styles/styles.ts"
+          }
+        }
+      ]
     }
   ]
 }