full_svg_flutter 1.5: DevTools-ის ინსპექტორი SVG-ისთვის რეალურ დროში

1.4.2-ის შემდეგ full_svg_flutter-ის ხუთი რელიზი გამოვიდა: ორი პლატფორმული შესწორება, ახალი ინსტრუმენტი დეველოპერებისთვის, გეომეტრიის სისწორის მასშტაბური გადახედვა და რელიზი, რომლითაც JavaScript-ზე დაფუძნებული SVG-ები iOS-ზე ამუშავდა. აი, რა შეიცვალა და რატომ არის ეს მნიშვნელოვანი.

DevTools-ის ინსპექტორი FullSVG (1.5.0)

როცა ანიმირებული SVG ბრაუზერში სწორად გამოიყურება, აპლიკაციაში კი — არა, უნდა დაინახოთ, რა გააკეთა სინამდვილეში რენდერერმა. 1.5.0 ვერსიიდან full_svg_flutter-ს Flutter DevTools-ის ოფიციალური გაფართოება ახლავს. ის debug რეჟიმში გაშვებულ აპლიკაციას უკავშირდება და რეალურ რენდერერებს იკვლევს: იმავე დოკუმენტს, ანიმაციის დროის ღერძსა და painter-ს, რომლებიც თქვენს ეკრანს ხატავს.

რას მიიღებთ:

ეგზემპლარები რეალურ დროში. ვიჯეტების ხეში ჩართული თითოეული რენდერერი ცალკეა ნაჩვენები თავისი წყაროთი, ანიმაციის მდგომარეობითა და DOM-კვანძების რაოდენობით — მაშინაც კი, როცა ერთი და იგივე ასეტი ხეში ორჯერაა ჩართული.
SVG DOM, რომელიც საჭიროებისამებრ იტვირთება. შვილობილი კვანძები მხოლოდ მაშინ იტვირთება, როცა მწკრივს გაშლით, ამიტომ დიდ დოკუმენტებთანაც მუშაობა შეუფერხებელია. კვანძის არჩევისას ჩანს მისი ტეგი, id, კლასები, ატრიბუტების საწყისი და გამოთვლილი მნიშვნელობები, ამ წამს ანიმირებული ატრიბუტები და ის SMIL- და CSS-ანიმაციები, რომლებიც ამ კვანძზეა მიმართული.
დაკვრის მართვა. დაკვრა, პაუზა, თავიდან გაშვება, გადახვევა და სიჩქარე 0,25×–2× დიაპაზონში. მართვის ელემენტები უშუალოდ რენდერერის საკუთარ დეტერმინისტულ საათზე მოქმედებს და მეორე დროის ღერძს არ ქმნის.
კვანძის მონიშვნა. არჩეული კვანძი გაშვებულ აპლიკაციაში კონტურით გამოიყოფა რენდერინგის რეალური გეომეტრიის მიხედვით, SVG-ის ატრიბუტების შეუცვლელად.
პატიოსანი სტატისტიკა. DOM-კვანძები, ანიმაციების რაოდენობა, აქტიური ანიმაციები, ფილტრის პრიმიტივები, მასკები, გრადიენტები, ამოჭრის კონტურები, JavaScript-ის არსებობა, მიმდინარე დრო და ხანგრძლივობა. ინსპექტორი არ იგონებს პარსინგისა და ხატვის დროის მაჩვენებლებს, რომლებსაც რენდერერი არ ზომავს.

როგორ გავხსნათ:

გაუშვით აპლიკაცია debug რეჟიმში.
გახსენით Flutter DevTools თქვენი IDE-დან ან flutter run ბრძანების გამოტანიდან.
მოთხოვნისას ჩართეთ DevTools-ის გაფართოებები.
აირჩიეთ full_svg_flutter-ის გაფართოება. ინსპექტორი FullSVG სახელით გამოჩნდება.

არაფრის კონფიგურირება არ გჭირდებათ. ხიდი მხოლოდ debug რეჟიმში მუშაობს: release build-ები რენდერერებს არ არეგისტრირებს, DOM-ხეებს მეხსიერებაში არ ინახავს და ინსპექტორისთვის მონაცემებს არ აგროვებს. ეგზემპლარების აღრიცხვა weak reference-ებს იყენებს და ვიჯეტის სასიცოცხლო ციკლს მიჰყვება, გაფართოება კი hot restart-ის შემდეგ ხელახლა უკავშირდება აპლიკაციას.

არის რამდენიმე შეზღუდვა, რომლის ცოდნაც ღირს. მთავარი isolate გაშვებული უნდა იყოს და არა breakpoint-ზე შეჩერებული. JavaScript-ის არსებობა ნაჩვენებია, მაგრამ ნებისმიერი JavaScript-კოდის შესრულება განზრახ არ არის გახსნილი. გამოთვლილი CSS, კასკადში სტილების წარმომავლობა, ცალკეული <use> ეგზემპლარების არჩევა და კადრების დროის მაჩვენებლები სამომავლო ამოცანებია.

სრული სახელმძღვანელო მოცემულია ინსპექტორის დოკუმენტაციაში (იხსნება ახალ ჩანართში).

გეომეტრია, რომელიც ბრაუზერივით იქცევა (1.5.1)

1.5.1 სისწორეზე ორიენტირებული რელიზია, რომელიც დიდწილად საზოგადოების pull request-ებზეა აგებული.

