مُعلِّم الصور - يتيح لك وضع تعليقات على الصور في المعاينة

تم التحديث إلى markerjs2 وتنظيف الأكواد.
إليك رابط طلب السحب:

7 إعجابات

تحسينات المحرر رائعة، وقد أزال الكثير من الكود :clap:

للأسف، بعد حفظ التعديل، لم يعد المنشور يظهر، لأن تنسيق Markdown ليس دقيقًا بما يكفي. يبدو أن تحليل السلسلة النصية غير صحيح.

تنسيق Markdown في الصورة العلوية هو الملف غير المعدّل. بعد التعديل، يمكنك رؤية أن المكون قد ارتبك بسبب (1) في اسم الملف وأدرجه في مسار التحميل، انظر إلى (1upload. الآن حيث يمكن أن تحتوي السمات على اختبارات JS، دعنا نضيف اختبارًا لتحليل أسماء الملفات.

سأقوم بتعطيل مكون السمة هنا على Meta لفترة قصيرة حتى يتم إصلاح هذه المشكلة. إنه بالفعل مُعلم بـ #theme:broken-theme، لذا لا شيء جديد هنا :slight_smile:

7 إعجابات

تم إصلاح الخطأ في التقاط الأقواس الخاطئة عند العثور على عنوان URL للصورة.
إليك رابط طلب السحب:

أخطط أيضًا لإضافة وظيفة تتيح للمستخدم، عند تمرير الماوس فوق الصورة، اختيار ما إذا كان يريد تدوين ملاحظات عليها أو قصها (تدويرها/عكسها).

6 إعجابات

مرحبًا نام،

تم تثبيت المكون الآن على ميتا، وأنا أقوم باختباره!

بعض الملاحظات:

  1. غير واضح كيفية فتح المحرر. أرشح وجود مؤشر هنا (ربما جعل كلمة “تحرير” عائمة؟ أو أيقونة قلم؟ في منطقة المعاينة):

  1. هناك صراع كبير في طبقة الز- (z-index) بين المحرر والصور، مما يجعل الصورة تختفي خلف المحرر. يجب تصغير المحرر بشكل كبير جدًا لرؤية الصورة بالكامل.

  2. الصور التي يتم تحريرها تبدو ضخمة جدًا. هل هناك طريقة للحفاظ على أبعاد الصورة أثناء التحرير؟

6 إعجابات

شكرًا جزيلاً لك على الملاحظات!
أعمل حاليًا على الملاحظة رقم 1. سأقوم بتغيير أسلوبها، لكن زر ‘ANNOTATE’ أو ‘CROP’ سيفتح الأداة المطلوبة.

بخصوص الملاحظة رقم 2، هل يمكنك توضيح المشكلة لي؟

يمكنني العمل على الملاحظة رقم 3 قريبًا.

6 إعجابات

بالتأكيد:

يتم عرض محرر النصوص فوق محرر الصور بالنسبة لي، لذا لا يمكنني التعديل بشكل صحيح حتى أصغر حجم محرر النصوص.

شكرًا جزيلًا على كل هذا العمل الرائع هنا!

3 إعجابات

شكرًا لتوضيحك!
هل يمكنك إخباري بالجهاز والمتصفح والإصدار الذي استخدمته؟
يظهر المحرر فوق محرر الصور بالنسبة لي. هكذا يبدو على جهتي:

4 إعجابات

أوه، فهمت ما يحدث هنا. هل يمكنك الاختبار باستخدام سمة “الشريط الجانبي المركز”، والتي مفعلة فقط لفريق Discourse (كجزء من Discourse للفرق)؟

تخميني هو أنك تحتاج إلى رفع قيمة zindex قليلاً أكثر. @markvanlan يساعد في هذا الشأن.

4 إعجابات

@Nam تم دمج تغيير رائع يسمح بقص/تدوير الصور. أصبح هناك الآن مرحلة اختيار بعد النقر على صورة (للتحميل المحلي فقط)، إما للتعليق أو القص/التدوير. :clap:

المشكلة الوحيدة حالياً هي مشكلة أخرى تتعلق بـ z-index، ولكنها تتعلق بنافذة القص (حيث أن قيمة z-index لنافذة التعليقات صحيحة). لا يوجد اسم فئة (className) مستقر للعنصر الخارجي الخاص بنافذة القص، لذا لدي طلب سحب مفتوح لمكتبة cropro لإضافة ذلك.

تعديل:
لقد قمت بعمل نسخة من المستودع وقمت بالتغيير الصغير الذي نحتاجه. لم تعد هناك مشكلة z-index.

4 إعجابات

يبدو أنه لا توجد حل للمشكلة المتمثلة في أن الصور قيد التحرير كبيرة جدًا.
ويرجع ذلك إلى أن MarkerJs و Cropro تقوم بتعيين حجم الصورة أثناء التحرير.

3 إعجابات

أواجه مشكلة لا يمكن حلها.

إعجاب واحد (1)

لقد مرّ عام، لذا سأطرح السؤال مرة أخرى يائسًا لأن هذا الأمر يحمل إمكانات هائلة، هل هناك أي أمل في دعم الصور المستضافة على S3 واستخدام CDN؟ :grin:

إعجابَين (2)

تستخدم ميتا خدمة S3 وشبكة توصيل المحتوى (CDN)، وتعمل بشكل ممتاز إذا قمت برفع الصورة في نفس الوقت الذي تريد فيها تحريرها. حسب علمي، لن تعمل هذه الطريقة عند تحرير الصور الموجودة مسبقًا.

إعجاب واحد (1)

مثير للاهتمام، جربته على موقع آخر لديه جميع الإضافات و TCs معطلة حاليًا، وواجهت نفس المشكلة، لكنها تعمل مع تعطيل s3، أي أفكار؟ الصورة أيضًا ممدودة بشكل غريب، يجب أن تكون نسبة 2:3 لكنها تتمدد بعرض الشاشة.

3 إعجابات

هل لديك DISCOURSE_ENABLE_CORS: true في ملف app.yml؟

إعجابَين (2)

لا، ليس لدي هذا السطر، ولا يوجد أي شيء محدد في إعدادات موقع cors-origins أيضًا.

إعجاب واحد (1)

جرب إعداد ذلك وإعادة البناء.

إعجابَين (2)

ما زال الأمر يحدث بعد التفعيل/إعادة البناء، هل أحتاج إلى تعيين أي شيء لـ cors-origins أو DISCOURSE_CORS_ORIGIN: ؟

إعجاب واحد (1)

أواجه مشكلة في عدم القدرة على التعديل.

2021-09-20_16-46-24

إعجاب واحد (1)

عندما أجرب هذا على الهاتف الذكي، لا يتم تعديل الصورة الحالية، بل يتم استبدال الصورة التالية (التالية للصورة الحالية).

هل يمكنك التحقق من ذلك؟

إعجاب واحد (1)