{"id":26652243,"url":"https://github.com/fxdave/react-konva-anchors","last_synced_at":"2025-10-09T23:36:59.978Z","repository":{"id":57333689,"uuid":"168617533","full_name":"fxdave/react-konva-anchors","owner":"fxdave","description":"A helping package for positioning, and sizing react -konva objects. HTML and CSS provide an easy solution for this, but for canvas, it is more painful. This library aims to ease your work with react-konva.","archived":false,"fork":false,"pushed_at":"2022-12-02T00:40:04.000Z","size":137,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-04T23:44:25.774Z","etag":null,"topics":["anchor","canvas","konva","positioning","react","sizing"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/fxdave.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-02-01T00:20:52.000Z","updated_at":"2023-01-14T09:28:16.000Z","dependencies_parsed_at":"2023-01-22T11:35:19.384Z","dependency_job_id":null,"html_url":"https://github.com/fxdave/react-konva-anchors","commit_stats":null,"previous_names":["fxdave/react-konva-anchros"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/fxdave/react-konva-anchors","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fxdave%2Freact-konva-anchors","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fxdave%2Freact-konva-anchors/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fxdave%2Freact-konva-anchors/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fxdave%2Freact-konva-anchors/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fxdave","download_url":"https://codeload.github.com/fxdave/react-konva-anchors/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fxdave%2Freact-konva-anchors/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278956323,"owners_count":26075221,"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","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["anchor","canvas","konva","positioning","react","sizing"],"created_at":"2025-03-25T03:49:17.945Z","updated_at":"2025-10-09T23:36:59.964Z","avatar_url":"https://github.com/fxdave.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-konva-anchros\nA helping package for positioning, and sizing react-konva objects. HTML and CSS provide an easy solution for this, but for canvas, it is more painful. This library aims to ease your work with react-konva.\n\n## Installation\n`npm i react-konva-anchors`\n\n## Example\n\n```javascript\n\u003cGroup ref={this.entity}\u003e\n\n            \u003cRect\n                ref={this.bg}\n                width={this.state.bgWidth}\n                height={50}\n                cornerRadius={10}\n                x={this.state.bgPos.x}\n                y={this.state.bgPos.y}\n                fill=\"#2f2f2f\" /\u003e\n\n            \u003cText\n                ref={this.text}\n                x={this.state.textPos.x}\n                y={this.state.textPos.y}\n                text={this.props.name}\n                fontSize={22}\n                fill=\"#fff\"\n                fontFamily=\"Open Sans\" /\u003e\n\n            \u003cGroup\n                ref={this.deleteButton}\n                x={this.state.deleteButtonPos.x}\n                y={this.state.deleteButtonPos.y}\u003e\n                \u003cDeleteButton /\u003e\n            \u003c/Group\u003e\n\n            \u003cGroup\n                ref={this.addButton}\n                x={this.state.addButtonPos.x}\n                y={this.state.addButtonPos.y}\u003e\n                \u003cAddButton /\u003e\n            \u003c/Group\u003e\n\n            \u003cCenterAnchor\n                element={() =\u003e this.bg.current}\n                change={(x, y) =\u003e this.setState({ bgPos: { x, y } })} /\u003e\n\n            \u003cPositionAnchor\n                \n                element={() =\u003e this.text.current}\n                elementOrigin={{x:0,y:0}}\n                elementDesiredOrigin={{x:0.5, y:0.5}}\n\n                reference={() =\u003e this.bg.current}\n                referenceOrigin={{x:0,y:0}}\n                referenceDesiredOrigin={{x:0.5, y:0.5}}\n\n                change={(x, y) =\u003e this.setState({ textPos: { x, y } })} /\u003e\n\n\n            \u003cPositionAnchor\n                \n                element={() =\u003e this.deleteButton.current}\n                elementOrigin={{x:0.5,y:0.5}}\n                elementDesiredOrigin={{x:0.5, y:0.5}}\n\n                reference={() =\u003e this.bg.current}\n                referenceOrigin={{x:0,y:0}}\n                referenceDesiredOrigin={{x:1, y:0}}\n\n                change={(x, y) =\u003e this.setState({ deleteButtonPos: { x, y } })} /\u003e\n            \n            \u003cPositionAnchor\n                \n                element={() =\u003e this.addButton.current}\n                elementOrigin={{x:0.5,y:0.5}}\n                elementDesiredOrigin={{x:0.5, y:0.5}}\n\n                reference={() =\u003e this.bg.current}\n                referenceOrigin={{x:0,y:0}}\n                referenceDesiredOrigin={{x:1, y:0}}\n\n                shift={{x:-25, y:0}}\n\n                change={(x, y) =\u003e this.setState({ addButtonPos: { x, y } })} /\u003e\n            \n            \u003cWidthAnchor\n                reference={() =\u003e this.text.current}\n                element={() =\u003e this.bg.current}\n                padding={25}\n                change={width =\u003e this.setState({ bgWidth: width })} /\u003e\n\n        \u003c/Group\u003e\n```\n\n## Usage\n\n### CenterAnchor\n\n```javascript\n\u003cCenterAnchor\n    element={() =\u003e this.A_KONVA_ELEMENT_REGERENCE.current}\n    change={(x, y) =\u003e this.setState({ A_KONVA_ELEMENT_POSITION: { x, y } })} /\u003e\n```\n\nThere are some konva objects where the origin is not at the center of the object for e.g Rect, Text.\nIf you want to center it, you can use CenterAnchor. This will query the size of the shape and returns a new position for that. (Basically x=width / 2 , y=height / 2). So ensure that you won't move this element, If you want to move, drop into a group and move the group instead.\n\nUse case: If you want to place a rectangle where you click, But you won't know the size of the rectangle, and you want to place in the middle of the pointer. Then this anchor will be a perfect choice.\n\nSee: [konvajs/konva#487].\n\n### WidthAnchor\n\n```javascript\n\u003cWidthAnchor\n    reference={() =\u003e this.KONVA_ELEMENT_REFERENCE_TO_WATCH.current}\n    element={() =\u003e this.KONVA_ELEMENT_REFERENCE_TO_CHANGE.current}\n    padding={25}\n    change={width =\u003e this.setState({ KONVA_ELEMENT_WIDTH: width })} /\u003e\n```\n\nSets the width of an element based on another element's width.\nUse case: If you have a text, and you want to make a rectangle background for that, this will fit perfectly.\n\n### PositionAnchor\n\n```javascript\n\u003cPositionAnchor            \n    element={() =\u003e this.KONVA_ELEMENT_REFERENCE_TO_MOVE.current}\n    elementOrigin={{x:0.5,y:0.5}} // the element is centered originally\n    elementDesiredOrigin={{x:0.5, y:0.5}} // we don't want to change it so we keep it centered\n    \n    reference={() =\u003e this.KONVA_ELEMENT_REFERENCE_TO_WATCH.current}\n    referenceOrigin={{x:0,y:0}}  // the reference element starts from the left top corner\n    referenceDesiredOrigin={{x:1, y:0}} // we want to move the element to the top right corner\n    // basically it will just move the element origin to the desired reference origin\n    \n    shift={{x:-25, y:0}} // then we shift it by -25 on x\n    \n    change={(x, y) =\u003e this.setState({ KONVA_ELEMENT_POSITION: { x, y } })} /\u003e\n```\nThe elementOrigin is the original origin usually {x:0,y:0} or if it is centered then {x:0.5,y:0.5},\nbut you can set it to anywhere in your shape like: top right corner: {x:1,y:0}.\nThe elementDesiredOrigin is the origin where you want to grab the element. \nThe referenceOrigin is the same as elementOrigin but for the reference element.\nThe referenceDesiredOrigin is the origin point where you want to place the element.\nThe shift is a final transformation. \n\nWith origins you can reach percentage based positioning.\nWith shifts you can move by pixels.\n\nUse case: For example, you can use it to pose a button to the top right corner of a rectangle.\n\n### CustomAnchor\n\n```javascript\n    \u003cCustomAnchor \n        reference={ () =\u003e this.KONVA_ELEMENT_REFERENCE_TO_WATCH.current }\n        element={ () =\u003e this.KONVA_ELEMENT_REFERENCE_TO_CHANGE.current }\n        result={ (ref) =\u003e ({ x: ref.width(), y:0 }) }\n        isUpdateNeeded={ (el, res) =\u003e el.x() !== res.x || el.y() !== res.y  }\n        change={ (res) =\u003e { this.setState({ KONVA_ELEMENT_PROPERTY: res }) } }\n    /\u003e   \n```\n\nThe result is a function which returns a computed result from the reference object for example a position.\nThe isUpdateNeeded is a function that receives the element and the result and returns a boolean. If it is true the change function will be called. Hint: use Math.round when you compare numbers.\n\nUse case: If you can't find right solution from the anchors above, you can use this.\n\n## Contributing\n\nIf you want to help me, form an issue, or send pull requests.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffxdave%2Freact-konva-anchors","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffxdave%2Freact-konva-anchors","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffxdave%2Freact-konva-anchors/lists"}