|
@@ -1,307 +1,310 @@
|
|
<template>
|
|
<template>
|
|
- <div class="edit-line">
|
|
|
|
- <!-- 所有按钮 -->
|
|
|
|
- <div class="btn-list">
|
|
|
|
|
|
+ <div class="edit-line">
|
|
|
|
+ <!-- 所有按钮 -->
|
|
|
|
+ <div class="btn-list">
|
|
|
|
+ </div>
|
|
|
|
+ <div class="content">
|
|
|
|
+ <div class="left" id="left">
|
|
|
|
+ <!-- <textarea name="" class="text" cols="30" rows="10"></textarea> -->
|
|
|
|
+ <canvas id="edit_polygon" width="700" height="460" tabindex="0"/>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="line-property">
|
|
|
|
+ <el-card shadow="always">
|
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
|
+ <span>属性修改</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="always-item">
|
|
|
|
+ <span>字号:</span>
|
|
|
|
+ <el-input-number size="small" v-model="size" @change="updateSize" :min="1"
|
|
|
|
+ :max="50"></el-input-number>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="always-item">
|
|
|
|
+ <span>文本框:</span>
|
|
|
|
+ <el-input
|
|
|
|
+ v-model="text"
|
|
|
|
+ @change="handleChangeText"
|
|
|
|
+ type="textarea"
|
|
|
|
+ :autosize="{ minRows: 1, maxRows: 1}"
|
|
|
|
+ placeholder="请输入内容"
|
|
|
|
+ style="width:200px;"
|
|
|
|
+ ></el-input>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="always-item">
|
|
|
|
+ <span>线颜色:</span>
|
|
|
|
+ <el-color-picker v-model="color" @change="changeColor" show-alpha></el-color-picker>
|
|
|
|
+ </div>
|
|
|
|
+ </el-card>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
- <div class="content">
|
|
|
|
- <div class="left" id="left">
|
|
|
|
- <!-- <textarea name="" class="text" cols="30" rows="10"></textarea> -->
|
|
|
|
- <canvas id="edit_polygon" width="700" height="460" tabindex="0" />
|
|
|
|
- </div>
|
|
|
|
- <div class="line-property">
|
|
|
|
- <el-card shadow="always">
|
|
|
|
- <div slot="header" class="clearfix">
|
|
|
|
- <span>属性修改</span>
|
|
|
|
- </div>
|
|
|
|
- <div class="always-item">
|
|
|
|
- <span>字号:</span>
|
|
|
|
- <el-input-number size="small" v-model="size" @change="updateSize" :min="1" :max="50"></el-input-number>
|
|
|
|
- </div>
|
|
|
|
- <div class="always-item">
|
|
|
|
- <span>文本框:</span>
|
|
|
|
- <el-input
|
|
|
|
- v-model="text"
|
|
|
|
- @change="handleChangeText"
|
|
|
|
- type="textarea"
|
|
|
|
- :autosize="{ minRows: 1, maxRows: 1}"
|
|
|
|
- placeholder="请输入内容"
|
|
|
|
- style="width:200px;"
|
|
|
|
- ></el-input>
|
|
|
|
- </div>
|
|
|
|
- <div class="always-item">
|
|
|
|
- <span>线颜色:</span>
|
|
|
|
- <el-color-picker v-model="color" @change="changeColor" show-alpha></el-color-picker>
|
|
|
|
- </div>
|
|
|
|
- </el-card>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-import {
|
|
|
|
- SGraphScene,
|
|
|
|
- SGraphView,
|
|
|
|
- SGraphPropertyCommand,
|
|
|
|
- SGraphMoveCommand
|
|
|
|
-} from "@persagy-web/graph/";
|
|
|
|
-import { SUndoStack } from "@persagy-web/base/lib";
|
|
|
|
-import { SFont } from "@persagy-web/draw/lib";
|
|
|
|
-import { SPoint, SColor } from "@persagy-web/draw/";
|
|
|
|
-//注: 开发者引入 SImageItem 包为: import {SImageItem} from "@persagy-web/edit/";
|
|
|
|
-import { EditText } from "./../../../../../guides/edit/items/src/EditText";
|
|
|
|
-import { hexify } from "./../../../../public/until/rgbaUtil";
|
|
|
|
-class SScene extends SGraphScene {
|
|
|
|
- undoStack = new SUndoStack();
|
|
|
|
- textItem = new EditText(null);
|
|
|
|
|
|
+ import { SGraphMoveCommand, SGraphPropertyCommand, SGraphScene, SGraphView } from "@persagy-web/graph/";
|
|
|
|
+ import { SUndoStack } from "@persagy-web/base/lib";
|
|
|
|
+ import { SFont } from "@persagy-web/draw/lib";
|
|
|
|
+ //注: 开发者引入 SImageItem 包为: import {SImageItem} from "@persagy-web/edit/";
|
|
|
|
+ import { EditText } from "./../../../../../guides/edit/items/src/EditText";
|
|
|
|
+ import { hexify } from "./../../../../public/until/rgbaUtil";
|
|
|
|
|
|
- constructor() {
|
|
|
|
- super();
|
|
|
|
- this.textItem.moveable = true;
|
|
|
|
- this.textItem.x = 100;
|
|
|
|
- this.textItem.y = 100;
|
|
|
|
- this.addItem(this.textItem);
|
|
|
|
- this.textItem.connect("onMove", this, this.onItemMove.bind(this));
|
|
|
|
- }
|
|
|
|
|
|
+ class SScene extends SGraphScene {
|
|
|
|
+ undoStack = new SUndoStack();
|
|
|
|
+ textItem = new EditText(null);
|
|
|
|
|
|
- updateText(str) {
|
|
|
|
- if (this.textItem.text !== str) {
|
|
|
|
- let old = this.textItem.text;
|
|
|
|
- this.textItem.text = str;
|
|
|
|
- this.undoStack.push(
|
|
|
|
- new SGraphPropertyCommand(this, this.textItem, "text", old, str)
|
|
|
|
- );
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ constructor() {
|
|
|
|
+ super();
|
|
|
|
+ this.textItem.moveable = true;
|
|
|
|
+ this.textItem.x = 100;
|
|
|
|
+ this.textItem.y = 100;
|
|
|
|
+ this.addItem(this.textItem);
|
|
|
|
+ this.textItem.connect("onMove", this, this.onItemMove.bind(this));
|
|
|
|
+ }
|
|
|
|
|
|
- updateColor(color) {
|
|
|
|
- if (this.textItem.color !== color) {
|
|
|
|
- let old = this.textItem.color;
|
|
|
|
- this.textItem.color = color;
|
|
|
|
- this.undoStack.push(
|
|
|
|
- new SGraphPropertyCommand(this, this.textItem, "color", old, color)
|
|
|
|
- );
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ updateText(str) {
|
|
|
|
+ if (this.textItem.text !== str) {
|
|
|
|
+ let old = this.textItem.text;
|
|
|
|
+ this.textItem.text = str;
|
|
|
|
+ this.undoStack.push(
|
|
|
|
+ new SGraphPropertyCommand(this, this.textItem, "text", old, str)
|
|
|
|
+ );
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
|
|
- updateSize(size) {
|
|
|
|
- if (this.textItem.font.size !== size) {
|
|
|
|
- let old = new SFont(this.textItem.font);
|
|
|
|
- let font = new SFont(this.textItem.font);
|
|
|
|
- font.size = size;
|
|
|
|
- this.textItem.font = font;
|
|
|
|
- this.undoStack.push(
|
|
|
|
- new SGraphPropertyCommand(this, this.textItem, "font", old, font)
|
|
|
|
- );
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ updateColor(color) {
|
|
|
|
+ if (this.textItem.color !== color) {
|
|
|
|
+ let old = this.textItem.color;
|
|
|
|
+ this.textItem.color = color;
|
|
|
|
+ this.undoStack.push(
|
|
|
|
+ new SGraphPropertyCommand(this, this.textItem, "color", old, color)
|
|
|
|
+ );
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
|
|
- onItemMove(item, ...arg) {
|
|
|
|
- this.undoStack.push(
|
|
|
|
- new SGraphMoveCommand(this, item, arg[0][0], arg[0][1])
|
|
|
|
- );
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
|
|
+ updateSize(size) {
|
|
|
|
+ if (this.textItem.font.size !== size) {
|
|
|
|
+ let old = new SFont(this.textItem.font);
|
|
|
|
+ let font = new SFont(this.textItem.font);
|
|
|
|
+ font.size = size;
|
|
|
|
+ this.textItem.font = font;
|
|
|
|
+ this.undoStack.push(
|
|
|
|
+ new SGraphPropertyCommand(this, this.textItem, "font", old, font)
|
|
|
|
+ );
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
|
|
-class TestView extends SGraphView {
|
|
|
|
- constructor() {
|
|
|
|
- super("edit_polygon");
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
|
|
+ onItemMove(item, ...arg) {
|
|
|
|
+ this.undoStack.push(
|
|
|
|
+ new SGraphMoveCommand(this, item, arg[0][0], arg[0][1])
|
|
|
|
+ );
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
|
|
-export default {
|
|
|
|
- name: "edittext",
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- scene: new SScene(),
|
|
|
|
- text: "测试文本",
|
|
|
|
- size: 20,
|
|
|
|
- color: "#333333"
|
|
|
|
- };
|
|
|
|
- },
|
|
|
|
- mounted() {
|
|
|
|
- let view = new TestView();
|
|
|
|
- this.scene.updateText(this.text);
|
|
|
|
- this.scene.updateColor(this.color);
|
|
|
|
- this.scene.updateSize(this.size);
|
|
|
|
- view.scene = this.scene;
|
|
|
|
- // this.scene.onMouseUp = this.onMouseUp;
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- handleChangeText(text) {
|
|
|
|
- this.scene.updateText(text);
|
|
|
|
- },
|
|
|
|
- handleChangeColor(color) {
|
|
|
|
- this.scene.updateColor(color);
|
|
|
|
- },
|
|
|
|
- updateSize(size) {
|
|
|
|
- this.scene.updateSize(size);
|
|
|
|
- },
|
|
|
|
- undo() {
|
|
|
|
- this.scene.undoStack.undo();
|
|
|
|
- },
|
|
|
|
- redo() {
|
|
|
|
- this.scene.undoStack.redo();
|
|
|
|
- },
|
|
|
|
- reset() {
|
|
|
|
- this.text = "测试文本";
|
|
|
|
- this.size = 20;
|
|
|
|
- this.color = "#333333";
|
|
|
|
- this.scene.updateText(this.text);
|
|
|
|
- this.scene.updateColor(this.color);
|
|
|
|
- this.scene.updateSize(this.size);
|
|
|
|
- },
|
|
|
|
- // 改变颜色
|
|
|
|
- changeColor(val) {
|
|
|
|
- this.scene.updateColor(hexify(val));
|
|
|
|
- },
|
|
|
|
- ///////////////////////////////////
|
|
|
|
- //// 以下为测试代码,请忽略
|
|
|
|
- // 设置tooltip位置
|
|
|
|
- /**
|
|
|
|
- * raduis 灵敏范围
|
|
|
|
- * e 鼠标事件对象
|
|
|
|
- * tipDom 浮动得dom
|
|
|
|
- * boxDom 最外层盒子
|
|
|
|
- * offset 偏移量
|
|
|
|
- */
|
|
|
|
- toolTipPosition(radius, e, tipDom, offset = 0) {
|
|
|
|
- // 滚动高度
|
|
|
|
- const screenTop =
|
|
|
|
- document.documentElement.scrollTop || document.body.scrollTop;
|
|
|
|
- const screenLeft =
|
|
|
|
- document.documentElement.scrollLeft || document.body.scrollLeft;
|
|
|
|
- radius = radius + offset;
|
|
|
|
- const mapBox = document.getElementById("edit_polygon");
|
|
|
|
- // 测试边界mousePosition = 1(右下) 2 (右上)3 (左上) 4 (左下)
|
|
|
|
- const mousePosition = this.Boxboundary(radius, e, mapBox);
|
|
|
|
- const absPosition = this.offsetTL(mapBox);
|
|
|
|
- const absPositionLeft = absPosition.left;
|
|
|
|
- const absPositionTop = absPosition.top;
|
|
|
|
- const mClientY = e.clientY + screenTop;
|
|
|
|
- const mClientX = e.clientX + screenLeft;
|
|
|
|
- const fuzzy_model_width = tipDom.offsetWidth;
|
|
|
|
- const fuzzy_model_height = tipDom.offsetHeight;
|
|
|
|
- // let offsetTL
|
|
|
|
- if (mousePosition == 2) {
|
|
|
|
- tipDom.style.left = `${mClientX - absPositionLeft + offset}px`;
|
|
|
|
- tipDom.style.top = `${mClientY -
|
|
|
|
- fuzzy_model_height -
|
|
|
|
- absPositionTop -
|
|
|
|
- offset}px`;
|
|
|
|
- } else if (mousePosition == 3) {
|
|
|
|
- tipDom.style.left = `${mClientX -
|
|
|
|
- fuzzy_model_width -
|
|
|
|
- absPositionLeft -
|
|
|
|
- offset}px`;
|
|
|
|
- tipDom.style.top = `${mClientY -
|
|
|
|
- fuzzy_model_height -
|
|
|
|
- absPositionTop -
|
|
|
|
- offset}px`;
|
|
|
|
- } else if (mousePosition == 4) {
|
|
|
|
- tipDom.style.left = `${mClientX -
|
|
|
|
- fuzzy_model_width -
|
|
|
|
- absPositionLeft -
|
|
|
|
- offset}px`;
|
|
|
|
- tipDom.style.top = `${mClientY - absPositionTop + offset}px`;
|
|
|
|
- } else {
|
|
|
|
- tipDom.style.left = `${mClientX - absPositionLeft + offset}px`;
|
|
|
|
- tipDom.style.top = `${mClientY - absPositionTop + offset}px`;
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- Boxboundary(radius, event, box) {
|
|
|
|
- const screenTop =
|
|
|
|
- document.documentElement.scrollTop || document.body.scrollTop;
|
|
|
|
- const boxWidth = Number(box.style.width.slice(0, -2));
|
|
|
|
- const boxHeight = Number(box.style.height.slice(0, -2));
|
|
|
|
- const absPosition = this.offsetTL(box);
|
|
|
|
- const boxClientX = absPosition.left;
|
|
|
|
- const boxClientY = absPosition.top;
|
|
|
|
- const mouseX = event.clientX;
|
|
|
|
- const mouseY = event.clientY + screenTop;
|
|
|
|
- if (mouseY >= boxClientY + boxHeight - radius) {
|
|
|
|
- if (mouseX <= radius + boxClientX) {
|
|
|
|
- return 2;
|
|
|
|
- } else if (mouseX >= boxClientX + boxWidth - radius) {
|
|
|
|
- return 3;
|
|
|
|
- } else {
|
|
|
|
- return 2;
|
|
|
|
|
|
+ class TestView extends SGraphView {
|
|
|
|
+ constructor() {
|
|
|
|
+ super("edit_polygon");
|
|
}
|
|
}
|
|
- } else if (mouseX >= boxClientX + boxWidth - radius) {
|
|
|
|
- return 4;
|
|
|
|
- } else {
|
|
|
|
- return 1;
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- offsetTL(obj) {
|
|
|
|
- //获取到body的offsetTop和offsetLeft
|
|
|
|
- var t = 0,
|
|
|
|
- l = 0;
|
|
|
|
- while (obj) {
|
|
|
|
- t = t + obj.offsetTop;
|
|
|
|
- l = l + obj.offsetLeft;
|
|
|
|
- obj = obj.offsetParent;
|
|
|
|
- }
|
|
|
|
- return {
|
|
|
|
- top: t,
|
|
|
|
- left: l
|
|
|
|
- };
|
|
|
|
- },
|
|
|
|
- onMouseUp(event) {
|
|
|
|
- const dom = "<textarea autofocus ref='textarea' class='text'></textarea>";
|
|
|
|
- let parentDom = document.getElementById("left");
|
|
|
|
- parentDom.innerHTML = parentDom.innerHTML + dom;
|
|
|
|
- const textareaDom = this.$refs.textarea;
|
|
|
|
- // console.log('textareaDom',parentDom.children[0])
|
|
|
|
- this.toolTipPosition(1, event, textareaDom, 0);
|
|
|
|
}
|
|
}
|
|
- },
|
|
|
|
- watch: {
|
|
|
|
- // cmdStatus(val) {
|
|
|
|
- // this.scene.cmdStatus = val;
|
|
|
|
- // }
|
|
|
|
- }
|
|
|
|
-};
|
|
|
|
|
|
+
|
|
|
|
+ export default {
|
|
|
|
+ name: "edittext",
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ scene: new SScene(),
|
|
|
|
+ text: "测试文本",
|
|
|
|
+ size: 20,
|
|
|
|
+ color: "#333333"
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ let view = new TestView();
|
|
|
|
+ this.scene.updateText(this.text);
|
|
|
|
+ this.scene.updateColor(this.color);
|
|
|
|
+ this.scene.updateSize(this.size);
|
|
|
|
+ view.scene = this.scene;
|
|
|
|
+ // this.scene.onMouseUp = this.onMouseUp;
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ handleChangeText(text) {
|
|
|
|
+ this.scene.updateText(text);
|
|
|
|
+ },
|
|
|
|
+ handleChangeColor(color) {
|
|
|
|
+ this.scene.updateColor(color);
|
|
|
|
+ },
|
|
|
|
+ updateSize(size) {
|
|
|
|
+ this.scene.updateSize(size);
|
|
|
|
+ },
|
|
|
|
+ undo() {
|
|
|
|
+ this.scene.undoStack.undo();
|
|
|
|
+ },
|
|
|
|
+ redo() {
|
|
|
|
+ this.scene.undoStack.redo();
|
|
|
|
+ },
|
|
|
|
+ reset() {
|
|
|
|
+ this.text = "测试文本";
|
|
|
|
+ this.size = 20;
|
|
|
|
+ this.color = "#333333";
|
|
|
|
+ this.scene.updateText(this.text);
|
|
|
|
+ this.scene.updateColor(this.color);
|
|
|
|
+ this.scene.updateSize(this.size);
|
|
|
|
+ },
|
|
|
|
+ // 改变颜色
|
|
|
|
+ changeColor(val) {
|
|
|
|
+ this.scene.updateColor(hexify(val));
|
|
|
|
+ },
|
|
|
|
+ ///////////////////////////////////
|
|
|
|
+ //// 以下为测试代码,请忽略
|
|
|
|
+ // 设置tooltip位置
|
|
|
|
+ /**
|
|
|
|
+ * raduis 灵敏范围
|
|
|
|
+ * e 鼠标事件对象
|
|
|
|
+ * tipDom 浮动得dom
|
|
|
|
+ * boxDom 最外层盒子
|
|
|
|
+ * offset 偏移量
|
|
|
|
+ */
|
|
|
|
+ toolTipPosition(radius, e, tipDom, offset = 0) {
|
|
|
|
+ // 滚动高度
|
|
|
|
+ const screenTop =
|
|
|
|
+ document.documentElement.scrollTop || document.body.scrollTop;
|
|
|
|
+ const screenLeft =
|
|
|
|
+ document.documentElement.scrollLeft || document.body.scrollLeft;
|
|
|
|
+ radius = radius + offset;
|
|
|
|
+ const mapBox = document.getElementById("edit_polygon");
|
|
|
|
+ // 测试边界mousePosition = 1(右下) 2 (右上)3 (左上) 4 (左下)
|
|
|
|
+ const mousePosition = this.Boxboundary(radius, e, mapBox);
|
|
|
|
+ const absPosition = this.offsetTL(mapBox);
|
|
|
|
+ const absPositionLeft = absPosition.left;
|
|
|
|
+ const absPositionTop = absPosition.top;
|
|
|
|
+ const mClientY = e.clientY + screenTop;
|
|
|
|
+ const mClientX = e.clientX + screenLeft;
|
|
|
|
+ const fuzzy_model_width = tipDom.offsetWidth;
|
|
|
|
+ const fuzzy_model_height = tipDom.offsetHeight;
|
|
|
|
+ // let offsetTL
|
|
|
|
+ if (mousePosition == 2) {
|
|
|
|
+ tipDom.style.left = `${mClientX - absPositionLeft + offset}px`;
|
|
|
|
+ tipDom.style.top = `${mClientY -
|
|
|
|
+ fuzzy_model_height -
|
|
|
|
+ absPositionTop -
|
|
|
|
+ offset}px`;
|
|
|
|
+ } else if (mousePosition == 3) {
|
|
|
|
+ tipDom.style.left = `${mClientX -
|
|
|
|
+ fuzzy_model_width -
|
|
|
|
+ absPositionLeft -
|
|
|
|
+ offset}px`;
|
|
|
|
+ tipDom.style.top = `${mClientY -
|
|
|
|
+ fuzzy_model_height -
|
|
|
|
+ absPositionTop -
|
|
|
|
+ offset}px`;
|
|
|
|
+ } else if (mousePosition == 4) {
|
|
|
|
+ tipDom.style.left = `${mClientX -
|
|
|
|
+ fuzzy_model_width -
|
|
|
|
+ absPositionLeft -
|
|
|
|
+ offset}px`;
|
|
|
|
+ tipDom.style.top = `${mClientY - absPositionTop + offset}px`;
|
|
|
|
+ } else {
|
|
|
|
+ tipDom.style.left = `${mClientX - absPositionLeft + offset}px`;
|
|
|
|
+ tipDom.style.top = `${mClientY - absPositionTop + offset}px`;
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ Boxboundary(radius, event, box) {
|
|
|
|
+ const screenTop =
|
|
|
|
+ document.documentElement.scrollTop || document.body.scrollTop;
|
|
|
|
+ const boxWidth = Number(box.style.width.slice(0, -2));
|
|
|
|
+ const boxHeight = Number(box.style.height.slice(0, -2));
|
|
|
|
+ const absPosition = this.offsetTL(box);
|
|
|
|
+ const boxClientX = absPosition.left;
|
|
|
|
+ const boxClientY = absPosition.top;
|
|
|
|
+ const mouseX = event.clientX;
|
|
|
|
+ const mouseY = event.clientY + screenTop;
|
|
|
|
+ if (mouseY >= boxClientY + boxHeight - radius) {
|
|
|
|
+ if (mouseX <= radius + boxClientX) {
|
|
|
|
+ return 2;
|
|
|
|
+ } else if (mouseX >= boxClientX + boxWidth - radius) {
|
|
|
|
+ return 3;
|
|
|
|
+ } else {
|
|
|
|
+ return 2;
|
|
|
|
+ }
|
|
|
|
+ } else if (mouseX >= boxClientX + boxWidth - radius) {
|
|
|
|
+ return 4;
|
|
|
|
+ } else {
|
|
|
|
+ return 1;
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ offsetTL(obj) {
|
|
|
|
+ //获取到body的offsetTop和offsetLeft
|
|
|
|
+ var t = 0,
|
|
|
|
+ l = 0;
|
|
|
|
+ while (obj) {
|
|
|
|
+ t = t + obj.offsetTop;
|
|
|
|
+ l = l + obj.offsetLeft;
|
|
|
|
+ obj = obj.offsetParent;
|
|
|
|
+ }
|
|
|
|
+ return {
|
|
|
|
+ top: t,
|
|
|
|
+ left: l
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ onMouseUp(event) {
|
|
|
|
+ const dom = "<textarea autofocus ref='textarea' class='text'></textarea>";
|
|
|
|
+ let parentDom = document.getElementById("left");
|
|
|
|
+ parentDom.innerHTML = parentDom.innerHTML + dom;
|
|
|
|
+ const textareaDom = this.$refs.textarea;
|
|
|
|
+ // console.log('textareaDom',parentDom.children[0])
|
|
|
|
+ this.toolTipPosition(1, event, textareaDom, 0);
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ // cmdStatus(val) {
|
|
|
|
+ // this.scene.cmdStatus = val;
|
|
|
|
+ // }
|
|
|
|
+ }
|
|
|
|
+ };
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
<style scoped lang="less">
|
|
-.text {
|
|
|
|
- overflow: auto;
|
|
|
|
- word-break: break-all;
|
|
|
|
- outline: none;
|
|
|
|
- // background: #409eff;
|
|
|
|
- position: absolute;
|
|
|
|
- left: 0;
|
|
|
|
- top: 0;
|
|
|
|
-}
|
|
|
|
-.edit-line {
|
|
|
|
- width: 100%;
|
|
|
|
- height: 500px;
|
|
|
|
- position: relative;
|
|
|
|
- .content {
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: flex-start;
|
|
|
|
- .left {
|
|
|
|
- margin-right: 20px;
|
|
|
|
|
|
+ .text {
|
|
|
|
+ overflow: auto;
|
|
|
|
+ word-break: break-all;
|
|
|
|
+ outline: none;
|
|
|
|
+ // background: #409eff;
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 0;
|
|
|
|
+ top: 0;
|
|
}
|
|
}
|
|
- .line-property {
|
|
|
|
- width: 300px;
|
|
|
|
- margin-top: 20px;
|
|
|
|
- .always {
|
|
|
|
|
|
+
|
|
|
|
+ .edit-line {
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: 100%;
|
|
|
|
- }
|
|
|
|
- .always-item {
|
|
|
|
- display: flex;
|
|
|
|
- margin-top: 10px;
|
|
|
|
- justify-content: space-between;
|
|
|
|
- }
|
|
|
|
|
|
+ height: 500px;
|
|
|
|
+ position: relative;
|
|
|
|
+
|
|
|
|
+ .content {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
+
|
|
|
|
+ .left {
|
|
|
|
+ margin-right: 20px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .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>
|