Image Annotator - プレビュー画面で画像に注釈を付けられます

markerjs2 に更新し、コードを整理しました。
PR のリンクはこちらです:

「いいね!」 7

エディターの改善は素晴らしく、コードを大幅に削減できました :clap:

残念ながら、編集を保存した後、ポストが表示されなくなりました。markdown が完全に正しくないようです。文字列の解析が正しく行われていないようです。

上の画像の markdown は編集前のファイルです。編集後、コンポーネントがファイル名の (1) に混乱し、それをアップロードパスに含めてしまっていることがわかります。(1upload をご覧ください。テーマに JS テストを追加できるようになったので、ファイル名の解析に関するテストを追加しましょう。

この問題が修正されるまで、Meta では一時的にテーマコンポーネントを無効にします。すでに #theme:broken-theme とマークされているので、新しい問題ではありません :slight_smile:

「いいね!」 7

画像 URL の検出時に誤った括弧を拾うバグを修正しました。
PR のリンクはこちらです:

また、画像にカーソルを合わせた際に、注釈を追加するか、切り取り(回転/反転)するかを選択できる機能を追加する予定です。

「いいね!」 6

Nam さん、こんにちは。

コンポーネントが meta にインストールされ、テストを行いました!

フィードバックをいくつか:

  1. エディタを開く方法がわかりません。プレビュー領域に「編集」という単語を浮かべるか、鉛筆のアイコンを表示するなどの指示を入れることをお勧めします。

  1. コンポーザーと画像の z-index の競合が大きく、画像がコンポーザーの背後に隠れてしまいます。すべてを表示するには、コンポーザーを大幅に縮小する必要があります。

  2. 編集対象の画像が非常に大きくなっています。編集中の画像のサイズを維持する方法はありませんか?

「いいね!」 6

フィードバックをいただき、誠にありがとうございます!
フィードバック #1 について対応中です。スタイルは変更しますが、「ANNOTATE」または「CROP」ボタンを押した際は、引き続きリクエストされたツールが開くようにします。

フィードバック #2 については、問題の詳細についてもう少し詳しく教えていただけますか?

#3 については、まもなく着手します。

「いいね!」 6

はい、こちらです:

私の環境では、コンポーザーが画像エディターの上に表示されてしまい、コンポーザーを縮めるまで正常に編集できません。

ここでの素晴らしい作業に心から感謝しています!

「いいね!」 3

ご clarification をありがとうございます!
どのデバイス、ブラウザ、バージョンをお使いか教えていただけますか?
私の環境では、エディタが画像エディタの上にポップアップして表示されます。私の環境では以下のようになります:

「いいね!」 4

ああ、ここで何が起こっているのか分かりました。「フォーカスされたサイドバー」テーマでテストしていただけますか?このテーマは Discourse チーム(および Discourse for Teams の一部)でのみ有効になっています。

おそらく、z-index を少しだけ上げる必要があると思います。@markvanlan がここでサポートしてくれています。

「いいね!」 4

@Nam 画像の切り抜き・回転を可能にする素晴らしい変更をマージしてくれました。ローカルアップロードの画像をクリックすると、注釈付けまたは切り抜き・回転を選択できる選択ステージが追加されました。:clap:

現在の唯一の問題は、切り抜きモーダルにおける z-index の問題です(注釈付けモーダルの z-index は正常です)。切り抜きモーダルの外側要素に安定した className がないため、cropro ライブラリにそれを追加するための PR を提出しています。

追記:
リポジトリをフォークして必要な小さな変更を加えました。これで z-index の問題は解消されました。

「いいね!」 4

画像の編集時に画像サイズが大きすぎるという問題に対して、解決策はなさそうです。
これは、MarkerJs と Cropro が画像を編集する際に画像サイズを設定しているためです。

「いいね!」 3

問題が発生し、解決できません。

「いいね!」 1

もう1年経ってしまったので、この機能には本当に可能性を感じているため、再び切実に伺いたいのですが、S3 にホストされた画像や CDN の利用について、何か見込みはありますか?:grin:

「いいね!」 2

Meta は S3 と CDN を使用しており、画像をアップロードするのと同時に編集する場合は問題なく機能します。既存の画像を編集している間は機能しないようです(AFAIK)。

「いいね!」 1

興味深いことに、プラグインと TC がすべて無効化されている別のサイトでも同じ問題が発生しましたが、S3 を無効にすると動作します。何か心当たりはありますか?また、画像も不自然に引き伸ばされており、本来は 2:3 の比率であるべきなのに、画面幅いっぱいに引き伸ばされてしまっています。

「いいね!」 3

DISCOURSE_ENABLE_CORS: true を app.yml に設定していますか?

「いいね!」 2

いいえ、その行はありませんし、cors-origins サイト設定にも何も設定されていません。

「いいね!」 1

その設定を行って、再構築してください。

「いいね!」 2

有効化・再ビルド後も発生しています。cors-originsDISCOURSE_CORS_ORIGIN に対して何か設定が必要でしょうか?

「いいね!」 1

編集が完了できない問題が発生しています。

2021-09-20_16-46-24

「いいね!」 1

スマートフォンで試すと、現在の画像が編集されず、次の画像(現在の画像の隣)が置き換わってしまいます。

これを確認していただけますか?

「いいね!」 1