Webclient: HTML based topic rendering pt.3 (#505).

In conjunction with the Box Renderer the new HTML-based rendering approaches the original (canvas drawn) state: - switching topicmaps work - topics can't exceed the topicmap panel space - long labels are wrapped New hook in View Customizer Framework: {{{ topic_dom_appendix(topic_view, topic_dom) }}} Invoked once the topic's DOM (as provided by the `topic_dom` hook) is added to the document. At this time the topic DOM is positioned and have a size. The customizer can use this information e.g. to add further geometry-dependent elements to the topic DOM. BREAKING CHANGES Webclient convenience method renamed: {{{ dm4c.get_icon_src() -> dm4c.get_type_icon_src() }}} See #505.
dmx-systems · Oct 22, 2013 · 7a70000 · 7a70000
1 parent fe80f69
commit 7a70000
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 10 deletions.
diff --git a/modules/dm4-topicmaps/src/main/resources/web/script/plugin.js b/modules/dm4-topicmaps/src/main/resources/web/script/plugin.js
@@ -504,7 +504,7 @@ dm4c.add_plugin("de.deepamehta.topicmaps", function() {
         fetch_topicmap_topics()
         //
         topicmap_menu.empty()
-        var icon_src = dm4c.get_icon_src("dm4.topicmaps.topicmap")
+        var icon_src = dm4c.get_type_icon_src("dm4.topicmaps.topicmap")
         // add topicmaps to menu
         for (var id in topicmap_topics) {
             var topicmap = topicmap_topics[id]

diff --git a/modules/dm4-webclient/src/main/resources/web/css/webclient.css b/modules/dm4-webclient/src/main/resources/web/css/webclient.css
@@ -57,6 +57,10 @@ body {
 
 /*** Topicmap Panel ***/
 
+#topicmap-panel {
+    overflow: hidden;
+}
+
 #topicmap-panel #canvas {
     background-color: #fff;
 }
@@ -67,6 +71,7 @@ body {
 
 #topicmap-panel .topic {
     position: absolute;
+    max-width: 200px;
 }
 
 #topicmap-panel .topic.selected {

diff --git a/...s/dm4-webclient/src/main/resources/web/script/renderers/topicmap_renderers/canvas_view.js b/...s/dm4-webclient/src/main/resources/web/script/renderers/topicmap_renderers/canvas_view.js
@@ -58,6 +58,7 @@ function CanvasView() {
         ctx.translate(topicmap.trans_x, topicmap.trans_y)   // canvas
         update_html_translation()                           // HTML topic layer
         // update view
+        empty_topic_layer()                                 // HTML topic layer
         clear()
         topicmap.iterate_topics(function(topic) {
             if (topic.visibility) {
@@ -120,11 +121,8 @@ function CanvasView() {
     // ---
 
     this.set_topic_selection = function(topic_id) {
-        // refresh HTML topic layer
-        $("#topicmap-panel .topic.selected").removeClass("selected")
-        $("#topicmap-panel .topic#t-" + topic_id).addClass("selected")
-        // refresh canvas
-        show()
+        show()                              // canvas ### TODO: needed?
+        update_html_selection(topic_id)     // HTML topic layer
     }
 
     this.set_association_selection = function(topic_id) {
@@ -249,7 +247,7 @@ function CanvasView() {
         //
         var topic_dom = $("<div>")
         var has_moved
-        if (invoke_customizers("topic_dom", [topic, topic_dom])) {
+        if (invoke_customizers("topic_dom", [topic_view, topic_dom])) {
             topic_dom.addClass("topic").attr("id", "t-" + topic.id)
                 .mousedown(function() {
                     close_context_menu()
@@ -269,6 +267,7 @@ function CanvasView() {
                 })
             $("#topic-layer").append(topic_dom)
             position_topic_html(topic_dom, topic.x, topic.y)
+            invoke_customizers("topic_dom_appendix", [topic_view, topic_dom])
             topic_dom.draggable({
                 drag: function(event, ui) {
                     has_moved = true
@@ -912,6 +911,11 @@ function CanvasView() {
 
     // === HTML topic layer ===
 
+    function update_html_selection(topic_id) {
+        $("#topicmap-panel .topic.selected").removeClass("selected")
+        $("#topicmap-panel .topic#t-" + topic_id).addClass("selected")
+    }
+
     function position_topic_html(topic_dom, x, y) {
         var s = topic_html_size(topic_dom)
         topic_dom.css({
@@ -927,6 +931,10 @@ function CanvasView() {
         })
     }
 
+    function empty_topic_layer() {
+        $("#topic-layer").empty()
+    }
+
     function update_topic_view(topic_view, topic_dom) {
         var p = topic_dom.position()
         var s = topic_html_size(topic_dom)

diff --git a/modules/dm4-webclient/src/main/resources/web/script/util/render_helper.js b/modules/dm4-webclient/src/main/resources/web/script/util/render_helper.js
@@ -159,7 +159,7 @@ function RenderHelper() {
      * @return  An <img> element of CSS class "type-icon" (jQuery object).
      */
     this.type_icon = function(type_uri, title) {
-        var src = dm4c.get_icon_src(type_uri)
+        var src = dm4c.get_type_icon_src(type_uri)
         title = title || dm4c.type_label(type_uri)
         return this.icon(src, title)
     }

diff --git a/modules/dm4-webclient/src/main/resources/web/script/webclient.js b/modules/dm4-webclient/src/main/resources/web/script/webclient.js
@@ -919,7 +919,7 @@ dm4c = new function() {
      *
      * @return  The icon source (string).
      */
-    this.get_icon_src = function(type_uri) {
+    this.get_type_icon_src = function(type_uri) {
         return dm4c.get_topic_type(type_uri).get_icon_src()
     }
 

diff --git a/modules/dm4-workspaces/src/main/resources/web/script/plugin.js b/modules/dm4-workspaces/src/main/resources/web/script/plugin.js
@@ -140,7 +140,7 @@ dm4c.add_plugin("de.deepamehta.workspaces", function() {
         }
         //
         workspace_menu.empty()
-        var icon_src = dm4c.get_icon_src("dm4.workspaces.workspace")
+        var icon_src = dm4c.get_type_icon_src("dm4.workspaces.workspace")
         // add workspaces to menu
         for (var i = 0, workspace; workspace = workspaces[i]; i++) {
             workspace_menu.add_item({label: workspace.value, value: workspace.id, icon: icon_src})