可視化界面編輯器設計

一 設計理念

界面、編輯器、播放器

界面是一棵組件樹。

界面編輯器就是對這棵組件樹進行編輯和持久化的工具。

編輯器維護這顆樹的數據，對外開放增刪改查，撤銷重作等接口。

界面播放器輸入組件樹，能夠獲得界面展現

將來甚至能夠作到經過不一樣的播放器來適配不一樣的平臺。

組件

樹上的每個組件經過輸入屬性決定本身的

• 展現
• 交互

組件能夠經過組件編輯器的接口知曉是否處於編輯狀態。 編輯狀態下，組件能夠提供交互編輯本身的輸入屬性。

這麼作有兩點好處

• 編輯器關注的始終只有組件樹，組件的屬性，無需關注如何編輯組件屬性
• 組件能夠爲本身的業務須要，量身定作最適合的交互來編輯屬性

例：設計一個 Text 組件邏輯 當處在編輯狀態下，顯示光標，文字爲可編輯狀態

不處於編輯狀態，則顯示文本內容

Strikingly 正是實踐該理念的優秀產品[www.sxl.cn]

視圖組件

進一步，咱們能夠利用組件能夠在編輯狀態下，提供本身的交互邏輯編輯自身屬性這一特性，咱們能夠設計出一個特殊組件—視圖組件。

視圖組件本質就是組件。只不過視圖組件的屬性是組件列表。 能夠在視圖組件中可視化增長、刪除、調整組件的順序，經過視圖組件，咱們得到了編排組件的能力。 視圖組件的交互很大程度上決定了可視化編輯器最終是什麼樣子，如何使用。

例如：

• 咱們能夠在視圖組件裏放一個輸入框，經過輸入組件名稱，回車，來添加組件，也能夠經過感知拖進來的組件，來更友好地添加組件。
• 視圖組件能夠是一個默認的 block ，添加進來的組件都基於默認的流式佈局。也能夠是一個通過擴展的有具體長寬的區域，能夠把組件拖到區域的任何一個位置，得到座標位置，成爲一個絕對定位的容器。

根據具體目標能夠設計出不一樣的視圖組件，甚至能夠多個視圖組件共存。

視圖注入點

有了視圖組件，咱們就能夠開始往視圖組件裏「注入」組件、尋找須要的組件定製本身的界面了。 不少界面編輯器可能底層並不如此靈活，可是表面上都是按上述那麼作的。 截止這一步，已經能夠得到足夠優秀好用的界面編輯器了。如 strikingly 、structor 等。

[https://github.com/ipselon/structor]Structor - React UI 編輯器 這是一套很是常見的理念：編輯器負責告訴組件它應該在哪裏、用戶選擇了什麼樣的個性化方案。而最終能實現啥由組件庫決定。 這裏其實對組件的設計提出了很是大的挑戰：編輯器把一塊田地分給了你，你要作到儘可能靈活地實現用戶更多需求。

這裏提出一個我認爲很是具備表明性的問題：如何靈活地設計一個 Nav Bar 。

對照上圖，咱們代入前面的設計思想，能夠設計出以下的屬性數據結構： {logo, [{icon, name}]}

菜單文字能夠自由選擇是否有 icon ，有就給顯示。預先提供了一些靈活性呢。 接下來考慮如何實現點擊菜單觸發相應的界面變化。

…

太難了，仍是不考慮了吧。

Strikingly 就沒有作這個事情。在 strikingly 裏整個模板就是一個完整的程序，菜單也是這個程序的一部分，因此能夠輕鬆實現菜單點擊的頁面聯動效果。可是，若是你想保留這個菜單，可是頁面內容部分換成其餘的。嗯，strikingly 沒有提供這個功能。

歸根結底，我做爲一個組件，拿着編輯器分配給個人一畝三分地，要能在本身的地盤上花式知足用戶需求已經很是不容易了，如今還要我去管其餘地方怎麼顯示？ —太難了。

因而呢，乾脆就把要交給我管的地也給我吧。 用戶點擊菜單1，我就讓菜單下面一大塊顯示 1 號地，點擊菜單2，就顯示 2 號地…… 而後不知道 1 號地，2 號地具體顯示什麼怎麼辦呢？ 也好說，讓編輯器來分配新的組件過來管理就好了。

說了一大堆，總算是成功引到了正題—視圖注入點。

任何組件均可以經過顯示視圖組件的方式，提供了視圖的注入點，交由用戶進一步編排組件。

舉上面 Nav Bar 的例子，Nav Bar 組件把整個屏都佔滿，bar 的下方留下的大塊空白區域是一個視圖組件，用戶可使用這個視圖組件的編排組件能力，把空白區域用其餘組件填滿。Nav Bar 這裏就只負責控制空白區域是顯示視圖組件1仍是視圖組件2，至於視圖組件1和2到底顯示些什麼，徹底不用管。

再舉一個 Nav Bar 上的細節：顯示菜單的位置也能夠經過放置視圖組件來處理，用戶往視圖組件里加 Text 就顯示文字，再往裏添一個 Icon ，那就是文字+圖標。還能夠調換文字和圖標的位置，變成不常見的左文字右圖標，甚至左右倆圖標，中間是文字。爲所欲爲。

總結

• 可視化編輯從功能上分是兩大塊：編輯器和播放器
• 界面是一棵組件樹，編輯器作的就是對這棵樹進行編輯，和數據持久化
• 組件經過輸入的屬性決定如何顯示和交互，這一點一樣適用於編輯的過程
• 編輯器須要至少一個編排組件的組件 — 視圖組件，視圖組件可替換，籍此實現了編輯器的可擴展性。
• 任何組件均可以經過內嵌視圖組件來實現更高的靈活性。