gm-printer 10.41.5 → 10.41.6-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gm-printer",
-  "version": "10.41.5",
+  "version": "10.41.6-beta.0",
   "description": "diy printer",
   "main": "src/index.js",
   "scripts": {

package/src/common/common_context_menu.js

@@ -109,7 +109,7 @@ class CommonContextMenu extends React.Component {
     })
   }
 
-  handleInsertBlock = (type, link) => {
+  handleInsertBlock = (type, link, ratio) => {
     const { editStore } = this.props
     const { name, block } = this.state
 
@@ -120,7 +120,8 @@ class CommonContextMenu extends React.Component {
         left: block.left + 'px',
         top: block.top + 'px'
       },
-      link
+      link,
+      ratio
     )
 
     this.setState({
@@ -160,8 +161,8 @@ class CommonContextMenu extends React.Component {
     })
   }
 
-  handleInsertImage = imgURL => {
-    this.handleInsertBlock('image', imgURL)
+  handleInsertImage = (imgURL, ratio) => {
+    this.handleInsertBlock('image', imgURL, ratio)
   }
 
   handleRemove = () => {
@@ -327,6 +328,7 @@ class CommonContextMenu extends React.Component {
               onSuccess={this.handleInsertImage}
               key={v.value}
               text={v.text}
+              imageConfig={this.props.editStore.imageConfig}
             />
           ) : (
             <div

package/src/common/component.js

@@ -391,12 +391,26 @@ Line.propTypes = {
 
 class Size extends React.Component {
   handleChange = (type, value) => {
-    const { onChange, style } = this.props
+    const { onChange, style, ratio } = this.props
 
-    onChange({
+    const next = {
       ...style,
       [type]: value
-    })
+    }
+
+    // 电子签章:有原始比例时宽高联动,不允许拉变形
+    if (ratio && value !== '' && !value.endsWith('%')) {
+      const num = parseFloat(value)
+      if (!_.isNaN(num) && num > 0) {
+        if (type === 'width') {
+          next.height = num / ratio + 'px'
+        } else {
+          next.width = num * ratio + 'px'
+        }
+      }
+    }
+
+    onChange(next)
   }
 
   render() {
@@ -420,7 +434,8 @@ class Size extends React.Component {
 
 Size.propTypes = {
   style: PropTypes.object.isRequired,
-  onChange: PropTypes.func.isRequired
+  onChange: PropTypes.func.isRequired,
+  ratio: PropTypes.number
 }
 
 class ImageUploader extends React.Component {
@@ -437,7 +452,26 @@ class ImageUploader extends React.Component {
       : event.target.files
     const file = droppedFiles[0]
 
-    if (file.size > 512 * 1024) {
+    if (!file) return
+
+    const { imageConfig } = this.props
+
+    if (imageConfig) {
+      // 增强模式(电子签章):校验类型与大小,提示文案由配置方给出
+      const acceptTypes = imageConfig.acceptTypes || [
+        'image/jpeg',
+        'image/jpg',
+        'image/png'
+      ]
+      if (!_.includes(acceptTypes, file.type)) {
+        Tip.warning(imageConfig.wrongTypeTip)
+        return
+      }
+      if (file.size > imageConfig.maxSize) {
+        Tip.warning(imageConfig.overSizeTip)
+        return
+      }
+    } else if (file.size > 512 * 1024) {
       Tip.warning(i18next.t('图片大小不能超过500Kb'))
       return
     }
@@ -463,7 +497,21 @@ class ImageUploader extends React.Component {
       .post()
       .then(json => {
         const imgURL = `${url.imgUrl}/${json.data.img_path_id}`
-        this.props.onSuccess(imgURL)
+
+        // 增强模式下加载原图尺寸,记录原始比例供锁比例使用
+        if (imageConfig) {
+          const img = document.createElement('img')
+          img.onload = () => {
+            this.props.onSuccess(imgURL, img.naturalWidth / img.naturalHeight)
+          }
+          img.onerror = () => {
+            // 拿不到尺寸时降级:只插入不锁比例
+            this.props.onSuccess(imgURL)
+          }
+          img.src = imgURL
+        } else {
+          this.props.onSuccess(imgURL)
+        }
       })
   }
 
@@ -473,16 +521,23 @@ class ImageUploader extends React.Component {
   }
 
   render() {
+    const { imageConfig } = this.props
+
     return (
       <>
         <div onClick={this.handleClick} onDrop={this.handleUpload}>
           {this.props.text}
+          {imageConfig && imageConfig.acceptHint && (
+            <div className='gm-printer-contextmenu-hint'>
+              {imageConfig.acceptHint}
+            </div>
+          )}
         </div>
         <input
           style={{ display: 'none' }}
           type='file'
           ref={this.input}
-          accept='image/*'
+          accept={(imageConfig && imageConfig.accept) || 'image/*'}
           onChange={this.handleUpload}
         />
       </>
@@ -492,7 +547,8 @@ class ImageUploader extends React.Component {
 
 ImageUploader.propTypes = {
   onSuccess: PropTypes.func.isRequired,
-  text: PropTypes.string.isRequired
+  text: PropTypes.string.isRequired,
+  imageConfig: PropTypes.object
 }
 
 class InputWithUnit extends React.Component {

package/src/common/editor_edit_field.js

@@ -100,7 +100,7 @@ class EditorField extends React.Component {
 
   renderBlocks() {
     const { editStore, showNewDate } = this.props
-    const { type, text, style, link } = editStore.computedSelectedInfo
+    const { type, text, style, link, ratio } = editStore.computedSelectedInfo
 
     return (
       <div>
@@ -149,6 +149,11 @@ class EditorField extends React.Component {
             <Size
               style={style}
               onChange={this.handleChangeBlock.bind(this, 'style')}
+              ratio={
+                editStore.imageConfig && editStore.imageConfig.resizable
+                  ? ratio
+                  : undefined
+              }
             />
             <Gap />
 

package/src/common/editor_store.js

@@ -17,6 +17,10 @@ class EditorStore {
   @observable
   tableCustomStyle = 'default'
 
+  // 插入图片增强配置(电子签章),null 时保持旧行为(500Kb/image/*)
+  // { maxSize, maxSizeLabel, accept, acceptHint, resizable }
+  imageConfig = null
+
   @observable
   emptyTableData = []
 
@@ -556,7 +560,7 @@ class EditorStore {
   }
 
   @action
-  addConfigBlock(name, type, pos = {}, link = '') {
+  addConfigBlock(name, type, pos = {}, link = '', ratio) {
     let blocks
     const arr = name.split('.')
 
@@ -600,6 +604,8 @@ class EditorStore {
         blocks.push({
           type: 'image',
           link: link,
+          // 电子签章:记录原图宽高比,锁比例用;旧数据无此字段则不锁
+          ratio: ratio,
           style: {
             position: 'absolute',
             left: pos.left || '0px',

package/src/common/style.lesss

@@ -166,6 +166,18 @@
         color: white;
         background: rgb(82, 146, 247);
       }
+
+      // 电子签章:插入图片菜单项下的格式提示小字
+      .gm-printer-contextmenu-hint {
+        font-size: 10px;
+        color: #f5222d;
+        line-height: 1.4;
+        padding: 0;
+        &:hover {
+          color: #f5222d;
+          background: transparent;
+        }
+      }
     }
   }
 
@@ -244,6 +256,37 @@
         outline: 1px solid rgb(82, 146, 247);
         z-index: 11;
       }
+
+      // 电子签章:图片四角黑色加粗拖拽手柄
+      .gm-printer-resize-handle {
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        background: #000;
+        border: 2px solid #fff;
+        z-index: 12;
+
+        &.gm-printer-resize-lt {
+          left: -6px;
+          top: -6px;
+          cursor: nwse-resize;
+        }
+        &.gm-printer-resize-rt {
+          right: -6px;
+          top: -6px;
+          cursor: nesw-resize;
+        }
+        &.gm-printer-resize-lb {
+          left: -6px;
+          bottom: -6px;
+          cursor: nesw-resize;
+        }
+        &.gm-printer-resize-rb {
+          right: -6px;
+          bottom: -6px;
+          cursor: nwse-resize;
+        }
+      }
     }
 
     .gm-printer-table {

package/src/editor/store.js

@@ -2,6 +2,18 @@ import EditorStore from '../common/editor_store'
 import i18next from '../../locales'
 
 class Store extends EditorStore {
+  // 插入图片增强(电子签章 1056076):2M/指定格式/锁比例/四角拖拽
+  imageConfig = {
+    maxSize: 2 * 1024 * 1024,
+    maxSizeLabel: '2M',
+    accept: 'image/jpeg,image/jpg,image/png',
+    acceptTypes: ['image/jpeg', 'image/jpg', 'image/png'],
+    acceptHint: i18next.t('支持插入2M以内的jpg、jpeg、png格式图片'),
+    overSizeTip: i18next.t('图片大小不能超过2M'),
+    wrongTypeTip: i18next.t('仅支持jpg、jpeg、png格式的图片'),
+    resizable: true
+  }
+
   // 复写父类方法
   setTableDataKeyEffect(target, dataKey) {
     switch (dataKey) {

package/src/printer/block.js

@@ -8,7 +8,7 @@ import BarCode from './barcode'
 import QrCode from './qrcode'
 import Tag from './tag'
 
-@inject('printerStore')
+@inject('printerStore', 'editStore')
 @observer
 class Block extends React.Component {
   constructor(props) {
@@ -16,8 +16,10 @@ class Block extends React.Component {
     this.state = {
       clientX: null,
       clientY: null,
-      isEdit: false
+      isEdit: false,
+      isResizing: false
     }
+    this.resizeState = null
   }
 
   componentDidMount() {
@@ -32,6 +34,7 @@ class Block extends React.Component {
       'gm-printer-block-edit',
       this.handleBlockEdit
     )
+    this.teardownResize()
   }
 
   handleBlockEdit = e => {
@@ -112,6 +115,116 @@ class Block extends React.Component {
     })
   }
 
+  // 电子签章:图片四角等比例拖拽缩放
+  handleResizeStart = (direction, e) => {
+    // 阻止触发块的选中/拖动
+    e.stopPropagation()
+    e.preventDefault()
+
+    const {
+      config: { style, ratio }
+    } = this.props
+
+    const initW = parseFloat(style.width) || 0
+    const initH = parseFloat(style.height) || 0
+    // 旧模板无 ratio 时按当前显示宽高锁定
+    this.resizeState = {
+      direction,
+      startX: e.clientX,
+      startY: e.clientY,
+      initW,
+      initH,
+      initL: parseFloat(style.left) || 0,
+      initT: parseFloat(style.top) || 0,
+      // ratio = 原始宽/高
+      ratio: ratio || (initH > 0 ? initW / initH : 1),
+      baseStyle: style
+    }
+
+    this.setState({
+      isResizing: true
+    })
+
+    window.addEventListener('mousemove', this.handleResizeMove)
+    window.addEventListener('mouseup', this.handleResizeEnd)
+  }
+
+  handleResizeMove = e => {
+    if (!this.resizeState) return
+
+    // rAF 节流,避免高频 mousemove 打爆渲染
+    if (this.resizePending) return
+    this.resizePending = e
+    window.requestAnimationFrame(() => {
+      const evt = this.resizePending
+      this.resizePending = null
+      if (!evt || !this.resizeState) return
+      this.doResize(evt)
+    })
+  }
+
+  doResize = e => {
+    const {
+      direction,
+      startX,
+      initW,
+      initH,
+      initL,
+      initT,
+      ratio,
+      baseStyle
+    } = this.resizeState
+    const dx = e.clientX - startX
+
+    // 右侧角向右放大,左侧角向左放大
+    let width =
+      direction === 'rb' || direction === 'rt' ? initW + dx : initW - dx
+    // 最小尺寸兜底,防止翻转
+    width = Math.max(width, 10)
+    const height = Math.round(width / ratio)
+    width = Math.round(width)
+
+    // 锚定对角:左向角拖拽时右/下边不动,上向角拖拽时下边不动
+    let left = initL
+    let top = initT
+    if (direction === 'lb' || direction === 'lt') {
+      left = initL + initW - width
+    }
+    if (direction === 'rt' || direction === 'lt') {
+      top = initT + initH - height
+    }
+
+    dispatchMsg('gm-printer-block-style-set', {
+      style: {
+        ...baseStyle,
+        width: width + 'px',
+        height: height + 'px',
+        left: left + 'px',
+        top: top + 'px'
+      }
+    })
+  }
+
+  handleResizeEnd = () => {
+    // 先 flush 掉节流里排队中的最后一帧,避免松手回退
+    if (this.resizePending) {
+      const evt = this.resizePending
+      this.resizePending = null
+      this.doResize(evt)
+    }
+    this.teardownResize()
+    this.setState({
+      isResizing: false
+    })
+  }
+
+  teardownResize = () => {
+    window.removeEventListener('mousemove', this.handleResizeMove)
+    window.removeEventListener('mouseup', this.handleResizeEnd)
+    this.resizeState = null
+    this.resizePending = null
+  }
+
   render() {
     let {
       name,
@@ -119,6 +232,7 @@ class Block extends React.Component {
       pageIndex,
       className,
       printerStore,
+      editStore,
       ...rest
     } = this.props
     const { isEdit } = this.state
@@ -186,6 +300,14 @@ class Block extends React.Component {
     }
 
     const active = name === printerStore.selected
+    const { isResizing } = this.state
+    const showResizeHandles = !!(
+      active &&
+      type === 'image' &&
+      editStore &&
+      editStore.imageConfig &&
+      editStore.imageConfig.resizable
+    )
 
     return (
       <div
@@ -193,7 +315,7 @@ class Block extends React.Component {
         className={classNames('gm-printer-block', className, {
           active
         })}
-        draggable
+        draggable={!isResizing}
         onDragStart={this.handleDragStart}
         onDragEnd={this.handleDragEnd}
         onClick={this.handleClick}
@@ -221,6 +343,26 @@ class Block extends React.Component {
           />
         )}
         {content}
+        {showResizeHandles && (
+          <>
+            <div
+              className='gm-printer-resize-handle gm-printer-resize-lt'
+              onMouseDown={this.handleResizeStart.bind(this, 'lt')}
+            />
+            <div
+              className='gm-printer-resize-handle gm-printer-resize-rt'
+              onMouseDown={this.handleResizeStart.bind(this, 'rt')}
+            />
+            <div
+              className='gm-printer-resize-handle gm-printer-resize-lb'
+              onMouseDown={this.handleResizeStart.bind(this, 'lb')}
+            />
+            <div
+              className='gm-printer-resize-handle gm-printer-resize-rb'
+              onMouseDown={this.handleResizeStart.bind(this, 'rb')}
+            />
+          </>
+        )}
       </div>
     )
   }
@@ -231,7 +373,8 @@ Block.propTypes = {
   config: PropTypes.object.isRequired,
   pageIndex: PropTypes.number.isRequired,
   className: PropTypes.string,
-  printerStore: PropTypes.object
+  printerStore: PropTypes.object,
+  editStore: PropTypes.object
 }
 
 export default Block