feat: add imageType property to Image component and update ImagePanel…

… for selection
ticketplushq · Dec 3, 2024 · 4e40eb9 · 4e40eb9
1 parent 5ce9f1f
commit 4e40eb9
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/src/designer/objects/Image.jsx b/src/designer/objects/Image.jsx
@@ -13,6 +13,7 @@ export class Image extends Vector {
       active: true,
       width: 100,
       height: 100,
+      imageType: 'normal',
       // Just a simple base64-encoded outline
       xlinkHref:
         'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAhSURBVHgBtYmxDQAADII8lv9faBNH4yoJLAi4ppxgMZoPoxQrXYyeEfoAAAAASUVORK5CYII=',

diff --git a/src/designer/objects/Vector.jsx b/src/designer/objects/Vector.jsx
@@ -31,7 +31,7 @@ export class Vector extends Component {
 
   getObjectAttributes() {
     let { object, onRender, ...rest } = this.props
-    const { active, label, isExpand, ...restObject } = object
+    const { active, label, isExpand, imageType  = 'normal', ...restObject } = object
     return {
       ...restObject,
       transform: this.getTransformMatrix(object),

diff --git a/src/designer/panels/ImagePanel.jsx b/src/designer/panels/ImagePanel.jsx
@@ -48,6 +48,18 @@ export const ImagePanel = ({ onChange, object }) => {
             value={object.label}
           />
         </RowFlex>
+        <RowFlex>
+          <NameItem>Image Type:</NameItem>
+          <select 
+            className="react-designer-select"
+            value={object.imageType}
+            onChange={(e) => onChange('imageType', e.target.value)}
+          >
+            <option value="normal">Normal</option>
+            <option value="barcode">Barcode</option>
+            <option value="qrcode">QR Code</option>
+          </select>
+        </RowFlex>
         <RowFlex>
           <NameItem>Image:</NameItem>
           <Dropzone