@@ -12,10 +12,26 @@
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class GitCode extends Vue {
- @Prop() private project: string = '/web/persagy-web';
- @Prop() private raw: string = '/raw/master';
- @Prop() private fileUrl: string = '/persagy-web-big/src/items/SIconTextItem.ts';
- @Prop() private type: string = 'typescript';
+ @Prop({
+ type: String,
+ required: false,
+ default: '/web/persagy-web'
+ }) project !: string;
+ default: '/raw/master'
+ }) raw !: string;
+ default: '/persagy-web-big/src/items/SIconTextItem.ts'
+ }) fileUrl !: string;
+ default: 'typescript'
+ }) type !: string;
baseUrl: string = '/git';
code: string = '';
created() {
@@ -7,14 +7,16 @@
<script lang="ts">
import {SGraphScene, SGraphView, SGraphSvgItem} from "@persagy-web/graph/lib";
import { Component, Vue } from "vue-property-decorator";
+ import { v1 as uuid } from "uuid";
export default class SvgCanvas extends Vue{
- id: string = 'svg' + Date.now();
+ id: string = uuid();
view: SGraphView | undefined;
svgData = {
// https://desk-fd.zol-img.com.cn/t_s2560x1600c5/g6/M00/0B/0E/ChMkKV9N5U2IfX_aAA-zeHRQZW8AABvcADsv-0AD7OQ688.jpg
- Url: 'https://cdn-img.easyicon.net/image/2019/panda-search.svg',
+ // Url: 'https://cdn-img.easyicon.net/image/2019/panda-search.svg',
+ Url: require('../../../public/assets/img/1.svg'),
X: 100,
Y: 100,
Width: 200,
@@ -29,11 +31,11 @@
this.view.scene = scene;
const item = new SGraphSvgItem(null, this.svgData);
scene.addItem(item);
- this.view.fitSceneToView();
+ // setInterval(() => {
+ // item.width+=10;
+ // item.height+=10;
+ // },500)
+ // this.view.fitSceneToView();
};
}
</script>
-
-<style scoped>
-</style>
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#FFFFFF;}
+</style>
+<g>
+ <circle class="st0" cx="10" cy="10" r="8.5"/>
+ <path d="M10,2c4.41,0,8,3.59,8,8s-3.59,8-8,8s-8-3.59-8-8S5.59,2,10,2 M10,1c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9
+ S14.97,1,10,1L10,1z"/>
+</g>
+</svg>
@@ -23,10 +23,10 @@
"vue-class-component": "^7.0.2"
},
"devDependencies": {
+ "@types/uuid": "^8.0.0",
"@vue/cli-plugin-babel": "^3.9.0",
"@vue/cli-plugin-typescript": "^3.9.0",
"@vue/cli-service": "^3.9.0",
- "vue-template-compiler": "^2.6.10",
"@vuepress/plugin-back-to-top": "^1.2.0",
"less": "^3.12.2",
"less-loader": "^6.2.0",
@@ -34,10 +34,10 @@
"polybooljs": "^1.2.0",
"ts-loader": "^7.0.4",
"typescript": "^3.9.2",
+ "vue-template-compiler": "^2.6.10",
"vuepress": "^1.2.0",
"vuepress-plugin-mathjax": "^1.2.8",
"vuepress-plugin-typescript": "^0.2.0",
- "vuepress-types": "^0.9.2",
- "@types/uuid": "^8.0.0"
+ "vuepress-types": "^0.9.2"