პროცენტები სწორი viewport-ის მიმართ გამოითვლება. საბაზისო ფიგურები, <use> ელემენტების გეომეტრია და მათი ეგზემპლარების viewport-ები, ჩადგმული <svg>, ტექსტის კოორდინატები, მასკის არეები და hit testing — ყველა სწორ viewport-ს იყენებს, მათ შორის იმ შემთხვევაშიც, როცა ძირეულ SVG-ს საკუთარი ზომა არ აქვს და მისი viewport თავად ვიჯეტია.
ანიმაციები საკუთარ ერთეულებს ინარჩუნებს. SMIL-ანიმაციები პროცენტულ და აბსოლუტურ მნიშვნელობებს შორის ორივე ერთეულს ინარჩუნებს — ინტერპოლაციისას, ადიციური კომპოზიციისას და calcMode="paced" რეჟიმში დროის გათვლისას.
objectBoundingBox სწორ ჩარჩოს იყენებს. clipPathUnits, maskUnits და maskContentUnits ობიექტის საზღვრებს stroke-ის გათვალისწინების გარეშე იღებს, ამიტომ stroke ჩარჩოს აღარ ადიდებს; ტექსტური სამიზნეებისთვის კი მათი განლაგების საზღვრები გამოიყენება და ტექსტი ამოჭრის შედეგად აღარ ქრება.
ფილტრებისა და მასკების ანიმირებული არეები ახლა მოქმედებს. <filter> და <mask> არეების ანიმირებული პროცენტული მნიშვნელობები ანიმაციის განმავლობაში ხელახლა იკითხება, ნაცვლად იმისა, რომ წყაროდან მხოლოდ ერთხელ დაიპარსოს.
დროის გათვლა თითოეული ეგზემპლარისთვის. გაზიარებულ <symbol> კონტენტში paced რეჟიმის ანიმაციები თითოეული <use> ეგზემპლარის viewport-ისთვის ცალკე გამოითვლება.

თუ თქვენი გრაფიკა პროცენტულ სიგრძეებს ეყრდნობა — რაც ექსპორტირებულ და ადაპტიურ SVG-ში ხშირია — ეს რელიზი შედეგს ბევრად უფრო აახლოებს იმასთან, რასაც ბრაუზერი ხატავს.

ნატიური აწყობა ყველა პლატფორმაზე (1.4.3, 1.4.4, 1.5.2)

full_svg_flutter ჩაშენებულ სკრიპტებსა და SVGator-ის ექსპორტებს quickjs_engine-ით უშვებს — ეს ჩემი QuickJS-NG პაკეტია Flutter-ისთვის. სამი რელიზი იმას დაეთმო, რომ ეს ნატიური ფენა „მოსაწყენი“ გამხდარიყო:

1.4.3, Windows. Windows-ზე სუფთა აწყობა ჩავარდნით მთავრდებოდა, რადგან Flutter-ის მიერ გენერირებული plugin registrant არარსებულ სიმბოლოს იძახებდა. გასწორდა quickjs_engine 0.1.4-ით.
1.4.4, უნივერსალური macOS. უნივერსალური macOS-აპლიკაციები ახლა QuickJS-ის ხიდს Apple Silicon-ისა და Intel-ის ორივე slice-ით შეიცავს.
1.5.2, iOS, Swift Package Manager და Android Gradle Plugin 9. JavaScript-ზე დაფუძნებული SVG-ები ახლა iOS-ზე CocoaPods-ის გამოყენებისას ინიციალიზდება. წინა ვერსიებში pod-ი ხიდის არცერთ ფუნქციას არ აექსპორტებდა, ამიტომ ყოველ SVG-ზე, რომელსაც <script> ჰქონდა, ჩნდებოდა შეცდომა „Failed to lookup symbol 'jsNewRuntime'“. ამასთან, quickjs_engine-ის გამო Flutter CocoaPods-ს აღარ უბრუნდება, AGP 9-ზე Android-აპლიკაციები კი ჩაშენებული Kotlin-ით იწყობა.

ნატიური დეტალები ცალკე სტატიაშია: quickjs_engine 0.1.6.

განახლება

dependencies:
  full_svg_flutter: ^1.5.2

ან გაუშვით flutter pub upgrade full_svg_flutter. პაკეტს Flutter 3.32 ან უფრო ახალი ვერსია სჭირდება, ცვლილებების ჟურნალში კი 1.4.2-სა და 1.5.2-ს შორის API-ში თავსებადობის დამრღვევი ცვლილებები არ არის მითითებული.

მადლობა

ამ ხუთი რელიზიდან ოთხი საზოგადოების წვლილს შეიცავს: შეცდომების შესახებ შეტყობინებებს, მათი გამეორების მაგალითებსა და pull request-ებს. გმადლობთ, @oierxjn (იხსნება ახალ ჩანართში), @remtrik (იხსნება ახალ ჩანართში), @dariyooo (იხსნება ახალ ჩანართში), @OrPudding (იხსნება ახალ ჩანართში), @sufiyansayyed (იხსნება ახალ ჩანართში) და @DomingoMG (იხსნება ახალ ჩანართში).

თუ SVG სხვაგვარად იხატება, ვიდრე ბრაუზერში, გახსენით ინსპექტორი, შეამოწმეთ გამოთვლილი ატრიბუტები და გამომიგზავნეთ ფაილი (იხსნება ახალ ჩანართში). ეს კვლავ რენდერერის გაუმჯობესების ყველაზე სწრაფ გზად რჩება.

ცვლილებების სრული ჟურნალი: pub.dev/packages/full_svg_flutter/changelog (იხსნება ახალ ჩანართში)