{"id":19642044,"url":"https://github.com/bianruanjian/widget-core-designer","last_synced_at":"2025-04-28T12:31:41.931Z","repository":{"id":140481878,"uuid":"127688097","full_name":"bianruanjian/widget-core-designer","owner":"bianruanjian","description":"the base repository for bianruanjian widgets","archived":false,"fork":false,"pushed_at":"2018-11-20T06:05:21.000Z","size":127,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-05T08:35:07.240Z","etag":null,"topics":["designer","dojo","widget"],"latest_commit_sha":null,"homepage":null,"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/bianruanjian.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":"support/grunt/config.ts","governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-02T01:44:44.000Z","updated_at":"2019-05-09T07:22:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"748cb631-d172-4251-af87-0a3d8d4deab1","html_url":"https://github.com/bianruanjian/widget-core-designer","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/bianruanjian%2Fwidget-core-designer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bianruanjian%2Fwidget-core-designer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bianruanjian%2Fwidget-core-designer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bianruanjian%2Fwidget-core-designer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bianruanjian","download_url":"https://codeload.github.com/bianruanjian/widget-core-designer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251313672,"owners_count":21569469,"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":["designer","dojo","widget"],"created_at":"2024-11-11T14:11:19.759Z","updated_at":"2025-04-28T12:31:41.924Z","avatar_url":"https://github.com/bianruanjian.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# widget-core-designer\n\n[![npm version](https://badge.fury.io/js/widget-core-designer.svg)](https://badge.fury.io/js/widget-core-designer)\n\n\n将用户自定义部件转换为可在设计器中使用的部件，提供以下功能：\n\n1. 测量部件尺寸;\n2. 增加遮盖层，屏蔽部件与设计器冲突的事件;\n3. 覆盖部件的获取焦点效果;\n4. 为空容器增加可视化效果等。\n\n## 如何使用\n\n在你的项目中使用`widget-core-designer`时，需使用以下命令安装此包\n\n```bash\nnpm install widget-core-designer\n```\n\n## 如何开发设计器版部件\n\n### 开发步骤\n\n1. 创建部件类，为用户自定义部件添加设计器功能;\n2. 引入本项目中的`DesignerWidgetMixin`：\n    ```typescript\n    import DesignerWidgetMixin from 'widget-core-designer/DesignerWidgetMixin';\n    ```\n3. 将原部件的属性与设计器部件的相关属性混合：\n    ```typescript\n    export default class UserCustomWidget extends DesignerWidgetMixin(UserCustomWidgetBase){}\n    ```\n4. 根据部件特性进行部分属性的定制：\n    1. 覆写`isContainer`方法，该方法默认返回`false`，用于标识是否是容器部件，即内容为空时需要在设计器中默认撑开一定高度。\n    2. 覆写`needOverlay`方法，该方法默认返回`false`，针对输入框之类的部件需要在设计器中阻止点击事件，增加遮盖层。\n    ```typescript\n    protected isContainer(){\n        return false;\n    }\n    protected needOverlay(){\n        return false;\n    }\n    ```\n\n### 示例代码\n\n1. 自定义部件\n\n```typescript\n\nexport class UserCustomWidgetBase\u003cP extends UserCustomWidgetProperties = UserCustomWidgetProperties\u003e extends ThemedBase\u003cP\u003e {\n    ...\n}\n\nexport default class UserCustomWidget extends UserCustomWidgetBase\u003cUserCustomWidgetProperties\u003e {}\n\n```\n\n2. 设计器使用的部件\n\n```typescript\nimport UserCustomWidgetBase from './widgets/UserCustomWidget';\nimport DesignerWidgetMixin from './DesignerWidgetMixin';\n\nexport class UserCustomWidget extends DesignerWidgetMixin(UserCustomWidgetBase){\n    \n    protected isContainer(){\n       return true;\n    }\n\n    protected needOverlay(){\n        return false;\n    }\n}\n\nexport default UserCustomWidget;\n```\n\n## 如何打包项目\n\n进入项目的根目录，执行以下命令：\n\n```bash\ngrunt dist\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbianruanjian%2Fwidget-core-designer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbianruanjian%2Fwidget-core-designer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbianruanjian%2Fwidget-core-designer/lists"}