{"id":20595978,"url":"https://github.com/jsplumb-demonstrations/active-filtering","last_synced_at":"2026-04-18T04:01:47.031Z","repository":{"id":230989022,"uuid":"780646083","full_name":"jsplumb-demonstrations/active-filtering","owner":"jsplumb-demonstrations","description":"A demonstration of the active filtering functionality in JsPlumb","archived":false,"fork":false,"pushed_at":"2025-08-12T00:44:58.000Z","size":37,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"7.x","last_synced_at":"2025-08-15T17:46:00.440Z","etag":null,"topics":["diagram","diagramming","gojs","javascript","jointjs","jsplumb","svg","typescript","visualization"],"latest_commit_sha":null,"homepage":"https://jsplumbtoolkit.com/demonstrations/active-filtering","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jsplumb-demonstrations.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-04-01T22:32:02.000Z","updated_at":"2025-08-12T00:43:05.000Z","dependencies_parsed_at":"2024-04-02T01:25:34.033Z","dependency_job_id":"a8f8fa47-d314-45ab-9a29-dea9b8f61f27","html_url":"https://github.com/jsplumb-demonstrations/active-filtering","commit_stats":null,"previous_names":["jsplumb-demonstrations/active-filtering"],"tags_count":25,"template":false,"template_full_name":null,"purl":"pkg:github/jsplumb-demonstrations/active-filtering","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsplumb-demonstrations%2Factive-filtering","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsplumb-demonstrations%2Factive-filtering/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsplumb-demonstrations%2Factive-filtering/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsplumb-demonstrations%2Factive-filtering/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsplumb-demonstrations","download_url":"https://codeload.github.com/jsplumb-demonstrations/active-filtering/tar.gz/refs/heads/7.x","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsplumb-demonstrations%2Factive-filtering/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31955919,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T00:39:45.007Z","status":"online","status_checked_at":"2026-04-18T02:00:07.018Z","response_time":103,"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":["diagram","diagramming","gojs","javascript","jointjs","jsplumb","svg","typescript","visualization"],"created_at":"2024-11-16T08:14:38.376Z","updated_at":"2026-04-18T04:01:47.003Z","avatar_url":"https://github.com/jsplumb-demonstrations.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Active Filtering\n\nThis repo provides an example of how to use the active filtering mechanism to restrict drag targets. The Active filtering plugin provides a way to filter connection targets when a drag begins. When an `activeFiltering` plugin is set on a Surface and a `beforeConnect` function is supplied to the Toolkit's constructor, that function is called before a new connection is dragged, for every possible target for the current source. Whenever the beforeConnect method returns false, the corresponding target object (a Node, Group or Port) is disabled, and the user will not be able to drop the connection onto it. \n\n\nIn this demonstration, each node contains a set of entries which each contain the name of two types of animal:\n \n \n```javascript\n[\n    {\n        id:\"someNode\",\n        items:[\n            {\n                id:\"89898\",\n                entries:[\"PIG\", \"CAT\" ]\n            },\n            {\n                id:\"98656\",\n                entries:[\"DOG\", \"CAT\" ]\n            }    \n        ]\n    },\n    {\n        id:\"someOtherNode\",\n        items:[\n            {\n                id:\"85898\",\n                entries:[\"COW\", \"CAT\" ]\n            },\n            {\n                id:\"98652\",\n                entries:[\"HORSE\", \"PIG\" ]\n            }    \n        ]\n    }\n    \n]\n```\n \nEntries are deemed connectable if one or more animals from the source entry are matched in a given target, which is a decision made in the `beforeConnect` method we pass to JsPlumb:\n\n```javascript\n\nimport { newInstance, isPort } from '@jsplumbtoolkit/browser-ui';\n\nconst toolkit = newInstance({\n    portDataProperty:\"items\",\n    beforeConnect:(source, target) =\u003e {\n        // ignore node-\u003enode connections; our UI is not configured to produce them. we could catch it and\n        // return false, though, which would ensure that nodes could not be connected programmatically.\n        if (isPort(source) \u0026\u0026 isPort(target)) {\n\n            // cannot create loopback connections\n            if (source === target) {\n                return false\n            }\n\n            // cannot connect to Ports on the same Node as the Edge source\n            if (source.getParent() === target.getParent()) {\n                return false\n            }\n\n            const sourceData = source.data.entries,\n                targetData = target.data.entries\n\n            // attempt to match animals\n            for (let i = 0; i \u003c sourceData.length; i++) {\n                if (targetData.indexOf(sourceData[i]) !== -1) {\n                    return true\n                }\n            }\n            return false\n        }\n    }\n});\n```\n\n## Smooth connector\n\nThis demonstration uses the `Smooth` connector which was introduced in version 7.0.0. This is an alias for a straight connector with smoothing switched on, and in this demo it is defined in the `defaults`, via the `connector` option:\n\n```\ndefaults:{\n    ...\n    connector:CONNECTOR_TYPE_SMOOTH,\n    ...\n}\n```\n\n## Edge avoidance\n\nEdges in this demonstration attempt to avoid vertices, which is a new capability in JsPlumb 7.0.0.  It is switched on here in the defaults:\n\n```\ndefaults:{\n    ...\n    edgesAvoidVertices:true\n    ...\n}\n```\n\n## Anchors\n\nThis demo uses an anchor on the left or right of each element:\n\n```\ndefaults:{\n    ...\n    anchor:[AnchorLocations.Left, AnchorLocations.Right]\n    ...\n}\n```\n\n## Endpoint\n\nThis demo uses a Dot endpoint:\n\n```\ndefaults:{\n    ...\n    endpoint: { type:DotEndpoint.type, options:{ radius: 10 } },\n    ...\n}\n```\n\n## Magnetizer\n\nJsPlumb 7.0.0 added support for a cool new magnetizer capability - the ability to track nodes back to their original position when in `constant` mode. This is switched on via the `trackback` option to the magnetizer:\n\n```\nmagnetize:{\n    constant:true,\n    trackback:true\n}\n```\n \n\n    \n    \n### Live demo\n\n[https://jsplumbtoolkit.com/demonstrations/active-filtering](https://jsplumbtoolkit.com/demonstrations/active-filtering)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsplumb-demonstrations%2Factive-filtering","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsplumb-demonstrations%2Factive-filtering","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsplumb-demonstrations%2Factive-filtering/lists"}