mirror/spacedeck-open
1
0
Fork 0
mirror of https://github.com/spacedeck/spacedeck-open.git synced 2025-12-15 17:37:30 +01:00
Code Issues Projects Releases Wiki Activity

Fix Space browsing/editing on touch devices such as iPad (#152)

Browse Source 
* touch (tablet): fix deselect when tapping space; add edit text butto
* touch: fix media upload on iDevice
* touch: fix vector transforming (points of arrows, scribbles)

Co-authored-by: Lukas F. Hartmann <lukas@mntre.com>
This commit is contained in:
mntmn
2021-01-11 13:04:07 +01:00
committed by GitHub
parent 72221fcf0b
commit fbf18839f9
7 changed files with 84 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
locales/en.js
View File

@@ -322,6 +322,7 @@
"follow_present": "Follow",
"mute_present": "Unfollow",
"follow_present_help": "If someone else is presenting this Space, the other members automatically follow the presentation. Switch following on or off with this button.",
"export": "export",
"media": "Media"
"export": "Export",
"media": "Media",
"tool_edit_text": "Edit Text"
}

52
public/javascripts/spacedeck_sections.js
View File

@@ -1019,8 +1019,7 @@ var SpacedeckSections = {
};
},
update_selection_metrics: function(arts) {
update_selection_metrics: function(arts, temporary) {
if (this.active_tool == "scribble") {
this.selection_metrics.count = 1;
return;
@@ -1053,8 +1052,6 @@ var SpacedeckSections = {
// FIXME make sure that menus fit in window
this.toolbar_props_x = pp.x+"px";
this.toolbar_props_y = pp.y+"px";
//this.hide_toolbar_artifacts();
}
this.selection_metrics.x1 = sr.x1;
@@ -1069,24 +1066,26 @@ var SpacedeckSections = {
if (!arts) arts = this.selected_artifacts();
this.first_selected_artifact = arts[0];
this.selection_metrics.count=arts.length;
this.selection_metrics.scribble_selection = false;
if (arts.length == 1 && arts[0].mime == "x-spacedeck/vector") {
if (arts[0].shape == "scribble") {
this.selection_metrics.scribble_selection = true;
if (!temporary) {
this.first_selected_artifact = arts[0];
this.selection_metrics.count=arts.length;
this.selection_metrics.scribble_selection = false;
if (arts.length == 1 && arts[0].mime == "x-spacedeck/vector") {
if (arts[0].shape == "scribble") {
this.selection_metrics.scribble_selection = true;
}
this.selection_metrics.vector_points = arts[0].control_points;
this.selection_metrics.vector_selection = true;
} else {
this.selection_metrics.vector_points = [{},{}];
this.selection_metrics.vector_selection = false;
}
this.selection_metrics.has_link=false;
this.insert_link_url="";
if (arts.length == 1 && arts[0].meta && arts[0].meta.link_uri && arts[0].meta.link_uri.length>0) {
this.selection_metrics.has_link=true;
this.insert_link_url = arts[0].meta.link_uri;
}
this.selection_metrics.vector_points = arts[0].control_points;
this.selection_metrics.vector_selection = true;
} else {
this.selection_metrics.vector_points = [{},{}];
this.selection_metrics.vector_selection = false;
}
this.selection_metrics.has_link=false;
this.insert_link_url="";
if (arts.length == 1 && arts[0].meta && arts[0].meta.link_uri && arts[0].meta.link_uri.length>0) {
this.selection_metrics.has_link=true;
this.insert_link_url = arts[0].meta.link_uri;
}
},
@@ -1436,13 +1435,13 @@ var SpacedeckSections = {
this.color_picker_rgb = rgb_to_hex(rgba.r,rgba.g,rgba.b);
},
update_selected_artifacts: function(change_func, override_locked) {
update_selected_artifacts: function(change_func, override_locked, temporary) {
var artifacts = this.selected_artifacts(!override_locked);
if (!artifacts.length) return;
this.update_artifacts(artifacts, change_func);
this.update_selection_metrics();
this.update_selection_metrics(null, temporary||false);
},
nudge_selected_artifacts: function(dx, dy, event) {
@@ -1923,10 +1922,7 @@ var SpacedeckSections = {
}.bind(this));
},
delayed_edit_artifact: function(evt) {
evt.stopPropagation();
evt.preventDefault();
delayed_edit_artifact: function() {
var a = this.selected_artifacts()[0];
var el = $("#ios-focuser-"+a._id);
@@ -2087,8 +2083,6 @@ var SpacedeckSections = {
if (a.description!=dom.innerHTML) {
a.description = dom.innerHTML;
console.log("new DOM:",dom.innerHTML);
this.update_board_artifact_viewmodel(a);
this.queue_artifact_for_save(a);

10
public/javascripts/spacedeck_whiteboard.js
View File

@@ -285,6 +285,7 @@ function setup_whiteboard_directives() {
$scope.start_adding_placeholder(evt);
return;
} else if ($scope.active_tool=="pan") {
this.deselect();
this.start_pan(evt);
return;
}
@@ -723,6 +724,9 @@ function setup_whiteboard_directives() {
//save_artifact(ars[i], null, $scope.display_saving_error);
}
// update vector handles
$scope.update_selection_metrics();
}
if (this.mouse_state == "text_editor") {
@@ -941,18 +945,14 @@ function setup_whiteboard_directives() {
// special case for arrow's 3rd point
if (a.shape == "arrow" && $scope.selected_control_point_idx!=2) {
/*control_points[2].dx += dx/2;
control_points[2].dy += dy/2; */
control_points[2].dx = (control_points[0].dx+control_points[1].dx)/2;
control_points[2].dy = (control_points[0].dy+control_points[1].dy)/2;
}
return _this.normalize_control_points(control_points, old_a);
});
}, false, true); // override_locked: false, temporary: true
} else if (this.mouse_state == "scribble") {
$scope.update_selected_artifacts(function(a) {
var old_a = a;

10
views/partials/space.html
View File

@@ -85,13 +85,13 @@
v-bind:class="{text-editing:(editing_artifact_id==a._id && (a.view.major_type=='text' || a.view.major_type=='shape'))}"
id="artifact-{{a._id}}">
<div v-if="a.view && a.view.major_type" style="height:100%; width:100%" v-bind:title="(a.editor_name || (a.user && a.user.nickname) || '')">
<span v-if="a.locked && is_selected(a)" class="link-wrapper">
<span class="btn btn-sm btn-icon btn-round btn-primary">
<span class="icon icon-lock-closed"></span>
</span>
<span v-if="a.locked && is_selected(a)" class="link-wrapper">
<span class="btn btn-sm btn-icon btn-round btn-primary">
<span class="icon icon-lock-closed"></span>
</span>
</span>
<!-- text -->
<div v-if="a.view.major_type == 'text'" class="text" v-bind:style="a.view.inner_style">
<div class="text-table">

2
views/partials/tool/image.html
View File

@@ -4,7 +4,7 @@
<div class="dialog-section">
<label class="btn btn-xxl btn-transparent btn-icon">
<span class="icon icon-picture-upload"></span>
<input type="file" accept="*/*" multiple v-on:change="handle_image_file_upload($event)" id="image_file_upload">
<input type="file" multiple v-on:change="handle_image_file_upload($event)" id="image_file_upload">
</label>
<p>Click to Upload<br/> or drag file(s) anywhere.</p>
</div>

16
views/partials/tool/toolbar-elements.html
View File

@@ -43,7 +43,8 @@
<div class="dropdown bottom light center">
<div class="btn-collapse in">
<button class="btn btn-transparent btn-icon-labeled" v-on:click="handle_insert_image_url()" v-on:touchstart="handle_insert_image_url()" title="<%=__("media")%>">
<input type="file" multiple v-on:change="handle_image_file_upload($event)" id="image_file_upload" class="btn btn-transparent btn-icon-labeled" style="position: absolute; z-index: 1; opacity: 0;">
<button class="btn btn-transparent btn-icon-labeled" title="<%=__("media")%>">
<span class="icon icon-upload"></span>
<span class="icon-label" ><%=__("media")%></span>
</button>
@@ -59,19 +60,6 @@
</div>
</div>
<div class="dropdown top left light">
<div class="btn-collapse">
<button class="btn btn-transparent btn-icon-labeled" v-bind:class="{open:opened_dialog=='image'}" v-on:click="open_dialog('image')" title="<%=__("image")%>">
<span class="icon icon-picture"></span>
<span class="icon-label"><%=__("image")%></span>
</button>
</div>
<div class="dialog">
<%- include("./image.html") %>
</div>
</div>
<div class="dropdown top left light" v-bind:class="{open:opened_dialog=='zones'}">
<div class="btn-collapse in">
<button class="btn btn-transparent btn-icon-labeled" v-bind:class="{open:opened_dialog=='zones'}" v-on:click="open_dialog('zones')" title="<%=__("tool_zones")%>">

11
views/partials/tool/toolbar-object.html
View File

@@ -97,6 +97,17 @@
<button class="btn btn-divider"></button>
<div class="dropdown bottom light center">
<div class="btn-collapse" v-bind:class="{in:selection_metrics.contains_text}">
<button
class="btn btn-icon-labeled btn-transparent"
v-on:click="delayed_edit_artifact()">
<span class="icon icon-pencil"></span>
<span class="icon-label"><%=__("tool_edit_text")%></span>
</button>
</div>
</div>
<div class="dropdown top light right" v-bind:class="{open:opened_dialog=='object-options'}">
<button class="btn btn-transparent btn-icon-labeled" v-on:click="open_dialog('object-options')" v-bind:class="{open : opened_dialog=='object-options'}">
<span class="icon icon-cogwheel"></span>