{"id":17756964,"url":"https://github.com/graphieros/testwc","last_synced_at":"2026-01-11T03:11:40.537Z","repository":{"id":65343903,"uuid":"477077846","full_name":"graphieros/testwc","owner":"graphieros","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-19T08:51:31.000Z","size":737,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-28T07:45:02.207Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/graphieros.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-04-02T14:26:56.000Z","updated_at":"2024-04-28T07:45:02.208Z","dependencies_parsed_at":"2023-02-10T21:40:11.757Z","dependency_job_id":null,"html_url":"https://github.com/graphieros/testwc","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Ftestwc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Ftestwc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Ftestwc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Ftestwc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/graphieros","download_url":"https://codeload.github.com/graphieros/testwc/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246635950,"owners_count":20809329,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-26T16:10:55.919Z","updated_at":"2026-01-11T03:11:40.500Z","avatar_url":"https://github.com/graphieros.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svg-annotator web component\n\nA web component to select any area on a web page, annotate it and save the result to pdf.\n\nFeatures:\n\n- adds a button on the page, to enable the selection and annotation of its content\n- after selecting by dragging the mouse, a modal will display a canvas copy of the selection area, along with annotation tools\n- generate a pdf of the annotated content\n\n\nAnnotation tools:\n\n- create shapes (rectangle, circle, arrow)\n- freehand drawing\n- add text (includes bullet points mode)\n- select, move, resize, copy paste, delete, group \u0026 ungroup, redo shapes\n- save to pdf (uses html2canvas \u0026 jspdf as dependencies)\n- choose printing orientation\n- choose hd or low def print\n\n## Project setup\n\n```\nnpm i wc-svg-annotator\n```\n\nPlace the web component on the desired page:\n\n```\n\u003chtml\u003e\n  \u003c!-- your content --\u003e\n  \u003csvg-annotator /\u003e\n\u003c/html\u003e\n```\n\n## Props\n\n\n| Prop | Description | Default | Options |\n| ---- | ----------- | ------- | ------- |\n| button-position | Placement of the fixed starter button on the page | \"mr\" (middle right) | \"tr\", \"mr\", \"br\", \"tl\", \"ml\", \"bl\" |\n| button-size | Size of the annotation toolbar buttons | 28 | - |\n| font-family | Font family of the annotator | \"Helvetica\" | - |\n| icon-color | Color of the icons and borders of the annotator buttons | \"#4a4a4a\" | - |\n| show-print | Enable / Disable pdf functionality | true | true, false |\n| show-tooltips | Show / Hide tooltips | true | true, false |\n| translation-auto-orientation | Label for the auto print orientation checkbox | \"auto print orientation\" | - |\n| translation-color | Label for the color picker input | \"Color\" | - |\n| translation-color-alpha | Label for the color alpha slider input | \"Color alpha\" | - |\n| translation-dashed-lines | Label for the dashed lines checkbox | \"Dashed lines\" | - |\n| translation-filled | Label for the filled shape checkbox | \"Filled\" | - |\n| translation-hd-print | Label for the hd print checkbox | \"hd print\" | - |\n| translation-font-size | Label for the font size input | \"Font size\" | - |\n| translation-thickness | Label for the line thickness input | \"Thickness\" | - |\n| translation-title | Title of the annotator summary | \"Annotations\" | - |\n| translation-tooltip-group | Tooltip for the group button | \"Select \u0026 Group\" | - |\n| translation-tooltip-delete | Tooltip for the delete button | \"Delete\" | - |\n| translation-tooltip-move | Tooltip for the move button | \"Move\" | - |\n| translation-tooltip-resize | Tooltip for the resize button | \"Resize\" | - |\n| translation-tooltip-bring-to-front | Tooltip for the bring to front button | \"Bring to front\" | - |\n| translation-tooltip-bring-to-back | Tooltip for the bring to back button | \"Bring to back\" | - |\n| translation-tooltip-duplicate | Tooltip for the duplicate button | \"Duplicate\" | - |\n| translation-tooltip-redo | Tooltip for the redo button | \"Redo last shape\" | - |\n| translation-tooltip-undo | Tooltip for the undo button | \"Undo last shape\" | - |\n| translation-tooltip-ungroup | Tooltip for the ungroup button | \"Ungroup\" | - |\n| translation-tooltip-pdf | Tooltip for the save pdf button | \"Save pdf\" | - |\n\n\nHere is the syntax to use all the props in your HTML.\nIf you don't add props, these will be used by default:\n\n```\n\u003chtml\u003e\n  \u003csvg-annotator\n    button-position=\"mr\"\n    button-size=\"28\"\n    font-family=\"Helvetica\"\n    icon-color=\"#4a4a4a\"\n    show-print=\"true\"\n    show-tooltips=\"true\"\n    translation-auto-orientation=\"auto print orientation\"\n    translation-color=\"Color\"\n    translation-color-alpha=\"Color alpha\"\n    translation-dashed-lines=\"Dashed lines\"\n    translation-filled=\"Filled\"\n    translation-font-size=\"Font size\"\n    translation-hd-print=\"hd print\"\n    translation-thickness=\"Thickness\"\n    translation-title=\"Annotations\"\n    translation-tooltip-group=\"Select \u0026 Group\"\n    translation-tooltip-delete=\"Delete\"\n    translation-tooltip-move=\"Move\"\n    translation-tooltip-resize=\"Resize\"\n    translation-tooltip-bring-to-front=\"Bring to front\"\n    translation-tooltip-bring-to-back=\"Bring to back\"\n    translation-tooltip-duplicate=\"Duplicate\"\n    translation-tooltip-redo=\"Redo last shape\"\n    translation-tooltip-undo=\"Undo last shape\"\n    translation-tooltip-ungroup=\"Ungroup\"\n    translation-tooltip-pdf=\"Save pdf\"\n  /\u003e\n\u003c/html\u003e\n```\n\n## Known html2canvas \u0026 jspdf issues\n\n- some fonts and css attributes are not supported, which could lead to an offset between the selected area and the canvas generated in the modal ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgraphieros%2Ftestwc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgraphieros%2Ftestwc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgraphieros%2Ftestwc/lists"}