Geometry, interaction, UI, and typing extensions for Snap.svg (Bezier/PolyBezier, polygons, hulls, BBox, Element/Paper helpers)#676
Conversation
… in one dimension.
|
Thanks for the work on this. I'm a bit out of touch on this now, and not sure if Dmitry checks this now, so feel a bit unconfident to handle. I had been previously pondering whether a Snap-CE (community edition) or something could be a way (but then there's issues with the site and versioning issues...). Is anyone else currently using Snap here and can do some verification and testing atm ? |
…ions, including better support of css easing functions. Now there is a support of general cubic bezier easing.
…values. Few other conversion of var declarations.
…position and improvement of global time management for animations. Paths.js:Ability for non-linear transformations for paths. Plus, non-linear animations. A large collection of non-linear animation transformations added to Snap.NonlinTransforms. This is a new class with powerful functionality. Added shapes.js with additional complex element conductors for paper. Various other bug fixes. Added demos for the new easing and non-linear transformations.
|
Added additional powerful functionality related to non-linear transformations and element animations. See demo: demos Point-utils demos: Next: Full SVG-based 3D engine for Snap.svg Demo for 3D Bezier projections: |
Some bug fixed in point_utils.js Some bug fizes in element_extensions.js
…itional demos and utilities. Started MD based tutorial section in demos.
…itional demos and utilities. Started MD based tutorial section in demos.
Shadow dom support for Snap. Other fixes.
and a few related fixes.
Summary
This PR adds a comprehensive set of geometry utilities, interaction primitives, UI-building helpers, and TypeScript types on top of Snap.svg. It retains compatibility with the core API while enabling advanced tasks such as Bezier editing, polygon/hull analysis, draggable and constrained movement, border image tiling, HTML embedding via foreignObject, rasterization, and more.
Motivation
Scope of Changes
New/extended modules (src/)
bezier.js: Full Bezier and PolyBezier engine (split, length, normals, offset/outline, intersections, arcs, PolyBezier aggregation).polygons.js: Polygon operations (intersection, point-in-polygon, area, distance/alignment helpers).convex_overlap.js: SAT-based convex polygon overlap checks; exposed underSnap.polygons.sat.hull.js: Concave hull integration (hull.js) plus convex hull wrapper.bbox.js: BBox class andSnap.boxhelpers with rich geometry API and rotating bbox.element_extensions.js: Element prototype enhancements (IDs/refs, coordinate transforms, overlaps, center of mass/rotation, path conversion, clip/mask, interaction: move/revolve/draggable, transforms and utilities).paper_extensions.js: Paper prototype enhancements (grid/zigzag/arcFan/disk segments/circle/ellipse builders;foreignObject/htmlInsert;embeddedSVG;canvas;button; text helpers; border image tiling; extension processor;Snap.FORCE_AFTER).paper_extensions.js: Paper prototype enhancements (grid/zigzag/arcFan/disk segments/circle/ellipse builders;foreignObject/htmlInsert;embeddedSVG;canvas;button; text helpers; border image tiling; extension processor;Snap.FORCE_AFTER); plus Paper constructors/methods copied onto Element to enable method chaining during SVG construction.gui_interactions.js: GUI helpers: cursors, region select, event wiring conveniences, overlay/canvas rasterization.colors.js: Material UI and Flat UI palettes;Snap.importMUIColors;Snap.getIndexColor.jsdoc-types.js: Central typedefs for points, ranges, bbox-like, polar, etc.Types
types/snap.svg.d.ts: Ambient declarations for the above APIs plus core Snap types (Paper, Element, Mina, path helpers, etc.).Demos/docs
demos/; new features are exercised via code snippets indoc/WHATS_NEW.md.Breaking Changes
Element.prototype,Paper.prototype, andSnap.Element.remove()is enhanced to also clean linked clipPaths/masks/refs. This is stricter behavior but should be non-breaking for typical workflows.Performance Considerations
Migration and Usage Notes
el.globalToLocal(p),el.getCursorPoint(evt)for coordinate math.el.makeDraggable({ bounds, snap, onstart, onmove, onend })for drag.paper.htmlInsert()for HTML overlays viaforeignObject.Snap.hull(points, concavity)andSnap.polygons.intersect(a, b)for polygon tasks.Snap.box(...)/new Snap.BBox(...)for bbox operations.el.rect(...).circle(...).path(...)(appended withSnap.FORCE_AFTER).Testing
test/.Documentation
doc/WHATS_NEW.md(highlights, APIs, examples, migration).types/snap.svg.d.tsaligns with runtime surface.Checklist
doc/WHATS_NEW.md)types/)