|
@@ -13,8 +13,7 @@ export default class PushButton extends Base {
|
|
|
eventBus,
|
|
|
layer,
|
|
|
show = false,
|
|
|
- highlight,
|
|
|
- messageHandler
|
|
|
+ highlight
|
|
|
}) {
|
|
|
super({
|
|
|
container,
|
|
@@ -28,7 +27,6 @@ export default class PushButton extends Base {
|
|
|
})
|
|
|
|
|
|
this.layer = layer
|
|
|
- this.messageHandler = messageHandler
|
|
|
this.hidden = true
|
|
|
this.initial = false
|
|
|
this.outline = null
|
|
@@ -56,7 +54,7 @@ export default class PushButton extends Base {
|
|
|
this.render()
|
|
|
}
|
|
|
|
|
|
- async render () {
|
|
|
+ render () {
|
|
|
this.eventBus._on('setProperty', this.setProperty)
|
|
|
this.eventBus._on('setHighlightForm', this.setHighlight)
|
|
|
|
|
@@ -106,18 +104,16 @@ export default class PushButton extends Base {
|
|
|
position: 'relative'
|
|
|
}
|
|
|
)
|
|
|
+
|
|
|
this.shapeElement = shapeElement
|
|
|
|
|
|
- this.getImage()
|
|
|
this.annotationContainer.append(this.shapeElement)
|
|
|
+
|
|
|
this.container.append(this.annotationContainer)
|
|
|
|
|
|
this.buttonContainer = createElement(
|
|
|
'a',
|
|
|
{
|
|
|
- position: 'absolute',
|
|
|
- left: 0,
|
|
|
- top: 0,
|
|
|
display: 'flex',
|
|
|
alignItems: 'center',
|
|
|
justifyContent: 'center',
|
|
@@ -134,13 +130,11 @@ export default class PushButton extends Base {
|
|
|
fontWeight: annotation.isBold ? 'bold' : 'normal',
|
|
|
fontStyle: annotation.isItalic ? 'italic' : 'normal',
|
|
|
overflow: 'hidden',
|
|
|
- textDecoration: 'none',
|
|
|
- opacity: 0
|
|
|
+ textDecoration: 'none'
|
|
|
}
|
|
|
)
|
|
|
this.buttonContainer.innerHTML = annotation.title
|
|
|
this.shapeElement.append(this.buttonContainer)
|
|
|
-
|
|
|
this.buttonContainer.addEventListener('blur', this.onBlur)
|
|
|
if (this.annotation.url) {
|
|
|
this.buttonContainer.setAttribute('href', this.annotation.url)
|
|
@@ -378,8 +372,7 @@ export default class PushButton extends Base {
|
|
|
};
|
|
|
|
|
|
calculate (start, end) {
|
|
|
- const initRect = this.rectCalc({ start, end })
|
|
|
- this.initRect = initRect
|
|
|
+ const initRect = this.rectCalc({ start, end });
|
|
|
const actualbdwidth = (this.annotation.borderWidth || 2) * this.scale
|
|
|
|
|
|
return {
|
|
@@ -707,7 +700,7 @@ export default class PushButton extends Base {
|
|
|
top: start.y,
|
|
|
right: end.x,
|
|
|
bottom: end.y
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
this.eventBus.dispatch('annotationChange', {
|
|
|
type: 'modify',
|
|
@@ -720,7 +713,6 @@ export default class PushButton extends Base {
|
|
|
rect
|
|
|
}
|
|
|
})
|
|
|
- this.getImage()
|
|
|
}
|
|
|
|
|
|
update ({ start, end }) {
|
|
@@ -885,7 +877,6 @@ export default class PushButton extends Base {
|
|
|
} else {
|
|
|
annotationData.fontName = fontArr[fontName].normal
|
|
|
}
|
|
|
- delete props.fontName
|
|
|
}
|
|
|
|
|
|
const updateAnnot = Object.assign({}, annotationData, props)
|
|
@@ -893,32 +884,24 @@ export default class PushButton extends Base {
|
|
|
type: 'modify',
|
|
|
annotation: updateAnnot
|
|
|
})
|
|
|
- console.log(updateAnnot)
|
|
|
- this.getImage()
|
|
|
}
|
|
|
}
|
|
|
|
|
|
setProperty (props) {
|
|
|
if (props.name !== this.annotation.name) return
|
|
|
- const annotation = this.annotation
|
|
|
|
|
|
- let updatePropsNum = 0
|
|
|
for (const key in props) {
|
|
|
for (const item in this.annotation) {
|
|
|
if (item === key && this.annotation[item] !== props[key]) {
|
|
|
this.annotation[item] = props[key]
|
|
|
- updatePropsNum ++
|
|
|
-
|
|
|
+
|
|
|
if (key === 'backgroundColor') {
|
|
|
this.buttonContainer.style[key] = props[key]
|
|
|
- if (props[key] === '') {
|
|
|
- props.clearBackgroundColor = true
|
|
|
- }
|
|
|
}
|
|
|
if (key === 'fontSize') {
|
|
|
this.buttonContainer.style.fontSize = props[key] + 'px'
|
|
|
}
|
|
|
- if (key === 'color') {
|
|
|
+ if (key === 'textColor') {
|
|
|
this.buttonContainer.style.color = props[key]
|
|
|
}
|
|
|
if (key === 'fontName') {
|
|
@@ -931,136 +914,25 @@ export default class PushButton extends Base {
|
|
|
this.buttonContainer.setAttribute('href', this.annotation.url)
|
|
|
this.buttonContainer.setAttribute('target', '_blank')
|
|
|
}
|
|
|
- if (key === 'fontStyle') {
|
|
|
- const fontStyle = props[key]
|
|
|
- if (fontStyle === 'boldItalic') {
|
|
|
- this.buttonContainer.style.fontStyle = 'italic'
|
|
|
- this.buttonContainer.style.fontWeight = 'bold'
|
|
|
- annotation.isBold = true
|
|
|
- annotation.isItalic = true
|
|
|
- } else if (fontStyle === 'bold') {
|
|
|
- this.buttonContainer.style.fontStyle = 'normal'
|
|
|
- this.buttonContainer.style.fontWeight = 'bold'
|
|
|
- annotation.isBold = true
|
|
|
- annotation.isItalic = false
|
|
|
- } else if (fontStyle === 'italic') {
|
|
|
- this.buttonContainer.style.fontStyle = 'italic'
|
|
|
- this.buttonContainer.style.fontWeight = 'normal'
|
|
|
- annotation.isBold = false
|
|
|
- annotation.isItalic = true
|
|
|
- } else {
|
|
|
- annotation.isItalic = false
|
|
|
- annotation.isBold = false
|
|
|
- this.buttonContainer.style.fontStyle = 'normal'
|
|
|
- this.buttonContainer.style.fontWeight = 'normal'
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- if (updatePropsNum > 0) {
|
|
|
- const annotationData = {
|
|
|
- operate: "mod-form",
|
|
|
- name: this.annotation.name,
|
|
|
- pageIndex: this.page,
|
|
|
- pagePtr: this.annotation.pagePtr,
|
|
|
- annotPtr: this.annotation.annotPtr,
|
|
|
- pageHeight: this.viewport.rawDims.pageHeight
|
|
|
- }
|
|
|
- if ((props.destPage || props.url) && this.annotation.actionType !== '0') {
|
|
|
- annotationData.actionType = this.annotation.actionType
|
|
|
- }
|
|
|
-
|
|
|
- const isFont = ['fontSize', 'fontName', 'color', 'fontStyle'].some(item => props[item])
|
|
|
- if (isFont) {
|
|
|
- annotationData.fontSize = annotation.fontSize
|
|
|
- annotationData.color = annotation.color
|
|
|
- const fontArr = {
|
|
|
- Courier: {
|
|
|
- normal: 'Courier',
|
|
|
- bold: 'Courier-Bold',
|
|
|
- italic: 'Courier-Oblique',
|
|
|
- boldItalic: 'Courier-BoldOblique'
|
|
|
- },
|
|
|
- Helvetica: {
|
|
|
- normal: 'Helvetica',
|
|
|
- bold: 'Helvetica-Bold',
|
|
|
- italic: 'Helvetica-Oblique',
|
|
|
- boldItalic: 'Helvetica-BoldOblique'
|
|
|
- },
|
|
|
- Times: {
|
|
|
- normal: 'Times',
|
|
|
- bold: 'Times-Bold',
|
|
|
- italic: 'Times-Italic',
|
|
|
- boldItalic: 'Times-BoldItalic'
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- const fontName = annotation.fontName
|
|
|
- if (annotation.isBold && annotation.isItalic) {
|
|
|
- annotationData.fontName = fontArr[fontName].boldItalic
|
|
|
- } else if (annotation.isBold) {
|
|
|
- annotationData.fontName = fontArr[fontName].bold
|
|
|
- } else if (annotation.isItalic) {
|
|
|
- annotationData.fontName = fontArr[fontName].italic
|
|
|
- } else {
|
|
|
- annotationData.fontName = fontArr[fontName].normal
|
|
|
- }
|
|
|
- delete props.fontName
|
|
|
- }
|
|
|
-
|
|
|
- const updateAnnot = Object.assign({}, annotationData, props)
|
|
|
- this.eventBus.dispatch('annotationChange', {
|
|
|
- type: 'modify',
|
|
|
- annotation: updateAnnot
|
|
|
- })
|
|
|
- this.getImage()
|
|
|
+ const annotation = {
|
|
|
+ operate: "mod-form",
|
|
|
+ pageIndex: this.page,
|
|
|
+ pagePtr: this.annotation.pagePtr,
|
|
|
+ annotPtr: this.annotation.annotPtr,
|
|
|
}
|
|
|
+ const updateAnnot = Object.assign({}, annotation, props)
|
|
|
+ this.eventBus.dispatch('annotationChange', {
|
|
|
+ type: 'modify',
|
|
|
+ annotation: updateAnnot
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
setHighlight (bool) {
|
|
|
this.highlight = bool
|
|
|
this.annotationContainer.style.backgroundColor = this.highlight ? '#4982E54D' : ''
|
|
|
}
|
|
|
-
|
|
|
- async getImage() {
|
|
|
- const rect = this.initRect
|
|
|
- const imgRect = {
|
|
|
- width: parseInt(rect.width * this.layer.ratio + 1),
|
|
|
- height: parseInt(rect.height * this.layer.ratio + 1)
|
|
|
- }
|
|
|
-
|
|
|
- const imageArray = await this.messageHandler.sendWithPromise('GetRenderAnnot', {
|
|
|
- annotPtr: this.annotation.annotPtr,
|
|
|
- rect: this.annotation.rect,
|
|
|
- scale: this.scale * this.layer.ratio
|
|
|
- })
|
|
|
-
|
|
|
- const canvas = document.createElement('canvas')
|
|
|
- canvas.style.width = imgRect.width + 'px'
|
|
|
- canvas.style.height = imgRect.height + 'px'
|
|
|
- canvas.width = imgRect.width
|
|
|
- canvas.height = imgRect.height
|
|
|
- let drawContext = canvas.getContext("2d")
|
|
|
- drawContext.clearRect(0, 0, canvas.width, canvas.height)
|
|
|
- let imageData = drawContext.createImageData(imgRect.width, imgRect.height)
|
|
|
- imageData.data.set(imageArray)
|
|
|
- drawContext.putImageData(imageData, 0, 0)
|
|
|
- const imgSrc = canvas.toDataURL("image/png", 1)
|
|
|
-
|
|
|
- if (this.imgEle) {
|
|
|
- this.imgEle.src = imgSrc
|
|
|
- } else {
|
|
|
- let imgEle = document.createElement('img')
|
|
|
- imgEle.style.width = '100%'
|
|
|
- imgEle.style.height = '100%'
|
|
|
- imgEle.style.pointerEvents = 'none'
|
|
|
-
|
|
|
- imgEle.src = imgSrc
|
|
|
- this.imgEle = imgEle
|
|
|
-
|
|
|
- this.shapeElement.append(this.imgEle)
|
|
|
- }
|
|
|
- }
|
|
|
}
|