Skip to content
You have no unread notifications
funige  /   neo  /   Issues #95  /  

コピー、レイヤー結合、消し四角などの操作で画面全体が上下に動く。しかし、ピンチズーム時や幅の狭い端末では網目の上でスクロールできなくなると操作不能になる。 #95

Open
satopian opened this issue Jan 21, 2023 · 2 comments

Comments

@satopian

Collaborator

モバイルでベジェツールやテキストツールを使うと操作不能になる · Issue #37 · funige/neo
#37
とも関連しているのかもしれないのですが…。

1.コピー、レイヤー結合、消し四角などの操作で画面全体が上下に動いてしまう

Windowsであれば、Windows inkをオフにすれば解決する問題ですが、筆圧感知が必要なお絵かきアプリもあり、Windows inkのオン・オフ切り替えを毎回お願いするのはあまりよくない事だと思っています。
また、iPadユーザーはアップルペンシルを使う事になるので、画面が上下してしまいます。

この事が原因で、NEOを使いにくいアプリだとSNS上でつぶやいている方もいます。

230121_001コピー、レイヤー結合時に画面がスクロールしてしまう

原因は、紫の網目のところでスワイプすると画面が動くからで、それを動かなくするところまでは比較的容易にできました。
現時点では、キャンバスへの描画への影響はでていないようですが、私が試している方法が最適解かどうかはわかりません。
具体的なコードはこのissueの最後にあります。

2. NEOの網目でスワイプできなくすれば上下に動かなくなる。しかし、その状態でピンチズームで拡大すると画面をスクロールできなくなり操作不能になる。

230121_002ピンチズームで拡大している時は、網目でスワイプできなければならない

ピンチズームで拡大している時には、網目のところで画面をスクロールできるようにしておかないと、脱出できなくなってしまいます。

3.条件に応じて切り替える

試験的に運営中のサイトのお絵かき掲示板のNEOを以下のような仕様にしてみています。

  • (デバイスの幅-キャンバスサイズ)>150px
    の時は、デバイスの幅に余裕があると判断してNEOの網目のところをつかんでスクロールできなくします。
  • しかし、ピンチズームでピンチインしているときはNEOの網目のところをつかんでスクロールできるようにします。
    それにより操作不能からの脱出がやや容易になります。
  • ピンチズームが等倍に戻った時はふたたびNEOの網目のところをつかんでもスクロールしなくなるようにします。

230121_003それぞれの状況に応じてスワイプするしないを切り替え

	function isPinchZooming () {//ピンチズームを検知
		if ('visualViewport' in window) {
			return window.visualViewport.scale > 1
		} else {
			return document.documentElement.clientWidth > window.innerWidth
		}
	}

	console.log(isPinchZooming ());

	function neo_disable_touch_move (e) {//NEOの網目でスワイプしない
		let screenwidth = Number(screen.width);
		let img_width = Neo.config.width;
		if((screenwidth-img_width)>150){//スクリーンの幅に余裕が無い時は網目でスワイプ
			if (typeof e.cancelable !== 'boolean' || e.cancelable) {
				e.preventDefault();
				e.stopPropagation();
			}
		}
	}
	//網目でスワイプを無効化する
	function neo_add_disable_touch_move() {
		document.getElementById('NEO').addEventListener('touchmove', neo_disable_touch_move ,{ passive: false });
	}
	//網目でスワイプを無効化するイベントリスナーを削除
	function neo_remove_disable_touch_move() {
		document.getElementById('NEO').removeEventListener('touchmove', neo_disable_touch_move ,{ passive: false });
	}
	//touchmoveイベントのたびに再処理
	document.addEventListener('touchmove', function(e) {
		neo_add_disable_touch_move();
		if(isPinchZooming ()){//ピンチズーム使用時はNEOの網目でスワイプする
			neo_remove_disable_touch_move();
		}
	});
	window.addEventListener('DOMContentLoaded',neo_add_disable_touch_move,false);

このコードを「Mouse Event Handling」の一番下に追加して実験中です。
neo.jsのコードがどのような考え方で作成されているのかが読み取れなくて、現状はこのコードでしのいでいます。

もし、これと同じような効果があり、かつ、neoのコード全体と同じ書き方ができるのであれば、funigeさんのほうでまとめて頂けると、助かるのですがどうでしょうか?

しかし、これらの対策が必要、または不必要といった判断もあると思いますので、今抱えている問題としてとりあえずissueを開いてみる事にしました。
#NEOというIDを変更するという話も以前でていましたので、そうなると、テンプレート上のインラインのJavaScriptなどで上記のコードを実装している場合は、NEOのバージョンによって外部のコードも変更する事になります。
それがもし、neo.jsで対応ずみであれば、neo.jsを更新すればすむ話になり、ある掲示板ではこの動作だけれど、別の掲示板では別の動作とならずにすむ事にもなります。

3月まで時間が無い日々が続いているとの事ですので、いつでも構いませんので、ご意見をお聞かせいただけたなら幸いです。
よろしくお願い致します。

Select a reply

The content you are editing has changed. Please copy your edits and refresh the page.

Slash commands
Beta
Give feedback
Slash commands
Beta
Give feedback

An unexpected error has occurred

Nothing to preview

@funige

Owner

funige commented Jan 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more about hiding comments.

いつも有難うございます。
ブラウザ周りの環境とか作った頃と少し変わってきた部分あると思いますので、この辺で整理したいとは思っています。
「よくわからないけど動いてる」みたいなのが多すぎますので。
でもまあ、落ち着いて全ての環境で検証するのはちょっと時間がかかりますね。
しばらくお待ちください……。

@satopian

Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more about hiding comments.

いろいろなお絵かきアプリを使えるようにPHP側で対応しても、PaintBBSが使いたいという人が多いので、独自拡張で対応している感じなのですが、できれば統一規格のほうがいいのでは?と思ってissueを開いてしまいました。
独自に上記のコードをインラインのJavaScriptで入れてしまえば、PaintBBS NEOの描画部分の仕様が変わらない限りは何とかなります。
仕様が大きく変更になる場合は、このコードでは対応できなくなるかもしれないし、やっぱり統一規格で対応できるのならそのほうが…という感じです。
あまり無理はいえない事は了解していますので、v1.6.0以後も上記のコードが動作する余地が残るようならテンプレートのHTML側にJavaScriptを入れてなんとかする事もできます…。

@funige

Add a comment

Select a reply

Slash commands
Beta
Give feedback
Slash commands
Beta
Give feedback

An unexpected error has occurred

Remember, contributions to this repository should follow our GitHub Community Guidelines.
Labels
Apply labels to this issue
None yet
Projects
Projects
None yet
Development

Link a branch or pull request Select a repository to search for branches and pull requests or

for this issue or link a pull request.
2 participants
Lock conversation

Lock conversation on this issue

  • Other users can’t add new comments to this issue.
  • You and other collaborators with access to this repository can still leave comments that others can see.
  • You can always unlock this issue again in the future.

Optionally, choose a reason for locking that others can see. Learn more about when it’s appropriate to lock conversations.

Transfer issue

Convert issue to a discussion

Loading...

Delete issue

Are you sure you want to delete this issue?

  • This cannot be undone
  • Only administrators can delete issues
  • Deletion will remove the issue from search and previous references will point to a placeholder
コピー、レイヤー結合、消し四角などの操作で画面全体が上下に動く。しかし、ピンチズーム時や幅の狭い端末では網目の上でスクロールできなくなると操作不能になる。 · Issue #95 · funige/neo