Merge pull request #182 from gtt-project/ftr/rotate-map

smellman · web-flow · commit 7be01c83a50d · 2023-02-16T12:55:35.000+09:00
Ftr/rotate map
diff --git a/app/controllers/.keep b/app/controllers/.keep
diff --git a/app/helpers/.keep b/app/helpers/.keep
diff --git a/app/helpers/gtt_map_helper.rb b/app/helpers/gtt_map_helper.rb
@@ -2,20 +2,21 @@
 
 module GttMapHelper
 
-  def map_form_field(form, map, field: :geojson, bounds: nil, edit_mode: nil, upload: true)
+  def map_form_field(form, map, field: :geojson, bounds: nil, edit_mode: nil, upload: true, rotation: 0)
     safe_join [
       form.hidden_field(field, id: 'geom'),
-      map_tag(map: map, bounds: bounds, edit: edit_mode, upload: upload)
+      map_tag(map: map, bounds: bounds, edit: edit_mode, upload: upload, rotation: rotation)
     ]
   end
 
   def map_tag(map: nil, layers: map&.layers,
               geom: map.json, bounds: map.bounds,
               edit: nil, popup: nil, upload: true,
-              collapsed: false)
+              collapsed: false, rotation: map&.rotation)
 
     data = {
-      geom: geom.is_a?(String) ? geom : geom.to_json
+      geom: geom.is_a?(String) ? geom : geom.to_json,
+      rotation: rotation
     }
 
     if layers
diff --git a/app/models/.keep b/app/models/.keep
diff --git a/app/models/gtt_configuration.rb b/app/models/gtt_configuration.rb
@@ -1,23 +1,25 @@
 class GttConfiguration
   include ActiveModel::Model
 
-  attr_accessor :project, :geojson, :gtt_tile_source_ids
+  attr_accessor :project, :geojson, :gtt_tile_source_ids, :map_rotation
 
   def self.for(project)
     new(
       project: project,
       geojson: project.geojson,
+      map_rotation: project.map_rotation,
       gtt_tile_source_ids: project.gtt_tile_source_ids
     )
   end
 
   def self.from_params(params)
     new geojson: params[:geojson],
+      map_rotation: params[:map_rotation],
       gtt_tile_source_ids: params[:gtt_tile_source_ids]
   end
 
   def map
-    GttMap.new json: geojson, layers: project.gtt_tile_sources.sorted
+    GttMap.new json: geojson, layers: project.gtt_tile_sources.sorted, rotation: project.map_rotation
   end
 
 end
diff --git a/app/models/gtt_map.rb b/app/models/gtt_map.rb
@@ -1,12 +1,13 @@
 class GttMap
 
-  attr_reader :layers, :json, :bounds
+  attr_reader :layers, :json, :bounds, :rotation
 
-  def initialize(geom: nil, json: nil, layers:, bounds: nil)
+  def initialize(geom: nil, json: nil, layers:, bounds: nil, rotation: nil)
     unless @json = json
       @json = RedmineGtt::Conversions.geom_to_json geom if geom
     end
 
+    @rotation = rotation || 0
     @bounds = bounds || @json
     @layers = layers
   end
diff --git a/app/views/issues/index/_map.html.erb b/app/views/issues/index/_map.html.erb
@@ -4,7 +4,7 @@
     <legend class="<%= "icon " + (collapsed ? "icon-collapsed" : "icon-expended") %>"><%= l(:field_location) %></legend>
 
     <%= map_tag map: @project.map, geom: (Issue.array_to_geojson(@issues, include_properties: { only: %i(id subject tracker_id status_id) }) if @issues),
-      popup: { href: '/issues/[id]' }, collapsed: collapsed %>
+      popup: { href: '/issues/[id]' }, collapsed: collapsed, rotation: @project.map_rotation %>
   </fieldset>
 
 <% end %>
diff --git a/app/views/issues/show/_map.html.erb b/app/views/issues/show/_map.html.erb
@@ -1,3 +1,3 @@
 <% if @project.nil? or @project.module_enabled?(:gtt) %>
