|
@@ -1,12 +1,13 @@
|
|
|
|
+<!--suppress TypeScriptUnresolvedVariable -->
|
|
<template>
|
|
<template>
|
|
<div class="edit-line">
|
|
<div class="edit-line">
|
|
<!-- 所有按钮 -->
|
|
<!-- 所有按钮 -->
|
|
<div class="btn-list">
|
|
<div class="btn-list">
|
|
<el-button :class="[cmdStatus=='create' ? 'heightLight' : '']" size="small" @click="create">添加</el-button>
|
|
<el-button :class="[cmdStatus=='create' ? 'heightLight' : '']" size="small" @click="create">添加</el-button>
|
|
<el-button
|
|
<el-button
|
|
- :class="[cmdStatus=='deleteItem' ? 'heightLight' : '']"
|
|
|
|
- size="small"
|
|
|
|
- @click="deleteItem"
|
|
|
|
|
|
+ :class="[cmdStatus=='deleteItem' ? 'heightLight' : '']"
|
|
|
|
+ size="small"
|
|
|
|
+ @click="deleteItem"
|
|
>删除
|
|
>删除
|
|
</el-button>
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
@@ -22,27 +23,27 @@
|
|
<div class="always-item">
|
|
<div class="always-item">
|
|
<span>边框宽:</span>
|
|
<span>边框宽:</span>
|
|
<el-input-number
|
|
<el-input-number
|
|
- size="small"
|
|
|
|
- v-model="lineWidth"
|
|
|
|
- @change="changeLineWidth"
|
|
|
|
- :min="1"
|
|
|
|
- :max="50"
|
|
|
|
|
|
+ size="small"
|
|
|
|
+ v-model="lineWidth"
|
|
|
|
+ @change="changeLineWidth"
|
|
|
|
+ :min="1"
|
|
|
|
+ :max="50"
|
|
></el-input-number>
|
|
></el-input-number>
|
|
</div>
|
|
</div>
|
|
<div class="always-item">
|
|
<div class="always-item">
|
|
<span>图展示类型:</span>
|
|
<span>图展示类型:</span>
|
|
<el-select
|
|
<el-select
|
|
- style="width:130px"
|
|
|
|
- size="small"
|
|
|
|
- v-model="showType"
|
|
|
|
- @change="changeType"
|
|
|
|
- placeholder="请选择"
|
|
|
|
|
|
+ style="width:130px"
|
|
|
|
+ size="small"
|
|
|
|
+ v-model="showType"
|
|
|
|
+ @change="changeType"
|
|
|
|
+ placeholder="请选择"
|
|
>
|
|
>
|
|
<el-option
|
|
<el-option
|
|
- v-for="item in options"
|
|
|
|
- :key="item.value"
|
|
|
|
- :label="item.label"
|
|
|
|
- :value="item.value"
|
|
|
|
|
|
+ v-for="item in options"
|
|
|
|
+ :key="item.value"
|
|
|
|
+ :label="item.label"
|
|
|
|
+ :value="item.value"
|
|
></el-option>
|
|
></el-option>
|
|
</el-select>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
@@ -60,18 +61,20 @@
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
|
|
|
+<script lang="ts">
|
|
import { SGraphScene, SGraphView, SImageShowType } from "@persagy-web/graph/";
|
|
import { SGraphScene, SGraphView, SImageShowType } from "@persagy-web/graph/";
|
|
import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
|
|
import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
|
|
import { SColor } from "@persagy-web/draw/";
|
|
import { SColor } from "@persagy-web/draw/";
|
|
//注: 开发者引入 SImageItem 包为: import {SImageItem} from "@persagy-web/edit/";
|
|
//注: 开发者引入 SImageItem 包为: import {SImageItem} from "@persagy-web/edit/";
|
|
-import { EditImageItem } from "./../../../../../guides/edit/items/src/EditImageItem";
|
|
|
|
-import { hexify } from "./../../../../public/until/rgbaUtil";
|
|
|
|
|
|
+import { EditImageItem } from "../../../../../guides/edit/items/src/EditImageItem";
|
|
|
|
+import { hexify } from "../../../../public/until/rgbaUtil";
|
|
|
|
+import { Component, Vue } from "vue-property-decorator";
|
|
|
|
+import { SMouseEvent } from "@persagy-web/base/lib";
|
|
|
|
|
|
/**
|
|
/**
|
|
* 编辑图片场景类
|
|
* 编辑图片场景类
|
|
*
|
|
*
|
|
- * @author 韩耀龙 <hanyaolong@persagy.com>
|
|
|
|
|
|
+ * @author 郝洁 <haojie@persagy.com>
|
|
*/
|
|
*/
|
|
class SScene extends SGraphScene {
|
|
class SScene extends SGraphScene {
|
|
/** 命令状态 */
|
|
/** 命令状态 */
|
|
@@ -92,9 +95,8 @@ class SScene extends SGraphScene {
|
|
* @param event 事件
|
|
* @param event 事件
|
|
* @returns 是否处理
|
|
* @returns 是否处理
|
|
*/
|
|
*/
|
|
- onMouseDown(event) {
|
|
|
|
|
|
+ onMouseDown(event: SMouseEvent): boolean {
|
|
if (this.cmdStatus == "create" && this.imageItem) { // 创建状态并且 Image 图片存在
|
|
if (this.cmdStatus == "create" && this.imageItem) { // 创建状态并且 Image 图片存在
|
|
- //todo 缺少注释
|
|
|
|
this.imageItem.moveTo(event.x, event.y);
|
|
this.imageItem.moveTo(event.x, event.y);
|
|
this.addItem(this.imageItem);
|
|
this.addItem(this.imageItem);
|
|
this.changeStatus("");
|
|
this.changeStatus("");
|
|
@@ -111,173 +113,207 @@ class SScene extends SGraphScene {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
-export default {
|
|
|
|
- name: "EditPolylineItem",
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- /** 命令所属的场景类 */
|
|
|
|
- scene: null,
|
|
|
|
- view: null, //view实例
|
|
|
|
- isCreated: false, //是否创建完成
|
|
|
|
- cmdStatus: "", //选中状态
|
|
|
|
- imageItem: null, //存放创建的Item
|
|
|
|
- lineWidth: 1, //border线宽
|
|
|
|
- lineColor: "", //border线颜色
|
|
|
|
- fillColor: "", //填充色
|
|
|
|
- showType: "", //图展示类型
|
|
|
|
- options: [
|
|
|
|
- {
|
|
|
|
- value: "Full",
|
|
|
|
- label: "铺满"
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- value: "AutoFit",
|
|
|
|
- label: "自适应"
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- value: "Equivalency",
|
|
|
|
- label: "等比缩放"
|
|
|
|
- }
|
|
|
|
- ]
|
|
|
|
- };
|
|
|
|
- },
|
|
|
|
|
|
+@Component
|
|
|
|
+export default class EditImage extends Vue {
|
|
|
|
+ /** 命令所属的场景类 */
|
|
|
|
+ scene: SGraphScene | null = null;
|
|
|
|
+ /** 实例化 view */
|
|
|
|
+ view: SScene | undefined;
|
|
|
|
+ /** 是否创建完成 */
|
|
|
|
+ isCreated: boolean = false;
|
|
|
|
+ /** 选中状态 */
|
|
|
|
+ cmdStatus: string = "";
|
|
|
|
+ /** 存放创建的 Item */
|
|
|
|
+ imageItem = null;
|
|
|
|
+ /** border 线宽 */
|
|
|
|
+ lineWidth: number = 1;
|
|
|
|
+ /** border 线颜色 */
|
|
|
|
+ lineColor: string = "";
|
|
|
|
+ /** 填充色 */
|
|
|
|
+ fillColor: string = "";
|
|
|
|
+ /** 图展示类型 */
|
|
|
|
+ showType: string = "";
|
|
|
|
+ /** 选项 */
|
|
|
|
+ options: (string | number)[] = [
|
|
|
|
+ {
|
|
|
|
+ value: "Full",
|
|
|
|
+ label: "铺满"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value: "AutoFit",
|
|
|
|
+ label: "自适应"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value: "Equivalency",
|
|
|
|
+ label: "等比缩放"
|
|
|
|
+ }
|
|
|
|
+ ];
|
|
|
|
+
|
|
/**
|
|
/**
|
|
* 页面挂载
|
|
* 页面挂载
|
|
*/
|
|
*/
|
|
- mounted() {
|
|
|
|
|
|
+ mounted(): void {
|
|
this.view = new SGraphView("edit_polygon");
|
|
this.view = new SGraphView("edit_polygon");
|
|
this.scene = new SScene();
|
|
this.scene = new SScene();
|
|
this.view.scene = this.scene;
|
|
this.view.scene = this.scene;
|
|
- this.scene.changeStatus = this.changeStatus
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- /**
|
|
|
|
- * 创建对象
|
|
|
|
- */
|
|
|
|
- create() {
|
|
|
|
- this.cmdStatus = "create";
|
|
|
|
- this.scene.root.children = [];
|
|
|
|
- this.imageItem = new EditImageItem(null);
|
|
|
|
- this.imageItem.url =
|
|
|
|
- "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591685374103&di=cd5a56b2e3f5e12d7145b967afbcfb7a&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201408%2F05%2F20140805191039_cuTPn.jpeg";
|
|
|
|
- this.imageItem.width = 100;
|
|
|
|
- this.imageItem.height = 100;
|
|
|
|
- this.imageItem.moveable = true;
|
|
|
|
- this.scene.imageItem = this.imageItem;
|
|
|
|
- },
|
|
|
|
- deleteItem() {
|
|
|
|
- this.cmdStatus = "";
|
|
|
|
- this.scene.removeItem(this.imageItem);
|
|
|
|
- this.imageItem = null;
|
|
|
|
- this.view.update();
|
|
|
|
- },
|
|
|
|
- edit() {
|
|
|
|
- if (this.imageItem) {
|
|
|
|
- if (this.imageItem.status == SItemStatus.Normal) {
|
|
|
|
- this.scene.grabItem = this.imageItem;
|
|
|
|
- this.imageItem.status = SItemStatus.Edit;
|
|
|
|
- // this.imageItem.verAndLeve = false;
|
|
|
|
- this.cmdStatus = "edit";
|
|
|
|
- } else {
|
|
|
|
- this.imageItem.status = SItemStatus.Normal;
|
|
|
|
- this.scene.grabItem = null;
|
|
|
|
- this.cmdStatus = "";
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- eqDrawLine() {
|
|
|
|
- this.cmdStatus = "eqDrawLine";
|
|
|
|
- this.scene.root.children = [];
|
|
|
|
- // this.imageItem = new EditPolylineItem(null, []);
|
|
|
|
- this.imageItem.verAndLeve = true;
|
|
|
|
- this.imageItem.status = SItemStatus.Create;
|
|
|
|
- this.imageItem.connect("finishCreated", this, this.finishCreated);
|
|
|
|
- this.imageItem.moveable = true;
|
|
|
|
- this.scene.addItem(this.imageItem);
|
|
|
|
- this.view.update();
|
|
|
|
- },
|
|
|
|
- // 改变线宽属性
|
|
|
|
- changeLineWidth(val) {
|
|
|
|
- if (this.imageItem) {
|
|
|
|
- this.lineWidth = val;
|
|
|
|
- this.imageItem.lineWidth = val;
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- // 改变颜色
|
|
|
|
- changeColor(val) {
|
|
|
|
- if (this.imageItem) {
|
|
|
|
- this.lineColor = hexify(val);
|
|
|
|
- this.imageItem.strokeColor = new SColor(this.lineColor);
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- // 改变填充颜色
|
|
|
|
- changeFillColor(val) {
|
|
|
|
- if (this.imageItem) {
|
|
|
|
- this.fillColor = hexify(val);
|
|
|
|
- this.imageItem.fillColor = new SColor(this.lineColor);
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- //改变图的展示类型
|
|
|
|
- changeType(val) {
|
|
|
|
- if (this.imageItem) {
|
|
|
|
- this.imageItem.showType = SImageShowType[val];
|
|
|
|
|
|
+ this.scene.changeStatus = this.changeStatus;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /**
|
|
|
|
+ * 创建对象
|
|
|
|
+ */
|
|
|
|
+ create() {
|
|
|
|
+ this.cmdStatus = "create";
|
|
|
|
+ this.scene.root.children = [];
|
|
|
|
+ this.imageItem = new EditImageItem(null);
|
|
|
|
+ this.imageItem.url =
|
|
|
|
+ "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591685374103&di=cd5a56b2e3f5e12d7145b967afbcfb7a&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201408%2F05%2F20140805191039_cuTPn.jpeg";
|
|
|
|
+ this.imageItem.width = 100;
|
|
|
|
+ this.imageItem.height = 100;
|
|
|
|
+ this.imageItem.moveable = true;
|
|
|
|
+ this.scene.imageItem = this.imageItem;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /**
|
|
|
|
+ * 删除命令
|
|
|
|
+ */
|
|
|
|
+ deleteItem() {
|
|
|
|
+ this.cmdStatus = "";
|
|
|
|
+ this.scene.removeItem(this.imageItem);
|
|
|
|
+ this.imageItem = null;
|
|
|
|
+ this.view.update();
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /**
|
|
|
|
+ * 编辑命令
|
|
|
|
+ */
|
|
|
|
+ edit() {
|
|
|
|
+ if (this.imageItem) {
|
|
|
|
+ if (this.imageItem.status == SItemStatus.Normal) {
|
|
|
|
+ this.scene.grabItem = this.imageItem;
|
|
|
|
+ this.imageItem.ststus = SItemStatus.Edit;
|
|
|
|
+ this.cmdStatus = "edit";
|
|
|
|
+ } else {
|
|
|
|
+ this.imageItem.status = SItemStatus.Normal;
|
|
|
|
+ this.scene.grabItem = null;
|
|
|
|
+ this.cmdStatus = "";
|
|
}
|
|
}
|
|
- },
|
|
|
|
- // 完成创建后的回调
|
|
|
|
- changeStatus() {
|
|
|
|
- this.cmdStatus = "";
|
|
|
|
}
|
|
}
|
|
- },
|
|
|
|
- watch: {
|
|
|
|
- imageItem(val) {
|
|
|
|
- // if (val) {
|
|
|
|
- // this.lineWidth = val.lineWidth; // 线宽
|
|
|
|
- this.showType = this.options[val.showType].value;
|
|
|
|
- // } else {
|
|
|
|
- // this.lineWidth = 0;
|
|
|
|
- // }
|
|
|
|
- },
|
|
|
|
- cmdStatus(val) {
|
|
|
|
- this.scene.cmdStatus = val;
|
|
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+// todo 作用 ?
|
|
|
|
+ eqDrawLine() {
|
|
|
|
+ this.cmdStatus = "eqDrawLine";
|
|
|
|
+ this.scene.root.children = [];
|
|
|
|
+ // this.imageItem = new EditPolylineItem(null, []);
|
|
|
|
+ this.imageItem.verAndLeve = true;
|
|
|
|
+ this.imageItem.status = SItemStatus.Create;
|
|
|
|
+ this.imageItem.connect("finishCreated", this, this.finishCreated);
|
|
|
|
+ this.imageItem.moveable = true;
|
|
|
|
+ this.scene.addItem(this.imageItem);
|
|
|
|
+ this.view.update();
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /**
|
|
|
|
+ * 改变线宽属性
|
|
|
|
+ */
|
|
|
|
+ changeLineWidth(val) {
|
|
|
|
+ if (this.imageItem) {
|
|
|
|
+ this.lineWidth = val;
|
|
|
|
+ this.imageItem.lineWidth = val;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-};
|
|
|
|
-</script>
|
|
|
|
|
|
|
|
-<style scoped lang="less">
|
|
|
|
-.edit-line {
|
|
|
|
- width: 100%;
|
|
|
|
- height: 500px;
|
|
|
|
|
|
+ /**
|
|
|
|
+ * 改变颜色
|
|
|
|
+ */
|
|
|
|
+ changeColor(val: any): void {
|
|
|
|
+ if (this.imageItem) {
|
|
|
|
+ this.lineColor = hexify(val);
|
|
|
|
+ this.imageItem.strokeColor = new SColor(this.lineColor);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
|
|
- .content {
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: flex-start;
|
|
|
|
|
|
+ /**
|
|
|
|
+ * 改变填充颜色
|
|
|
|
+ */
|
|
|
|
+ changeFillColor(val: any) {
|
|
|
|
+ if (this.imageItem) {
|
|
|
|
+ this.fillColor = hexify(val);
|
|
|
|
+ this.imageItem.fillColor = new SColor(this.lineColor);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
|
|
- .left {
|
|
|
|
- margin-right: 20px;
|
|
|
|
|
|
+ /**
|
|
|
|
+ * 改变图的展示类型
|
|
|
|
+ */
|
|
|
|
+ changeType(val) {
|
|
|
|
+ if (this.imageItem) {
|
|
|
|
+ this.imageItem.showType = SImageShowType[val];
|
|
}
|
|
}
|
|
|
|
+ }
|
|
|
|
|
|
- .line-property {
|
|
|
|
- width: 300px;
|
|
|
|
- margin-top: 20px;
|
|
|
|
|
|
+ /**
|
|
|
|
+ * 完成创建后的回调
|
|
|
|
+ */
|
|
|
|
+ changeStatus() {
|
|
|
|
+ this.cmdStatus = "";
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /**
|
|
|
|
+ * 监听
|
|
|
|
+ */
|
|
|
|
+ // @Watch("imageItem")
|
|
|
|
+ // imageItem(val) {
|
|
|
|
+ // // if (val) {
|
|
|
|
+ // // this.lineWidth = val.lineWidth; // 线宽
|
|
|
|
+ // this.showType = this.options[val.showType].value;
|
|
|
|
+ // // } else {
|
|
|
|
+ // // this.lineWidth = 0;
|
|
|
|
+ // // }
|
|
|
|
+ // }
|
|
|
|
+ //
|
|
|
|
+ // cmdStatus(val) {
|
|
|
|
+ // this.scene.cmdStatus = val;
|
|
|
|
+ // }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style scoped lang="less">
|
|
|
|
+ .edit-line {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 500px;
|
|
|
|
|
|
- .always {
|
|
|
|
- width: 100%;
|
|
|
|
- height: 100%;
|
|
|
|
|
|
+ .content {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
+
|
|
|
|
+ .left {
|
|
|
|
+ margin-right: 20px;
|
|
}
|
|
}
|
|
|
|
|
|
- .always-item {
|
|
|
|
- display: flex;
|
|
|
|
- margin-top: 10px;
|
|
|
|
- justify-content: space-between;
|
|
|
|
|
|
+ .line-property {
|
|
|
|
+ width: 300px;
|
|
|
|
+ margin-top: 20px;
|
|
|
|
+
|
|
|
|
+ .always {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .always-item {
|
|
|
|
+ display: flex;
|
|
|
|
+ margin-top: 10px;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- }
|
|
|
|
|
|
|
|
- .heightLight {
|
|
|
|
- color: #409eff;
|
|
|
|
- border-color: #c6e2ff;
|
|
|
|
- background-color: #ecf5ff;
|
|
|
|
|
|
+ .heightLight {
|
|
|
|
+ color: #409eff;
|
|
|
|
+ border-color: #c6e2ff;
|
|
|
|
+ background-color: #ecf5ff;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
-}
|
|
|
|
</style>
|
|
</style>
|