{"id":12169,"date":"2022-04-19T11:52:11","date_gmt":"2022-04-19T02:52:11","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=12169"},"modified":"2022-04-19T16:15:09","modified_gmt":"2022-04-19T07:15:09","slug":"gwc-%eb%9d%bc%ec%9d%b4%eb%b8%8c%eb%9f%ac%eb%a6%ac-ui-%ea%b5%ac%ec%84%b1-%ec%98%88","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=12169","title":{"rendered":"GWC \ub77c\uc774\ube0c\ub7ec\ub9ac, UI \uad6c\uc131 \uc608 (gwcCreateModalDialog, Tree \ub4f1)"},"content":{"rendered":"

\ub2e4\uc74c\uacfc \uac19\uc740 UI \uad6c\uc131\uc744 \ubaa9\ud45c\ub77c\uace0 \ud560\ub54c…<\/p>\n

\"\"<\/p>\n

\ub300\ud654\uc0c1\uc790 \ud615\ud0dc\uc758 \ub808\uc774\uc544\uc6c3\uc774\ubbc0\ub85c gwcCreateModalDialog API\ub97c \uc774\uc6a9\ud55c \ud074\ub798\uc2a4\ub97c \uc791\uc131\ud569\ub2c8\ub2e4.<\/p>\n

\r\nclass DownloadLayerList {\r\n    constructor() {\r\n        const dlg = gwcCreateModalDialog(\"\ub808\uc774\uc5b4 \ubaa9\ub85d \ubd88\ub7ec\uc624\uae30\");\r\n        dlg.content = `\r\n            <div class=\"download-layer-list-dialog h-center content\">\r\n                <div class=\"vertical-linear-layout\">\r\n                    <div class=\"horizontal-linear-layout v-center\">\r\n                        <gwc-label content=\"\ud544\ud130\" outline-type=\"none\"><\/gwc-label>\r\n                        <gwc-textinput hint=\"\ud544\ud130\ub9c1\ud560 \uac12\uc744 \uc785\ub825\ud558\uc138\uc694.\"><\/gwc-textinput>\r\n                        <gwc-toolbutton class=\"refresh\" icon=\"..\/images\/reset.svg\"><\/gwc-toolbutton>\r\n                    <\/div>\r\n                    <gwc-vscrollview>\r\n                        <content>\r\n                            <gwc-tree><\/gwc-tree>\r\n                        <\/content>\r\n                    <\/gwc-vscrollview>\r\n                    <div class=\"horizontal-linear-layout h-center v-space\"> \r\n                        <gwc-button class=\"btnConfirm\" title=\"\ubd88\ub7ec\uc624\uae30\" disabled=true><\/gwc-button>\r\n                        <gwc-button class=\"btnCancel\" title=\"\ucde8\uc18c\"><\/gwc-button>\r\n                    <\/div>\r\n                <\/div>                    \r\n            <\/div>\r\n        `;\r\n\r\n        dlg.show();\r\n        GeoServiceWebComponentManager.instance.update();\r\n\r\n        ....\r\n<\/pre>\n
\ub300\ud654\uc0c1\uc790\uc758 \ud06c\uae30 \uc870\uc815\uc774 \ud544\uc694\ud558\ub2e4\uba74 \uc544\ub798\uc758 \ucf54\ub4dc\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.<\/p>\n
\r\n        dlg.width = \"30em\"\r\n        dlg.resizablePanel.resizableLeft = true;\r\n        dlg.resizablePanel.resizableRight = true;\r\n        dlg.resizablePanel.resizableTop = true;\r\n        dlg.resizablePanel.resizableBottom = true;\r\n        dlg.resizablePanel.minWidth = 350;\r\n        dlg.resizablePanel.minHeight = 300;\r\n        dlg.resizablePanel.addEventListener(\"change\", (event) => {\r\n            const { mode, oldHeight, newHeight } = event.detail;\r\n            if(mode === \"BOTTOM\" || mode == \"TOP\") {\r\n                const vscrollview = dlg.content.querySelector(\"gwc-vscrollview\");\r\n                const height = parseFloat(window.getComputedStyle(vscrollview).getPropertyValue(\"height\"));\r\n                vscrollview.style.height = `${height - (oldHeight - newHeight)}px`;\r\n                vscrollview.refresh();\r\n            }            \r\n        });\r\n    }\r\n\r\n    ....\r\n<\/pre>\n
CSS\uc5d0 \ub300\ud55c \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\n\r\n.download-layer-list-dialog {\r\n    padding: 0.5em;\r\n}\r\n\r\n.download-layer-list-dialog gwc-textinput {\r\n    flex: 1; \/* \ub300\ud654\uc0c1\uc790\uc758 \uac00\ub85c \ud06c\uae30\ub97c \uc7ac\uc870\uc815 \ud588\uc744 \ub54c gwc-textinput\uc758 \ud06c\uae30\ub3c4 \uc7ac\uc870\uc815\ub428  *\/\r\n}\r\n\r\n.download-layer-list-dialog gwc-vscrollview {\r\n    position: relative;\r\n    height: 16em;\r\n    background: rgba(0,0,0,0.8);\r\n    border-radius: 0.5em;\r\n    overflow: hidden;\r\n}\r\n\r\n.download-layer-list-dialog gwc-tree {\r\n    width: 100%; \/* tree\uc758 \ud56d\ubaa9\uc758 \ud06c\uae30\ub97c \ub300\ud654\uc0c1\uc790\uc758 \ud3ed\uc744 \uac00\ub4dd \ucc44\uc6b0\ub3c4\ub85d \uc870\uc815\ud568 *\/\r\n    padding: 0.5em 0.5em 0.5em 0.5em;\r\n}\r\n\r\n.download-layer-list-dialog gwc-tree .gwc-tree-folder-files-file {\r\n    width: 100%;\r\n}\r\n<\/pre>\n
\ub05d\uc73c\ub85c gwc\uc758 tree \ucef4\ud3ec\ub10c\ud2b8\ub294 \ub3d9\uc77c\ud55c \uacc4\uce35\uc5d0 \ub3d9\uc77c\ud55c \uc774\ub984\uc744 \uac00\uc9c4 \ud56d\ubaa9\uc744 \ucd94\uac00\ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4. \uc774\ub54c label \uc18d\uc131\uc744 \uc774\uc6a9\ud574 \uc774\ub984\uc740 \ub2e4\ub974\uc9c0\ub9cc \ud45c\uc2dc\ub418\ub294 \uc81c\ubaa9\uc740 \uc911\ubcf5\ub418\uac8c \ubcc0\uacbd\ud574 \uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ucf54\ub4dc \uc608\uc2dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\ndata.forEach(item => {\r\n    const rootFolder = this.#tree.rootFolder;\r\n    const file = rootFolder.addFile(item.id, \"url(..\/images\/layers.svg)\");\r\n\r\n    const date = new Date(item.used_time);\r\n    file.tag = `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`;\r\n    file.label = item.title;\r\n});\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
\ub2e4\uc74c\uacfc \uac19\uc740 UI \uad6c\uc131\uc744 \ubaa9\ud45c\ub77c\uace0 \ud560\ub54c… \ub300\ud654\uc0c1\uc790 \ud615\ud0dc\uc758 \ub808\uc774\uc544\uc6c3\uc774\ubbc0\ub85c gwcCreateModalDialog API\ub97c \uc774\uc6a9\ud55c \ud074\ub798\uc2a4\ub97c \uc791\uc131\ud569\ub2c8\ub2e4. class DownloadLayerList { constructor() { const dlg = gwcCreateModalDialog(“\ub808\uc774\uc5b4 \ubaa9\ub85d \ubd88\ub7ec\uc624\uae30”); dlg.content = ` <div class=”download-layer-list-dialog h-center content”> <div class=”vertical-linear-layout”> <div class=”horizontal-linear-layout v-center”> <gwc-label content=”\ud544\ud130” outline-type=”none”><\/gwc-label> <gwc-textinput hint=”\ud544\ud130\ub9c1\ud560 \uac12\uc744 \uc785\ub825\ud558\uc138\uc694.”><\/gwc-textinput> <gwc-toolbutton class=”refresh” icon=”..\/images\/reset.svg”><\/gwc-toolbutton> <\/div> <gwc-vscrollview> <content> <gwc-tree><\/gwc-tree> <\/content> <\/gwc-vscrollview> <div class=”horizontal-linear-layout … <\/p>\n
\ub354 \ubcf4\uae30 “GWC \ub77c\uc774\ube0c\ub7ec\ub9ac, UI \uad6c\uc131 \uc608 (gwcCreateModalDialog, Tree \ub4f1)”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[140,1],"tags":[],"class_list":["post-12169","post","type-post","status-publish","format-standard","hentry","category-gwc","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/12169","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12169"}],"version-history":[{"count":9,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/12169\/revisions"}],"predecessor-version":[{"id":12182,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/12169\/revisions\/12182"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=12169"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=12169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}