-  <%= map_tag map: @issue.map, geom: (@issue.as_geojson(include_properties: { only: %i(tracker_id status_id) }) if @issue) %>
+  <%= map_tag map: @issue.map, geom: (@issue.as_geojson(include_properties: { only: %i(tracker_id status_id) }) if @issue), rotation: @project.map_rotation %>
 <% end %>
diff --git a/app/views/projects/index.api.rsb b/app/views/projects/index.api.rsb
@@ -8,6 +8,7 @@ api.array :projects, api_meta(:total_count => @project_count, :offset => @offset
       api.parent(:id => project.parent.id, :name => project.parent.name) if project.parent && project.parent.visible?
       api.status      project.status
       api.is_public   project.is_public?
+      api.rotation    project.map_rotation
 
       if @include_geometry
         if project.geom
diff --git a/app/views/projects/settings/_gtt.html.erb b/app/views/projects/settings/_gtt.html.erb
@@ -12,13 +12,17 @@
         {}, { multiple: true, size: 5 } %>
       <br /><em><%= t :gtt_tile_sources_info %></em>
     </p>
+    <p>
+      <%= content_tag(:label, l(:gtt_map_rotate_label)) %>
+      <%= number_field_tag('gtt_configuration[map_rotation]', @project.map_rotation, min: 0, max: 359, size: 10 ) %>
+      <br /><em><%= t :gtt_map_rotate_info_html  %></em>
+    </p>
   </div>
 
   <div class="box">
-    <%= map_form_field f, @form.map, bounds: nil, edit_mode: 'Polygon' %>
+    <%= map_form_field f, @form.map, bounds: nil, edit_mode: 'Polygon', rotation: @project.map_rotation %>
   </div>
 
-
   <%= submit_tag l(:button_save) %>
 
 <% end %>
diff --git a/app/views/projects/show.api.rsb b/app/views/projects/show.api.rsb
@@ -7,6 +7,7 @@ api.project do
   api.parent(:id => @project.parent.id, :name => @project.parent.name) if @project.parent && @project.parent.visible?
   api.status      @project.status
   api.is_public   @project.is_public?
+  api.rotation    @project.map_rotation
 
   if @project.geom
     api.geojson (params[:format] == "json") ? @project.geojson : @project.geojson.to_json
diff --git a/app/views/projects/show/_map.html.erb b/app/views/projects/show/_map.html.erb
@@ -1,7 +1,7 @@
 <% if @project.nil? or @project.module_enabled?(:gtt) %>
-<div class="usermap box">
+<div class="projectmap box">
   <h3 class="icon icon-gtt-map"><%= l(:label_project_map) %></h3>
 
-  <%= map_tag map: @project.map %>
+  <%= map_tag map: @project.map, rotation: @project.map_rotation %>
 </div>
 <% end %>
diff --git a/app/views/redmine_gtt/hooks/_view_issues_form_details_top.html.erb b/app/views/redmine_gtt/hooks/_view_issues_form_details_top.html.erb
@@ -2,7 +2,7 @@
       ((issue.new_record? && User.current.allowed_to?(:add_issues, issue.project)) ||
         User.current.allowed_to?(:edit_issues, issue.project))
 %>
-  <%= map_form_field form, issue.map, bounds: issue.project.map.bounds,
+  <%= map_form_field form, issue.map, bounds: issue.project.map.bounds, rotation: @project.map_rotation,
         edit_mode: Setting.plugin_redmine_gtt['editable_geometry_types_on_issue_map'] && Setting.plugin_redmine_gtt['editable_geometry_types_on_issue_map'].join(' '),
         upload: Setting.plugin_redmine_gtt['enable_geojson_upload_on_issue_map'] == "true" %>
 <% end %>
diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -52,6 +52,9 @@ en:
   gtt_tile_sources_select_xyz: "XYZ Tiles"
   gtt_tile_sources_load_example: "Load example configuration."
 
+  gtt_map_rotate_label: "Map rotation"
+  gtt_map_rotate_info_html: "Hold down <code>Shift+Alt</code> and drag the map to rotate."
+
   gtt_settings_general_center_lon: "Default map center longitude"
   gtt_settings_general_center_lat: "Default map center latitude"
   gtt_settings_general_zoom_level: "Default map zoom level"
diff --git a/db/migrate/20220904020146_add_projects_map_rotation.rb b/db/migrate/20220904020146_add_projects_map_rotation.rb
@@ -0,0 +1,9 @@
+class AddProjectsMapRotation < ActiveRecord::Migration[5.2]
+  def self.up
+    add_column :projects, :map_rotation, :integer, default: 0
+  end
+
+  def self.down
+    remove_column :projects, :map_rotation
+  end
+end
diff --git a/lib/redmine_gtt/actions/update_project_settings.rb b/lib/redmine_gtt/actions/update_project_settings.rb
@@ -29,6 +29,7 @@ def update_project
 
         begin
           @project.geojson = @form.geojson
+          @project.map_rotation = @form.map_rotation
         rescue RGeo::Error::InvalidGeometry => e
           @project.errors.add(:geom, :invalid)
           return false
diff --git a/lib/redmine_gtt/patches/project_patch.rb b/lib/redmine_gtt/patches/project_patch.rb
@@ -8,7 +8,7 @@ def self.apply
           Project.prepend GeojsonAttribute
           Project.prepend self
           Project.class_eval do
-            safe_attributes "geojson"
+            safe_attributes :geojson, :map_rotation
             has_and_belongs_to_many :gtt_tile_sources
             after_create :set_default_tile_sources
           end
@@ -35,4 +35,3 @@ def set_default_tile_sources
 
   end
 end
-
diff --git a/src/components/gtt-client.ts b/src/components/gtt-client.ts
@@ -138,6 +138,7 @@ export class GttClient {
         })
       ]),
       controls: control_defaults({
+        rotateOptions: {},
         attributionOptions: {
           collapsible: false
         },
@@ -333,6 +334,23 @@ export class GttClient {
     })
     this.toolbar.addControl(maximizeCtrl)
 
+    // Map rotation
+    const rotation_field = document.querySelector('#gtt_configuration_map_rotation') as HTMLInputElement
+    if (rotation_field !== null) {
+      this.map.getView().on('change:rotation', (evt) => {
+        rotation_field.value = String(Math.round(radiansToDegrees(evt.target.getRotation())))
+      })
+
+      rotation_field.addEventListener("input", (evt) => {
+        const { target } = evt;
+        if (!(target instanceof HTMLInputElement)) {
+          return;
+        }
+        const value = target.value;
+        this.map.getView().setRotation(degreesToRadians(parseInt(value)))
+      })
+    }
+
     if (this.contents.edit) {
       this.setControls(this.contents.edit.split(' '))
     } else if (this.contents.popup) {
@@ -827,7 +845,8 @@ export class GttClient {
       // Avoid flicker (map move)
       center: center,
       zoom: parseInt(this.defaults.zoom),
-      maxZoom: parseInt(this.defaults.maxzoom) // applies for Mierune Tiles
+      maxZoom: parseInt(this.defaults.maxzoom), // applies for Mierune Tiles
+      rotation: degreesToRadians(parseInt(this.map.getTargetElement().getAttribute("data-rotation")))
     })
     this.map.setView(view)
   }
@@ -1360,6 +1379,16 @@ const getCookie = (cname:string):string => {
   return ''
 }
 
+const radiansToDegrees = (radians: number) => {
+  let degrees = radians * (180 / Math.PI)
+  degrees = (degrees % 360 + 360) % 360
+  return degrees
+}
+
+const degreesToRadians = (degrees: number) => {
+  return degrees * (Math.PI / 180)
+}
+
 const getMapSize = (map: Map) => {
   let size = map.getSize()
   if (size.length === 2 && size[0] <= 0 && size[1] <= 0) {
